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

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	222100118、222100121
这个作业的目标	设计一套方案，向客户推销
其他参考文献	《构建之法》、即时设计新手教程

原型地址

原型地址

NABCD模型

“NABCD”是由Need、Approach、Benfit、Competitors、Delivery五个单词的首字母组成，分别指需求、做法、好处、竞争、推广五部分。通过这五部分，可以清楚简明的把项目的特点概括出来。

N:需求（Need）

世界游泳锦标赛，是由世界游泳联合会主办的最高级别的大型国际性游泳赛事，主办机构是国际泳联总会。第一届世界游泳锦标赛于1973年举行，1978年至1998年间举办间隔年数屡有变化，自2001年起恢复每2年举行一届。2024年游泳世锦赛于2月2日至18日在卡塔尔多哈进行，我们将继续沿用这个主题来实现此次作业。上次我们的输出结果只是通过简单的文字来显示，不够直观、具体，对用户不够友好。因此在本次作业里，我们希望能设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等。平台应具备以下功能：
• 选手排名
只需完成Women 1m Springboard决赛的排名，需要展示Overall Rank，Country，Athlete，Age，Points
• 每日赛程
展示每一天的赛事，显示比赛类型(男子1m跳板，女子10m跳台等)，参与选手和比赛时间
支持通过切换日期查看不同的赛程。支持点击查看详细赛况。
• 详细赛况
展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等。

A:做法（Approach）

• 制作简洁的首页，导航栏可以导航到选手排名、每日赛程、详细赛况等界面。
• 选手排名界面直观的展现出选手的排名及落后分数
• 每日赛程直观地给出赛程图
• 由于需求中详细赛况与排名重复，赛况将展示热点新闻、精彩一刻等。

B:好处 （Benfit）

• 最大的好处就是使用中文界面
• 此外我们的界面简洁明了，使用清新的渐变色
• 图片简介大方，动画效果流畅，让用户体验丝滑

C:竞争（Competitors）

• 对比原网站，我们简洁的设计更加符合国内的市场。
• 比起繁复的原网站，我们的网站拥有丝滑的动画，给人不一样的体验。
• 考虑到关注该体育运动的大多是中老年人，我们的网站几乎没有外语阅读障碍。

D :推广（Delivery）

• 通过社交平台推广，营销“国人自己的赛事网站”等特殊标签获得热度。
• 平台建设抽奖活动，通过首页的“订阅直播”，“网上购票”等服务累计积分，抽奖获得赛事手工周边等。
• 请营销号在“详细赛况”的热点新闻板块编写吸引人的标题，“如：印度选手称场馆水质不如恒河水，遗憾退赛”，将标题和链接推送到微信公众号或其他平台，利用人的好奇心增加网站流量。

PSP表格

PSP	预估耗时（分钟）	实际耗时（分钟）
计划	30	20

• 估计这个任务需要多少时间2040 • 讨论分析、选择工具6050 • 学习《即时设计》使用方法300300 • 具体设计200280 • 原型设计220250 • 修改美化100100 报告6060 • 事后总结, 并提出过程改进计划6060 合计10501160

使用的原型工具

经讨论我们使用的原型工具是“即时设计”，因为之前没有原型设计的经验，所以选择了这款比“墨刀”更适合新手的原型设计工具，不需要下载软件的特点也可以让我们随时在不同设备上打开网页就能设计。

原型设计过程及成果

1、首页设计导航栏与轮播封面，导航栏可以点击跳转各个界面

首页下方也提供了各个页面的跳转方式

2、选手排名采用淡出的动画效果，为用户徐徐展开他们期待的排行榜

3、每日赛程为用户直观地体现了比赛的日程

4、赛况界面提供了搜索比赛的功能，还展示了热点新闻和精彩一刻的界面

5、总体的原型设计展示

遇到的困难及解决办法

• 1
  • 困难描述：对于各个组件间的组合采用拖动方式组合，各个组件无关联，排列都靠人眼去辨别，非常杂乱，不同组件间重叠互相影响一度让开发处于停滞阶段。
  • 是否解决：是。
  • 解决尝试：将组件通过左边栏的组件表移动到画板中，组件间才有了层级结构，组件可以单独制作，保存到自己的组件库后组合到我的界面里，同级组件间有了默认的排列方式，不会重叠交叉，官方也有组件库，也有社区组件供我们选择，不过我们的设计也尽可能保持了原创。
  • 收获：学会这一点后对开发效率的提升很大。
• 2
  • 困难描述：动画效果的参数一直不知道怎么调，总是做不出缓缓加载出来的那种动画效果。
  • 是否解决：是
  • 解决尝试：参考了官方的动画参数，将原型设计为“滚动”，增加“入场动画”，添加自定义过渡动画，添加延迟和缓动曲线使界面具有动画效果，不过由于并不是专业的设计人员，动画效果做得可能不是很美观。
  • 收获：学会了为组件添加动画效果的方法，能做出想要的动画效果。
• 3
  • 困难描述：图片的添加只能原始的添加，想要做出圆角，平行四边形等各种几何图形的图片展示框就没办法了。
  • 是否解决：是
  • 解决尝试：通过选中图片，双击即可修改图片形状，点击图片变角可以将图片的边角改为圆角，通过右侧详细参数的调整，还可以将图片调整为任意想要的图形，添加描边、阴影等操作也同样可以在右侧的工具栏中进行调整。
  • 收获：学会了对图片的各种参数调整。
• 4
  • 困难描述：想要通过下拉选择的交互为每日比赛选择日期，但是不知道怎么设置。
  • 是否解决：是
  • 解决尝试：参考了官方的教程，通过官方的小组件库添加下拉菜单和下拉选择为每日比赛界面添加了下拉菜单，可以通过下拉菜单来选择查看哪一天的比赛安排。
  • 收获：学会了通过官方组件添加一些交互功能。
• 5
  • 困难描述：多个组件组成的ui部分不知道如何批量复制，重复构造的话工作流程繁琐。
  • 是否解决：是
  • 解决尝试：通过查阅官方教程，右键选择创建为引用组件，就可以对多个组件构成的ui部分进行批量复制，减少了工作量，提高了效率。
  • 收获：学会了通过创建引用组件来进行批量操作。

结对过程和队友评价

分工安排：

222100118：
对整体UI的设计，赛况和赛程安排的设计和实现，原型交互功能的实现

222100121：
进行首页和排名的设计和实现，对动画效果的实现和图片的调整

交流图片：

项目初期的聊天记录：

项目中的讨论：

互相评价：

222100121：
赵大伟同学的学习能力强，效率很高。在本次结对作业中能很快地学习完工具教程，为我们的设计提供了很多的新思路、新方法，对我来说这是一次很好的结对体验。

222100118：
洪恒辉同学有极强的领导和学习能力，沟通能力、工作效率极高。并且在本次结对作业中起到了领导组织全局的作用，为作业选择了工具，为总体的设计提供了框架并完成了很多重要部分。对我来说，与洪恒辉同学结这是一次很好的学习之旅。