关于原型交互设计文档的一些建议

关于原型交互设计文档的一些建议 交互设计 | 2013-07-24 作为一名合格的交互设计师，为方便产品经理、设计师、开发及项目相关人员能够看到直 观的效果，进行更有效的沟通；提供直观的产品设想，说明用户将如何与产品进行交互， 在交互设计的过程中一定会产出各种各样的产出物，如流程图、思维图（脑图）、纸上的 草稿、甚至高保真演示稿。 这里简单分享下自己在项目过程中的原型交互设计的一些心得。 Axure 制作交互 Demo 的软件有很多，个人比较喜欢且习惯的就是 Axure。Axure 操作简单明了， 对于初学者来说，非常容易上手；它也拥有强大的交互演示动作，对于高级使用者来说， 制作非常高保真的演示 Demo, 也是非常有成就感的。 Balsamiq 提供了丰富的手绘风格的 web 常用元件，能创建接近于纸上手绘的原型，让人有眼前一亮 的感觉，个人建议初稿方案的时候可以考虑用这个更能吸引人。 Mockups 与 Balsamiq 风格相似，而 Mockups 最大的特色是网页版，无需下载安装，可以基于 web 的存储可以在任意电脑上联机打开。 其他还有一些工具，我就不做介绍了，因为个人也没有使用过，比如： Microsoft Office Visio、Pencil sketch、Design Studio、Prototype Composer、Lucid Spec、Irise Professional Edition、Adobe Reader 每个软件都是各有特色，也有利弊，但软件都只是工具，用哪个都无妨，只要符合自己的 习惯就好，关键是产出物。 相对中保真的交互 Demo 工具之后，就是 Demo 稿的设计了。在平常的项目中，我基本上都是使用 Axure 工具， 也是大家常用的工具。而交互 Demo 也只要出到相对中保真的状态即可，所谓的相对中保 真，就是产出交付物中能体现出用户在每个页面上期望看到的内容，以及这些内容在页面 上的相对优先级，并要提供流程说明和操作方式及响应状态的表述。 不是粗糙的草稿方案，也不要出高保真的视觉效果，草稿方案，可以用手绘或者接近手绘 效果的工具(balsamiq 、Mockups)，不见得都需要用 axure; 而高保真的原型需要花费更 多的精力，同时，不够效率，除非是用于汇报演示方案、或是为可用性测试制作高保真原 型。 一、遵守栅格规范 很多新人交互设计师都比较容易忽略这一点，没有按照栅格规范来布局，这样容易导致的 结果就是：视觉设计师在按照栅格排版时，发现在交互稿中能排下的内容，在视觉稿中排 不下了，这样就还得返回去改交互稿，或是需要重新设计布局。 所以要养成习惯，在设计初时，一定要先根据栅格进行布局，同时也要保证交互稿中的字 号、间距尽量符合视觉要求（比如间距最小 10 像素等），以免给视觉造成不必要的困扰。 二、不要使用截图与颜色 有些产品人员或设计师为了能方便，拼凑各种竞品的截图，组成一个页面。这样即不规范， 也大大降低了交互稿的档次，还会对视觉设计师也有一定的干扰，个人是非常厌恶的。 另外，交互阶段的产出方案，应该更聚焦在信息布局、内容层次、操作流程。不太建议在 交互稿上使用色彩（除了文字或特殊状态），避免对视觉设计师造成不必要的干扰。如果 真的有一些关于想法，可以通过文字描述，或者直接告诉视觉设计师需要营造什么样的氛 围，达到什么效果。 让色彩、质感、具体形势交给视觉设计师，多点空间让视觉设计师去尽情发挥。 三、不要沉迷于复杂的交互动作效果 Axure 提供了丰富的动作脚本支持，使得动态模拟真实界面交互变成可能, 能实现状态切 换、时间动画以及其他一些惊人的小玩意。 但有时候我们需要思考，在日常工作中是否需要花费这么多的精力和时间？ 这也许决定于我们在设计的这个原型是用于什么情境。如果原型是用以进行前期的用户测 试，或为争取资源的高保真演示汇报 Demo 时，也许需要我们快速产出接近于实际界面的 互动效果。 而如果只是用于流程中的交互物，提供给视觉设计师或前端工程师进行开发，那么过度的 设计和效果只能是浪费精力。 四、一定要有一套属于自己的控件库 把常用的控件、功能组建、图标、标注等制作成通用的标准小单元，插入到部件库 （widgets），在制作交互 Demo 时，只需要调出需要的控件即可，这可以大大的提高你 的效率。 关于原型控件，每个原型工具都有，可以网上搜索或者调用下他们分享的。但个人建议， 还是根据 DPL，制作一套自用标准的控件库。 五、善用 master，提高效率 大量的页面进行统一的更新也是相当麻烦的一件事。在制作时，直接用 master 制作复用 的模块，来取代复制黏贴，在需要调整时，只需要调整 master 文件即可。 master 是 Axure 提供的类似于自定义组件的功能，你可以在 master 设计将常用的交互 组件，然后在不同的页面引用，如页面头尾、菜单等会在大部分页面公用内容，非常适合 做成 master，然后在各个界面中拖曳相应到指定位置。这样当这些共用内容需要修改时， 只需修改 mater 即可。 六、版本存档也很重要 Demo，跟实际产品一样，是会迭代和不断被修改的，所以，一定要记得存档。即使是在 同一个原型上做修改，也一定要做记录，这对后续回顾