软件工程实践结对作业第一次——原型设计

这个作业属于哪个课程	https://bbs.csdn.net/forums/2401_CS_SE_FZU
这个作业要求在哪里	https://bbs.csdn.net/topics/619305447
结对学号	222200127 222200314
这个作业的目标	学习和使用原型设计工具、学习NABCD模型、合作开发
其他参考文献	无

原型设计链接（PC端+移动端）

补充说明

我们使用的绘制工具为墨刀。由于墨刀免费版限制了画布，页面和元素，因此本次作业是在企业体验版的环境下创作的。

由于并不清楚在企业版到期后还能不能预览，以防万一，我们将设计好的原型离线导出，部署到私人服务器上，并配置好nginx静态资源缓存和压缩策略，起到一个备份和兜底的作用。

原型图网页链接

• 墨刀原始链接

  首选访问这个，速度比较快，如果这个无法访问再访问以下链接。

  https://modao.cc/proto/JD1psSJsjndwwuWRO2CQz/sharing?view_mode=read_only

• 设计稿服务器备份

  由于墨刀未对代码做分片优化，所以首次加载都得等一会，但是经过多次测试，首次加载都能在10s完成，而在此之后的网页访问可以在600ms以内。

  https://paris-ui.mewtopia.cn/

《构建之法》带来的思考

在《构建之法》第三章中提到，沟通表达等能力在IT行业也是相当重要的。团队对个人期望的第一条就是交流。本次作业中，需要两位同学共同设计一个原型模型，因此交流必然贯穿整个过程。在作业初期，我们通过沟通确定了各自的分工；界面设计过程中，我们在交流中完善了界面交互的细节；文档撰写中，我们也是合作沟通完成了整篇内容。实际上，沟通表达和团队开发是一个相辅相成、共同促进的过程。

NABCD模型

‌NABCD模型‌是一个用于需求分析的工具，由Need、Approach、Benefit、Competitors、Delivery五个单词的首字母组成，分别指需求、做法、好处、竞争、推广五部分。

Need

本次作业的需求为设计一个巴黎奥运会赛况展示平台的解决方案，主要包含奖牌榜、每日赛程、详细赛况、对阵表等功能。此前使用文字显示的方式不够友好，用户希望通过图表等方式以更加可视化的形式展示奖牌榜、赛程、对阵信息等内容，通过平台更直观、具体地了解2024年巴黎奥运会的比赛信息和选手数据。

Approach

展现途径： 通过原型设计工具展示设计成果，本次选择的平台为墨刀。
平台设计： 采用列表、对阵图等形式展示各类赛事信息。用户可以通过图表快速了解各国奖牌情况、每日比赛结果、选手信息等。
功能模块： 包括奖牌榜、每日赛程、出战列表、详细赛况、对阵表、了解更多等模块，提供互动性强、内容丰富的界面。

Benefit

用户体验与留存： 通过图表等可视化形式，用户能够更直观地获取所需的赛事信息，改善用户体验，吸引更多用户使用平台，提高用户粘性。
信息的整合： 平台能够将奖牌榜、赛程、选手信息等集中展示，用户可以在一个地方获取完整的赛事信息。

Competitors

竞争对手： 奥运会官方网站、CCTV官网、其他第三方平台
竞争优势：

• 方便、快捷。只要有浏览器，就能使用我们的平台。随时随地查询您关注的奥运赛况。
• 适应、适配。不论是PC端还是移动端，奥运赛况都能完美展示。
• 丝滑、简洁。优雅且规范的元素布局，丝滑的交互方式，带给你更舒服的体验。
• 完整、细致。提供精确到分钟级的赛况细节，让用户仿佛置身现场。
• 轻量、迅捷。极快的访问速度，极其轻便的查询平台，性能表现尤其优异。

Delivery

推广渠道： 以QQ、微信等社交媒体作为主要的推广渠道。
用户反馈与后期迭代： 平台上线后，关注用户的进一步反馈，持续改进优化，提升用户体验。

原型设计理念（PC端+移动端）

