结对第一次作业--原型设计

这个作业属于哪个课程	福州大学-202302软件工程实践
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	222100122 & 222100119
这个作业的目标	阅读《构建之法》第3章和第8章的内容、完成原型设计结对作业并撰写博客
其他参考文献	《即时设计使用手册》、《构建之法》

---

一、原型链接

原型链接

---

二、原型设计过程

2.1、原型模型设计工具

我们通过互联网搜索可以使用的原型工具并进行对比，最终选择使用即时设计作为我们原型开发的工具。理由主要有以下三点：

• 可以自动备份历史版本，随时可回溯。
• 可以将需要用到的字体导入云端，建立一个线上字体库，不用下载安装，随时随地使用。
• 拥有丰富交互事件、智能补间动画、拖拽连线、动画效果，让我们不用太费力就可以制作出良好的视觉效果。

2.2、原型模型设计过程

基于对用户需求的分析，我们将设计分为五个模块，分别是首页、选手排名、每日赛程、详细赛况、了解更多。

2.2.1、分工合作

确认了任务目标后，我们进行分工合作，由我完成首页、每日赛程的设计，昊旸同学负责详细赛况、了解更多的设计，其余部分两人均有参与。

---

三、原型设计成果展示

3.1、导航栏

导航栏主要分为选手排名、每日赛程、详细赛况、了解更多，点击相应的小标题可以跳转到对应的网页。此外，点击左侧的图标还可以跳转到首页。

3.2、首页

首页主体部分分为赛事简介以及赛事亮点概览，并且可以通过点击浏览官网的链接跳转到官网。

3.3、选手排名

显示Women 1m Springboard决赛的排名，展示的信息分别有总排名、国籍、运动员信息、年龄、得分。

3.4、每日赛程

以瀑布流的方式展示每一天的赛事，显示比赛类型(男子1m跳板，女子10m跳台等)和比赛时间，点击查看详细赛况。

3.5、详细赛况

详细赛况的主体包括新闻链接。并且展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分。

3.6、了解更多

介绍世界游泳锦标赛的举办背景、赛事历史，通过丰富的图文使平台更具吸引力，引起人们对世界游泳锦标赛的兴趣。通过浏览官网的外链链接到官网。

---

四、NABCD模型

4.1、需求（N）

上次我们的输出结果只是通过简单的文字来显示，不够直观、具体，对用户不够友好。因此本次作业需要设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等。平台应具备以下功能：

• 选手排名：完成Women 1m Springboard决赛的排名，需要展示Overall
  Rank，Country，Athlete，Age，Points。

• 每日赛程：展示每一天的赛事，显示比赛类型(男子1m跳板，女子10m跳台等)和比赛时间。支持通过切换日期查看不同的赛程。支持点击查看详细赛况。

• 详细赛况：展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分。

• 了解更多：介绍世界游泳锦标赛的举办背景，通过丰富的图文使平台更具吸引力，引起人们对世界游泳锦标赛的兴趣。

4.2、做法（A）

• 原型工具：使用即时设计进行原型模型的设计。
• 导航栏：导航栏置于顶部，最左侧的游泳赛事图标点击时可以跳转至首页，其余右侧的选手排名、了解更多、每日赛程、详细赛况的组件通过点击可以跳转至相应的页面。
• 首页：以图文方式进行游泳赛事的简介，通过链接可以打开官网了解详情。并在下方设置赛事亮点，以数字化的形式展现赛事的影响力。
• 选手排名：以表格的方式展现选手决赛排名成绩。图文并茂。
• 每日排名：以瀑布流的方式展现每日赛程，用户可以通过滑动鼠标查看每日的赛程以及赛程信息。通过点击相应的赛程可以跳转到该赛程详细信息的页面。对于决赛赛事以高亮显示并且配有小图标。
• 详细赛况：以图文浮现的形式展现赛事详细信息，上方有赛事热点新闻的图文链接，可以通过点击查看详细信息。
• 了解更多：以图文的方式展现赛事历史和赛事信息，用户可以通过点击链接查看详细信息。
• 以上所有页面的图文均配置相应的动画效果显示。

4.3、好处（B）

