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

222000322许影杰学生 2023-03-10 17:47:47

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222000322许影杰 & 222000323岳晓涵
这个作业的目标	设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等
其他参考文献	《构建之法》、bilibili、CSDN、博客园、简书、知乎

1.原型地址
2.需求分析
2.1 N（Need，需求）
2.2 A（Approach，做法）
2.3 B（Benefit，好处）
2.4 C（Competitors，竞争）
2.5 D（Delivery，推广；Data，数据）
3.原型模型设计
3.1 原型设计工具
3.2 遇到的困难及解决方法
4.原型设计过程
4.1 需求分析
4.2 UI风格选定
4.3 具体内容的填充
4.4 设计组件（展示部分）
4.5 设计交互（展示部分）
5.原型成果展示
5.1 首页
5.2 选手排名
5.3 每日赛程
5.4 详细赛况
5.5 晋级图
5.6 了解更多
6.结对总结与效能分析
6.1 结对成员
6.2 结对过程
6.3 结对分工
6.4 分工合作截图
6.5 队友互评
6.6 结对感受
6.7 PSP表格
6.8 效能分析
7.总结

1.原型地址

Australian Open 结对原型

2.需求分析

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

2.1 N（Need，需求）

澳大利亚网球公开赛是网球四大满贯赛事之一，比赛通常于每年一月的最后两周在澳大利亚维多利亚州的墨尔本体育公园举行，是每年四大满贯中最先举行的一个赛事。人们需要一个直接、具体、操作友好的平台，能够直观、清晰地获取比赛信息、选手信息等。
对于不甚了解澳大利亚网球公开赛的人群，我们专门设计了一个介绍澳大利亚网球公开赛基本信息的栏目，帮助人们快速了解这项比赛产生兴趣，进而使用我们的产品。

2.2 A（Approach，做法）

从技术上来说，我们采用前后端分离形式进行网页端开发，为产品后期分布式架构以及发展多端化服务打下坚实的基础。
从用户角度上来说，我们团队本身对乒乓球、篮球、网球等体育项目很有兴趣，对相关的赛事也有所关注，因此我们能够清楚地明白用户的需求，以用户的眼光看待我们的产品，使得产品切实的满足用户需求，同时提供友好的交互界面，给予用户良好的使用体验。

2.3 B（Benefit，好处）

本产品采用B/S架构，用户无需下载，通过浏览器即可浏览资源，同时网页端采用响应式布局，使得用户在PC端以及移动端都能拥有较好的使用体验。
本产品拥有良好的用户交互界面，用户能够轻松地获取想要的信息。同时我们使用轮播图进行热点推送，展示往届精彩集锦，激发用户对比赛的兴趣。

2.4 C（Competitors，竞争）

作为网球四大满贯赛事之一，市面上不可避免地存在许多预与之相关的产品，但其UI设计风格大多单调、死板。与之相反，我们的产品界面UI采用明亮柔和的色彩与设计，并伴有图片、视频等多种资源表现形式，使得界面元素更为丰富、充满活力，符合体育赛事激情热血的主题。这使得我们产品与市面上的其他产品区别开来，有较强的市场竞争力。

2.5 D（Delivery，推广；Data，数据）

可以通过在各体育论坛（如虎扑、腾讯体育等）中投放广告或发布推文，来吸引关注体育的圈内人士；也可以请写手、博主在知乎、小红书等社区媒体发布软文、请抖音博主发布视频，利用其“明星效应”进行引流，吸引圈内圈外人认识并关注我们的产品。
在产品上线一段时间后，我们可以通过在线活跃用户量来评估用户对产品的接受度。同时可以通过用户评论及建议对产品进行更新，使其变得更加友好，进一步满足用户的需求，从而更好的占据市场。

3.原型模型设计

3.1 原型设计工具

Figma原型设计工具

在这里插入图片描述

3.2 遇到的困难及解决方法

Q1：不知如何实现晋级图单个比赛实例的悬停高光效果。

解决尝试：尝试用另个实例进行替换但发现在交互中无法选择交换效果，而选择打开叠加时总会出现偏移的情况，无法达到满意的效果。
解决方法：通过将实例设为组件，接着为这个组件添加一个新的变体，此时，原型与变体之间便可选择使用交换交互，达到预期的效果。
收获：掌握了将大量小的部件整合为一个组件的方法，同时对组件的修改能够作用于每一个组件实例，大大方便了之后的开发以及修改。

Q2：由于晋级图的选手数量很多，若将四轮比赛的晋级图放在一张图上，整张图便十分庞大，需要在界面上拖动浏览，这样的实现在观察第四轮或者第三轮比赛时还没有什么问题，但半决赛的两场比赛之间的距离过大，影响用户体验。