本次设计，我们将任务按照功能划分为首页、奖牌榜、每日赛程、出战列表、详细赛况、对阵表、了解更多等功能模块，首先确定设计语言规范，而后分别进行网页端和移动端开发，实现两端自适应效果。

界面语言的选择

奥运会作为一项国际赛事，受到全球用户的共同关注。为达到最大程度的国际化，我们决定使用英语作为界面语言。

字体的选择

合适的字体是影响网页美观程度的重要因素。经过多种字体显示效果的对比，我们决定全局采用Ubuntu这款字体，它具有均匀的笔画宽度，对于英文字形展示尤其具有优势。

主题色的选择

巴黎奥运会的logo主题颜色为黄色（#D1C27E），契合此颜色，我们主要选取了#4B3C00、#D4C27D作为强调色。

导航的设计

在首页中，展示Medals Schedule Get More三项功能的入口；对于各功能页，提供统一的顶部栏，可在顶部栏中进行功能切换；在移动端宽度有限的情况下，将顶部栏中的功能项统一整合至右上角菜单中。

移动端的菜单浮层我们设计了两种方案。

首页

采取logo-标题-功能按钮纵向排序、整体水平居中的布局，辅以渐变主题色背景。

对于移动端，主要将前两个按钮也改为了纵向排序，微调减弱按钮边框和圆角效果，降低视觉压力。

列表组件

奖牌榜等界面的主体内容采用列表展示，表项设计为卡片式。对于移动端，我们会略微降低卡片的圆角和阴影效果。

时区切换组件

用于切换巴黎时间和当地时间，应用在所有包含时间的页面上。

日期/比赛分组切换组件

左右方向按钮用于滚动中间部分。

对于移动端，借助滑动特性，我们移除了这两个按钮，让中间部分可滑动，形成更直观的交互。

更多页的交互设计

在PC端上，可用空间比较大，我们把标题和logo分别放到界面左右上角，介绍文段放在界面下方。

对于移动端，布局方式进行了微调，采取logo-标题-文段竖排向下、logo与标题靠左的实现形式，文段在初始状态下只显示第一句。上滑时，背景阴影加深，logo和标题变小，文段完整出现。

原型设计展示（PC端+移动端）

原型概述

为了照顾到各种用户，并覆盖完整生活场景，我们同时设计了PC端和移动端。本项目是一个2024年巴黎奥运会的奖牌榜统计和赛程回顾，旨在为体育迷们提供一个丝滑、高级、且实用的赛事平台。

首页

进入首页后，用户可以看到三个按钮，分别为Medals、Schedule 、 Get More，分别为奖牌榜、每日日程、了解更多。通过点击即可跳转到对应页面。

奖牌榜

进入奖牌榜页面，我们就可以看到所有国家和地区在巴黎奥运会中的表现。最左边为排名，接着是国家/地区的具体名称，再者分别是金牌、银牌、铜牌、铜牌数的数量，通过滚动页面就可以看到更多国家。

在PC端，顶部有专门的一条区域来放置菜单路由。但是在移动端，我们把菜单设计成了下拉组件的形式。

每日赛程

进入页面后，用户可以通过直接点击日期卡片跳转到那一天的赛程。具体的赛程信息就会显示在下方，用户还可以通过点击切换巴黎时间和北京时间更改展示的赛程的时间。点击对应的比赛卡片，将会进入详情页。

出战列表

从赛程点击某个比赛后，就可以进入如下页面。最上方会显示这场赛事的运动名称、男女组别，并提供了一个按钮，点击后则可以查看在整场巴黎奥运会中从1/4决赛到总决赛到两两对阵图的信息。

紧邻的下方则是此项运动的所有组别，以及比赛场次，用户可以通过点击对应卡片实现快捷切换。如果是从赛程页进入，则会选中对应的组别和场次，并展示对应比赛结果。

往下滑可以看到一个小菜单栏，分别是Start List和Details，即为出赛列表和详细赛况。用户通过点击Start List，就可以了解到这场比赛的两方国家的上场队员，替补队员，教练等工作人员的详细信息。

