关于交互Demo设计的一些建议.pdf

关于交互 Demo 设计的一些建议 为方便产品经理、设计师、开发及项目相关人员能够看到直观的效果，进行更有效的沟通；提供直 观的产品设想，说明用户将如何与产品进行交互，在交互设计的过程中一定会产出各种各样的产 出物，如流程图、思维图、纸上的草稿、甚至高保真演示稿。 这里简单分享下自己在项目过程中的交互 Demo 设计的一些心得。 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 时，只需要调出需要的控件即可，这可以