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

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	052106114杨必烨 052106112林黄骁
这个作业的目标	完成原型设计，阅读构建之法，完成博客撰写
其他参考文献	《构建之法》，墨刀官方文档

1.原型地址

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

2.原型设计工具

墨刀

3.原型设计结果

3.1设计思路

在这次结对作业中，要求我们两人组队进行网页原型设计，在工作初期，我与黄骁同学先对原型的风格进行讨论，最后敲定蓝色的简约风格来作为我们的总体风格，风格敲定后，进行任务分工，由必烨同学进行首页、选手排名和精彩瞬间的设计，每日赛程和详细赛况则交给黄骁同学。
所以我们的原型设计分为五个模块：首页、选手排名、每日赛程、详细赛况和精彩瞬间。

• 首页：在首页的设计中，使用轮播图的形式，展示了来自世界各地的游泳健将们的风采，用图片的形式展示世界游泳锦标赛的标志，并且在底部添加了一个导航栏，用于跳转至其他页面
• 选手排名：选手排名则采用表格的形式展示，包括：名次、国家、姓名、年龄、分数。
• 每日赛程：在每日赛况的设计中，有一个下拉菜单用于选择日期，以展示当天的赛况，内容包括：比赛时间、比赛项目、比赛类别，以及详细信息的按钮
• 详细赛况：在详细赛况的设计中，采用表格的形式展示比赛信息，包括：排名、国旗的标志，运动员的照片、姓名、年龄、分数、以及与前一名相差的分数。
• 精彩瞬间：在这个界面的设计中，采用轮播图的形式，展示比赛中的高能片段，使网站更加有趣，更有体验感

3.2结果展示

1.首页

用轮播图的形式展示图片，在底部添加了一个导航栏，在选择时会有光标。

2.选手排名

用表格的形式展示，画面简洁美观。

3.每日赛况

有一个下拉菜单用于选择日期，以展示当天的赛况。

4.详细赛况

采用表格的形式展示比赛信息，包括：排名、国旗的标志，运动员的照片、姓名、年龄、分数、以及与前一名相差的分数

5.精彩瞬间

用轮播图的形式展示。

4.NABCD模型

4.1 需求（N)

给用户提供一个简约友好的页面以查看赛事情况，并且尽可能的友好和美观

4.2 做法（A)

将原型设计分为四个模块：首页、选手排名、每日赛况、详细赛况。并且各个模块中组合组件，使得设计更加具有层次，思路更加清晰

• 首页：在首页中采用轮播图的形式，，采用标签跳转其他界面，让页面看起来更加整洁，直入主题，吸引用户的兴趣，给用户更好的体验。
• 选手排名：采用表格的形式，让信息一目了然，并且方便一次查看多个选手的信息，更加便利。
• 每日赛况：在每日赛况的选择中，设计一个选择日期的下拉菜单，让用户可以对自己感兴趣的比赛进行查找。
• 详细赛况：采用表格的形式，展示选手的各种信息，并附上图片，让页面更加灵动，相比于普通的表格的苍白，增添一点色彩。
• 精彩瞬间：采用轮播图的形式展示比赛的相关画面，使用户更有体验感，仿佛身临其境。

4.3 好处（B)

• 使用清晰简洁的风格，页面更加美观。
• 用表格的形式展示信息，更为便利
• 用轮播图的形式展示比赛的相关信息，吸引用户的兴趣。

4.4 竞争（C）

竞争对手：其他小组

• 优势：
  我们采用图片的形式展示信息，让页面更加整洁，用户体验感更好。并且在设计过程中，我们通过复合各种需要的组件，使设计更加模块化，让设计思路更加清晰，设计过程更加顺利，得到的设计产品也更好上手，使用难度跟底
• 劣势：
  更高级功能没有实现，比如赛况的筛选等等。

4.5 推广（D）

• 在微信上向朋友推荐。
• 社交软件上介绍产品，进行推荐

5.困难

1.对工具的不熟悉
问题描述：初次接触墨刀，需要一定时间来适应其界面和操作方式，特别是对于我们这种没有使用过类似工具的人来说。
是否解决：是
解决收获：学会了一种新的网页设计工具，提高了自己的设计能力和效率。

2.团队协作：
问题描述如果是多人协作设计一个网页模型，我们遇到协作和沟通方面的困难，如何共享设计稿、如何协调各成员的工作等。
是否解决：是
解决收获：提高了团队协作和沟通的效率，加强了团队的凝聚力和合作能力。

2.团队协作：
问题描述如果是多人协作设计一个网页模型，我们遇到协作和沟通方面的困难，如何共享设计稿、如何协调各成员的工作等。
是否解决：是
解决收获：提高了团队协作和沟通的效率，加强了团队的凝聚力和合作能力。

3.布局的问题
问题描述：在设计过程中，可能会出现元素布局错乱或者重叠的情况，导致页面显示混乱。
是否解决：是
如何解决：使用规范化的布局，使用网格系统或者对齐工具来确保页面元素的排列整齐有序，避免布局混乱。

4.美观的问题
问题描述：选取的颜色搭配可能不够协调，影响整体的视觉效果，甚至会影响用户体验。选用的字体可能不够清晰或者不适合用于特定的场景，影响文字的可读性。使用的图标或图片可能分辨率太低或者不清晰，影响页面的美观程度。元素的大小可能不统一，导致页面显得不够整洁或者不够美观。
是否解决：是
如何解决：选择合适的配色方案，通过在线配色工具或者参考其他网站的配色方案来调整颜色搭配。然后使用清晰易读的字体，并确保在不同设备上显示效果良好。选择分辨率高、清晰度好的图标和图片，或者通过矢量图标的方式来解决这个问题。并且在设计过程中保持元素大小的一致性，可以通过设定统一的尺寸或者使用同一种样式来实现。
5.实现效果的困难
问题描述：如何在页面中动态显示选手排名信息而不影响其他赛事选择框的布局。我们最初尝试的方法是通过给赛事选择框添加事件来实现，但这种方法比较繁琐，而且容易出现布局混乱的情况。
是否解决：是
如何解决：通过与朋友的讨论，我们意识到应该采用更加简洁和美观的实现方法。通过页面跳转的方式来显示选手排名信息。这样不仅能够解决布局问题，还能够提高用户体验，让页面更加清晰和易于操作。

6.PSP表格和效能分析

6.1 PSP表格

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

6.2 效能分析

我们可以首先从 PSP 表格进行分析，我们的实践基本上是比预估时间少很多的，这得益于我们团队对具体使用的工具有先前的了解，以及同为宿舍友的高效沟通。沟通是最影响效能的因素之一，我们在这部分减少了很多的障碍。

我们认为，我们这次实践是相对成功的。

7.结对过程

7.1 图片展示：

7.2 队友评价

052106112 林黄骁

完成了本次实践中每日赛况和详细赛况的原型界面设计，markdown 和杨必烨一起编写，工作量上相对均衡，同时负责团队的工时监督以及作业完成概况，积极推动沟通解决问题，没有赶进度也没有拖延，同时在工作期间互相勉励。

052106114 杨必烨

是一个值得信赖的队友，他拥有比较完整的原型界面设计经验，同时比较清楚整个团队沟通流程，我们的沟通非常顺利，这也是我们提前完成的原因之一。在和他的结对过程中，我们实际上不像是在完成一份工作，更像是一场简单娱乐轻松的游戏。同时其对本次作业的时间规划非常合理。