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

222000110何国铭学生 2023-03-09 22:24:08

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222000110 222000111
这个作业的目标	以澳网公开赛官网为载体，初步接触需求分析，了解NABCD模型在实际中的应用，并初步学会使用一些原型设计工具进行原型设计
其他参考文献	构建之法

1.原型地址
2.PSP表格
3.需求分析
3.1 N(Need 需求)
3.2 A(Approach 做法)
3.3 B(Benefit 好处)
3.4 C(Competitors 竞争)
3.5 D(Delivery 推广)
4.原型设计过程
4.1 原型设计工具
4.2 遇到的问题和解决方法
4.3 收获
5.原型展示
6.效能分析和结对工作
6.1任务分工
6.2过程实拍
6.3效能分析
6.4结对感受
6.5队友互评

1.原型地址

原型地址

2.PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	10
• Estimate	• 估计这个任务需要多少时间	10	15
• Analysis	• 需求分析 (包括学习新技术）	40	100
• Design	• 具体设计	400	410
Reporting	报告	60	80
• Size Measurement	• 计算工作量	5	5
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	20	20
	合计	545	640

3.需求分析

3.1 N(Need 需求)

澳大利亚网球公开赛（英语：Australian Open，简称：澳网）是网球四大满贯赛事之一。比赛通常于每年一月的最后两周在澳大利亚维多利亚州的墨尔本体育公园举行，是每年四大满贯中最先举行的一个赛事，也是最年轻的大满贯。为了方便不在赛场和电视机前的观众能够第一时间了解到比赛结果，详细的比赛得分情况，对局情况，为此我们根据需求设计了方便用户查阅比赛的网站方案

3.2 A(Approach 做法)

我们使用 axure rp10 进行原型设计，使用软件内置交互行为实现各个功能，并设计出简约风格的网页，优化用户的使用效果，提供良好的交互体验。

3.3 B(Benefit 好处)

我们的产品根据用户的需求设计，在此之上体现简约之风，抛弃糅杂的设计，使用户能够通过联网进入网站，无需学习就能享受清爽的浏览过程。各比赛的内容也会在第一时间更新。

3.4 C(Competitors 竞争)

澳大利亚网球公开赛赛况提供网站并非只用我们一家产品，作为后来者，我们能够分析前者的不足和错误之处，以用户为中心并添加自身的特点，坚持简约风格维持清爽体验。

3.5 D(Delivery 推广)

向一些具有影响力的平台或企业获取推荐资格，在合规广告位上推荐本产品。

4.原型设计过程

4.1 原型设计工具

Axure Rp10

4.2 遇到的问题和解决方法

原型设计之初

我和另一个结对伙伴都是第一次做原型设计，对于怎么做原型，原型应该展示些什么内容，该如何设计都是一知半解，摸不着头脑。特别是专门做原型的工具，由于是第一次使用AxureRP10这个软件，所以对这个软件的功能十分陌生，这也导致了我们在做整个原型设计过程中准备工作花费的时间比预期的长。好在万能的b站上有一些帮助小白快速上手的视频教程，有了这些教程再加上自己和队友的摸索，最后也算是顺利完成了原型设计。
原型设计过程中

Q1：如何实现日期导航栏的切换效果？
A1：如图所示，该日期栏的显示的最大天数只有13天，可实际上赛程日期不止13天。我们预想的设计是，通过点击左右侧的箭头来切换出未显示的日期，以达到客户需求。可该如何设计这个功能的事件处理难倒了我们。最后我们从Axure软件里自带的标签页功能得到灵感。
解决方法是，设置一个拥有不同状态的动态面板，将日期矩形放在每一个动态面板上（最大容量13），当点击左右侧箭头，将事件处理设置为显示对应日期状态的动态面板即可（如图所示）

Q2：如何在不切换页面的情况下，通过点击任意一个日期块查看不同的赛程？
A2：同样还是从Axure软件里自带的标签页功能得到灵感。
解决方法：将不同的赛程添加到动态面板上，不同的赛程对应不同状态的面板，因此对日期块添加事件处理，当点击不同的日期块时，在动态面板上显示对应状态的赛程信息（如图所示）考虑到由于切换日期查看不同赛程，显示内容过于生硬，体验感不好，因此在面板显示内容时添加出入场动画。

Q3：如何实现下拉框交互事件？
A3：在详细赛况的功能实现中有一个下拉框，选择不同的下拉框选项可以跳转到set1和set2界面，并显示详细的信息。由于下拉框是一个平台自带元件，和按钮的普通点击事件交互不同，一开始我们无从下手。后来我们通过学习了解到在下拉框有独立的交互事件，即选中项目发生改变。但是在了解到这个交互后我们还是无法得到被选项和动态面板状态之间要如何联系在一起，之后我们又了解到状态面板状态的值选项，这个值可以通过函数获取被选项的内容，并匹配动态面板的状态。
解决方法是，我们重命名状态面板状态的名称让它与下拉框的被选项名称一致，通过下拉框的选中项目发生改变交互事件，设置动态面板状态目标，在其中通过函数改变状态值，来实现界面的改变。

4.3 收获

通过这一次的结对作业原型设计，我们从用户的需求出发，学习原型设计的知识和原型设计相关软件的使用方法，培养了自我学习的能力，从零开始的新软件工具的摸索，到逐步实现简单的需求功能。明白了相似功能之间的互相联想应用。

5.原型展示

原型风格与澳大利亚网球公开赛官网的风格大体相同，整体采用蓝白色调，简约干净。该原型共分为四个页面，分别为首页、选手排名、每日赛况和晋级图。

首页（如图所示）开头展示了男单和女单冠军的人像和基本信息，首页中间展示了一张澳网场馆的图片，同时在右侧还添加了一个页面快捷跳转

每日赛程页面展示每一天的赛事，显示比赛类型(女单男单等)，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示，同时支持通过切换日期查看不同的赛程

支持点击查看详细赛况，当鼠标点击任意一个赛程时，将会跳转到另一个页面查看赛程的详细赛况，展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等

选手排名页面展示Singles Aces Leaders的排名（如图所示）

晋级图页面通过展示晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分。当鼠标移动到某一场比赛显示边框提示

6.效能分析和结对工作

6.1任务分工

222000110何国铭：负责首页、选手排名页面和每日赛程页面
222000111赖安顺：负责晋级图页面，详细赛况页面

6.2过程实拍

6.3效能分析

通过这次作业的完成过程以及对PSP表格的分析，我们发现在需求分析、包括学习新技术开发准备阶段，花费时间比预期时间有很大的差距。我们一致认为导致这种情况的主要原因是第一次接触原型设计，对于怎么进行原型设计，该如何使用原型设计工具(Axure RP)比较陌生。尽管网上有教程，但要通过教程学习到一些基本操作还是很花时间的，这也导致了我们在开发的准备阶段耗时长。但也正因为前期准备工作充分，在真正开发的时候，耗费时长与预期基本相符，后期工作也算是比较顺利。