结对第一次作业

这个作业属于哪个课程	福州大学-2302软件工程
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	222100207、22210226
这个作业的目标	就游泳赛事网页，设计一套方案，向客户推销；给出原型模型，并提供大概的解决方案预期规划
其他参考文献	《构建之法》…

1.原型地址

原型设计

2.NABCD模型

NABCD模型是一种用于营销策略规划和执行的框架，用于分析市场、顾客行为和营销活动。这个模型的名字来源于其五个要素：Need（需求）、Approach（方法）、Benefit（好处）、Competition（竞争）和Delivery（宣传）。

2.1 N (Need，需求)

分析市场中存在的需求或问题，确定消费者对产品或服务的需求

• 设计一个平台来展示世界游泳锦标赛的相关信息，通过图表等形式来直观显示选手信息、正式赛每日结果等
• 选手排名
  • 只需完成Women 1m Springboard决赛的排名，需要展示Overall Rank，Country，Athlete，Age，Points
• 每日赛程
  • 展示每一天的赛事，显示比赛类型(男子1m跳板，女子10m跳台等)，参与选手和比赛时间
  • 支持通过切换日期查看不同的赛程
  • 支持点击查看详细赛况
• 详细赛况
  • 展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等

2.2 A（Approach，方法）

制定解决这些需求的方法

• 设计四个页面分别展示概述、每日赛程、详细赛况排名、了解更多
• 概述：对当日赛程的概述，并设置一个轮播图展示部分比赛排名
• 每日赛程：按照日期分类每日赛程，能够通过点击赛程跳转该赛程的具体信息（详细赛况排名）
• 详细赛况排名：通过表格展示赛程的具体信息
• 了解更多：图文并茂介绍世界游泳协会，附上视频更生动

2.3 B（Benefit，好处）

确定产品或服务的优势和利益，强调这些优势，吸引客户

• 用户体验好：界面简洁、美观，操作简单
• 细节完善：底部添加置顶符号，方便用户一键置顶
• 信息组织清晰：按照日期整齐地排列在导航栏中，用户可以更快速地找到他们感兴趣的内容
• 满足用户的语言需求：以中文为主导语言能够满足中文用户的语言需求

2.4 C（Competitors，竞争）

分析竞争对手的产品或服务

• 丰富的内容：通过提供详细的选手信息和了解更多页面的内容，有更丰富、更有吸引力的内容
• 用户反馈：选中时边框出现蓝色虚线的选中特效可以向用户传达操作的结果，让用户清楚地知道他们当前选择的是什么，拥有更好的用户体验、更强的交互效果
• 一致的用户体验：与官方网站相似，用户将更容易适应和使用网站，这将提高网站的可用性和用户体验。

2.5 D (Delivery，宣传)

如何将产品或服务传递给目标客户

• 分享链接给朋友同学浏览
• 写博客介绍并附上链接

3.原型设计

3.1 原型设计工具

墨刀

3.2 原型设计过程

1. 浏览官网并以此作为参考
2. 学习墨刀的使用
3. 制作简易网页，熟悉流程
4. 需求分析，划分模块
5. 任务分配
6. 整合

3.3 成果展示

首页

包括导航栏、轮播图、概述等模块

• 导航栏方便用户选择需要的信息
• 轮播图展示粗略的排名信息

• 概述采自官网，信息更准确具体

每日赛程

包括日期选项卡以及当天的赛程等

• 日期选项卡方便用户选择想看的日期，并且选中的日期会有选中特效

• 赛程选项卡拥有选中特效并且支持点击跳转

  

详细赛况排名

包括赛程选项卡，点击展开表格信息

• 赛程

• 信息表格

了解更多

视频介绍和图文介绍

• 视频介绍

• 图文介绍

4.困难及解决方法

• 问题1

困难描述：在分辨率为1920*1080的网页上，无法一次性完整显示所有内容。

解决尝试：尝试将底边拉长以适应内容，但这样做会导致页面内容超出屏幕范围，无法完整显示。考虑到页面内容较多，希望能够实现滚动显示功能，于是寻找滚动条小组件，试图解决问题，显而易见这个想法不合适。

是否解决：最后发现底边的旁边有一个小游标，可以通过拖拉游标使页面支持滚动展示更多内容

有何收获：提升了对页面设计和功能实现的认识

• 问题2

困难描述：沟通障碍和时间管理问题。由于我和同伴的沟通风格和语言能力有所不同，导致我们在交流和理解上出现了一些困难。此外，我们的日程安排也不完全匹配，导致难以协调合作时间。

