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

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	022000808 052101528
这个作业的目标	两人合作完成多哈世锦赛网站的原型设计
其他参考文献	构建之法

PSP表格

Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
计划	30	30
• 估计这个任务需要多少时间	30	30
开发	720	780
• 需求理解	10	10
• 学习原型设计工具	30	60
• 结对讨论	60	60
• 界面原型设计	500	560
• 测试完善	120	120
报告	30	30
• 计算工作量	10	20
• 事后总结, 并提出过程改进计划	20	20
合计	780	860

原型地址链接

原型地址

NABCD模型

N（Need 需求）

• 用户希望能够以更加直观友好的方式看到多哈世锦赛中选手排名、每日赛程、详细赛况等信息。

A（Approach 做法）

• 为了满足用户的需要，我们制作一个多哈世锦赛网站。首先设计它的原型。该网站由首页、排名、赛程、赛况等页面组成。当需要显示的信息过多时，对其进行折叠处理。做到引导明确，页面简洁，信息详细直观。

B（Benefit 好处）

• 用户可以在有交互设计的界面上随时查看自己所需的信息。

C （Competitors 竞争）

• 竞争者主要是其他完成这项作业的同学。
• 我们的优势是在满足了用户的显性需求的同时，增加了解更多页面，吸引用户对于多哈世锦赛的兴趣。
• 我们的劣势在于其他同学设计的网页可能更加美观。

D （Delivery 推广）

• 部署到云服务器上，用户可以通过网址来访问网站。

原型设计

设计工具

• figma具有丰富的插件库以及具有强大的线上合作能力，所以我们选择了用figma进行原型设计。

设计过程

3.1 首页

• 由导航栏、精彩瞬间、获奖时刻三个部分组成
  
• 图片通过组件变体的方式，以延迟交互实现幻灯片轮映的效果

3.2 Rank页面

• 用统一的导航栏进行页面之间的跳转
• 选手之间的排名采用明暗交替的设计
  

3.3 Result页面

• 这个页面是在Rank页面的基础上完成的，由于完成Rank页面时群里还没有通知，所以将这两种页面都保留了
• 比Rank页面多了Pts Behind一列，以及赛程的选择
• 使用组件变体实现赛程的切换
  

3.4 Daily页面

• 由于赛程共有20个，全部直接展示会对寻找目标赛事造成妨碍
• 按日期折叠，用户可以直接选择需要查看哪天的赛程
  
• 使用组件变体实现这一效果
  

3.5 ExtraPage页面

• 通过figma原型设计中的智能动画实现界面的跳转，来实现一个展开的动画效果,学队友做了一个游泳的动画
  

成果

• 幻灯片式显示图片，展示精彩时刻和获奖风采
  

• 在导航栏悬停时，有下划线效果起到提醒用户的作用
  

• 赛程的切换
  

• 每日赛事显示，悬停时有高亮效果
  

• 了解更多，展开和折叠
  

结对过程

分工

022000808：首页、每日赛程、详细赛况切换赛程的部分

052101528：选手排名、详细赛况、

结队细节

遇到了什么困难及如何解决

• 困难1

  找队友这是第一个困难，正好舍友都选的是另一个老师的课，也没有认识的同学。好在成功在课程群里找到了队友，组好了队伍。

• 困难2
  在做extra Page界面的时候，想法做一个展开的动画，但是不是很会，每次动画呈现的不是拉伸效果而是渐变，后面想到网络上的教学应该有这种简单的动画，看了视频学会了。

• 困难3
  下载这个软件的时候，由于之前不知道是由于什么设置还是win11系统的问题，软件兼容性有问题，打开桌面版是乱码的，后面就通过网上查询以及询问了figma中文版社区人员得以解决。

• 困难4
  一开始觉得只有静态的图片，网页显得有点单调。于是想要在首页实现一些动态效果，但不知道该从什么地方下手。找了一些关键词，但提供的方法需要用户手动进行拖动，不符合我的想法。继续查了一些资料后，了解到可以使用组件来实现，主要是利用figma的智能动画功能，提供不同组件变体的切换以实现动态的效果。

评价

052101528：队友很有责任心，超级的认真，实力强大，负责了很大一份的工作量，很多不懂得询问得时候帮助了很多,很有耐心。

022000808：都说万事开头难，队友非常靠谱，先做好了排名页面，也确定了网页的主色调，使后续的网页风格基本保持一致，加快了工作进度。