尝试解决：以两场比赛的晋级图为一组，做成三个Frame，通过点击按钮，执行打开叠加操作，将需要的晋级图覆盖在显示晋级图的区域，但不知什么原因，新覆盖的晋级图会发生偏移，同时上下的滚动会出现问题。
解决方法：经过了很多尝试，最终从制作轮播图的方法中获得了灵感；轮播图是将多个Frame外层嵌套一个Frame，最后再生成组建集，通过延时对各组件进行切换（PS：只有在组件里才能使用替换为这个操作，可以将Frame在不叠加的情况下替换）所以我们采用了这种方法，把图片替换为我们制作的晋级图，完美解决问题。
收获：耐心才是必杀技，这个问题花了贼多时间，我们都打算把这个问题标成未解决写进博客里面了，但是皇天不负有心人，还是自己摸索出了解决办法，所以遇见bug还是要多想想，万一就解决了呢

Q3：每日赛程中多个交互（日期导航栏点击和悬停变色、点击切换，赛程跳转具体比赛等）需要实现，但是如果仿照上一个问题的解决办法，就无法实现日期导航栏的交互，使页面的交互性大大降低，无法很好地给客户展示功能。

尝试解决：我们尝试了三种办法来解决这一问题：
1、采用最简单的导航到操作，即点击按钮后将整个页面替换，但是经过运行后，我们发现在这种解决办法下，页面的交互显得十分生硬，与我们期望的效果相差甚远，同时采用这种办法就意味着我们要制作14张页面（而不是Frame）这在设计上毫无美感可言
2、采用轮播图的形式来解决，采用这一解决办法后，单日赛程之间的切换变得十分顺滑，但是日期导航栏就被锁死了，完全没有悬停变色和按钮变色，同时13到14的日期没办法滚动出来，这一个瑕疵我们还是无法接受
3、通过队友的一句可以试试封装成组件的提醒，让我萌生了新的想法，我尝试了将每一天日期的悬停效果封装成一个组件，再把日期导航栏中每一天日期替换为该组件，并把日期导航栏封装成组件，在第二次尝试的基础上实现了悬停效果，但是日期导航栏和点击效果还是无法实现，由于时间问题我们只能将此作为备选方案，如果最终仍无法解决，则以此为展示
解决方法：通过查看滚动效果的动画，发现引用的组件实体的动画指向的是被引用的组件，而非本身，所以我们取消将日期导航栏封装成组件，将日期导航栏的Frame复制14份，在相应天数上换成点击后的颜色，此时每一个日期导航栏的滚动指向自身，点击效果则通过类似轮播图的机制实现，最终解决了问题
收获：在合作时还是多要和队友交流，很多设计和交互实现的灵感都是来源于队友，合作时思维的碰撞还是很有必要的
吐槽：感觉Figma的社区支持并不完善，很多问题都找不到对应的解决方案或者说是我面向百度编程的能力还有待提高。

4.原型设计过程

4.1 需求分析

通过NABCD框架进行需求分析，决定设计首页、选手排名、每日赛程、详细赛程、晋级图、现场直播、了解更多一共七个界面。

4.2 UI风格选定

我们对市面上主流的体育赛事网站进行了调研，最终决定采用明亮柔和、青春活力的UI风格，以凸显网球赛事主题。

4.3 具体内容的填充

首页方面，我们选择了左右而非上下结构来展示我们的图片和文字，是想让用户能够在进入页面时可以同时获取图像与文字两方面的信息，而不用通过滚动页面来获取完整的信息（页面见成果展示）
同时在需求的基础上，我们增加了了解更多和现场直播的页面，在了解更多页面，我们采用了块状结构来分块展现澳网的介绍，同时采用轮播图向用户展现往届的选手风采（页面见成果展示
对于需求中的内容，我们比较注重其中交互的实现，在此基础上可以向客户很好地展示我们的产品，所以我们设计了很多组件来实现想要的效果

4.4 设计组件（展示部分）

晋级图组件
轮播图组件
日期组件
下拉框组件
详细赛事组件

4.5 设计交互（展示部分）

悬停高光
详细赛况下拉选择

在这里插入图片描述

日期导航栏

总体交互展示

5.原型成果展示

设计风格：采用明亮柔和的配色以及UI设计，给人一种清新灵动，充满活力的感觉，切合体育赛事的主题

5.1 首页

一个成功的网站首先要有一个设计优良的首页，才能抓住用户继续访问的兴趣，我们采用了大号文字和大号图片的设计样式，使用户在进入网站之后就有了视线的聚焦，同时第一步就知道了这个网站的内容，而圆形的图片增加了画面的饱满感，与字体和按钮的方正相得益彰.

5.2 选手排名