解决尝试： 为了解决沟通障碍，我们选择面对面交流、qq聊天。对于时间管理问题，我们尽量挑在没课的时候和白天进行沟通。

是否解决： qq聊天初步解决问题，如果遇上文字无法表述清楚的问题，我们直接跑到对方宿舍去沟通。在白天没课的时候交流确实更好地协调合作时间。虽然并没有完全消除问题，但成功让我们能够更顺利地进行合作。

有何收获： 我们学会了更好地沟通和协作，增强了团队合作的能力。我们体会到了团队协作的重要性，感受到了共同努力的力量，这将对我们未来的学习和工作都有着积极的影响。

• 问题3

困难描述:制作GIF，在markdown中使用GIF；在Markdown中直接插入GIF图像出现问题，Markdown本身并没有直接支持插入动画图像，vscode使用时，只能网站访问GIF。

解决尝试:使用多个GIF在线制作网站，制作清晰并且能正常运行的GIF。优快云编写时，上传GIF，完成网站访问GIF问题。

是否解决:更换GIF在线制作网站后解决

有何收获:编写时，对新事物不熟悉导致不知道怎么入手，但通过网上查找资料、讨论后，还是解决了问题。

• 问题4

困难描述：网页的交互设计较麻烦，返回顶端，跳转逻辑等，处理问题较多。在使用并不熟悉的原型设计软件下，考虑简洁性等，进行界面元素与布局设计的摸索，十分影响开发的效率。

解决尝试：在学习原型工具的基本操作后，先制作简单原型首页上试水。在由首页，编写出其他页面，进行跳转，增加各组件表格，进行布局优化。

是否解决：经过共同查找资料，并实践练习后，解决交互设计问题。

有何收获：更加熟练掌握了原型工具的使用，学习了在软件中调整细节部分，与快捷的对齐链接操作。

5.效能分析与PSP表格

5.1PSP表格

PSP阶段	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	30
• Estimate	- 估计这个任务需要多少时间	30	30
Development	原型编写	300	330
• Analysis	- 需求分析	60	60
• Learning	- 学习原型设计工具	60	120
• Pair discussions	- 结对讨论	30	20
• Interface design	- 界面原型设计	250	280
Reporting	报告	140	160
• Show	- 原型展示	20	10
• Report & Blog Writing	- 报告与博客编写	90	150
• Analysis of the problem, summary	- 问题的分析,总结	30	30
合计		570	700

5.2效能分析

• 第一次使用墨刀，不熟悉，在设计的过程中会遇到各种问题，导致设计更加花费时间
• 由于没有要求页面的具体设计，自由发挥，所以在设计过程中需要讨论如何去设计与排版
• 结对作业的难点之一就是需要双人的配合，第一次配合难免会有点问题

6.结对与评价

6.1 结对的过程与感受

1. 需求分析，划分模块

2. 任务分配

222100207王科竣：详细赛况排名、了解更多、报告框架以及博客撰写。

222100226欧景天：首页、每日赛程、报告填充内容以及博客撰写。

3. 结对照片

4. 结对的感受

王：这是一场取长补短的协作。在这个过程中我们两人不断交流、讨论和尝试。在同一楼层下，较好的完成了沟通工作，达成了初期的良好配合。两个人同时参与编写过程，相互检查并纠正错误这很好的促进了作业的顺利完成。

欧：结对作业让我体验到了与同伴合作的乐趣，通过分享知识和协作完成任务，我学到了沟通和解决问题的重要性。与同伴共同努力，我感到责任和团队意识的增强。尽管在合作过程中会遇到挑战，但通过互相支持和理解，我不断成长和提升。这次结对作业不仅带来了学习的机会，也让我更加珍惜团队合作的力量。

6.2 队友的评价

王 to 欧 ：同伴具有良好的沟通能力与实践能力，在互相的沟通作业细节时快速的达成了共识，最终顺利地完成了工作。

欧 to 王 ：虽然这次是小作业，但还是很认真积极对待，分配的任务也积极完成，很负责。
解决问题的重要性。与同伴共同努力，我感到责任和团队意识的增强。尽管在合作过程中会遇到挑战，但通过互相支持和理解，我不断成长和提升。这次结对作业不仅带来了学习的机会，也让我更加珍惜团队合作的力量。

6.2 队友的评价

王 to 欧 ：同伴具有良好的沟通能力与实践能力，在互相的沟通作业细节时快速的达成了共识，最终顺利地完成了工作。

欧 to 王 ：虽然这次是小作业，但还是很认真积极对待，分配的任务也积极完成，很负责。