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

[222100305庞财莹]

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222100305庞财莹 222100401丁念
这个作业的目标	完成原型设计，完成博客撰写，阅读构建之法
其他参考文献	《构建之法》，墨刀教程

目录

• 1.原型地址
• 2.原型设计工具
• 3.原型设计结果
• 3.1原型设计思路
• 3.2原型设计结果展示
• 4.NABCD模型
• 4.1需求（N）
• 4.2 做法（A)
• 4.3 好处（B)
• 4.4 竞争（C）
• 4.5 推广（D）
• 5.困难
• 6.PSP表格和效能分析
• 6.1 PSP表格
• 6.2 效能分析
• 7.结对体验
• 7.1结对过程展示
• 7.2结对感受
• 7.3评价队友

1.原型地址

世界游泳锦标赛跳水赛事项目--原型设计展示

2.原型设计工具

使用工具：墨刀

使用教程：墨刀使用教程

使用素材：墨刀素材广场

3.原型设计结果

3.1原型设计思路

由于本次作业是结对完成，故在原型设计初期，我们共同商定了该原型的总体风格，其中包括但不限于总体色调、页面大小等细节，立志于做到合二归一，使网页整体风格一致协调。
后续，我们根据该网站所需实现的功能，将原型设计分为如下模块：

1. 首页：展示世界游泳锦标赛跳水赛事最新新闻，并附上图片。
2. 选手排名：选择具体赛事，展示相应的参赛选手决赛排名信息，包含选手排名、国籍、头像、名称、年龄、得分等信息。
3. 每日赛程：展示每一天的赛程，其中要包含具体的赛事时间、名称、阶段等信息。同时还需支持根据比赛类型，比赛时间、当地时间筛选切换显示信息、查看具体赛事详细信息等操作。
4. 详细赛况：选择具体赛事，展示相应赛事的详细赛况，包含选手排名、国籍、头像、名称、年龄、得分、落后得分等信息。支持根据当前赛事的不同赛事阶段切换显示信息。
5. 了解更多：结合相关图片，展示2024世界游泳锦标赛的相关信息。

3.2原型设计结果展示

1. 基础框架
   为了网站的一致性，我们为该网页设计了统一的导航条与页脚。其中导航条显示该赛标志、名称等信息，支持各个页面之间的跳转，放置于页眉处。页脚展示相应的开发者与版权信息，具体显示效果如下图所示：

2. 首页
   于首页上方，采用了轮播图的形式，展示该赛事的精彩瞬间。随后图文并茂的展示该赛事的最新新闻，以增加网页趣味。具体显示效果如下：

3. 选手排名
   首先会进入赛事选择页面，选择想要浏览的具体赛事，点击后，跳转进入具体选手排名页面，其中采用表格的形式来规范展示该赛事决赛各排名选手的具体信息。前三名会有对应的金、银、铜牌图标。具体显示效果如下：

4. 每日赛程
   采用下拉框组件来实现按比赛类型、日期来筛选赛程信息；并且利用给所需组件添加事件的方式，来实现页面显示信息的切换。具体效果如下图所示：

5. 详细赛况
   首先会进入赛事选择页面，选择想要浏览的具体赛事，点击后，跳转进入对应赛事的详细赛况页面。在该页面，支持点击不同赛事阶段来切换显示不同详细赛况信息。采用表格的形式来规范展示该赛事详细赛况，其中包含选手排名、国籍、头像、名称、年龄、得分、落后得分等信息。各赛况前三名会有对应的金、银、铜牌图标。

6. 了解更多
   采用图文并茂的形式，生动形象的展示了2024年世界游泳锦标赛的相关信息，以增加网站趣味。具体效果如下图所示：

4.NABCD模型

4.1需求（N）

本网站给用户提供了一个可以直观快捷查看比赛的所有选手的排名和各种赛况等等，可以让用户实时了解比赛的信息。页面图文并茂，美观性和实用性兼具。

1. 首页

   • 使用了轮播图展示精彩赛事图片

   • 提供导航栏，可跳转至选手排名，每日赛程，详细赛况和了解更多页面查看更多信息

   • 图文并茂展示最新的赛事新闻

2. 选手排名

   • 展示目前的各种赛事

   • 点击可查看该赛事的比赛结果，选手得分信息等

3. 每日赛况

   • 按照日期查看比赛

   • 按照比赛类型查看比赛

   • 按照北京时间和当地时间查看比赛

   • 点击比赛跳转至详细赛况

4. 详细赛况

   • 展示各种赛事

   • 点击该赛事可以查看比赛结果，选手得分信息等

5. 了解更多

   • 介绍赛事相关信息，通过丰富的图文使平台更具吸引力

4.2 做法（A)

