目录

1.原型地址

原型链接

2.NABCD 模型分析

2.1 Need（需求）

设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等。
平台应具备的功能:
1.选手排名: 需要展示 Overall Rank，Country，Athlete，Age，Points
2.每日赛程:

• 展示每一天的赛事，显示比赛类型，参与选手和比赛时间
• 支持通过切换日期查看不同的赛程，可参考此界面
• 支持点击查看详细赛况

3.详细赛况: 展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等

2.2 Approach（做法）

先对问题进行分析后，将问题分解成三个基础小问题，第一个是选手信息展示，在这个问题，我们需要设计跳转组件和展示内容的表格，我们先制作好表头和一条选手信息后，以这条选手信息为模板进行其他选手信息的制作。问题二要求展示每日赛程，先将问题二分成两个 YourTime 和 LocalTime 两个页面，这两个页面的差别只有时间不同，因此只要修改时间即可。再通过制作一条比赛项目条后，以该项目条为模板制作其他比赛项目条，再添加跳转到对应详细赛况页面的事件即可。问题三要求展示详细赛况，问题三与问题一的差别只多了一个落后比分，因此借助问题一的页面，只需在表格添加落后比分列即可。

2.3 Benift（好处）

有助于客户直观查看选手信息，每日赛程等内容。

2.4 Competitiors（竞争）

• 竞争对象包含官方网站和其他小组
• 优势：我们的产品侧重直观展示信息，不追求其他复杂的功能，我们的产品只需要通过点击页面内的提示按钮即可跳转到其他需求页面，简单明了，方便用户使用，如果用户要查看进一步的内容，也可以根据提示查看。
• 劣势：页面跳转有延迟，部分事件可能需要点击多次才会跳转

2.5 Delivery（推广）

• 广告投放
• 上传视频到各个短视频平台来介绍我们的产品
• 博主推广

3.原型设计

3.1 原型开发工具：墨刀

3.2 原型设计及成果：

3.3 原型设计流程图：

4.原型结果展示

4.1 首页

1.主体展示

2.导航栏

点击可实现对应页面的跳转

4.2 选手排名

1.展示基本的排名情况

2.点击上方导航栏切换比赛

3.详细展示选手详细信息

单击选手头像显示信息

双击收起

4.3 每日赛程

1.展示当日比赛

2.点击按钮切换时区

3.点击详细赛事按钮切换到详细赛况

4.4 详细赛况

1.展示该场比赛信息

2.点击导航条切换比赛（同选手排名功能，省略图片演示）

3.切换比赛

4.5 了解更多

1.页面展示

2.点击“比赛项目”跳转页面

3.点击运动跳转对应介绍

5.遇到的困难及解决办法

困难一:刚开始接触原型时，对于组件的使用不了解，不知道如何构建一个符合要求的导航栏
解决办法:通过看官网的帮助中心，知道了一些组件的使用技巧，以及上 b 站学习墨刀的使用。
是否解决：已解决
收获：第一次接触原型，发现原型是一个好工具，可以快速构建页面，但是对于布局能力不强的同学，在制作过程会非常耗时。

困难二：通过视频学习了一点技巧后，但是实际上手后发现有所区别，不知道为什么视频中可以垂直滚动，而自己的模型只能展示部分区域，其他区域并不会显示，也无法滚动
解决办法：通过不断的尝试后，终于发现需要将组件设置为动态组件，将右侧滚动属性设置为垂直滚动才可以实现页面超出的部分滚动出现。
是否解决：已解决
收获：通过学习视频后，对于组件的使用有了更深的理解，逐渐可以构建自己想要的组件。

困难三：事件点击后出现的内容将原内容覆盖或原内容将点击后出现的内容覆盖的情况
解决办法：一开始的思路是要出现的内容设置两个状态，一个是全透明（实现看不见的操作），一个是正常显示，通过点击事件来切换两个状态，但是当不止一个项目信息条时，那么就会出现被覆盖无法点击的情况。后面转变思路，通过切换隐藏和显示状态同样可以实现上述操作，且不会出现被其他信息条覆盖导致无法点击的情况。
是否解决：已解决
收获：解决这个问题后，对于组件的事件有了进一步理解，已经可以熟练的实现页面切换，组件间的状态切换等功能。

困难四：使用下拉选择器来制作导航栏，发现下拉选择器的子单元无法设置事件
解决办法：一开始通过自己制作一个导航栏来实现，但是制作过程十分麻烦，后面在改进时发现可以使用标签页来制作，标签页可以实现当前页面和点击其他标签进行页面跳转，非常便捷。
是否解决：已解决
收获：对于组件的了解在设计过程中也是非常重要的一环，这个组件有什么功能，可以实现什么，什么无法做到，知道了这些，可以快速设计界面。

困难五：一开始在制作时，对于状态的使用不熟悉，只是通过新建画布，然后通过画布跳转来实现页面跳转，对于其他不需要跳转部分需要不断的复制粘贴，导致整个任务量剧增
解决办法：最后改进时意识到可以通过切换状态来切换内容，就不需要在另建页面，实现部分切换。
是否解决：已解决
收获：目前对于组件的使用较为熟练，可以设计大部分的界面和实现大多数功能

困难六:页面跳转时，要跳转到的页面默认显示是状态一，而需求是跳转到状态二，无法实现该操作
是否解决:未解决

困难七:组件复制时，有时候会出现事件没有复制的情况需要重新添加事件
是否解决:未解决

6.结对工作感受、截图与评价

结对工作感受

222100111张逸：这次结对工作，最大的感受是有人帮助你，工作会快很多，同时在遇到问题时有人可以替你分担，给自己的压力会小很多，整个过程体验很好。

222100428柯凯棋：通过本次结对作业，我感受到了团队协作的奇妙，两个人互相讨论自己的想法，互相为对方解决问题，往往能发挥出1+1>2的效果，整个过程体验非常好。

结对工作截图

评价

222100111 张逸对 222100428 柯凯棋的评价：柯凯棋同学在本次结对实践过程中，高效配合，及时完成任务，积极提出自己的看法，在遇到不懂的时候及时询问，彼此交流顺利，期待与他的下一次合作。

222100428 柯凯棋对于 222100111 张逸的评价：张逸同学对待作业态度十分认真，对任务的拆解分析能力也很强（早早地就给出了本次作业的流程图）。同时本人很好沟通，分配任务与后续交流的过程中非常顺利，我在任务中遇到的困难他总是很耐心地解答。期待与他的下一次合作。

7.效能分析

7.1 PSP 表格

7.2 效能分析

通过 PSP 表格对比合计时间，发现实际花费时间和预计时间略有有差别，我们认为其出在一开始在分析工作量上分配的时间过少，导致部分作业要求没有纳入考虑范围，进而导致开发时间估计偏小。在具体进行开发时又补全了不少功能（在这个过程中难免又要调整之前已完成的功能以适应新功能），因而开发时间的估计值与实际有所出入。因此，在下一次任务中，我们认为应花更多的时间在任务分析上，以求工作能水到渠成地顺利进行。

8.小组贡献度

分工

222100111张逸：负责页面设计，流程图制作，样例制作及事件实现、任务分配、博客NABCD、原型设计、遇到的困难及解决办法撰写
222100428柯凯棋：根据样例完成相应页面内容，博客原型结果展示、效能分析撰写

贡献度

222100111张逸：60%
222100428柯凯棋 40%