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

052006130谢思雄学生 2023-03-10 18:58:16

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222000429，052006130
这个作业的目标	学习原型图的制作；熟悉掌握原型图工具的应用；锻炼组队开发的团队意识
其他参考文献	《构建之法》

1 原型地址
2 NABCD模型
2.1 Need
2.2 Approach
2.3 Benfit
2.4 Competitors
2.5 Delivery
3 原型设计过程
3.1 原型设计工具
3.2 原型设计过程
3.2.1 需求分析
3.2.2 学习原型设计工具
3.2.3 原型设计过程中的一些问题及解决方法
4 结果汇报
7 效能分析和PSP表格
6 队友互评
7 一些感受

1 原型地址

原型地址

2 NABCD模型

NABCD（由Need、Approach、Benfit、Competitors、Delivery的首字母组成），指的是开发软件的需求、做法、好处、竞争、推广这五部分。

2.1 Need

澳大利亚网球公开赛是网球四大满贯赛事之一，比赛通常于每年一月的最后两周在澳大利亚维多利亚州的墨尔本体育公园举行，是每年四大满贯中最先举行的一个赛事，也是最年轻的大满贯。

但是由于该比赛是在国外举办的比赛，所以对于该比赛的网站是全英文的网站，对于英文不好的人想要跟进该比赛的具体情况比较不方便。所以我们考虑将这些信息整合分类，开发出一个新的网站以便人们查看。

2.2 Approach

将多个功能分开，一个功能一个页面，对于一些有关联的页面考虑采用跳转的方式。

2.3 Benfit

开发的该网站可以让人们便于查看澳大利亚网球公开赛的具体信息。

2.4 Competitors

在此次开发中主要的竞争对手是班内的其他队伍，但还有一个竞争对手是本来就已经存在的澳大利亚网球公开赛网站。最基本的竞争关系是此次结对作业的比分情况，一个隐藏的竞争关系是是否能顶替掉原本就存在的澳大利亚公开赛的网站。

2.5 Delivery

最初的推广是通过发布csdn博客来推广我们做出来的网站。

3 原型设计过程

3.1 原型设计工具

Axure RP 10

3.2 原型设计过程

3.2.1 需求分析

在设计之初，我们花费了一些时间来对客户提出的需求进行一些理解，例如：网页界面的大致形状，页面间的跳转等。我们大致将需求按功能分为分为五个页面：首页、每日赛况、选手排名、详细赛况、晋级图。

首页

1.比赛期间的一些新闻

2.比赛的介绍

3.导航栏以实现页面跳转

每日赛况

1.比赛期间每日的赛程、比赛的一些基本情况等

2.可通过切换日期查看不同的赛程

3.点击查看详细赛况

选手排名

1.男女选手的Singles Aces Leaders的排名

2.选手的Name,Rank,Matches,Aces；

详细赛况

1.每场比赛内的小比赛的具体情况，例如：比赛成绩、参赛选手、每个小场比分和获胜选手、最终比赛的获胜选手；

2.通过点击下拉框实现展示不同set的具体信息

晋级图

1.选手的晋升路线

2.高亮显示晋级选手

3.鼠标移动到比赛要高亮或显示边框提示

3.2.2 学习原型设计工具

本次作业，我们采用Axure RP 10作为我们的原型设计工具。但在此之前，我们并没有过多接触过这个软件，甚至没有进行过原型设计。所以我们需要花费较多的时间来进行原型设计的学习。但好在有csdn可以帮助我们对这个软件进行学习，让我们的学习之路事半功倍。

3.2.3 原型设计过程中的一些问题及解决方法

Q1：如何实现每日赛况的日期导航栏的左右移动？

A:首先我们采用动态面板，动态面板一共有两层，其中第一个state是Q1到Q10的，第二层是其余的，然后我们在动态面板的左右两侧加入了两个箭头的SVG图片，点击箭头图片，可以切换动态面板的状态层，同时我们设置了状态切换时采用Swing格式从而成功模拟左右切换的功能。

Q2：如何实现每日赛况日期导航栏按下某一个日期后跳转到对应日期的赛程情况？

A：此处我们是通过Axure RP 10本身自带的Dynamic Panel来实现的。我们将每一天的赛况存为一个State（此处为了方便，只存了三个State）。

然后对日期导航栏的按钮加一个点击事件，点击后跳转到对应的State页面。此处，还可以改变页面切换的效果，此处展示用的是Slide Right。

Q3：如何实现下拉框的交互事件？

A：此处还是使用动态面板来实现该功能，当下拉框发生改变时，切换动态面板。刚开始的时候不知道该如何修改下拉框的交互事件，直到看到了csdn上的一篇博客后，根据该博客的引导，才完成了下拉框的交互事件的实现。

该实现过程的本质就是if-else语句，通过判断语句的判断使得选了某个下拉框的值后跳出对应的动态面板。即：当下拉框的的值发生改变后，去判断值是否为set1，当是set1时，动态页面跳转到set1对应的动态面板；当是set2时，动态页面跳转到set2对应的动态面板。

通过这个功能的实现，让我们了解到了在交互事件的设置时除了一些基础的点击跳转页面外也可以通过类似if-else语句的方法实现不同情况跳转到不同页面的功能。

Q4：如何实现鼠标移动到指定位置高亮展示？

A：一共有两个控件分别是透明矩形和阴影矩形，其中当鼠标划入所选区域后阴影矩形放置到最后一层，此时透明矩形在上方。当鼠标退出后空白矩形执行事件将阴影矩形调至到画布顶层。从而实现高亮展示

4 结果汇报

首页

每日赛程

赛事日程导航栏左右滑动

点击进入详细赛况

选手排名

详细赛况

晋级图

7 效能分析和PSP表格

Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
计划	10	10
• 估计这个任务需要多少时间	10	10
开发	240	325
• 需求理解	20	15
• 学习原型设计工具	0	20
• 结对讨论	30	40
• 界面原型设计	120	130
• 界面原型改进	40	60
• 编写博客	30	40
合计	250	315