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

222000101白文成学生 2023-03-10 11:35:38

这个作业属于哪个课程	<软件工程-23年春季学期>
这个作业要求在哪里	<作业要求的链接>
结对学号	<222000101,222000106>
这个作业的目标	<学习使用原型设计工具、学会设计原型>
其他参考文献	《构建之法》、Pixso学习网

一、学习《构建之法》
NABCD 模型
N：需求（Need）
A：做法
B：好处
C：竞争
D：推广
二、成果展示
1.选手展示
2.每日赛程
3.详细赛况
4.晋级图
三、原型设计
链接原型
1.原型工具
2.原型设计中遇到的困难以及解决方法
Q1:如何将超出页面大小部分的内容实现为滚动效果
Q2:如何实现鼠标悬停时，比赛边框高亮效果
Q3:如何提高原型修改时的效率
3.效能分析和PSP表格
PSP表格
效能分析
四、结对感受与评价
1.结对过程
2.结对感受与评价

一、学习《构建之法》

NABCD 模型

N：需求（Need）

澳大利亚网球公开赛是网球四大满贯赛事之一，比赛通常于每年一月的最后两周在澳大利亚维多利亚州的墨尔本体育公园举行，是每年四大满贯中最先举行的一个赛事，也是最年轻的大满贯。我们希望能设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等。
1、选手排名：分别显示男女的排名，需要展示Name,Rank,Matches,Aces，即显示运动员的姓名、排名、参赛场次和得分总数。
2、每日赛程：展示每一天的赛事，并且显示比赛类型(女单男单等)，比赛场地，选手，且获胜者姓名加粗显示；并且可以通过上方导航栏查看不同的赛程；支持点击某场比赛查看详细赛况。
3、详细赛况：展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等。
4、晋级图：可以通过晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分，并高亮显示晋级选手；鼠标移动到某一场比赛需要高亮或显示边框提示。
5、拓展功能：在满足总的设计思路和用户需求不变的前提下，尽量发挥自己的想象能力，设计出一个交互友好的原型。

A：做法

原型使用Pixso进行开发，具体实现上采用web形式开发，通过网页直观地查看澳大利亚网球公开赛的选手排名、每日赛程、详细赛况、晋级图。技术上使用前后端分离的框架，前端使用vue框架进行开发，后端使用springboot技术。

B：好处

前端和后端使用的框架比较成熟
采用web网页形式，用户比较熟悉
界面清楚明朗，观看效果好

C：竞争

竞争对手：
澳网官方网站:其他人也一定会推出能够查看赛事的产品。
我方优势：
界面简单，功能明确，用户浏览体验更佳
开发效率高，维护成本低
操作方便，用户无需进行注册即可查看
数据显示多样化，用户上手快捷
我方劣势：
数据少，不如澳网官方网站数据丰富
界面设计不够澳网官方网站精细
知名度小，用户数少，不利于后期的结果反馈

D：推广

通过b站等APP发布宣传视频，在各大平台上进行推广
通过QQ和其他社交软件进行发文推广
推荐给朋友亲人进行推广

二、成果展示

1.选手展示

展示选手排名。(最好选右边导航栏的适配宽度)

2.每日赛程

展示每日赛程。点击赛程图片，可以进入详细赛况。

3.详细赛况

4.晋级图

展示晋级图，可以有高亮显示。

三、原型设计

链接原型

使用时请点击右上角100%导航栏下的适配宽度

1.原型工具

Pixso

2.原型设计中遇到的困难以及解决方法

Q1:如何将超出页面大小部分的内容实现为滚动效果

在设计中我们发现，页面是一个固定大小的画布（1920 x 1080）,如果需要展示的内容超出了画布的大小，则将不再被包含在画布里，而是凸显出去，十分的突兀。
为了解决这个问题我们将画布原型中的溢出滚动属性设置为垂直滚动。

但是这样做的话，又发现有背景图片的页面在页面滚动后，无法铺满页面，会留下背景空白，本来尝试将背景图片拉伸至和超出容器部分的组件一样高度，但是这样做会使背景图片严重失真，大大影响了美观性。最后我们发现将背景图片中的“滚动时固定”选项勾选后，就能做到页面中的fixed定位效果，完美解决了问题。

Q2:如何实现鼠标悬停时，比赛边框高亮效果

在Pixso中为用户提供了组件变体的操作，可以将两个结构相同的组件设置为一个组件集，然后在添加交互事件时，将触发事件设置为悬停时，将操作选为变体切换即可实现。

但在实际操作中我们发现，软件对于悬停时的判定有BUG，导致实际效果会有边框闪烁的情况，十分不稳定。
所以我们改换思路，将悬停，转变为鼠标移入和鼠标移出两个事件，两者状态互相转化，这样做就不会出现边框闪烁的情况，解决了问题。

Q3:如何提高原型修改时的效率

在设计中，总是遇到前面设计好的原型部分，在实际显示中与预期标准不适配，修改时要将相同部分的原型全部进行修改（如排名的列表中的每一项，以及赛况详情的列表每一项），我们做出20项的列表后，发现大小与页面不适配，如果要修改大小的话，要将原型中的每一个元素的大小都重新设置（文本，图片，直线等），重新定位，并且每一项都要进行修改。
在经过一次又一次的重复操作后，我们发现Pixso中提供的组件效果可以大大避免这种情况，只需要将一个标准列表项设置为组件，其他项用组件的实例，如果后续需要修改，只需要修改组件原型的属性，组件实例也会得到相应的修改，原来需要20次的修改，现在只需要一次，大大提高了修改效率。

3.效能分析和PSP表格

PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟)	实际耗时（分钟)
• Analysis	• 需求理解	30	25
• Prepare	• 准备工作	35	30
• Development	• 学习界面原型设计工具	60	90
• Design Spec	• 原型设计	120	240
• Design Review	• 结对讨论	40	40
• Design	• 美化设计原型	60	90
• Coding	• 撰写博客	50	60
	合计	485	575