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

[222000421莫梓民]

这个作业属于哪个课程	福大-软件工程实践-w班
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222000421、222000422
这个作业的目标	找到你的小伙伴、设计原型、将原型以网页形式发布、撰写博客
其他参考文献	《构建之法》、Axure Rp中文学习网

目录

• 一、作业链接
• 二、PSP表格
• 三、效能分析
• 四、NABCD模型
• N：需求
• A：做法
• B：好处
• C：竞争
• D：推广
• 五、原型设计
• 原型模型设计工具
• 设计过程
• 原型设计成果
• 遇到的困难及解决方法
• 六、结对
• 过程图片
• 心得体会
• 队友评价
• 222000421：
• 222000422:

一、作业链接

第一次结对作业

二、PSP表格

PSP	Personal Software Process Stages	预估耗时(分钟)	实际耗时(分钟)
Planning	计划	25	30
· Estimate	· 估计这个任务需要多少时间	25	30
Development	开发	300	500
· Analysis	· 需求理解	60	100
· learning	· 学习原型设计工具	60	80
· Design scheme	· 设计方案	30	30
· Design	· 具体界面设计	120	240
· Design Review	· 设计复审	30	50
Reporting	报告	140	190
· Write Blog	· 博客撰写	100	150
· Postmortem & Process Improvement Plan	· 事后总结, 并提出过程改进计划	40	40
	合计	465	720

三、效能分析

通过对PSP表格进行分析，完成部分过程所花费得时间高于预计时间，其中具体界面设计这一部分花了预计耗时的两倍时间才完成，远远超出了我们的预计，原因在于虽然规划了时间学习原型设计工具Axure Rp，然而在进行实际操作的过程中，仍然存在对于部分元件，模块的使用不了解，不熟悉等问题，设计过程中时常需要搜寻资料，查看教程，以至于花费了更多的时间；其次，在设计过程中，完成了部分功能后，突然又有一个或许更好的实现方法出现在脑子里，于是又重新设计，反反复复，时间的花费就更大了。

四、NABCD模型

N：需求

澳大利亚网球公开赛是网球四大满贯赛事之一，比赛通常于每年一月的最后两周在澳大利亚维多利亚州的墨尔本体育公园举行，是每年四大满贯中最先举行的一个赛事，也是最年轻的大满贯。在本次作业里，我们希望能设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等。基础功能主要包括以下内容：选手排名、每日赛程、详细赛况、晋级图。

A：做法

我们通过使用Axure Rp 10来完成平台的设计和实现。根据需求将其分为七个部分
1.网站首页：含有五个菜单项，可以方便的跳转到选手排名、每日赛程、晋级图、精彩集锦、澳网介绍这五个界面。
2.选手排名：通过表格来显示数据，具有下拉框，可选择查看不同类型比赛的排名
3.每日赛程：可根据时间地点来选择查看不同日期的比赛，点击即可查看详细赛况
4.晋级图：每局获胜者高亮显示，点击可快速跳转到详细赛况。
5.详细赛况：可查看得分过程及其时间
6.精彩集锦：通过链接可查看B站上的澳网精彩集锦
7.澳网介绍：插入图片和文本框对澳网进行介绍

B：好处

我们的网站便于用户更快速的浏览澳洲网球公开赛的内容，让用户有更快速，更便捷的方式浏览澳网的详细信息。除此之外，用户可以在本网站快速浏览精彩集锦，操作简单，一目了然。

C：竞争

我方产品的竞争优势在于操作清晰明了，界面设计人性化；可以快速筛选浏览需要的信息；添加了B站链接，可以在本产品内查看精彩集锦，方便快捷。
我方产品劣势在于权威性不足，虽然数据是爬取澳网官网来获得，但仍然不够权威。

D：推广

通过不同的社交软件或平台来进行产品推广
1.CSDN
2.QQ,微信等社交软件
3.抖音等短视频平台
4.B站发布相关作品

五、原型设计

原型模型设计工具

原型模型设计工具：Axure Rp 10

设计过程

首先，我们共同对本次作业进行需求分析，大致为：设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等。基础功能主要包括以下内容：选手排名、每日赛程、详细赛况、晋级图。
接着我们开始讨论选择哪个原型模型设计工具来实现功能，综合分析之后，选择了Axure Rp 10来完成本次作业。
紧接着开始分工，一人负责选手排名、每日赛程部分，一人负责详细赛况，晋级图的设计。大致内容如下：
选手排名部分采用表格的方式来展示数据，整体页面模仿澳网官网以蓝色、白色、灰色设计，简约大气；
每日赛程通过设置每个按钮的点击交互事件来实现不同日期的赛况显示；

