这个作业属于哪个课程 | 软件工程-23年春季学期 |
---|---|
这个作业要求在哪里 | 结对第一次作业–原型设计 |
结对学号 | 222000123、222000214 |
这个作业的目标 | 学习原型设计工具并设计出对应原型模型、在结对过程中提高自身团队协作能力 |
其他参考文献 | 《构建之法》、CSDN |
原型模型
需求理解
NABCD模型
N(Need,需求)
- 明确需求:
- 一个通过图表等形式来直观显示选手信息、正式赛每日结果等的平台
- 需要直观具体,对用户友好,方便用户使用
- 平台需要实现的基本功能:选手排名、每日赛程、详细赛况、晋级图
- 隐形需求:
- 客户喜欢美观大方的页面设计,丰富的图文内容
- 交互友好的设计原型更受客户欢迎
- 存在部分用户不知道如何找到自己想要内容,需要引导
A(Approach,做法)
- 将界面分为首页、选手排名、每日赛程、详细赛程、晋级图、了解更多几个界面,通过导航栏进行互相跳转
- 导航栏置于页面顶部,简约美观,用户鼠标悬浮在上面时字体颜色会产生变化,有良好的用户交互体验
- 首页中添加了轮播图展示一些精彩瞬间画面,轮播图可以自己跳转也可以通过点击按钮进行图片的跳转
- 晋级图中通过使用两个动态面板进行日期的选择和相应比赛的展示,通过点击对应的比赛可以进入详细赛况界面
- 选手排名通过表格展示了男选手和女选手的排名信息
- 了解更多界面是拓展界面,可以通过这个界面了解一些关于澳大利亚网球公开赛的历史
B(Benefit,好处)
- 网页形式,多端可查看
- 简单的操作、友好人机交互
- 较之原网站的外网内容,对国内用户更友好
- 美观简约大方的外观界面,确保用户良好体验
C(Competitors,竞争)
- 竞争对手:
- 澳网官方网站:资源数据丰富,基本是一手数据,成熟的页面设计,有相当数量的用户基础
- 其他结对组的作品:基本功能类似,区别主要在于页面设计是否更美观
- 优势:
- 页面简洁、操作简单、更人性化的人机交互
- 没有冗余的操作与无关的广告内容
- 对数据的处理更加直观可视化
- 不需要用户登录等其他繁杂工作,用户可以直接使用,减少用户迁移成本
- 劣势:
- 数据来源依赖于官方网站、无法像官网一样及时更新,且数据内容与类型也不及官方具体丰富
- 缺少先发优势,用户基础较少,已有可替代的成熟产品
- 对网站的运营不如其他平台,网站本身的性能与安全性比不过成熟的平台,可承担的访客量有限
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表格中的预估耗时和实际耗时,我们发现在学习原型设计工具、界面原型设计、原型测试与改进这三个模块时间差距较大
学习原型设计工具:因为是第一次使用该软件,对软件操作不是很熟悉,上手较慢,在网上搜索教程进行学习花费了大量时间。
界面原型设计:在设计的过程中有很多操作不知道如何实现,还有讨论一些细节的设计,以及在素材的搜集上花费了较多时间。
原型测试与改进:因为在测试的过程中发现有一些需求没有实现,又重新去回顾了软件的使用,对一些功能进行改进,在这个过程中花费了较多时间。
过程总结
结对过程
分工细节:
王惠:负责设计首页、选手排名页面和博客撰写
曹斯杰:负责设计晋级图、详细赛况、每日赛程页面
结对细节:
结对感受和评价
王惠的感受:
结对对于团队的帮助是巨大的,刚开始对于结对不是很熟悉所以感觉结对效率好像没有个人高,但在后面的学习和配合中逐渐了解到了结对的好处,可以进行优势互补,提升团队效率。
王惠对曹斯杰的评价:
曹斯杰同学在进行团队任务的时候认真踏实,没有拖延的情况,一直在按着进度表稳步进行,在遇到不会的难题时能够快速去学习新的技术并分享,是一位优秀可靠的合作伙伴。
曹斯杰的感受:
结对合作给我的感受主要是能够互相吸取经验,减少一些不必要的错误与时间浪费。虽然一开始磨合会比较慢,有时候也没法准确向对方表达自己想法。但是磨合好以后,彼此对于结对的项目都有了比较通透的了解。
曹斯杰对王惠的评价:
王惠同学在结对过程中,积极讨论,对结对项目也很上心,能够让我对开发过程中遇到的一些问题有新的理解;同时,其为人乐观和善,乐于听取别人意见,因此,整个结对过程还是较为轻松和谐的。是一位优秀的合作伙伴。
参考教程