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

**移不动

已于 2023-05-17 11:52:17 修改

阅读量506

点赞数

文章标签：软件工程

于 2023-03-09 22:31:29 首次发布

本文链接：https://blog.csdn.net/qq_57554093/article/details/129432698

版权

这个作业属于哪个课程	软件工程-23年春季学期
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	222000123、222000214
这个作业的目标	学习原型设计工具并设计出对应原型模型、在结对过程中提高自身团队协作能力
其他参考文献	《构建之法》、CSDN

文章目录

原型模型

原型模型链接

需求理解

NABCD模型

N（Need，需求）

明确需求：
- 一个通过图表等形式来直观显示选手信息、正式赛每日结果等的平台
- 需要直观具体，对用户友好，方便用户使用
- 平台需要实现的基本功能：选手排名、每日赛程、详细赛况、晋级图
隐形需求：
- 客户喜欢美观大方的页面设计，丰富的图文内容
- 交互友好的设计原型更受客户欢迎
- 存在部分用户不知道如何找到自己想要内容，需要引导

A（Approach，做法）

将界面分为首页、选手排名、每日赛程、详细赛程、晋级图、了解更多几个界面，通过导航栏进行互相跳转
导航栏置于页面顶部，简约美观，用户鼠标悬浮在上面时字体颜色会产生变化，有良好的用户交互体验
首页中添加了轮播图展示一些精彩瞬间画面，轮播图可以自己跳转也可以通过点击按钮进行图片的跳转
晋级图中通过使用两个动态面板进行日期的选择和相应比赛的展示，通过点击对应的比赛可以进入详细赛况界面
选手排名通过表格展示了男选手和女选手的排名信息
了解更多界面是拓展界面，可以通过这个界面了解一些关于澳大利亚网球公开赛的历史

B（Benefit，好处）

网页形式，多端可查看
简单的操作、友好人机交互
较之原网站的外网内容，对国内用户更友好
美观简约大方的外观界面，确保用户良好体验

C（Competitors，竞争）

竞争对手：
1. 澳网官方网站：资源数据丰富，基本是一手数据，成熟的页面设计，有相当数量的用户基础
2. 其他结对组的作品：基本功能类似，区别主要在于页面设计是否更美观
优势：
1. 页面简洁、操作简单、更人性化的人机交互
2. 没有冗余的操作与无关的广告内容
3. 对数据的处理更加直观可视化
4. 不需要用户登录等其他繁杂工作，用户可以直接使用，减少用户迁移成本
劣势：
1. 数据来源依赖于官方网站、无法像官网一样及时更新，且数据内容与类型也不及官方具体丰富
2. 缺少先发优势，用户基础较少，已有可替代的成熟产品
3. 对网站的运营不如其他平台，网站本身的性能与安全性比不过成熟的平台，可承担的访客量有限

D（Delivery，推广）

在自己身边的人脉关系网中推广
在如今主流的社交媒体及传播平台宣传，比如：微信公众号、B站、抖音等
可以推荐给在相关方面有一定基础粉丝的自媒体博主，帮助宣传

学习原型模型设计工具

一开始我们在纠结应该使用Axure还是墨刀，在了解了两款软件的区别和参考了上学期的学长学姐的作业之后，最终考虑使用Axure这款软件。

界面原型设计

原型设计过程

首先我们先对用户需求进行了分析，确定要实现的基本功能和拓展功能，基本功能有选手排名、每日赛程、详细赛况、晋级图，拓展功能有了解更多。

在这里插入图片描述
然后我们确定了每个页面应该具有的基本结构，每个页面应该有导航栏、巨幕，再根据不同页面对应的不同需求进行细节上的设计。

首页除了导航栏和巨幕，还添加了一个轮播图，轮播图可以自动旋转给用户展示一些精彩瞬间的画面。

选手排名界面比较简单，主要是使用表格分别展示了男选手和女选手的得分排名。

每日赛程通过使用两个动态面板实现日期滚动条和展示对应的赛程，在第一个动态面板中选中对应的日期，就可以在第二个动态面板中展示对应的赛程，然后点击对应的赛程又可以跳转到详细赛况页面展示比赛详细信息。

详细赛况通过中继器展示这场比赛中双方的得分、获胜者。

由于篇幅有限，晋级图使用动态面板的形式展示了四分之一决赛、半决赛和决赛的选手淘汰信息。

了解更多界面是拓展界面，展示了澳大利亚网球公开赛的一些历史，让用户对这个比赛有更深刻地了解。

