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

这个作业属于哪个课程	软件工程实践-2023学年-W班
这个作业要求在哪里	结对第一次作业——原型设计
结对学号	222100211、222100216
这个作业的目标	结对完成原型设计
其他参考文献	《构建之法》第3章和第8章、墨刀相关教程

一、原型地址

原型地址

二、NABCD模型

1.Need
设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等。

• 选手排名
  • 只需完成Women 1m Springboard决赛的排名，可以参考此界面，需要展示Overall Rank，Country，Athlete，Age，Points
• 每日赛程
  • 展示每一天的赛事，显示比赛类型(男子1m跳板，女子10m跳台等)，参与选手和比赛时间
  • 支持通过切换日期查看不同的赛程，可参考此界面
  • 支持点击查看详细赛况
• 详细赛况
  • 展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等
• 了解更多
  • 介绍世界游泳锦标赛的举办背景，通过丰富的图文使平台更具吸引力，引起人们对世界游泳锦标赛的兴趣。

---

2.Approach

• 先讨论决定要使用的原型工具，以及原型的设计
• 由于墨刀是一个专用的原型模型设计工具并且可以线上实时合作，所以学习了墨刀的相关用法，决定使用墨刀制作原型
• 参考世界游泳锦标赛网站的设计，来完善原型的设计细节
• 最后根据需求设计出四个界面，四个界面都包括顶部导航条，详细设计如下：
  • 选手排名：通过表格来显示数据查看Women 1m Springboard决赛的排名
  • 每日赛程：根据时间查看详细赛况
  • 详细赛况：根据比赛的名称查看详细赛况
  • 了解更多：用轮播图和文字对官网进行介绍

---

3.Benefit

• 界面简洁，便于操作，利于用户获取所需信息
• 顶部使用导航条，方便跳转
• 访问速度快，具有一定交互性

---

4.Competitors
与世界游泳锦标赛相比：

• 界面简洁，便于操作，能让用户更快捷的访问网站获取所需信息
• 界面更人性化，在保证需求的同时具有一定交互性
• 导航条采用中文设计，利于国内用户使用

---

5.Delivery

• 通过短视频平台进行推广
• 通过社交媒体进行推广
• 投放广告

三、模型设计

3.1原型开发工具

墨刀

3.2原型设计过程

设计四个界面，四个界面都包括顶部导航条，用一个矩形作为导航条，再用四个小的矩形放在导航条上，作为导航条的项，导航条底色采用渐变色的设计，并给各个导航条的项添加页面跳转事件，以达到跳转的效果

• 选手排名：为了完成需求内容，采用了一个表格，表头包括Overall Rank，Country，Athlete，Age，Points，通过表格来显示数据查看Women 1m Springboard决赛的排名，表格中的国名增加国家的小图标，并且前三名，有金牌、银牌、铜牌的小图标进行展示，通过图片和文字详细展示选手排名信息
• 每日赛程：以时间为顺序展示，分别展示每一天的比赛时间以及项目。比赛的项目有用图标和文字标注以区分决赛和预赛，点击项目可以跳转到相应的比赛结果，但是为了展示，只做了Women 1m Springboard项目的展示，毕竟只是一个展示原型
• 详细赛况：有一个左侧栏选择比赛，右侧是比赛的详细信息，表格的内容与选手排名中的表格内容大体相当并且增加了分数差值的表项。为了便于展示也只做了Women 1m Springboard项目的展示
• 了解更多：用了一个轮播图和文字对官网的相关信息进行介绍

四、结果汇报

4.1设计成果汇报

各个页面的顶部设计
采用一个导航条外加图片的形式

选手排名页面
用表格展示选手排名信

每日赛程界面
以时间为顺序展示，分别展示每一天的比赛时间以及项目


详细赛况界面
有一个左侧栏选择比赛，右侧是比赛的详细信息

了解更多界面
用了一个轮播图和文字对官网的相关信息进行介绍

4.2遇到的困难及解决方法

问题一 没使用过原型设计，毫无头绪不知道从何做起

该问题已解决
解决方式:首先经过谈论选择了易上手的墨刀作为原型工具，在确定了工具之后，通过网上查询相关资料和自己测试学习了墨刀相关基础组件的用法。
体会：遇到没使用过的技术，要找对方向，学习相关知识并积极尝试在实践过程中学会新技术。

问题二 如何设计导航条

该问题已解决
解决方式:由于墨刀的基础导航条过于简单，无法做出世界游泳锦标赛官网那种炫酷的导航条，为了设计出有自己分格的导航条，小组查询相关资料并测试以小组件组成大组件的可行性。在确定了该方法可行后，给各个小组件矩形添加跳转事件并拖入大矩形中组成了一个可以复用的导航条。
体会：在使用新的工具时，要了解其最基础的功能，面对复杂问题可以把问题拆分，用基础的功能实现复杂问题的解决。

问题三 有些组件出现次数过多，增加了设计工作量

该问题已解决
解决方式:首先根据重复的组件的共性设计出一个通用的大组件，再以这个大组件为模板；复制粘贴到要使用的地方，如果需要其他功能可以根据需求再作调整。
体会：遇到需要重复的设计工作时，可以通过设计一个有共性的组件来增加工作效率

问题四 轮播图图片比例不正确

该问题已解决
解决方式:在经过不断尝试和询问同学过后，发现这可能是图片分辨率较大以及轮播图组件大小过小导致的，调整了轮播图组件大小并且在截取图片时选用相同大小的图片来填充轮播图，问题得到解决。
体会：再遇到问题时，如果长时间没得到解决，可以寻求他人或网上的帮助。

五、PSP表格以及效能分析

5.1PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	10
• Estimate	• 估计这个任务需要多少时间	10	10
Development	开发	300	400
• Analysis	• 需求分析 (包括学习新技术）	60	70
• Design Spec	• 生成设计文档	20	20
• Design Review	• 设计复审	10	10
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	10	5
• Design	• 具体设计	120	90
• Code Review	• 代码复审	10	10
• Test	• 测试	20	15
Reporting	报告	60	70
• Test Repor	• 测试报告	10	10
• Size Measurement	• 计算工作量	10	5
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	10	10
	合计	660	735

5.2效能分析

通过对PSP表格的分析，完成部分过程所花费得时间略高于预计时间，主要是在开发阶段花费了更多的时间，在进行实际操作的过程中遇到了很多新问题，以后可以在分析阶段多花一点时间，这样先提高自己能力之后可以在实践中更好地解决问题。

六、结队过程

分工

222100211_吴昊:负责博客的编写和少部分设计
222100216_陈烨:负责原型设计的实现

结队截图

结队感受

前两次作业都是单人作业，这次是首次结对作业，这需要团队配合两人共同讨论完成一个项目，可以发挥团队的优势，提升项目推进进度提升工作效率。

评价

222100211_吴昊:在遇到问题时能寻找解决方法，总结能力强完成了博客的编写。
222100216_陈烨:动手能力强，交流能力良好，工作积极完成了原型设计的大部分内容。

贡献度

222100211_吴昊:55%
222100216_陈烨:45%