作为一个竞争性的国际网球赛事，人们最关心的自然是比赛的结果，那么一个展示选手排名的界面便很有必要。
为此我们设计了一个界面用于展示选手排名以及具体的得分情况，同时将其入口设置在了导航栏中显眼的位置，使得用户能够方便的查看比赛选手的排名信息。

选手排名

5.3 每日赛程

我们设计了一个页面用于展示每日赛程。在页面的头部有一个日期导航栏，用户可以通过选择相应的天数来查看当天的比赛安排。日期可以拖动，也可以通过点击“左右箭头”进行水平滚动。
考虑到有些用户可能有想要格外关注的选手，我们为比赛提供了收藏关注功能，用户可以通过每日赛程了解到自己喜欢的选手的比赛场次并选择收藏，网站会在比赛开始前对用户进行提醒，避免用户错过比赛的精彩瞬间。

每日赛程

5.4 详细赛况

用户能够通过点击比赛名片中的“View All”选项进行跳转查看比赛的详细赛况，在这里详细记录了选手的得分情况以及原因，可以帮助错过比赛的用户快速了解比赛经过，也可以用于复盘比赛。

详细赛况

5.5 晋级图

我们设计了一个晋级图界面用于展示比赛选手对阵情况，通过导航栏进入晋级图界面首先展示决赛对阵情况，用户可以通过按钮进行选择，查看想要的对阵信息。

晋级图

5.6 了解更多

考虑一些用户或许是第一次了解到澳大利亚网球公开赛，我们设计了一个图文并茂的页面用来展示澳网的基本信息，帮助用户快速了解澳网，引发其对澳网的兴趣。

6.结对总结与效能分析

6.1 结对成员

222000322许影杰 & 222000323岳晓涵

6.2 结对过程

结对截图

6.3 结对分工

许影杰：晋级图页面设计，选手排名组件设计、详细赛况组件设计、关于界面素材收集、页面设计等。
岳晓涵：主页设计、每日赛程页面设计、页面交互设计、页面跳转设计、主题素材收集、页面设计等。

6.4 分工合作截图

使用原型模型工具时的非摆拍结对照片

部分QQ聊天截图

腾讯会议截图

宿舍较近，大部分问题都是当面交流。

6.5 队友互评

许影杰 to 岳晓涵：在设计原型时晓涵积极合作，能够清晰具体地表述出自己的想法，这使得整个结对合作过程十分顺利。同时晓涵的行动力很强，能够迅速且精确地完成分配的任务，很让人放心，是个不可多得的合作伙伴。

岳晓涵 to 许影杰：在整个设计过程中影杰给了我很多灵感，他在讨论时能清晰地指出当前设计中一些问题，很多是我未曾注意到的，同在合作中也能迅速，完美地完成分配任务，让合作很快跨过了磨合过程，与他本次合作十分愉快。

6.6 结对感受

许影杰：比起单人作业，完成结对任务需要考虑的问题更多，要考虑分工、考虑对方的设计与自己的设计风格是否统一以及双方时间上的安排等等。当然，结对带来好处也很多，首先当然是工作量的减少、其次是遇到问题可以一起讨论解决，不用自己一个人死磕，再者就是可以从对方身上学到很多东西，像是一些技术或者是自己没想到的解决方案，同时两人的激情讨论也能更好的激发我的工作热情。

岳晓涵：结对作业如果合作得好，可以减轻很多单人实践中的压力，可以在一份时间中产出超过两份的成果，但是如果磨合得不好，想法冲突，显然会事倍功半。当然，本次合作属于前者，合作中思想的碰撞让我们呈现了如今的作品，两人之间相互的帮助也让问题的解决远比单人作业中的快，在效率提高的情况下，可实现的想法也多了很多。

6.7 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	25
• Estimate	• 估计这个任务需要多少时间	20	25
Development	开发	1225	1750
• Analysis	• 需求理解	30	30
• Learning	• 学习原型设计工具	120	180
• Groupdiscussion	• 结对讨论	215	220
• Design	• 界面原型设计	60	120
• Realizing	• 具体实现	800	1200
Reporting	报告	80	110
• Size Measurement	• 计算工作量	20	30
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	60	80
	合计	1325	1885

6.8 效能分析

通过完成PSP表格，我们发现在实现原型设计时存在效率低下的情况，耗费时间远超预期时间。
讨论后发现，我们都有遇到一个相同的情况，那就是想到一个需求就直接上手，看了一两个教程就开始尝试，实现一点算一点，耗费大量时间之后却发现实现效果并不理想、教程效果并不能实现需求或者说有更“优雅”的实现方式，最后还得推翻重做，浪费了大量时间。
正所谓“磨刀不误砍柴工”，在之后的作业中，我们在做任务前应当做好充分的准备工作，切忌盲目开始，乱搞一通。