遇到的困难及解决办法

困难：

P1：工具使用不熟练，第一次使用Axure很多操作不熟练，很多需求不知道如何实现
P2：在日期滚动条的设计上，不知道如何实现点击下一个按钮的时候实现单个日期的滚动
P3：在详细赛况的设计上，采用表格的方法记录选手对战信息耗时耗力，十分麻烦
P4：在每日赛程的展示设计上，点击赛程不知道如何跳转到详细赛程页面中展示对应信息
P5：第一次结对两人的配合不是很好，不知道如何分配相应的任务，大部分时间两个人都是自己干自己的，没有很好的进行交流协作，最后将两人的工作成果整合的时候发现两个的风格相差太大，不好进行整合

解决办法：

S1：在参照视频教程边学习边操作的过程中渐渐掌握了Axure的使用，熟悉了基本操作，也了解了如何利用动态面板和中继器实现一些复杂操作
S2：在日期滚动条的问题上，通过使用动态面板的多组状态分别展示对应的日期按钮，一共使用了三个状态；但是后面发现这样的一下子就滚动太多的日期按钮，最后通过学习找到了一种方案：就是只使用面板的一个状态，将所有日期按钮放在这个状态下，有一部分没有展示出来的可以通过点击按钮一个个滑动展示出来
S3：开始设计详细赛况信息的时候使用表格将数据一条一条地插入，但大量数据进行插入耗时耗力，而且不能插入图片这些信息；后面通过请教其他同学，了解到了中继器这个组件，于是开始采用中继器，发现应用起来更加方面，而且可以插入图片这些信息
S4：想要通过每日赛程中的不同赛况跳转到详细赛况页面中，并在详细赛况的动态面板中根据刚才点击的按钮展示对应的信息，这个操作涉及从一个页面跳转到另一个页面的动态面板，并在动态面板中展示对应信息，刚开始听起来很绕；后面通过去搜索一些相关的教程进行学习，了解到了可以通过设置全局变量的形式进行跳转，就是在点击按钮时设置全局变量，进入对应页面后，页面里的动态面板根据其带来的全局变量进行相关页面的展示
S5：在参考了其他同学是怎么合作进行结对后，逐渐了解了该如何进行分工协作，于是我们重新进行了工作的分配，先一起确定好整体的风格，然后每个人去根据这个总体的风格设计自己负责的界面，然后博客划分成几个部分，每个部分由一个人负责维护，最好整合的时候，互相检查一下对方的成果，看看有没有什么感觉不妥的地方，再一起讨论交流修改一下

收获：

通过这次的设计熟练了动态面板的灵活使用，懂得了如何使用动态面板去实现一些复杂的展示，完成对应的需求
了解了中继器的使用，也感受到了中继器在一些场景上的优势
明白了一定要多动手，光看视频学习是没有用的，眼睛学会了是不够了，工具是在使用的过程中慢慢熟练的
要多于他人交流配合，不能总是自顾自的，学会与他人协作能够大大提高工作开发的效率

结果展示

首页

在这里插入图片描述
每日赛程

在这里插入图片描述
选手排名

在这里插入图片描述
晋级图

在这里插入图片描述
了解更多

在这里插入图片描述

PSP表格和效能分析

PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	20
• Estimate	• 估计这个任务需要多少时间	30	20
Development	开发	730	1000
• Analysis	• 需求分析	30	45
• Learning	• 学习原型设计工具	90	125
• Discussion	• 结对讨论	40	60
• Design Spec	• 生成设计文档	30	30
• Design	• 界面原型设计	480	600
• Test and Improvement	• 原型测试与改进	60	140
Reporting	报告	80	100
• Achievements Exhibition	• 原型成果展示	40	60
• Problem Analysis & Postmortem	• 问题的分析和事后总结	40	40
	合计	840	1080

效能分析

对比PSP表格中的预估耗时和实际耗时，我们发现在学习原型设计工具、界面原型设计、原型测试与改进这三个模块时间差距较大

学习原型设计工具：因为是第一次使用该软件，对软件操作不是很熟悉，上手较慢，在网上搜索教程进行学习花费了大量时间。
界面原型设计：在设计的过程中有很多操作不知道如何实现，还有讨论一些细节的设计，以及在素材的搜集上花费了较多时间。
原型测试与改进：因为在测试的过程中发现有一些需求没有实现，又重新去回顾了软件的使用，对一些功能进行改进，在这个过程中花费了较多时间。