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

[022101320张亿]

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第一次作业——原型设计
这个作业的目标	<学习使用原型设计工具、学会设计原型>
其他参考文献	构建之法，Axure 教程

目录

• 1.原型链接
• 2.PSP表格
• 1. PSP表格
• 2. 效能分析
• 3.NABCD模型
• N：（Need）需求
• A：（Approach）做法
• B：好处
• C：竞争
• D：推广
• 4.说明使用的原型设计工具，原型设计过程
• 工具：AXURE RP9
• 原型设计过程
• 5.结果汇报
• 5.1原型展示
• 2.遇到的困难及解决
• 6.结对心得
• 1.结对细节
• 2.​​​​​​​分工细节
• 3.相互评价
• 4.结对感受

1.原型链接

原型地址

2.PSP表格

1. PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	15
• Estimate	• 估计这个任务需要多少时间	20	5
• Analysis	• 需求分析（包括学习新技术）	190	150
• Comprehend	• 理解需求（包括学习新技术）	190	150
• Design Spec	• 生成设计文档	50	35
• Design Review	• 设计复审	30	20
• Learn Axure	• 学习Axure	50	120
• Design	• 具体设计	80	100
• Panel Discussion	• 小组讨论	200	250
• Axure Development	• Axure 开发	110	300
• Test	• 测试	110	80
Reporting	报告	120	120
• Conclusion	• 总结	50	50
• Write Blog	• 编写博客	50	50
	合计	1270	1445

2. 效能分析

由于此前与结对队友均无原型开发设计的相关经验、对NABCD模型的不了解，我们采取了边学习边设计的方法完成原型设计。由于沟通和空闲时间上的差异我们遇到了许多困难导致影响了效率。我认为这是由于初次开发经验的不足，未能养成良好的团队沟通习惯，因而导致团队沟通浪费了许多时间。尽管出现了许多问题，但是由于原型设计以其中一人的方案为标准、原型实现则是共同完成，因而也提升了效率，我想这次的作业使得我们积累了许多经验。
经分析我们发现原型设计的效率较低，主要原因就是对相关知识的掌握不足，以及原型设计的经验不足，导致多次推翻重做，超出了预期时间。我们认为改进方法就是多花时间学习，掌握AXURE的更多使用方法，提高设计效率。本次实践我们在没有充分学习的基础上就开始了设计，对AXURE的使用仍然停留在基础组件，更多像是在制作ppt。

3.NABCD模型

N：（Need）需求

A：（Approach）做法

• 我们小组使用Axure进行设计，主页添加了一些自动轮播图片来吸引用户，我们共设计了四个功能，“选手排名”、“每日赛况”、“详细赛况”、“赛事历史”。

在主页，添加了一些自动轮播图片来吸引用户
针对导航栏，我们采用移动色块来展示鼠标与导航栏的交互，鼠标在导航栏中移动色块将跟随移动，鼠标移出导航栏色块将回到原来位置。
针对选手排名，我们采用表格。
针对每日赛程，我们添加了日期下拉列表，允许用户获取相应比赛的详细赛程。
针对赛事历史，我们则使用图片的动态展示，当鼠标移入图片时将显示历史年份，点击图片将展开图片并展示信息。

B：好处

Worldaquatics赛事，参加的选手众多；每天会举行很多场小组赛。因此，用简单的文字结果来展示选手信息和赛程结果是非常麻烦的。本系统在赛事数据的基础上，采用丰富的图表来展示各种各样的赛事信息，并可以与用户进行交互，为用户查看赛程提供了良好的体验，最大的好处就是满足客户需求。

C：竞争

优势：
页面简约精致，基础功能人性化设计，增加了有趣的表现。
我们的附加功能，尽显人文色彩
上端导航栏固定，并设计了简便的交互，方便用户定位到目标页面
交互逻辑简明，便于客户使用
只展示关键信息，模块化分组，更加直观
没有广告，体验良好
劣势：
平台只能支持网页形式访问，不支持移动端

D：推广

1.我们可以通过高效率的CSDN传播法，同时在赛事进行期间于小红书、微博等社交平台发推广博文并在文末宣传我们的平台，能很快的让目标用户知道我们的产品，并进一步传播。

