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

[222100411刘畅]

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222100411 、222100424
这个作业的目标	学习原型设计工具并设计对应原型模型、在结对中学习如何团队协作
其他参考文献	《构建之法》、Axure中文学习网

文章目录

• 原型模型
• 需求理解
  • NABCD模型
• 学习原型模型设计工具
• 界面原型设计
  • 原型设计过程
  • 遇到的困难及解决办法
  • 结果展示
• PSP表格和效能分析
  • PSP表格
  • 效能分析
• 过程总结
  • 结对过程
  • 结对感受和评价

原型模型

原型模型链接

需求理解

NABCD模型

N（Need，需求）

• 客户需求： 用户需要一个直观、友好的平台来了解世界游泳锦标赛的相关信息，包括选手信息和正式比赛每日结果。他们希望通过图表等形式，以更直观的方式来获取这些信息，提升用户体验。

  A（Approach，方法）

• 数据可视化： 我们将采用数据可视化的方法，利用表格的形式将选手信息和比赛结果呈现给用户，以便用户能够快速了解和比较不同选手的表现以及每日比赛的结果。

• 界面分化： 将界面分为首页、选手排名、每日赛程、详细赛程、晋级图、了解更多几个界面，通过导航栏进行互相跳转。导航栏置于页面顶部，简约美观。

• 图片放映： 首页中添加轮播图展示一些精彩画面，图片可以自动轮播或通过点击按钮进行图片的跳转。

• 结果跳转： 日程表中点击比赛结果可以跳转至比赛结果页面，展示当天本场比赛结果。

• 选手排名： 选手排名通过表格展示了男选手和女选手的排名信息。

  B（Benefit，好处）

• 直观了解： 用户通过平台可以直观地了解选手信息和比赛结果，节省了查找信息的时间，提高了信息获取的效率。

• 用户友好： 数据可视化使得信息更加直观、具体，提升了用户体验，使得用户更愿意使用平台来获取相关信息。

  C（Competition，竞争）

• 竞争对手：

  • 世界游泳运动官方网站： 资源丰富，数据更新快，页面设计成熟美观，用户基础庞大
  • 别组结对作品： 基本功能相似，页面设计存在差异

• 竞争优势：

  • 页面简洁、操作简单，人机交互人性化
  • 没有冗余的操作
  • 数据可视化处理直观
  • 无需用户登录，可以直接使用，减少用户迁移成本

• 竞争劣势：

  • 数据依赖官方网站，无法做到动态实时更新
  • 没有用户基础，缺少先发优势，可替代产品众多
  • 网站运营维护技术不成熟，网站安全性低

    D（Delivery，推广）

• 社交媒体营销：

  • 创建社交媒体账号，定期更新优质内容
  • 与用户进行互动和分享

• 用户体验优化：

  • 提供优质用户体验，通过口碑传播给更多用户
  • 鼓励用户提供反馈意见，不断改进和优化平台

学习原型模型设计工具

• 在项目规划初期就确定了使用Axure作为原型模型设计工具，理由是它性能强大，普及率高。

界面原型设计

原型设计过程

在正式开始设计前我们先进行了需求分析，确认了我们需要完成选手排名，每日赛程及详细赛况的展示功能，在设计的过程中还要注意有良好的交互性和美观的界面，同时也加入一些其他的拓展功能。

通过上图的分析，我们初步确定了各个界面大致所需要的一些元件以及各个界面的基本结构。

• 首先我们通过几个文本标签以及为其添加交互来显示导航的功能，方便整个界面在不同的动态面板状态间来回切换。
• 我们先设计了较为简单的界面如概览页，设计了在载入该页面后自动进行一些跳水运动图片的录播，给用户提供一些跳水的精彩瞬间。而
• 接下来我们开始着手所要求功能的实现，通过表格和图片相互搭配来实现选手排名的展示，搭配动态面板实现赛事不同阶段的不同排名结果
• 然后同样的我们继续利用动态面板来实现每日赛程里切换不同的时间来查看不同的比赛，通过添加对动态面板的置顶以及显示等交互动作来实现点击具体赛事跳转到详细赛况（选手排名）的显示。
• 最后就是一些小细节的添加，如添加了一些有关赛事的基本概述等，让用户更加了解本次赛事。

遇到的困难及解决办法

遇到的困难：

• P1:由于我们是第一次接触到产品原型设计，也从未学习过相关方面的知识，因此会在新知识和新工具用法的学习上会有困难，比如本次我们使用的是Axture来进行实现，有许多操作我们并不熟练，在某些具体功能的实现方面时常碰壁
• P2:想要做出一个交互良好的界面，首先要做到整体美观，即使有参考线供使用，在实际排版的过程中还是无法做到那么精细，必须想办法减少元件间排布距离的误差
• P3:对于界面的交互事件不能灵活使用，一直达不到很好的显示效果，特别是很容易出现交互后组件相互重叠或者是组件间出现异常间隔无法恢复的情况。
• P4:在查看选手详细比赛成绩及排名功能的设计上，刚开始我们只设计了决赛的排名情况，遗漏了初赛，后续想要添加上不知道该怎么实现具体的界面切换，即从决赛（/初赛）切换到初赛（/决赛）。
• P5:不知道如何合理地组合某些元件成为一个组合，导致每次想要修改一些小细节的时候都很难找到对应的元件，还得进行很多步拆组操作，并且不合理的组合会导致每次拖动组件的时候不是自己想要的效果，需要撤销操作，无疑是增加了设计难度
• P6:本次实践作业也是我们两个人第一次结对完成作业，很多地方都不能协同得很好，如设计的风格，设计的思路有所不同，没能合理分配工作，而且很多时候会对同一个问题的解决方案有异议。