• 使用组件化，设计各个功能模块，复用组件
• 用表格形式，更直观的查看各类比赛和比赛结果以及选手排名
• 插入图片和一些图标，让页面更加美观，吸引用户使用
• 各个页面使用导航栏，可以跳转至不同页面查看所需信息

4.3 好处（B)

• 页面美观，使用简洁的白蓝配色
• 各模块功能划分清晰，可跳转至用户想查看的任意信息，方便快捷，易于用户使用
• 将数据按照表格形式列出，直观展示比赛数据
• 可以使用比赛日期，比赛类型等快速定位到相应赛事，提升用户体验感

4.4 竞争（C）

竞争对手：其他结对作业小组和其他比赛信息网站

1. 我方优势：

   • 页面美观，功能划分清晰，使用难度低，易于用户操作
   • 提示信息简洁明了，使用成本低
   • 部分功能相似部分使用组件复用方式，维护成本低
   • 采取图片和表格形式为用户展示信息，可读性强

2. 我方劣势：

   • 不能及时提供实时的信息
   • 部分功能还不够完善，如可以使用折线图等进一步可视化赛况

4.5 推广（D）

• 尝试在b站，CSDN，跳水比赛爱好者论坛等平台推广
• 在校园向同学们和家人朋友们推荐使用

5.困难

1. 原型工具的不熟练使用

   问题描述：以前没有做过原型，对原型工具使用不够熟悉

   是否解决：是

   解决收获：根据网上的教程一起墨刀官方提供的教程学习，刚开始不大熟练，做了几个组件之后就熟练起来了，能够从简单的显示组件，到添加对应的事件或组件状态，来实现所需的动画效果等。同时能够更好的利用图层间的嵌套关系，来复制、移动各组件，以提高原型设计效率。

---

2. 原型设计不一致的困难

   问题描述：本次原型设计需要两人合力开发出一个原型，难免会因为审美不同等因素，使开发出的网站风格不统一，协调性不够

   是否解决：是

   解决收获：我们遇到问题及时沟通，共同商定好网站的各项设计细节，大到网站的整体框架，小到网站的主题色调、关键组件的具体位置，只要有需要统一风格的地方，我们都积极沟通，结合双方意见，定下一套属于我们的原型设计标准。这不仅让我们的设计更加美观协调，也大大提高了我们与他人合作的能力。

---

3. 给组件添加事件遇到的困难

   问题描述：墨刀原型设计下拉框的选项添加事件找不到

   是否解决：是

   解决收获：本来刚开始遇到这个困难的时候想着回避这个问题，尝试不使用下拉框来实现选择。但后来还是发现无法规避这个困难，通过查阅资料找到了较为隐蔽的事件添加处，给各个选项添加信息。

---

4. 下拉的浮动效果实现困难

   问题描述：在显示选手排名时，点击选择某一赛事后，会把该赛事页面位置以下的其他赛事选择框顶下，空出相应空间显示选手排名信息；取消选择后，又会将对应空间释放，将其他赛事选择框回顶上来

   是否解决：是

   解决收获：刚开始针对以上问题想到了，给赛事选择框添加事件的方法。每当点击该赛事选择框后，将选手排名信息表显示/隐藏，并且修改对应赛事选择框的（x，y）坐标信息，以实现一个上下浮动的效果。但该方法较为繁琐，后来通过与朋友讨论后，发现我们更应该跳出现在的思维枷锁，寻找一个更加便捷、美观的实现方法，也就是将具体选手排名页面与赛事选择页面分离，通过页面跳转的方法，来实现具体赛事选手排名信息的显示功能。

---

5. 滚动面板的错误使用

   问题描述：一个1920*1080大小的页面往往无法容纳下所有内容，这时候我们就需要用的滚动面板，但奇怪的是，添加滚动面板后，仍无法正常移动放置于滚动面板上的组件

   是否解决：是

   解决收获：要正确利用图层间的嵌套信息，虽然从视觉上看，我们已经把组件放置于滚动面板内，但从图层间的嵌套信息中显示，我们一直未把放置于滚动面板上的组件添加于滚动面板的图层内。故明白各图层间的嵌套信息后，将所需组件并入滚动面板图层，也就自然而然的解决了上述问题。这也让我更加明白了图层的重要性，正确利用图层信息，会让原型设计事半功倍。

---

6.PSP表格和效能分析

6.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Estimate	• 估计这个任务需要多少时间	10	15
• Analysis	• 需求分析 （包括学习新技术）	120	150
• Design Spec	• 生成设计文档	60	90
• Design Review	• 设计复审	30	20
• Design	• 具体设计	480	660
• Test Repor	• 测试报告	120	150
• Size Measurement	• 计算工作量	30	30
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	60	120
	合计	910	1235

