软件工程实践结对第一次作业

这个作业属于哪个课程	福州大学-202302软件工程实践
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	222100434 222100433
这个作业的目标	阅读构建之法；合作进行原型设计；撰写博客
其他参考文献	《构建之法》、墨刀教程

1. 原型地址

世界游泳锦标赛 - 多哈

2. 原型工具

经过多方对比，最后我组选择使用墨刀

1. 首先，在作业初期由于对原型工具不甚了解，为了能够快速上手，所以选择了墨刀
2. 其次，相比于Axure，墨刀对服务器在国内，访问分享链接时，老师和助教的体验会更好一些
3. 同时，墨刀可以兼容Axure的文件，而Axure不能兼容墨刀的文件，学会使用墨刀后，未来在公司可以兼容其他人的使用工具
4. 最后，Axure固然是一款优秀的软件，但为了支持国产原型设计软件，助力国产软件发展，我们选择了墨刀

3. NABCD模型

3.1 N（Need，需求）

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

3.2 A（Approach，做法）

• 页面布局：使用统一的 header 和 footer，中间为具体内容 ，这种布局保证了页面的一致性，让用户使用起来能够感觉到逻辑的连贯性
• 页面跳转：导航栏位于header下方，实现对不同内容的查看
• 比赛介绍：对本次多哈世界游泳锦标赛进行了介绍，其中还包括了游泳和跳水比赛中的亮眼表现
• 每日赛程：通过导航栏可以切换浏览的运动项目，导航栏下方会出现日期选择的栏目，可以切换日期来查看当天的比赛项目
• 详细赛况/选手排名：二者内容一致，无需做成两个功能增加网页的累赘，故合并到一起，点击每日赛程中的具体比赛项目后，就可以查看到该项目的详细赛况
• 奖牌排行：选择具体的运动项目后，下方会出现对应的各个国家奖牌的获得情况，并会根据数量以及金银铜牌的权重，对各个国家进行排名

3.3 B（Benefit，好处）

• 页面简洁大气，内容图文并茂，通过图片的嵌入，使各个选项更加直观，让用户使用起来更加轻松明了
• 仅需要点击便可查看各类信息，降低使用门槛
• 不需要登录等等措施，进入网页后就可以直接查看
• 通过奖牌排行，让用户可以轻松地了解自己支持队伍的现状

3.4 C（Competitors，竞争）

1. 竞争对手
   • 世界游泳锦标赛官方网站：内容更加丰富，UI设计更加专业成熟，官方网页的信息更新速度会更快
   • 其他小组：附加的功能方面可能会稍有劣势
2. 我方优势
   • 相对于官方网站，我们的内容均为中文，对中文使用者来说，我们的网站使用起来更加方便。虽然目前有众多代替方案，不过翻译的准确性上还是有待加强。
     例如：将同步自动翻译为花样滑冰
     
   • 界面简洁易懂，只包含重要信息页面，用户浏览起来没有使用压力，可以快速的获取到自己需要的信息
   • 设计的网页结构简单，搭建维护成本较低
   • 相对于其他组，我们的UI设计更加贴近官网的UI设计，因为官方网站已经深耕多年，对UI的设计可以直接供我们利用，这也是取他人所长，补自己所短。
3. 我方劣势
   • 对信息的获取只能通过官方网页，信息存在滞后性
   • 现阶段使用人数极少，缺乏对网站优化的反馈建议或意见，需要开发者主动宣传
   • 我们的附加功能不是很多，可能其他小组会想出更有创意的附加功能

3.5 D（Delivery，推广）

• 向家人、朋友、同学们推荐，好处是可以即时获取到使用反馈，同时，他们如果觉得好用的话，可能会逐渐推荐给其他人，这样口口相传，不断的扩大使用者的范围
• 向学校官方QQ或公众号申请宣传，面向的是全体师生，以及对福大感兴趣的人
• 通过社交平台宣传，在bilibili、知乎等社交平台展示我们的内容，引起人们的兴趣；在推特、ins等海外社交平台，针对海外中文使用者进行宣传

4. 原型设计

4.1 设计过程

1. 前期讨论
   根据题目的要求，对需要做的页面以及附加的功能进行了讨论，并完成了规划。大致分为四步做，第一步，确定网页框架内容，设定好后就可以复制粘贴并为每个页面添加相应的内容。第二步，完成对比赛介绍内容的填充。第三步，确定每日赛程页面交互的逻辑，并根据该逻辑进行填充，如果发现问题，随时对逻辑进行合理的修改。第四步，完成奖牌排行内容的填充。
   
2. 任务分工
   我们先分配了网页框架的内容，header由hn制作，footer由gkx制作。在制作时发现，如果简单的按照页面分工去做的话，风格无法统一。于是我们改为了另一种方式，先共同讨论内容填充的位置和使用的逻辑，接着由gkx制作比赛介绍和每日赛程的大致的框架，hn制作详细赛况和奖牌排行的大致框架。而后，gkx负责填充文字数据，hn负责对框架位置格式进行统一。
3. 内容完善
   搭建好大致框架后，由hn负责爬取官网图片，gkx负责使用PS将部分不合适的图片进行修改，最后由二人一起将图片放入相应位置。最后hn负责图片的对齐，间距的统一等内容。

4.2 设计成果

1. 框架设计（header）
   
2. 比赛介绍内容
   
3. 每日赛况
   
   通过点击运动项目进行内容切换
   
   通过点击日期进行内容切换
   
   通过点击女子1米跳板查看详细赛况
   
4. 奖牌排行
   

5. 困难与解决

5.1 困难一