解决尝试

• S1:我们共同讨论确定了一部Axture的教学视频并一同观看学习，参照视频的教程我们先熟悉了Axture一些基本工具以及基本元件的使用，在能够独立实现一些简单的原型设计后，又进一步学习了交互以及动态面板的使用，虽然没有掌握得非常熟练，但是也逐渐完成了所需的功能设计，解决了大部分的问题。
• S2:我们试着将Axture内的设计界面放大到一个合适的尺寸，这样再配合参考线，可以尽量减少误差，并且对一些感觉有点偏差的元件进行坐标的微调，使得元件被放在合适位置，以此方法解决了排版容易出偏差的问题
• S3:这个问题大部分是出现在需要向下扩充内容时，在向下延展的时候会导致组件间的重叠显示，后来我们发现是没有在交互事件中添加向下推拉元件的行为，添加后就可以正确地显示了。
• S4:起初我们想通过界面跳转来实现，后来我们学习到动态面板后觉得会不会用动态面板更好实现也更好排版，毕竟可以调整动态面板自适应内容，也更美观，于是我们通过给动态面板设计决赛和初赛两种状态来实现决赛/初赛交替显示。
• S5:我们都是首次接触产品原型设计和Axture，对一些元件的规划不是那么合理，也试着去组合一些有关联的元件，但是最后还是没能找到最优的策略，而且我们对一些元件是否该组合在一起也有不同看法，在我们看来这算是一个不好解决的问题。
• S6:结对完成作业考察的就是两个人的配合能力以及任务分配是否合理，一开始我们各做各的，缺少沟通，导致做出来的原型很难整合，我们发现这样下去很难完成任务，于是参考了上一级学长学姐地结对经验以及分配任务的方式，同时也尽可能地融合了我们俩各自的设计风格，最后也算比较默契地完成了任务。

收获：

• 1.通过本此实践，我们学习到了关于原型设计的新知识，同时也在完成设计的过程中掌握了Axture的一些基本操作。
• 2.最让我们印象深刻的就是利用动态面板实现一些界面的转换，首次学习并且运用到设计中，到最后能实现预期结果，这都让我们感收到学习和实践并行的重要性，明白了既要学也更要做。
• 3.正确地和自己的搭档配合工作将会是1+1>2的结果，善于和自己的搭档协商沟通是默契配合的基础，在往后的学习或者工作生活中我们也会经常碰到需要分工合作的场景，而本次结对作业以及让我们感受到协作的重要性。

结果展示

首页

日程表

奖牌榜

比赛结果

运动员榜单

扩展信息

PSP表格和效能分析

PSP表格

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

效能分析

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

• 学习原型设计工具： 初次使用Axure，对软件操作不是很熟悉，上手较慢，学习软件使用花费了大量时间。
• 界面原型设计： 搜集素材，讨论细节，对原型进行设计花费了较多的时间
• 报告： 报告存在一些细节需要更改，讨论花费了较多时间

过程总结

结对过程

分工细节：

刘畅： 负责奖牌榜页面、运动员榜单页面和扩展信息页面设计，以及攥写博客

郑伊航： 负责首页、日程表、比赛结果页面设计和人机交互以及攥写博客

结对细节

结对感受和评价

• 刘畅的感受：在与郑伊航同学结对的过程中，我感到非常愉快和满足。郑伊航展现出了出色的团队合作能力和技术实力，我们能够互相补充，共同克服项目中的难题。通过与他的合作，我不仅学到了新的知识和技能，还提高了自己的沟通和解决问题的能力。我相信我们的合作不仅是完成了这个项目，更是建立了良好的团队关系，我期待着未来继续与他合作。
• 对郑伊航的评价：郑伊航是一个非常出色的团队合作者。他不仅拥有扎实的技术功底，还具备良好的沟通能力和团队合作精神。在项目中，他展现出了出色的责任心和执行力，能够迅速解决问题并提出有效的解决方案。他的积极性和专业精神对项目的顺利完成起到了关键作用。
• 郑伊航的感受：与刘畅合作完成项目是一次非常愉快和充实的经历。他展现出了出色的团队合作能力和专业素养，我们能够相互倾听、相互支持，在合作中取得了不错的成果。通过与他的合作，我不仅学到了很多新的知识和技能，还建立了良好的合作关系。
• 郑伊航对刘畅的评价：刘畅是一个非常出色的合作伙伴。他具有积极的工作态度和良好的团队合作精神。在项目中，他展现出了出色的组织能力和解决问题的能力，能够及时有效地应对各种挑战和困难。他的努力和贡献为项目的顺利完成做出了重要贡献。