6.2 效能分析

1. 学习新技术阶段

   问题：在学习墨刀的使用过程中，把更注重实践的技术，停留于理论学习中，以至于学习效率低下，浪费时间。

   思考：在学习这种更注重于应用、上手难度小的工具中，采取在实践中学习的方式会更加合适且高效。只有当我们用过该组件后，对其的印象才会更加深刻。其次，墨刀的交互性做得很好，根据软件上的文字图片提示信息，也能完美的实现所需功能，不需要额外的划定专门的时间进行学习。并且，在我们真正的实际使用中，并不会完完全全的覆盖到墨刀的所有组件，可能在这次的原型设计中，只用到了其中的一小部分，故采用先学习，后实践的方法会使效率大大降低。

---

2. 具体设计阶段

   问题：在设计过程中遇到一些一时难以实现的效果时，常常会思维固化，难以从问题中跳脱出来，寻找更加灵活的解决方法。

   思考：在陷入困境中，可能难免无法凭借自身，冲破桎梏。这种时候，我们应当要合理寻求身边朋友的帮助，与朋友一起探讨解决之法，或者利用网络，尝试寻找相关博客等，吸取外界信息，以提高解决问题的速度。

---

3. 事后总结阶段

   问题：没有在遇到困难或有收获时及时记录，以至于事后总结时，某些具体细节记忆已不太清晰，或者要逐步回忆设计过程，效率低下。

   思考：在遇到困难时，应及时使用备忘录等工具将收获或见解以文字形式记录下来；同时在完成每一阶段的任务后，应进行一个阶段总结，避免把总结都堆积于事后，这不仅效率低下，还往往会缺失部分细节，导致总结的质量不高。故我们应把总结穿插于各个阶段，在事后，对各阶段的总结做一个汇总处理，这会大大提高该阶段效率。

---

7.结对体验

7.1结对过程展示

我们是一个宿舍的，大部分都是线下交流。
由于队友白天需要去教学楼自习，这是3.8号晚上我们共同于宿舍讨论原型设计的图片。

这是结对初期，我邀请队友加入我的墨刀团队，及分享本次作业相关材料的聊天截图。

这是原型设计开始阶段，我与舍友对该作业时间安排的商讨。

这是我们在原型设计初期，对原型设计的分工计划。

这是在原型设计过程中，我与队友同时在线墨刀，共同完成原型设计的截图。

这是在博客编写阶段，队友写出博客初稿，我做后续收尾工作的聊天截图。

7.2结对感受

222100305庞财莹：在本次结对作业中，我与队友合作完成了网站的原型设计，我们两个都是第一次做原型相关的内容，从刚开始完成结对，到线下讨论（我俩是舍友）各个页面功能，软件使用过程遇到的困难等，到最后完成作业。我体会到了团队协作的美好和重要性，团队协作意味着不再孤军奋战，遇到困难时沟通过程中总会有灵感和想法的碰撞，可以比自己一个人解决困难快速得多。对于第一次设计原型，我感觉原型设计不如我想象中的那么简单，需要在一开始对整个页面有合理的规划，设计可复用组件，使整个页面兼具易用性，美观性，便捷性等。

222100401丁念：在本次结对作业中，由于我们的空闲时间刚好一致，所以在进度推进过程中，我们相处的非常愉快，总有种事半功倍的感觉。当然，两个思维的碰撞肯定难免有些冲突，比如在原型设计过程中，我可能会比较莽，在实现某一较难实现的功能时，我会因为迫切的想实现该功能，而不顾实现操作的复杂程度，陷入思维固区。好在舍友能及时帮助我打开思维，鼓励我寻找一个更为便捷、更具有可扩展性的新方法，以至于能大大提高我们的设计效率。在本次作业中，我们沟通及时、细致，早早就在队友的建议下，对本次作业做出合理的时间规划，统一的设计标准，这使我们作业完成得井井有条。

7.3评价队友

222100305庞财莹：队友学习新软件非常的快，帮助我适应了新软件的使用。积极沟通和解决问题，在有新想法时及时提出，在我们两个的及时沟通下，确定了初版模型，之后分工各自完成模块。提前设立计划的完成时间和内容，进度非常舒服，不赶也不拖，在愉快和合作中完成了这次结对作业，期待下一次的协作。

222100401丁念：队友有丰富的项目经验，更加清楚一个完整的团队协作流程，能帮助我们团队避免一些因沟通不到位而导致的困难。并且队友人美心善性格好，在整个原型开发过程中，与队友沟通的非常愉快，我们有不解就沟通，有问题就提出。能在边玩边写，进度非常舒服中，愉快地完成了这次的结对作业，期待与队友的下一次合作。