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

222000409黄昭彬学生 2023-03-10 21:54:30

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222000409、222000221
这个作业的目标	学习使用原型工具并设计澳网原型
其他参考文献	CSDN

一、原型地址
二、NABCD模型
1、N（Need，需求）
2、A（Approach，方法）
3、B（Benefit，好处）
4、C（Competitors，竞争）
5、D（Delivery，推广）
3、模型设计
1、原型模型设计工具
2、原型设计过程和成果
2.1、明确需求和功能
2.2、学习使用设计工具
2.3、具体页面的制作
2.4、成果展示
4、困难的解决
1、背景的拉伸
2、日期列的移动
3、关于鼠标移入高亮的问题
5、效能分析
PSP表格
分析
6、结对过程、体验及评价
1、结对过程
2、结对互评
3、结对感受

一、原型地址

原型地址

二、NABCD模型

1、N（Need，需求）

选手排名
展示男女单人网球的排名，展示name、rank、matches、aces
在最上方展示男女第一的照片及信息

每日赛程
展示每一天的赛事，显示比赛类型，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示
支持通过切换日期查看不同的赛程
根据球场分块展示赛事
支持点击查看详细赛况

详细赛况
展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等

晋级图
可以通过晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分，并高亮显示晋级选手
鼠标移动到某一场比赛需要高亮或显示边框提示

2、A（Approach，方法）

明确用户与需求
基于web实现网页的开发，实现移动端和网页端的使用
网页的数据由之前爬取的数据支持
网站包括5个部分，首页，选手排行，每日赛程，详细赛况，晋级图，大部分都需要跳转，所以我们制作了导航栏并突出显示当前页面
首页包含了轮播图，让用户一进页面就可以看到网球运动的魅力。
其余页面都制作得简单清晰，好方便用户的使用。

3、B（Benefit，好处）

采用网页的形式，方便用户使用
界面分区明显，用户可以轻易上手
界面清晰整洁
无需登录注册即可使用

4、C（Competitors，竞争）

主要竞争对手：1.其它各个小组的作业
2.WTA与ATP世界网球排名网站
3.2023澳大利亚网球公开赛官网
4.澳网官方微博
5.腾讯、虎扑、懂球帝等体育网站
我方竞争力
满足用户的基本需求
界面风格简约统一，板块清晰
没有过多的弹窗广告和界面广告影响体验

我方劣势
市面上相同功能的平台较多
功能、数据较少
没有推广手段
人员劣势

5、D（Delivery，推广）

可以通过学校、班级官号进行宣传推广，反馈改进
通过短视频平台进行推广，投放广告
通过各种运动论坛进行推广

3、模型设计

1、原型模型设计工具

在Axure和墨刀中选择了Axure，并通过Axure RP9的团队项目功能进行开发

2、原型设计过程和成果

2.1、明确需求和功能

阅读完作业要求后，我们讨论了作业的需求和功能，以及页面组成。最终决定成果页面由首页、选手排名、每日赛程和晋级图四个页面组成,

2.2、学习使用设计工具

因为是第一次使用原型设计工具，所以首先学习了工具的使用，通过csdn的帖子简略学习了用法，之后就在实践与错误中进一步认识。

2.3、具体页面的制作

首先，网站一般都有导航栏，于是我们使用浮动顶部导航栏与内容栏来展示页面
由于每个页面都需要用到导航栏，于是我们将导航栏制作成为母版，使用中继器保存导航栏的页面名称，在之后需要给导航添加页面更加方便。
排名页面我们使用了表格来实现展示，当然也可以使用中继器来实现，并使用明暗交替的格式来展示，看起来比较不会单调
每日赛程页面我们使用了组合元件的方式展示一场比赛，使用动态面板的状态来改变日期对应的赛程，但由于数据多，所以所有日期的赛程都是一致的。
晋级图页面的制作和每日赛程页面相近，也是通过动态页面的状态切换来改变晋级图位置。

2.4、成果展示

首页：

轮播图展示网球运动的瞬间

选手排名：使用表格展示，明暗交替

每日赛程页面：可通过日期切换赛程，点击可查看比赛的具体赛况

在鼠标移到赛况时，显示高亮

详细赛况页面：展示得分的动态

晋级图

在鼠标移到比赛时，也会显示高亮
点击移动按钮可以移动晋级图

4、困难的解决

1、背景的拉伸

最开始使用的是图片充当背景，但图片没有拉伸的选项，在内容较多时，会超出图片的范围，后来使用动态面板，将动态面板填充背景，并设置为拉伸，但是背景在下拉时是不动的，略显奇怪。于是再次进行改进，改成了在动态面板内书写内容，让动态面板大小自适应内容，在多次改错后，背景布满整个内容，也会随着下滑而改变，问题得以解决。最后由于背景与文字不符，于是去掉了背景。

