文章目录
原型模型
需求理解
NABCD模型
N(Need,需求)
- 用户需求: 用户希望平台能够通过图表等形式来直观显示选手信息、正式赛每日结果等。且应包含选手排名、每日赛程和详细赛况等基础功能。
A(Approach,方法)
- 界面可视化:提高用户使用舒适度最直观的一点就是拥有图形化界面,通过在页面上设计图片、图标加文字的形式给以用户最直观的视觉感受。
- 添加交互组件:只有可视化的界面是不够的,还不足以满足用户交互的需求。在页面上添加按钮、下拉框等交互组件,满足用户交互。
- 页面分页:将所有的业务堆积在一个页面中去展现,会显得平台杂乱无序。而将平台内容按功能进行分离不仅更简洁美观,也提高了交互。
B(Benefit,好处)
C(Competition,竞争)
- 竞争对手:
- 世界游泳运动官方网站: 不论是资源或技术都有着绝对的优势
- 别组结对作品: 功能需求相同,只是具体实现略有差异
- 如何竞争:
- 尽可能地满足用户需求,从用户使用的角度出发设计相关功能。
- 对用户的需求做适当的拓展业务,使平台更具功能性。
- 竞争优势:
- 直观简洁的页面设计,满足用户直观需求
- 多种交互组件的使用,提高用户的交互体验
D(Delivery,推广)
学习原型模型设计工具
界面原型设计
原型设计过程
在参考了世界游泳锦标赛的平台后,我们结合用户需求将平台页面分为一下所示:
OVERVIEW: 这是用户输入网址后进入的index页面,在这里用户可以对平台进行总览,还可以看到一些比赛的简介。这个页面的设计较为简单,主要就是一些文字、图片的展示以及上面的导航栏中与其他页面的交互功能。

SCHEDULE: 这个页面展示的是比赛的时间安排,设计了鼠标移入移出时比赛栏的进度条变化,提供用户更简洁美观的交互。同样的导航栏中也设计了与其他页面的交互。


RESULT: 这个页面展示的是比赛的结果,各运动员的信息以及比赛成绩,可以点击下拉列表查看不同比赛的成绩的成绩以及运动员信息。


MEDAL TABLE: 这里展示的是各个国家的奖牌数量统计。

遇到的困难及解决办法
遇到的困难:
- P1:这是第一次尝试产品的原型设计,之前完成一个项目都是直接上手的比较粗暴,这次要先设计反而不知道要从哪下手。
- P2:对于墨刀这款软件我们之前并未接触过,刚开始不能很好地使用这款软件,对于我们想要的效果,设计出来的却是大有出入,不符合我们的预期。
- P3:在设计result网页时,我们还不了解动态组件,所以刚开始设计出来的页面十分不具美感,没有下拉列表的功能,每次点击页面时都会存在一大片空白。
- P4:在使用墨刀的第二天,我们发现无法对平台再进行修改,除非升级墨刀,这一度使我们想放弃这个软件而去使用Axture。
- P5:虽是团队协作的,但是一开始我们并没有很好地去交流或者说彼此可能知道对方的意思了,但其实还是有点出入的,导致第一次各自实现的内容都没有达到对方的预期。
- P5:不知道如何合理地组合某些元件成为一个组合,导致每次想要修改一些小细节的时候都很难找到对应的元件,还得进行很多步拆组操作,并且不合理的组合会导致每次拖动组件的时候不是自己想要的效果,需要撤销操作,无疑是增加了设计难度
解决尝试
- S1:一同讨论后,我们决定先借鉴世界游泳锦标赛官网的内容,从用户需求出发设计平台。
- S2:网上有大量对于墨刀软件如何使用的指南,在学习了一番后再上手设计已经是有点手到擒来的感觉了,后续的设计也是越来越轻松且越来越符合预期。
- S3:针对这个问题我们又去学习了动态组件,明白了如何使用动态组件制作下拉列表,最后也是成功地为result页面实现了对于比赛结果上拉下拉的功能。
- S4:经过上网查找和对无法使用的原因分析,我们发现原来是所建的画布太多了,于是我们又将平台重新设计在了一个画布上。
- S5:这次之后我们的讨论就变得丰富了,对彼此想实现的内容也更加清楚,实现的过程也更加轻松。
收获:
- 1.本次实践使我们学到了更多关于原型设计的知识。
- 2.使我们大致掌握了对墨刀这个软件的使用,不论是基础的排盘还是各种动态组件的使用都更加得心应手了。
- 3.而且这次的团队协作也使我们明白了,相互合作最为重要的就是沟通交流,这不仅可以帮助我们清楚彼此的职责和能力,还能增加成员之间的理解和信任。
PSP表格和效能分析
PSP表格
| PSP | Personal Software Process Stages | 预估耗时(分钟) | 实际耗时(分钟) |
|---|
| Planning | 计划 | 30 | 30 |
| • Estimate | • 估计这个任务需要多少时间 | 30 | 40 |
| Development | 开发 | 1800 | 1440 |
| • Analysis | • 需求分析 | 50 | 30 |
| • Learning | • 学习原型设计工具 | 360 | 360 |
| • Discussion | • 结对讨论 | 120 | 180 |
| • Design Spec | • 生成设计文档 | 120 | 90 |
| • Design | • 界面原型设计 | 480 | 540 |
| • Test and Improvement | • 原型测试与改进 | 180 | 120 |
| Reporting | 报告 | 120 | 150 |
| • Achievements Exhibition | • 原型成果展示 | 60 | 60 |
| • Problem Analysis & Postmortem | • 问题的分析和事后总结 | 60 | 60 |
| 合计 | 3410 | 3100 |
效能分析
对比PSP表格中的预估耗时和实际耗时,我们发现在开发、界面原型设计这两个模块时间差距较大
- 开发: 初次接触墨刀对于软件的使用不是很熟悉,开发过程中又查阅学习了相关知识。
- 界面原型设计: 讨论内容,收集相关信息花费了较多的时间
过程总结
结对过程
分工细节:
姚宇杰: 负责schedule页面设计,以及攥写博客
郭俊杰: 负责overview、result、model table页面设计
结对细节




结对感受和评价
- 姚宇杰的感受与评价:在与郭俊杰同学结对的过程中,我感受到了结对合作带来的乐趣,两个人相互讨论发表各自的观点,最终达成共识,一同实现这个平台的原型。他在合作过程中展现出的出色技术功底和对墨刀软件极快的上手能力,促进了我们这次合作任务的圆满完成。这次合作也使我们之间建立了更加融洽的团队关系,十分期待下周平台具体实现时与他的再次合作。
- 郭俊杰的感受与评价:在这次结对任务的过程中,和姚宇杰同学的分工合作使原本繁琐复杂、不知从何下手的任务变得井然有序、条理清晰,我们两人分配好各自的任务后便开始着手对项目进行原型设计,在设计的过程中我们也对各自遇到的问题进行了探讨,在合作的过程中他展现出了高效的解决问题能力,总是能对问题进行分析,并提出合理高效的解决方案,在这次合作中我们培养出了融洽的团队关系,我相信这对于下次实现设计原型的项目代码作业会有一定的帮助,同时我也期待在下周的作业当中继续与他合作。