产品研发流程与合作之交互设计讲课稿 - 图文

交互原型图一

交互原型图二

在这一阶段，交互设计师就开始绘制用来表达行为的形式了，确保所用形式可以很好的让用户知道重点是什么、下一步要做什么、怎么做、不常用的功能去哪找等等，交互设计师这一阶段要做到：

1. 主任务流程突出明确简单，其他任务完整易懂;

2. 满足可用性要求(易学、易见、易用)、用户体验优秀、连贯; 3. 逻辑正确完整、极限情况处理完善; 4. 可扩展;

5. 符合产品所在设备系统及平台的设计规范，例如windows的控件规范、iPhone、安卓的设计指南等等，不要轻易创造不规范的控件; 6. 视觉设计师可以在此基础上美化发挥;

这也是为什么会出现交互设计师这一岗位，因为产品经理或视觉设计师都没有通常精力来做这些，或者从未做过甚至从未考虑过这些。

交互原型图输出时，产品经理就可以预测视觉稿是否能达到产品定义时期望的效果，查看交互图中的对内容和功能的侧重是否能满足产品需求了，审核并提出建议;但有的产品经理会要求交互设计师如何设计，例如说“我就要XX这个样子的”、“我不能接受这种布局”等等，这个时候，请产品经理认清自己和交互设计师的专业职责，让专业的人做专业的事，大家应该一起各抒己见、向用户、成本、时间妥协，讨论出对于用户和产品而言最好的方案，而不是让对方服从自己主观的想法。

此外，若视觉设计师在此阶段就参与讨论，对产品会更有帮助。视觉设计师要对产品非常熟悉、了解细节始末，实时关注交互原型图的进展，提出建议，将更有利于产品快速开发、减少后期因“交互原型图美化后不好看、不生动、界面太挤”之类的原因而修改交互稿。例如对于“锻造”这个过程，交互设计师设计成了 A+B+C=D这种长条形布局，而做效果图时，视觉设计师才说难以体现游戏感，希望能画个炉子，在炉子的周围摆上材料，炉子中间为锻造成品，这个时候又要交互设计师重新设计就浪费精力和时间了。

另外，如果该项目较为重要，最好在主要界面交互原型图输出后，主动邀请权威角色评审，以免后期才得到意见，再修改就来不及或重复工作。 表现层

内容：产品外观、企业形象、视觉情感;

负责人：视觉设计师

合作者：产品经理、交互设计师 输出物：效果图、动画等等

在表现层，视觉设计师会根据交互原型图进行绘制，在交互图的基础上，可以对布局、控件的形状、形式进行微调，设计图标按钮等等，此时交互设计师应该实时关注，以确保图形及色彩的认知效果，以及是否有不太合适的更改，或未达到预设的地方;

若交互原型图已经经过了全员评审，视觉设计师或其他任何人最好不要再轻易修改交互相关内容，因为交互原型图中的可能每一个元素都是交互设计师经过讨论、深思熟虑后设计的，或者环环相扣、连接着更多的行为和内容，牵一发则可能动全身。如果想要修改，最好先想想或问问交互设计师为什么要这么做，提出更优化的方案。

上图为玩家列表的交互原型图和效果图。交互图中蓝钻、年费、昵称的位置格式是QQGAME的蓝钻规范，昵称上限为24位字符，如果按照效果图摆放，一个是不符合平台

规范，另外在列表中也会因为实际昵称长短不一，导致蓝钻、年费图标显得较乱。欢乐豆数字上限为9位数，为容易阅读加上顿号分割，效果图没有预留上限位置，也去掉了顿号。 虽然不建议在交互原型图经过了全员评审后又修改方案，但实际上，在效果图发出后，往往仍会因为各种“觉得不好看”、“看起来很挤”、“达不到产品目标”等主观或客观原因要修改效果图乃至交互原型图布局甚至改动功能，这种风险因素很难避免，只能尽量弱化，特别是权威角色若未持续保持关注、在大型评审时可能会提出颠覆性意见。我的建议是交互设计师输出主要界面的原型图且通过全员评审后，视觉设计师马上输出对应效果图，效果图评审通过全员后，交互设计师再去全面补充剩余的交互原型图，这时候若要修改，成本就会小很多。

