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

[222100403江滢怡]

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222100404 222100403
这个作业的目标	阅读《构建之法》第3章和第8章内容，完成原型设计
其他参考文献	Axure中文学习网、《构建之法》

目录

• 1.原型地址
• 2.需求分析
• 3.原型设计过程及成果展示
• 3.1原型设计工具
• 3.2原型设计过程
• 3.3成果展示
• 4.遇到困难及解决方案
• 5.NABCD模型说明
• 5.1 N（Need, 需求）
• 5.2 A（Approach, 做法）
• 5.3 B（Benefit, 好处）
• 5.4 C（Competitors, 竞争）
• 5.5 D（Delivery, 推广）
• 6.PSP表格及效能分析
• 6.1 PSP表格
• 6.2 效能分析
• 7.结对总结
• 7.1 结对过程
• 7.2 结对感受
• 7.3 结对评价

1.原型地址

原型地址

2.需求分析

• 导航栏
  • 首页、选手详情、每日赛程、详细赛况
• 主界面
  • 介绍世界游泳锦标赛
• 选手详情
  • 展示各国选手
  • 可通过性别、国家等条件筛选
  • 通过点击对应的选手可前往对应的选手详细信息界面
• 选手详细信息
  • 展示选手名、性别、国家、出生日期等信息
  • 展示选手参加过的项目名、得分、排名、年龄、参赛时间等信息
  • 通过点击选手参加过的项目名可前往相应的详细赛况界面
• 每日赛程
  • 按日期显示项目名、项目类型(初赛/半决赛/决赛)、比赛时间
  • 可切换日期
  • 通过点击比赛可跳转到相应的详细赛况界面
• 详细赛况
  • 展示项目详情，包括选手排名、国家、选手名、选手年龄、比赛积分、落后积分
  • 可在同一页面内扩展显示相应队伍的详细信息（Dive、Dive No.、DD、JudgesScores、Dive Points、Total Points、Dive Rank、Ov Rank、Points Behind）
  • 可切换对应的初赛/半决赛/决赛
  • 通过点击选手名可前往相应的选手详细信息界面

3.原型设计过程及成果展示

3.1原型设计工具

通过对比了几款原型设计软件的优缺点，最后我们选择了Axure RP，相对于墨刀，这款软件的功能更加丰富，在网上也能找到很多教程来学习。

3.2原型设计过程

通过需求分析，我们将基础功能设计成三个页面进行展示，分别是首页、详细赛况、每日赛况。通过页面顶部的导航进行页面间的跳转。

首页： 首页分为两个部分进行展示，轮播图和游泳锦标赛相关知识展示板块，首页上半部分为轮播图，点击轮播图左右两侧的箭头可进行图片切换，下半部分为相关知识展示，光标移动至框内可有动态效果，丰富页面布置。
详细赛况： 详细赛况也通过中继器设计表格展示了women 1m springboard的比赛数据，通过下拉框可以切换查看决赛和初赛的成绩结果，通过点击右边的箭头处可以跳转到选手详情页，点击成绩条右侧的按钮可查看选手的详细得分情况。
每日赛程： 在每日赛程页面设计了存放不同日期的按钮的动态面板，可通过切换日期来查看不同天的比赛安排，页面下方用列表展示了每一天的比赛安排，用图标展现了不同类型的比赛，并且写明了比赛时间和项目名称，对决赛的场次也进行了标注。通过点击比赛信息框可跳转至详细赛况页面。

完成基础功能后，我们还拓展设计了两个页面，分别是选手详情页、选手详细信息页。

选手详情： 通过中继器设计表格展示各国选手信息，可通过表格上方的下拉框选择不同性别和国家进行筛选搜索。
选手详细信息： 展示选手姓名、性别、国家、出生日期等信息。下方通过中继器设计表格显示选手以往获奖经历。

3.3成果展示

顶部导航栏切换效果如下：

首页轮播图、相关知识效果如下：

选手详情及其与相应选手详细信息页面跳转效果如下：

每日赛程、日期切换选择、前往详细赛况页面效果如下：

详细赛况、详细得分情况、初赛决赛切换及与选手详细信息页面跳转效果如下：

4.遇到困难及解决方案

一是页面整体风格的设计，作为一个团队，每个成员都会有自己的设计理念和审美观点，肯定会出现风格不统一等问题。我们的解决方案是由404同学先制作了首页导航栏，而后403同学跟着导航栏的风格去制作剩余的几个页面，保证风格统一。

二是元件使用问题，403同学在制作详细赛况页面时发现Axure RP不让在中继器里套中继器，感觉就像看到高级语言只能用一维数组不能用二维数组还没有指针。解决方案是把内层的中继器删去，改为手动复制了四行数据来显示。

三还是元件使用问题，详细赛况页面需要实现详细得分情况display:block与display:none切换的效果，但403同学设计完发现当点击显示详细得分情况后，该行只会出现一瞬，而后就会消失，403同学查了好久动态面板的交互看哪里设置错了，结果却发现是因为中继器的自适应内容选项默认是开启的，关掉就好了。

四是404同学在元件上添加交互动作之后进入预览后不起作用，重新修改添加后仍然无效，后发现是是元件上覆盖的热区遮住了下一层元件，导致下一层元件的交互无法进行。解决方法一种是把原本设置在矩形上的动作改为设置在文字上，再修改元件之间的摆放顺序解决，另一种是将元件组合在一起再设置组合的交互动作。

