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

这个作业属于哪个课程	21级软件工程
这个作业要求在哪里	结对第一次作业–原型设计
这个作业的目标	结对合作（两人一组，自由寻找伙伴），阅读下方的客户描述的现实困扰，以共同发布一份博客随笔的形式，设计一套方案，向客户推销。描述大致方案，以向客户证明你正确理解了客户的需求、提供给客户可行的优化的使用建议，给出原型模型，并提供大概的解决方案预期规划。
其他参考文献	工程师的能力评估与发展

目录

• 1. 原型模型
• 2. NABCD模型分析
  • 2.1 N（Need 需求）
  • 2.2 A（Approach 做法）
  • 2.3 B（Benefit 好处）
  • 2.4 C（Competitors 竞争）
  • 2.5 D（Delivery 推广）
• 3. 原型设计
  • 3.1 原型设计工具
  • 3.2 原型设计过程
• 4. 结果汇报
  • 4.1 页面展示
  • 4.2 遇到的困难、解决方法及收获
• 5. 结对过程及评价
  • 5.1 结对交流
  • 5.2 结对分工
  • 5.3 结对评价
• 6. PSP表格及效能分析
  • 6.1 PSP表格
  • 6.2 效能分析

1.原型模型

原型地址

2.NABCD模型分析

2.1 N（Need 需求）

世界游泳锦标赛，是由世界游泳联合会主办的最高级别的大型国际性游泳赛事，主办机构是国际泳联总会。若只通过上次作业的简单文字输出来展示比赛的相关数据，不够直观具体，对用户不够友好。因此本次作业希望能设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等，平台应能展示：选手排名、每日赛程和详细赛况。

2.2 A（Approach 做法）

本次作业需要通过图表等形式来直观显示选手信息、正式赛每日结果，因此共设计了三个页面。

• 首页：设计了图片轮播，展示当下最热门的热点，上方有导航栏，点击跳转每日赛程、详细赛况界面。
• 每日赛程：展示不同日期的当天赛事，显示比赛类型和比赛时间等信息，支持通过切换日期范围查看不同的比赛，支持点击列表中的赛程，可以跳转至详细赛况界面。
• 详细赛况：展示某种比赛的决赛选手排名。

2.3 B（Beneift 好处）

用户通过简单的操作就可以了解世界游泳锦标赛各个项目的详细赛况和选手排名。

2.4 C（Competitors 竞争）

竞争对手：

• 其他同学的作业、世界游泳锦标赛官网

优势：

• 界面简洁明了，可以快速获取所需的信息
• 免去登录注册等环节，让用户可以更方便地上手使用
• 可以根据时间范围快速选择要查看的赛程

劣势：

• 未设计如柱状图、饼状图等更细致的数据展示功能

2.5 D（Delivery 推广）

• 初期：后期校内推广，让同学们体验下网站的相关功能，并记录他们的反馈，继续完善网站的设计
• 后期：将网站部署到服务器，在社交平台（微博、知乎）宣传我们的产品，让更多人可以使用平台的服务

3.原型设计

3.1 原型设计工具

本次原型设计我们选择墨刀作为主要工具，这个工具的教程较多，可以更快地学习上手。

3.2 原型设计过程

1、需求分析

根据作业要求，一开始的想法是设计四个界面，包括首页、每日赛程、详细赛况和选手排名界面。但在反复阅读作业要求和查看官网示例后，我们讨论得出只需三个界面足以，分别是首页、每日赛程和详细赛况。因为作业要求中的选手排名和详细赛况实际上是同一个东西，在官网中都是通过RESULTS界面的下拉框展示的。

2、设计实现

（1）在B站上找了墨刀的视频教程，一起跟着教程学习了原型设计工具的使用方式

（2）先大致看两遍作业的要求，再仔细看细节的实现要求，然后双方对要求中的疑惑点展开讨论

（3）整体规划要设计的界面功能，分工并开始设计原型界面

（4）设计好界面后，双方都使用一下目前的界面，提出可以改进的地方，继续完善

（5）最后界面确定后，撰写博客

4.结果汇报

4.1 页面展示

1、首页

首页的图片轮播展示当下的热点，上方有导航栏，点击跳转每日赛程、详细赛况界面。

2、每日赛程

每日赛程界面展示不同日期的当天赛事，显示比赛类型和比赛时间等信息，支持通过切换日期范围查看不同的比赛，支持点击列表中的赛程，可以跳转至详细赛况界面。

3、详细赛况

详细赛况界面展示某一比赛的选手排名，可以点击切换决赛和初赛。

4.2 遇到的困难、解决方法及收获

1、初次使用墨刀、设计原型界面不熟练

困难起因：我们都是第一次接触原型设计，都没用过墨刀，所以都无从下手。

解决方案：去B站找相关教程学习

收获：学会了墨刀的常见使用方法

2、原型界面设计一开始没有思路

困难起因：不知道一个基本的原型设计需要有哪些要素，平台该设置哪些内容

解决方案：参考了官网示例和别的运动赛事官网，总结不同平台的共同要素

收获：学到了一个平台原型设计的基本要素，如导航栏，页面排版，按钮事件等

3、合作双方存在意见分歧

困难起因：这是双方第一次合作，而且双方思维都比较活跃，都有自己的观点和看法

解决方案：把分歧一个一个地列出来，逐一讨论解决，直到得到一个双方都满意的结果

收获：学会了团队合作，要学会倾听他人观点，多讨论，而不是各执己见，否则只会拖慢进度

5.结对过程及评价

5.1 结对交流

由于我们的宿舍间隔特别远，所以大部分都是采用线上沟通的方式来讨论设计的实现。

5.2 结对分工

lbc：负责原型界面的设计实现
wq：负责提出设计思路、修改建议和博客撰写

5.3 结对评价

lbc：wq是个负责细心又优秀的好队友。任务发布后，他便会早早投入其中，对任务的解读和分工安排都非常的出色。分工后还会对我需要做的任务给予足够的帮助和不少有用的建议，让我感觉到任务完成的很轻松，同时他在他自己的任务里也完成的非常的高效且出色。
wq：bc是个很靠谱的人，把事情交给他很放心，和他沟通感觉毫无压力，可以随意表达自己的观点。同时bc学习能力很强，虽然是第一次使用墨刀，但在一段时间的尝试后就学会了墨刀的基本操作，并可以根据我们的讨论结果设计出美观明了的网站。

6.PSP表格及效能分析

6.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
• Planning	• 计划	20	30
• Analysis	• 需求分析 （包括学习新技术）	60	50
• Learning	• 学习原型设计工具	200	250
• Discussion	• 合作讨论	100	150
• Design	• 原型界面设计	600	700
• Test & Improve	• 测试界面功能与改进	100	50
• Size Measurement	• 计算工作量	30	20
• Postmortem & Process Improvement Plan	• 事后总结，并提出过程改进计划	20	20
	合计	1130	1270

6.2 效能分析

观察PSP表格可知，我们在学习原型设计工具和原型界面设计两部分实际耗时超过了预估耗时。之所以产生差距的原因在于我们前期花了很多时间看墨刀的视频教程，但实际上并不需要这样，而是应该直接开始使用墨刀，有什么功能不会的再去看视频学习，这样不仅能节约时间，还能加深对墨刀使用的理解。其次是具体实现过程，我们存在一些设计的分歧，因此花了不少的时间在讨论上，之后的合作应直接列出分歧点，逐一击破。