详细赛况

在这个小菜单栏中，用户通过点击Details，就可以了解到这场比赛的从开始到加时到结束，完整的精确到每一分钟的赛况，比如犯规、被警告、上下场、进球等等，非常清晰地追踪赛事进程。

了解更多

用户可以通过点击导航栏的Get More进入了解更多页面，在这里用户可以了解巴黎奥运会的举办背景和相关知识。

对于移动端，我们增加了一步交互，初始加载进去只会显示简略的文字，用户上划后就可以查看详细背景信息了。

对阵表

对阵表展示了从1/4决赛到金牌赛、铜牌赛的国家配对情况，用户如果把鼠标移上去或者手指轻触，对应卡片则会高亮，方便查看。

困难与解决

1. 困难描述

在设计原型的过程中，遇到了几个关键问题。首先是如何在奖牌榜的设计中清晰呈现复杂的数据。奥运会奖牌榜数据量大，不同国家和项目的奖牌数目随时间变化，如何在有限的页面空间内有效展示这些数据是一个挑战。

其次，在设计详细赛况部分时，也需要合理组织图片和文字，在保证用户快速找到感兴趣内容的同时，避免页面的拥挤和复杂；尤其是要考虑到图文比例的平衡，维持整个页面的视觉层次感。

最后，移动端的自适应问题也是设计中需要思考的一个点，但其实也是我们的优势所在。由于奥运会是全球性的赛事，用户可能会通过手机、平板等设备访问我们的网站，因此，让页面在不同设备上保持一致的观感和体验是我们需要针对性解决的问题。

2. 解决尝试与结果

1. 奖牌榜数据的呈现
   • 解决尝试：我们尝试了不同的数据展示形式，包括列表、图表和卡片式布局等，最终选择了卡片式布局。这种布局既能清晰展示单个国家的奖牌总数，也能通过滑动快速浏览并切换到其他国家的数据。此外，单独表头的设计可以让金银铜奖牌的数量一目了然。
   • 结果：卡片式布局有效解决了数据展示的问题，用户可以快速浏览各国奖牌情况，并且整个页面保持了简洁和清晰的风格。完美解决。
2. 详细赛况的内容组织
   • 解决尝试：在赛事回顾部分，我们将整个页面先划分成多个模块，明确功能块区分。中间使用一个大色块来突出展示比赛结果，上方则是一个可以灵活切换到其他场次的便捷导航栏。对于每一场次的比赛，都有对应的出场人员列表以及比赛具体到每一分钟的比赛实况，因此下半部分再设计一个导航栏，以供切换这两个分片。如此划分成多个模块，就可以让整个页面的组织非常清晰，而且对称结构也适合于页面的自适应。
   • 结果：模块化设计使得赛事回顾部分的内容层次分明，大气美观，用户在浏览时能快速抓住重点，而不会感到页面过于拥挤。此外，这种设计也有利于后续内容的动态调整和更新。完美解决。
3. 移动端的自适应设计
   • 解决尝试：为了确保原型在移动端的展示效果，我们在设计中又绘制了一套针对移动端的布局原型，通过调整页面的布局和文字大小，确保内容在小屏幕上依然清晰可见。此外，我们还设计了简化版的导航和交互方式，以便移动用户能够更方便地浏览和操作。
   • 结果：自适应设计方案有效解决了移动端的问题，经过测试，页面在不同尺寸的设备上都有良好的显示效果，用户体验得到明显提升。完美解决。

3. 收获

在设计过程中，我们团队积累了许多宝贵的经验。首先，我们深刻认识到如何平衡复杂数据的展示与用户体验的重要性。在设计奖牌榜时，尽量保持界面的简洁和数据的可视化呈现是我们遇到的一个挑战。

其次，模块化的设计思路帮助我们更好地组织规划像赛况详情这样有大量不同种类的内容。通过对页面做合理划分，图片和文字进行合理分配，我们确保了用户能够快速找到重点信息，同时页面的整体观感也变得更加简洁。