• 界面简约大方，方便用户访问操作，数据展示多样化。
• 以瀑布流的方式显示每日赛事数据，用户体验良好。
• 用图表信息直观展示选手数据，美观得体。
• 无广告，用户体验良好。
• 界面动画效果好，视觉观感好。

4.4、竞争（C）

主要竞争对手：其它小组的结对项目。
我方优势：

• 添加网页首页封面，用户进入网站时会先看到首页信息，可以通过首页的引导查看其它页面信息。
• 维护成本低。
• 界面图文并茂，简洁大方，模块清晰，用户能够便捷和直观的提取到所需要的数据。
• 界面动画效果好，数据呈现形式效果好，视觉观感好。

我方劣势：

• 数据为离线信息，无法实时获取新资讯来更新页面。
• 每日赛事并未支持用户通过复选框选择日期进行赛事信息的查看，想查看某个具体日期的信息必须不断往下滑动。

如何竞争：

• 虽暂不支持按日期筛选赛事信息，但将规划改进并优化现有功能以弥补短板。
• 积极收集用户的反馈与建议，更好地满足用户需求体验。
• 将离线数据转化为全面详尽的信息库，同时探索轻量级同步机制以提升内容时效性。

4.5、推广（D）

• 家人朋友：推荐给家人朋友，介绍产品并推荐使用，通过他们进一步推广。
• 校园媒体发布：通过校报、广播站、学校官方社交媒体账号等途径发布平台上线信息及亮点介绍。鼓励用户对我们的网站发布评价。
• 视频投稿：将产品使用过程制作成视频，通过b站、小红书的社交平台发布，吸引用户。

---

五、困难及解决方案

5.1、团队协作

​ 困难描述：

​ 一开始的时候，我们没有准确地对原型设计的目标和分工进行讨论，双方对自己负责的部分没有具体的认识，加上之前从未接触过原型设计方面的知识，造成一开始的工作效率低下。

解决尝试 ：

​经过仔细的沟通和分工，确定了洪冠诚同学负责负责首页、每日赛事的设计，负责选手排名的部分设计、原型后期的部分优化以及部分博客的撰写，柯昊旸同学负责详细赛况、了解更多的设计，负责选手排名的部分设计、原型后期的部分优化以及部分博客的撰写。后面我们进行了持续的并行开发，大大提高了工作效率。
是否解决：是
​收获：
因为是第一次做原型设计，我们因为对这些东西不熟悉导致一开始不知道怎么入手。但是我们通过网上查找资料，与对方一起讨论沟通，共同面对困难，一起学习之前从未接触过的原型设计的全新知识，最终通过求同存异的方式敲定了最后的解决方案。

5.2、需求理解

​ 困难描述：

​ 进行原型设计时，时常要在作业中的”客户需求“和我们自身对网页的想法间做取舍，以及要在我们后面的具体代码实现阶段的实现难度和目前天马行空的设计蓝图间做取舍，造成了目标混乱和设计版本的反复变更。

解决尝试：
在认识到问题后，我们抽出了专门的时间对设计目标进行了明确，双方充分交流了自己对网站的见解和对客户需求的理解，最终先交付了一份最初的设计原稿。
在此基础上，我们又持续地对它进行协作优化，严格采取了敏捷开发模式，在已有的基础原型之上，逐步完善一开始探讨的细节，在修改的过程中同时一步步加深了对客户需求和代码阶段实现的理解，成功解决了这个烦恼。
是否解决：是
收获：
我们认识到有效的沟通时团队协作中最重要的特质，绝大多数的问题都可以通过互相持续的跟进和反馈来解决。

5.3、原型工具

​ 困难描述：

​ 我们两个人之前从未有过原型设计的经验，对原型设计工具更是完完全全的小白，影响了开发和协作的效率

解决尝试：
先学习原型工具的基本操作，然后先在示例原型案例上试试水，接着从简单的页面开始制作原型，逐渐熟悉工具的各种功能，比较不同工具的易用度和功能性，最终一致敲定使用提供了丰富的组件库和模板的即时设计来进行本次作业的原型设计开发。参考世界游泳锦标赛官网等优秀的设计案例，模仿并尝试复刻，以此来锻炼技能和提升理解。
是否解决：是
收获：我们进行的分工合作和并行开发，使得我们能够更快地迭代出对原型设计工具的使用经验，也提高开发和协作的效率。