收获： 总体来说，在这次结对实际过程中并没有遇到很困难的问题，主要都是因为对刚刚上手的Axure的功能不熟悉的问题，通过查找资料和自己实践尝试都能顺利解决，感受到了自己动手实践的重要性。

5.NABCD模型说明

5.1 N（Need, 需求）

• 通过简单的文字来显示，不够直观、具体，对用户不够友好。
• 主界面
  • 介绍世界游泳锦标赛
• 选手详情
  • 展示各国选手
  • 可通过性别、国家等条件筛选
  • 通过点击对应的选手可前往对应的选手详细信息界面
• 选手详细信息
  • 展示选手名、性别、国家、出生日期等信息
  • 展示选手参加过的项目名、得分、排名、年龄、参赛时间等信息
  • 通过点击选手参加过的项目名可前往相应的详细赛况界面
• 每日赛程
  • 按日期显示项目名、项目类型(初赛/半决赛/决赛)、比赛时间
  • 可切换日期
  • 通过点击比赛可跳转到相应的详细赛况界面
• 详细赛况
  • 展示项目详情，包括选手排名、国家、选手名、选手年龄、比赛积分、落后积分
  • 可在同一页面内扩展显示相应队伍的详细信息（Dive、Dive No.、DD、JudgesScores、Dive Points、Total Points、Dive Rank、Ov Rank、Points Behind）
  • 可切换对应的初赛/半决赛/决赛
  • 通过点击选手名可前往相应的选手详细信息界面

5.2 A（Approach, 做法）

• 通过Axure工具设计原型
• 将比赛数据经过筛选后显示，界面整洁美观，方便用户使用
• 首页增加轮播图和锦标赛相关知识，吸引用户
• 将比赛相关内容分为每日赛程、详细赛况，选手详情等模块，方便用户直观得到自己想要的信息

5.3 B（Benefit, 好处）

• 界面增加了背景图，网页更加美观
• 界面增加多种交互模板，用户使用更有趣味
• 利用中继器设计表格，用户获取数据时更加直观，效率高

5.4 C（Competitors, 竞争）

• 主要竞争对手：世界游泳锦标赛官网、其他小组作业
• 我方优势：
  • 界面简洁美观，没有官网页面看起来复杂
  • 模板功能设计清晰，方便用户查看数据
  • 在首页新增了世锦赛相关知识，吸引用户兴趣
• 我方劣势：
  • 网站功能没有官网功能丰富
  • 部分交互内容还需要调整细节的实现

5.5 D（Delivery, 推广）

• 在家人、同学间进行推荐，通过口口相传的方式推广产品
• 利用微博、小红书等社交平台进行推广

6.PSP表格及效能分析

6.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	9
• Estimate	• 估计这个任务需要多少时间	10	9
Development	开发	945	1090
• Analysis	• 需求分析	45	30
• Learning	• 学习原型设计工具	120	100
• Discussion	• 结对讨论	120	120
• Design	• 界面原型设计	480	600
• Improvement	• 原型改进	180	240
Reporting	报告	60	50
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	60	50
	合计	1015	1149

6.2 效能分析

通过对比PSP表格中的数据，可以发现我们主要在原型设计和原型改进上实际花费的时间远超期望的时间。原因主要如下：

• 在原型设计一开始没有仔细阅读题目要求，导致错误的做成了游泳世界杯的数据，后来才修改成多哈锦标赛的数据，在这上面浪费了很多时间。

• 在进行计划时没有考虑到做拓展功能时花费的时间，在实际进行拓展功能的设计和对原型布局上的细节调整时花费的时间比想象中的多。

7.结对总结

7.1 结对过程

分工细节：

• 222100403江滢怡：负责详细赛况，选手详情，选手页的设计和美化工作以及博客的撰写
• 222100404余诗怡：负责导航栏，首页，每日赛程的设计和美化工作以及博客的撰写

由于是舍友，所以很多交流基本上是通过直接讨论进行的，以下是部分交流的截图：

7.2 结对感受

403同学：通过本次实践项目，我们对原型设计有了更深的认识，更加理解了原型作为传达设计思路的作用；在掌握Axure这一强大的原型设计工具之后，我们的设计能力得到了质的提升，不仅能通过Axure创建静态页面布局，更可以通过添加交互动作、添加变量等方式实现更为复杂的效果；此外，我们也体会到了团队合作的力量，通过成员贡献想法与见解，沟通协调，共同解决问题，推进项目进度。

404同学：本次实践项目是我第一次使用Axure这款原型设计工具，在实践过程中通过学习，对它的能力掌握了很多。并且在这次结对过程中，我感受到了与队友之间沟通交流的重要性，通过合作，不仅加快了我们项目的进展而且对项目最后的完成结果有很大的提升。

7.3 结对评价

404同学对403同学：

跟队友的合作过程非常愉快，403同学很可靠，对自己负责的部分非常尽心尽力，而且对我们项目的设计能够提出很好的建议，结对的效率很高。对于最后的成果我也很满意。

403同学对404同学：

队友有很强的组织能力，通过合理的分工让我这ddl战士的效率也得到了提高；在面对需要调整的内容时队友也表现得很靠谱，共同推进项目进程并达到满意的结果。是一场愉快的合作。