当然，在讨论过程中交互设计师也要尽量坚持自己认为正确的设计方案，或寻求折中方案，不要轻易因为大家都说“不好看”而妥协选择影响用户体验的方案;而视觉设计师也要尽量提高自己的预估能力、提前发现潜在设计风险，尽可能的避免正式做效果图时才发现相关问题;同时，交互设计师也应该尽可能的提高美学素养，更多的了解视觉设计。 什么时候写《产品设计文档》?

待主界面效果图通过评审后、视觉设计师开始补充剩余的交互原型图时，交互设计师就可以开始着手写交互说明。如果提前写了，一旦效果图有修改，就要跟着修改各种逻辑和细节，挺伤脑细胞的，也浪费时间、容易遗漏。待效果图完成后，将需求文档、交互说明、效果图合并为产品设计文档(合并这活可以由产品经理或交互设计师来做，另一方来审核即可)，交与开发。

为什么要合并成一份《产品设计文档》?

看看开发、测试同学每次要对着需求文档、交互原型及说明、效果图三种输出物来工作是有多崩溃就知道了，另外一份文档更新和同步起来也比较方便。在更新时，效果图和交互内容的更改由交互设计师维护，其他需求内容由产品经理维护，互相知会。 实现层

内容：设计审核、开发、测试、发布等; 负责人：伟大的程序员

合作者：产品经理、交互设计师、视觉设计师 输出物：活生生的产品

其实实现层不仅仅是开发过程，在前期产品设计阶段，开发人员也需要时刻参与审核把关，确保开发成本和时间合理，及时提出“无法实现”、“耗时”、“漏了XX”等问题，避免后期才提出要改动或修补交互方案。 不能边设计边开发(前端)

我们现在的开发阶段常常在交互方案还未确定时就启动了，其实这是对产品设计很不好的(当然，仅仅是开发底层或后台等不太影响)，因为：

1. 一旦开发将用户行为过程、界面布局写入了代码，再修改就较为困难、代价高，而事实上此时一切用户行为和形式都还未被完全确认;

2. 给了设计师较大的时间压力，可能会影响设计思路、逻辑的严密性、方案的质量; 因此，建议开发同学最好是在产品设计完全完成后，才启动前端开发。最早也应该在主界面效果图确认之后，期间任何未确认的东西先不要急于实现，或者和交互设计师确认后再实现。

此外，PM要监督和帮助下面两点的实施：

1. 如果一名交互设计师需要同时跟进多个项目(理想状态下当然不推荐这样)，可能无暇随时跟进、不能及时的发现版本问题，而产品经理是时刻盯着项目的，所以常常遇到这种状况——开发同学遇到交互问题(如方案无法实现或细节不完整)，不问交互设计师而去问产品经理，或者产品经理发现交互问题后自己提出解决方案，等到交互设计师审核版本时发现这个解决方案不合理，要修改已经代价颇高了。因此，开发过程中，遇到任何产品设计相关问题，PM或开发人员最好拉上产品经理和交互设计师一起沟通解决。

2. 应该严格仔细的按照产品设计文档进行开发，不要弄错一个流程、写一个错别字、弄错一个图标、错位一个像素，因为后期的每次找茬都是令人崩溃的，而且还不一定能遇到这个错误。虽然“细致”这是个传统美德，但还是不知道有多少开发GG伤害了交互妹纸的心。 研发流程步骤总结

之前我们这边的研发流程是需求写完经过需求评审后，交互设计师输出全套交互原型图、交互说明文档，经过开发评审，美术再投入进来，前端开发再正式启动。这个流程的应用过程中出现过非常多的问题，主要问题在前文中已经提到，经过和其他交互设计师、项目组成员的讨论，我在自己参与的几个项目中进行了流程优化，效果不错，新流程的具体步骤为： 产品设计阶段(此阶段每一步都需要通过全员评审尤其是开发的评审)： 第1步：产品经理输出功能内容需求列表，期间与交互设计师密切讨论;