---

六、PSP表格与效能分析

6.1、PSP表格

PSP阶段	预估耗时（分钟）	实际耗时（分钟）
计划	20	20
• 估计任务时间	20	25
• 需求分析	15	20
• 形成设计方案	30	25
• 学习原型设计工具	30	80
• 界面原型设计	420	530
• 原型测试和改良	120	130
报告	120	130
• 原型成果展示	15	15
• 问题分析	30	30
• 计算工作量	20	20
• 总结	20	20
合计	640	890

6.2、效能分析

通过对比PSP表格中的预估耗时和实际耗时，我们发现偏差最大的是界面原型设计、学习原型设计工具方面。
界面原型设计：

原因：由于之前从未接触过原型设计，对于如何设计、设计成什么样没有概念。并且因为对原型工具的使用的不熟悉，导致一边进行原型界面的设计还得一边学习原型工具的使用。
思考：在开始设计之前，应该先学习一下原型工具的基本操作。如果是在有限的时间里，可以在学习完原型工具的基本操作以后，一边设计一边学习原型工具的其它操作。对于要设计的产品没有概念的话，可以先去参考一下优秀的原型设计案例。互联网上就有不少优秀的案例，包括各种大公司的前端界面。像这次的作业其实还能去参考游泳锦标赛的官方网站。获得了设计的灵感后就可以开始着手设计，而不是自己埋头苦想，从而浪费太多时间。

学习原型设计工具：

原因：因为之前也是从未接触过原型设计，直到这次布置结对作业才第一次对原型设计有了一定的了解。我们也花费了不少时间在原型工具的搜寻、对比上。在几个原型工具的抉择中选择了即时设计这款工具。然后在学习这款工具的使用上也花费了不少时间。
思考：一个好的工具对于开发与设计是非常重要的，但是也要注意投入和产出比，不应该在工具的选择上花费太多的时间从而本末倒置，设计的人才是更重要的。

---

七、结对过程与队友评价

7.1、结对过程

222100122洪冠诚：负责首页、每日赛事的设计，负责选手排名的部分设计、原型后期的部分优化以及部分博客的撰写。
222100119柯昊旸：负责详细赛况、了解更多的设计，负责选手排名的部分设计、原型后期的部分优化以及部分博客的撰写。

7.1.1、结对照片与截图

7.2、结对感受

222100122洪冠诚：这次结对作业是原型的设计，也是至今为止为数不多的合作作业之一。我发现像合作类型的作业都非常考验成员之间的配合与默契，因为和结对伙伴在同一个宿舍的原因，沟通也比较方便。在良好的结对条件下，我们达到了1+1>2的效果。在出现困难的时候，我们都能相互帮助并尝试解决问题。

222100119柯昊旸：在这次结对编程中，我充分认识到了沟通协作带来的团队力量，例如在如初期由于对原型设计领域的陌生而感到迷茫，或是后期优化阶段的技术瓶颈，我们都能够迅速调整心态，彼此鼓励支持，并肩作战。有幸的是，与我结对的伙伴恰好是我的室友，这使得我们在整个项目周期内的沟通变得极为高效和便捷。在我们相互扶持和交流的进程中，我不仅提升了专业技能，还锻炼了沟通能力和团队协作精神。期待下一次结对编程带来的挑战和历练。

7.3、队友评价

222100122洪冠诚对222100119柯昊旸的评价：柯昊旸同学的UI设计能力和审美能力都比我强，当我们对某个模块的设计有不同的观点时，他往往能够以良好的分析能力和设计能力让我信服。柯昊旸同学的动手能力也很强，经常能有比较创新的idea。

222100119柯昊旸对222100122洪冠诚的评价：洪冠诚同学在这次结对作业中展现出了他出色的协作能力和专业素养。他的逻辑思维十分清晰，对于原型设计的整体架构和流程有着深刻的理解。他责任心强、严谨认真，能够主动解决队友遇到的难题，擅长团队内的沟通交流。我相信，在未来的学习和工作中，我们一定能够携手共进，取得更加优异的成绩。