困难描述：在拖入导航栏组件后，发现组件只是多个组件的嵌套，比如改变组件大小时，其他内容并没有随之一起改变

解决办法：仅使用墨刀官方内置的组件，集成了大部分需要的功能，同时组件内部也会自适应的改变大小

5.2 困难二

困难描述：每个运动项目的比赛日期不同，每个运动需要单独对应一个日期导航栏的状态，但是因为官方内置的导航栏，其中选项只能绑定一个事件，改变了日期导航栏的状态后，下方比赛项目的组件状态就无法改变

解决办法：将日期导航栏和比赛项目的内容放入一个单独的动态面板，为面板设置各个运动的状态。
不过，一般的组件是可以绑定多个事件的，唯独集成的选项只能绑定一个事件，这方面存在后期官方更新的可能。

5.3 困难三

困难描述：在动态组件中，组件库里面的滚动面板消失，这就滚动面板无法直接拖入到动态组件中，困难二的解决办法就无法实现

解决办法：将滚动面板剪切后，到动态组件中进行粘贴。
看起来解决办法很简单，但是因为无法拖入到动态组件中，一开始以为二者是不兼容的，想了很多其他办法，直到有一次偶然的把滚动面板粘贴到动态组件中，然后尝试演示了一下，发现滚动面板是可以正常工作的，这才把问题解决。不过，这样的方法也比较tricky，不知道官方是考虑了什么才不允许滚动面板拖入动态组件中的。

6. PSP表格与效能分析

6.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Estimate	• 估计这个任务需要多少时间	10	10
• Analysis	• 需求分析（包括学习新技术）	300	250
• Design Spec	• 生成设计文档	240	120
• Design Review	• 设计复审	30	20
• Design	• 具体设计	840	780
• Report	• 报告	180	360
• Size Measurement	• 计算工作量	10	15
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	30	20
	合计	1640	1575

6.2 效能分析

1. 原型设计工具的学习

分析：过于高估了原型设计工具的使用难度，导致在前期学习时，过于追求系统的学习，造成了时间上的浪费。

思考：这种所见即所得的工具使用起来难度很小，完全可以边做边学，在实践中去探索。而那种跟着教程系统学习的方式，也很容易造成知识的遗忘，前面看了后面就忘了，这样学起来效率很低。之后接触新的工具时，要懂得到实践中去学习。

2. 控制自己工作的效率

分析：有时会因为自己过于追求完美，会在一些没必要的地方浪费时间。比如，纠结那种字体那种粗细度最好看，为了这种没必要的属性耗费大量时间

思考：在实现过程中，要多跟队友讨论具体的实现方式。在这次结对作业过程中，有时自己走入死胡同开始自己闷头琢磨时，队友一句话便将我的迷雾拨开，为我指明了一个方向。比如，我在纠结详细赛况添加到每日赛程中的具体实现时，就一直被困在层次结构的陷阱中，想着要把不同功能分开，保证一个面板只显示一种信息。但是，这样就会增加很多的工作量，要考虑新引入的动态组件放在哪里，需要修改哪些组件的状态，状态的嵌套层次要改成怎么样的等等问题。队友看到后提醒我，不用分开直接给每日赛况增加一个状态就好了，不需要和代码一样严格分功能。这样不仅减少了工作量，效率也大大提高，成果的质量也并未降低。

7. 结对体验

7.1 结对过程

由于我们是室友，所以交流更多的是在口头上交流。
我们最初的时间和项目计划


交流图片

7.2 结对感受

• HN(222100434)：合作的效率就是不一样，比如在我吭哧吭哧去找修改图片的网站时，GKX通过PS不到一分钟就修改完了，这样合作可以充分发挥双方的优势，比如他因为摄影的爱好，对设计方面比较在行，所以页面大致的框架由他来负责，而我对细节方面非常关注，适合最后对各个格式和位置进行优化，这样双方就能效率最大化，充分发挥自己的特长。同时，如果遇到不会的地方，一个人可能想不出来，但是只要稍加讨论，大部分问题都可以迎刃而解。
• GKX(222100433)：HN在我遇到困难的时候给予我诸多帮助，让我感受到两个人合作的高效以及带来的巨大好处，在这个结对作业中我深刻地理解到了团队协作的价值。团队协作的另一个价值就是可以与对方沟通。在面对问题时，通过积极的讨论，我们总能想出解决方案。这样的合作不仅仅使工作更加顺畅，也促进了我们的共同成长以及友谊的巩固。通过这次结对作业，我体会到了在团队中共同努力的重要性，也更加坚信团队协作是取得成功的关键。

7.3 队友评价

• HN(222100434)：在最开始的时候我就跟他提醒，因为未来的规划原因，我非常需要高绩点，所以可能会比较push，这个作业肯定不是只要求及格就好，很有可能会挤压你其他活动的时间，比如摄影，打羽毛球之类的。没想到后来才发现，我因为过于追求细节，导致做一个页面的时间会比他耗费更多，他三两下做完之后，我还在关注那几个细枝末节的地方。这让我发现了我需要改进和学习之处，未来工作之时，不能老因为极小的细节，耽误了整体的进度。
• GKX(222100433)：我的队友在完成作业的细节方面非常的认真细致，纠正了我许多没注意到的细节，让我感受到了两人合作的高效。他在完成任务展现出的认真态度，让我也不禁开始关注作业中的每一个细节。他的严谨和认真不仅使得任务顺利进行，还为整个团队的表现注入了积极的能量。他的认真工作精神在我们的合作中起到了重要的推动作用，让整个团队更加高效且富有成效。我之后也要向他学习，争取把这份精神延续到考研。