原型设计成果

1、首页
首页添加了导航菜单，方便我们快速查看其它页面，同时使用动态面板实现图片轮播，通过图片的方式，也能实现菜单的效果，同时也能手动切换图片。使用轮播的方式展示了澳网人气选手。

2、利用表格，展示选手排名、比分等元素

3、具体赛况可以通过上方的滑动选择框，选择查看对应日期的比赛，并显示在下方，可点击进入具体赛况

4、具体赛况

5、晋级图界面可以通过点击对应比赛进入具体赛况，并且在鼠标经过时高亮显示边框

6、我们自己增加了精彩集锦和澳网简介界面，方便不了解网球的人们快速了解澳网
在精彩集锦界面，有轮播图和集锦视频

澳网简介

遇到的困难及解决方法

Q1：在每日赛程部分，日期按钮过多，超出屏幕范围

这个部分的设计，我首先想到的是做个菜单栏与日期一一对应，设计过程中感觉这种样式的设计给用户的观感并不好，于是重新设计，选择使用多个按钮产生交互事件来显示不同日期的赛事情况，此时问题出现，日期按钮过多，超出了屏幕范围。问题出现后，我尝试将每个按钮的样式调小，但并不美观，于是想模仿澳网官网的设计，初始只显示一部分的日期。日期的左右分别有按键使日期组向左或向右移动来达到控制显示日期的功能，但由于是新学习使用Axure Rp，对于部分元件，模块的使用不了解，不熟悉，无法实现此功能，最后在同学的的帮助下，解决了问题，大致如下：新建两个按钮，分别添加点击交互事件，目标选定为日期组合成的组块，通过点击按钮控制其使其平移，从而显示不同的日期。

Q2：在晋级图界面，鼠标停留时高亮显示或者显示边框的处理

刚开始设计时忽略了这个需求，当页面设计得差不多时，再回头进行这个需求的设计时发现了困难。一开始，我们寻求于设计交互，想要看一下鼠标移入的交互选项中是否能改变边框的颜色，进行了多次尝试后，我们没有找到设置边框的方式，本次尝试以失败告终。后来，我们尝试了通过修改透明度的方式，在鼠标移入后将透明度调高，通过这个方式来实现高亮的效果，但是后来我们发现这个方法的效果并不是特别好，所以我们开始探索其他方法。我们尝试了通过在矩形的底部增加一个稍微大一点的矩形，并改变其边框颜色，将其置于底层并隐藏，当鼠标移入时显现，这个方法效果还行，但是操作相对复杂。我们最后使用了用直线画一个矩形框套在矩形上并对其进行隐藏，当鼠标移入时显现，鼠标移出时隐藏，从而实现鼠标停留时显示边框的效果。

Q3：轮播界面的实现

我们在设计中途提出了一个想法，设计一个主页，同时在主页通过一个轮播图实现导航的效果。但是由于之前没有进行原型设计的经验，我们不知道如何进行。于是，我们通过上网查找和不断尝试，通过创建动态面板，并在交互设计时，在载入时设置面板状态，实现图片的按时轮播。

Q4：精彩集锦界面视频的播放

我们设计了精彩集锦界面，于是便想在我们的界面中播放视频。通过之前的学习，我们学会了图片的轮播，但是我们还是没有接触过视频的插入。于是，我们通过上网查找资料，得知可以通过内联框架，输入视频的url，实现视频的框架。我们通过上网查找视频，并将之嵌入到界面之中。

六、结对

过程图片

心得体会

之前作业大多是单人作业，这次结对作业是一种全新的体验，两人共同讨论，共同决定，共同设计，共同完成一个项目，这些过程都是宝贵的经历，未来或许会有更多的项目需要多人完成，这次的经历或许能给我提供一些帮助，希望未来越来越好。

队友评价

222000421：

第一次结对过程是相对轻松愉快的。杭杭同学高效得完成了我们之前分配好的任务，在设计前积极对本次作业进行分析，使我更加了解NABCD模型，并且在后续模型的完善工作中给出了许多宝贵的建议。

222000422:

这是第一次结对，选择了相对较为熟悉的莫梓民同学。在设计过程中，梓民不仅出色的完成了其分工部分的内容，而且对界面进行了美化，使我们的产品使用观感更好，竞争力更强。在讨论环节提出了许多有建设性的提议，是个不错的好搭档。

[2023年福大-软件工程实践-W班]

整体风格舒适，每日赛程的原型，未能实现下方对战选手根据上部的选择而改变（做一两个示意即可，但是没有），晋级图加矩形框的强调效果挺不错的，赞！