最后，在自适应设计方面的实践让我们掌握了如何为不同设备优化设计的方法。通过调整布局和交互方式，我们成功解决了移动端的兼容问题，这让我们对未来多设备设计有了更深的理解。

结对过程

结对照片

贡献度情况

222200314吴荣榜（50%）

• 负责整体原型UI设计起稿，以及设计理念初步制定
• 负责PC端页面的还原
• 负责文档部分内容编写，以及美化文档内图片

222200127徐煜晖 （50%）

• 负责整体UI的细节修订，以及设计理念的补充
• 负责移动端页面的还原，以及自适应布局的调整
• 负责文档部分内容编写

222200314吴荣榜 对 222200127徐煜晖 的评价

和徐煜晖组队来共同进行UI/UX的开发的整个过程中，我感觉到非常地舒服且高效，对于我提出的、或者他提出的一些想法，我们都能很快get到对方的灵感，并思维高度一致地快速复现。由于徐煜晖同学是西二安卓组长，有较为丰富的原生安卓开发经验，因此他对移动端的整体设计把握会更到位。这种高效的合作不仅加快了项目进展，也提升了设计的质量。

222200127徐煜晖 对 222200314吴荣榜 的评价

吴荣榜同学在整个设计过程中是非常认真负责的，他严谨积极的态度有力推动了我们设计的高效、高质完成。作为西二在线前端组长，他能够把控原型设计的合理性，为后续开发做好铺垫；比较丰富的开发经验也让他在PC端界面的设计过程中上手很快，设计出美观高效的用户界面。我们在线上和线下的大量交流，可以说是相当透彻，极大地推动了项目的进展。

PSP表格

PSP 阶段	任务描述	预估时间 (分钟)	实际时间 (分钟)	效率分析及改进措施
需求分析	理解赛事统计需求	180	120	需求分析顺利，保持良好沟通，减少后续调整。
学习工具	学习使用墨刀进行原型设计	240	180	工具学习上手较快，未来可保持合理时间投入。
结对讨论	与团队成员讨论设计需求	120	90	讨论时间略长但效果良好，未来可提前规划讨论议题。
原型设计	PC端主页设计	90	180	主页设计复杂度低，但需预留更多时间优化细节。
原型设计	PC端奖牌榜设计	120	240	奖牌榜数据展示较为复杂，未来需提前规划数据结构。
原型设计	PC端每日赛程页面设计	90	180	赛程页面布局复杂，时间超出预期，建议模块化设计。
原型设计	PC端详细赛况页面设计	90	180	详细赛况设计较多，未来可通过复用组件减少时间消耗。
原型设计	PC端出战列表页面设计	90	150	出战列表较为简单，但数据条目较多，时间略超预期。
原型设计	PC端对阵图页面设计	90	150	对阵图涉及图形元素，复杂度高，建议提前规划图形布局。
原型设计	PC端“了解更多”页面设计	60	120	此页面内容较为丰富，未来需更精细内容规划。
原型设计	移动端布局调整	150	300	移动端的自适应设计复杂度较高，时间超出预期，未来需提前优化布局策略。
原型设计	移动端菜单导航重绘	120	240	菜单重绘较为耗时，建议未来提升组件复用率以节省时间。
原型设计	移动端奖牌榜页面设计	90	180	奖牌榜自适应布局复杂，时间超出预期，未来需提前规划。
原型设计	移动端每日赛程和详细赛况页面设计	120	240	赛程和赛况页面在移动端优化较多，需提前复用PC端设计。
原型设计	移动端出战列表和对阵图页面设计	90	180	自适应设计复杂，未来可考虑通过自动化布局工具优化。
原型设计	移动端“了解更多”页面设计	60	150	页面内容较多，需进一步优化信息展示。
设计反馈与改进	收集反馈并修改设计	180	240	反馈阶段较为频繁，未来可通过早期用户测试减少修改频次。
文档编写	编写报告或文档	720	720	文档编写耗时较多，未来继续保持这一部分的合理预估。
总计		3000	3630	原型设计阶段耗时较多，未来需进一步优化组件复用和布局设计。