2.将完善后的项目向各大应用平台推广，通过投放广告来维持运营及相关宣传。

4.说明使用的原型设计工具，原型设计过程

工具：AXURE RP9

使用自带的团队项目进行协同设计，团队项目提供互斥修改，页面内同时完成原型与文档，需求逻辑一目了然。

原型设计过程

1.轮播图

图片通过开发者工具下载下来，合成、调整图片的尺寸，将图片上传到动态面板的不同状态，为动态面板设置状态改变时不同情形的交互，同时在右侧通过原点展示轮播到第几张图片，允许用户点击展示相应的图片。

2.选手排名

从赛事官网获取相应数据，以表格来展示选手的各项信息，用户可以直观地查看比赛排名。

3.每日赛程（希望能够快速直观地查看任意日期的赛程信息，并能了解获胜方）

设计下拉列表共用户选择要查询的某一天的赛程，以中继器表格展示每一天的赛事信息，用户可以点击event details来获取某一赛事的详细信息。

4.详细赛况（希望能够查看某一场正式赛的赛事信息）

展示比赛的成绩，包含本场比赛参赛选手，每场比赛的得分情况和获胜选手，最终比赛的获胜选手等。

5.结果汇报

5.1原型展示

• 导航栏
  

  

  为每个页面设置跳转选项，考虑到与用户的友好交互，添加了鼠标进入时的提示以及移出时的归位。
  

• 主页
  

  

• 选手排名

  

• 每日赛程

  

• 赛事历史

  

  
  

  

2.遇到的困难及解决

困难1：第一次接触原型设计软件，不懂如何选择、使用软件。

解决思路：在本次实践之前，我们从未接触学习过原型设计，依照作业的要求，采用Axure RP9原型开发工具，在确定好了要使用的软件之后就是学习使用软件了。Axure是历史悠久的产品经理必备工具，功能齐全，交互方式多样，模板资源最丰富，基本上你想要的效果都可以实现，同时其上手难度也相对难一些。我们在B站上找到AXURE的教学视频，学习基础使用，动态交互等。

困难2：对原型设计软件开发不熟悉，尽管经过了初步的网课学习，但在设计过程中也会遇到设计样式与所需不同的情况。

解决思路: 在设计过程中，发现各组件的样式是会相互影响的，如在设计中继器表格的交替换色时，换色效果一直没有显现，后来查询相关的资料才知道是中继器表格矩形本身的颜色影响了交替换色效果。

困难3：网页的动态交互效果设计是设计过程中的一个难点，为了尽量达到美观与友好的交互效果，学习与制作所花的时间往往较大。

解决思路: 原先导航栏采取弹性动效，但在页面切换时效果并不好，后面学习别的网站展示的效果，采取鼠标移入移出使色块移动的效果，为了更美观，可以采用Axure中的辅助线工具，提前布置好导航栏各项所属位置，制作过程中也学习了局部变量以及全局变量的使用。交互中事件发生情形、顺序也尤为重要，同时在交互动作众多的情况下加入一些等待可以让交互效果更加美观。

6.结对心得

1.结对细节

2.​​​​​​​分工细节

张亿： 负责首页，每日赛程，赛事历史，导航栏设计以及博客撰写。
吴鸿杰： 负责选手排名，每日赛程，详细赛事页面设计以及博客撰写。

3.相互评价

吴鸿杰->张亿：张亿在整个过程中表现出出色的理解力与实践能力，尽管任务相对简单，也仍然认真对待，细致入微地处理每一个细节，与我保持良好沟通，共同解决问题，有效地提升了我们的工作效率。

张亿->吴鸿杰：吴鸿杰在设计思路上清晰明确，操作过程中也展现出很高的效率，能够迅速适应变化，并且总能给予我积极的反馈与建议，使得我们的设计更加完善，也确保了项目的顺利完成。

4.结对感受

这次作业是第一次正式的结对合作，我们共同完成了使用Axure设计网页原型的任务，一起学习一同进步，在这个过程中我们两人不断交流、讨论和尝试，互相取长补短，逐渐学会如何更好地协作以及如何充分发挥各自优势解决问题。在完成任务的过程中我们不仅对Axure这款软件有更深入的了解，还提升了协作能力，期待下一次的结对合作。