2、日期列的移动

在每日赛程中可以选择日期进行赛程的切换，由于日期过多，将其全部显示在一页内并不美观，于是就打算做日期的移动。在最初的对原型设计工具的尝试中，发现了动态面板不选定自适应内容时，超出显示部分在页面中时不显示的，于是最初的想法形成了，我们尝试通过外界的按钮移动动态面板的显示区域，但交互中的移动是改变动态面板在页面中的位置，而不是改变显示区域在动态面板中的位置，于是初版想法失败。
在首次失败后，我们想到了这么一个想法，既然移动可以改变位置，那么我们只需要移动动态面板中组件的位置就可以了，但又出现了一个问题，移动只能改变一个元素的位置，而我们需要改变所有日期按钮的位置，但我们可以移动动态面板中的动态面板，于是我们将所有按钮添加进一个动态页面，将动态页面添加到外层动态面板，移动内层动态面板，就可以将没有在显示区域中的日期按钮移动到显示区域，达到按钮移动的效果。
将效果实现后，我们又觉得动态面板的层次太多，为了改进，我们又去寻找新的方案。最后了解到可以将所有按钮组合到一起，将其看作一个组件，这样就可以直接移动组合达成效果。

3、关于鼠标移入高亮的问题

赛程的显示是用元件组成的组合显示的，作业要求移入时要高亮，最初我们认为时和导航栏鼠标悬停一样的操作，后来在实践中才发现，组合并没有形状那样直接的鼠标悬停的交互样式，无法对整个组合设置。
由于组合中有一个大矩形包围了所有的元件，于是我们将矩形的透明度调为0，置为组合的最上层，添加了矩形的鼠标悬停样式进行尝试，结果自然是失败的。
在多次的查错后，我们发现是由于矩形的透明度为0，无法在页面中显示。但矩形在最顶层，又不能遮挡其他组合元件，于是我们将矩形的填充设为空，并将其隐藏，设置组合的鼠标移入和移出的交互，在移入时显示矩形，显示欻矩形的边框，即为高亮；在移出时将其隐藏，取消高亮。

5、效能分析

PSP表格

PSP	预估耗时（分钟）	实际耗时（分钟）
计划	30	30
估计这个任务需要多少时间	30	30
开发	630	590
需求分析	60	50
学习原型设计工具	120	100
结对讨论	150	90
原型设计	240	310
原型复审	30	20
原型测试与改进	30	20
报告	100	120
事后总结	25	20
撰写博客	75	100
	合计	740

分析

经分析我们发现原型设计的效率较低，主要原因是知识的掌握，我们在学习原型设计工具的时间的分配不合理，学习得不够充分就开始设计，导致出现了很多bug，走了很多弯路，所以超出了预期时间。我们应该多花时间在学习工具的使用上，对工具的掌握度高了，设计效率才会提升。这次实践中对于axure中的许多元件都是在摸索中学习使用的，前期使用更多的是基础元件，后面熟悉元件后设计速度就快了起来，所以技术的掌握很重要，我们需要重视。

6、结对过程、体验及评价

1、结对过程

在设计过程中，我们主要通过线下上课闲余时间和线上qq等方式沟通
讨论决定了每个人的分工，每个人制作一个页面完后再沟通需要修改的地方
在deadline前对于还尚缺的地方再进行重新分配进行
并使用axure团队进行同步
下方是讨论贴图，以及线下讨论图

2、结对互评

222000409的评论

这是第一次与其合作，确实很认真努力，但是似乎对于首页以及页面形象有种执念，在deadline前一天才开始分配页面的制作，导致我心慌慌，希望其在下次结对作业二的时候能分清主次，优先完成基础内容。排除这点，其想象、动手的能力也是很强的。在合作设计期间我还是收获颇丰的。

222000221的评论

高中的老同学了，还是熟悉的配方，配合还是那么的轻松愉快。
他的学习能力很强，Axure我很多搞不定的操作都是跟他学的，他也很热心教我怎么操作。
总的来说是个执行力非常强的好队友，跟他合作总是那么愉快。有他在心里就有底了，非常可靠的队友。

3、结对感受

结对编程给我们最大的感受就是在分工的速度不一，且观点不好统一，刚开始我们认为只要每个人负责一部分，最后统合就行了，没想到最后出来的效果因为审美关系导致不融洽，在统合的时候需要改变风格。同时因为速度和侧重点的不同以及分工的不合理，会导致我的任务完成了，他的任务还没完成，导致我很急，作业进展较慢，停留在我结束的点，需要进一步分工，这就需要我们在最初的分工时由速度和侧重点做出适合的分工，这样想必能发挥出1+1>2的效果。这次结对编程对我们也是一种进步，对于沟通交流思考的程度更上一层楼。