交互Demo设计的工具以及一般步骤

　　Demo表示“示范”、“展示”，常指具有示范或展示功能及意味的事物。设计师们特别是交互设计师往往需要承担制作Demo的工作，而这个过程从上涉及到产品想法和主要功能、信息架构和界面的组织，这里会为大家讲解交互Demo设计的一般步骤，希望能帮到大家。

　　为方便产品经理、设计师、开发及项目相关人员能够看到直观的效果，进行更有效的沟通;提供直观的产品设想，说明用户将如何与产品进行交互，在交互设计的过程中一定会产出各种各样的产出物，如流程图、思维图、纸上的草稿、甚至高保真演示稿。

　　我们会在这里简单分享下自己在项目过程中的交互Demo设计的一些心得。首先我们来看看交互Demo设计的工具有哪些：

　　进行Demo设计时，要完成整个过程的步骤比单纯地制作线框图或者纸原型要复杂很多，涉及到工具也非常丰富。工具的意义正是帮助我们在工作中提高效率，提升表现效果，市面上一些较典型的工具根据其擅长的环节，可以做如下简单的分类和介绍：

　　Axure

　　Axure RP是一个专业的快速原型设计工具。Axure操作简单明了，对于初学者来说，非常容易上手;它也拥有强大的交互演示动作，对于高级使用者来说，制作非常高保真的演示Demo,也是非常有成就感的。

　　Balsamiq

　　制作交互Demo的软件有很多，Balsamiq也是很不错的选择，能够提供了丰富的手绘风格的web常用元件，能创建接近于纸上手绘的原型，让人有眼前一亮的感觉，个人建议初稿方案的时候可以考虑用这个更能吸引人。

　　Mockups

　　Mockups 与Balsamiq风格相似，而Mockups最大的特色是网页版，无需下载安装，可以基于web的存储在任意电脑上联机打开。

　　不止这些，交互Demo设计还有一些其他工具，比如：Microsoft Office Visio、Pencil sketch、Design Studio、Prototype Composer、Lucid Spec、Irise Professional Edition、Adobe Reader…这里就不一一介绍，因为这些比起以上的比较少用，个人也不是非常了解。

　　每个软件都是各有特色，也有利弊，但软件都只是工具，用哪个都无妨，只要符合自己的习惯就好，关键是产出物。

　　相对中保真的交互Demo

　　我们了解了工具之后，再来看看Demo稿的设计。在平常的项目中，我基本上都是使用Axure工具，也是大家常用的工具。而交互Demo也只要出到相对中保真的状态即可，所谓的相对中保真，就是产出交付物中能体现出用户在每个页面上期望看到的内容，以及这些内容在页面上的相对优先级，并要提供流程说明和操作方式及响应状态的表述。

　　不要求太高保真的视觉效果，但也不是粗糙的草稿方案。草稿方案，可以用手绘或者接近手绘效果的工具(balsamiq、Mockups)，不见得都需要用axure;而高保真的原型需要花费更多的精力，也不够高效，除非是用于汇报演示方案、或是为可用性测试制作高保真原型。

　　接下来是交互Demo设计的六条建议，分享给大家：

　　一、遵守栅格规范

　　网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

　　但是会有很多新人交互设计师容易忽略这一点，没有按照栅格规范来布局，这样容易导致的结果就是：视觉设计师在按照栅格排版时，发现在交互稿中能排下的内容，在视觉稿中排不下了，这样就还得返回去改交互稿，或是需要重新设计布局，这无论是在时间还是精力上都造成了浪费。

　　所以我们一定要养成习惯，在设计初时，一定要先根据栅格进行布局，同时也要保证交互稿中的字号、间距尽量符合视觉要求(比如间距最小10像素等)，以免给视觉造成不必要的困扰。

　　二、不要使用截图与颜色

　　有些产品人员或设计师为了能方便，拼凑各种竞品的截图，组成一个页面。这样即不规范，也大大降低了交互稿的档次，还会对视觉设计师也有一定的干扰，个人是非常厌恶的。

　　另外，交互阶段的产出方案，应该更聚焦在信息布局、内容层次、操作流程。不太建议在交互稿上使用色彩(除了文字或特殊状态)，避免对视觉设计师造成不必要的干扰。如果真的有一些关于想法，可以通过文字描述，或者直接告诉视觉设计师需要营造什么样的氛围，达到什么效果。

　　让色彩、质感、具体形势交给视觉设计师，多点空间让视觉设计师去尽情发挥。

　　三、不要沉迷于复杂的交互动作效果

　　尽管Axure提供了丰富的动作脚本支持，使得动态模拟真实界面交互变成可能,能实现状态切换、时间动画以及其他一些惊人的小玩意。但有时候我们需要思考，在日常项目中是否需要花费这么多的精力和时间?

　　需不需要复杂的交互动作效果其实取决于于这个原型是用于什么情境。如果原型是用以进行早期的可用性测试，或为争取资源的高保真演示汇报Demo，也许需要我们快速产出接近于实际界面的可操作效果；但是如果这个原型只是用于流程中的交互物，提供给视觉设计师或前端工程师进行开发，那么过度的设计和效果只能是浪费精力，而且还会显得拖沓多余。

　　四、一定要有一套属于自己的控件库

　　自制一个部件库能大大提高你的工作效率，你只需要把常用的控件、功能组建、图标、标注等制作成通用的标准小单元，插入到部件库(widgets)，在制作交互Demo时，只需要调出需要的控件即可。

　　关于原型控件，每个原型工具都有，可以网上搜索或者调用下他人分享的。但个人建议，还是根据自己的习惯或产品设计规范，制作一套自用的标准控件库。

　　五、善用master，提高效率

　　共享区块(Master)是一组在设计过程中可以重复使用的Widget，一些常用的Master包括了页首(Header)、页尾(Footer)与导览(Navigation)，Master可以被放置在网页或是其它的Master中，只要Master做了修改，其它使用到这个Master的地方也会跟着修改。

　　我们都知道大量的页面进行统一的更新也是相当麻烦的一件事，在制作时，直接用master制作复用的模块，来取代复制黏贴，在需要调整时，只需要调整master文件即可。

　　master是Axure提供的类似于自定义组件的功能，你可以在master设计常用的交互组件，然后在不同的页面引用，如页面头尾、菜单等会在大部分页面公用内容，非常适合做成master，然后在各个界面中拖曳相应到指定位置。这样当这些共用内容需要修改时，只需修改mater即可。

　　六、版本存档也很重要

　　Demo跟实际产品一样，是会迭代和不断被修改的，所以，一定要记得存档。即使是在同一个原型上做修改，也一定要做记录，这对后续回顾很重要。

　　结语：

　　交互Demo设计是每个交互设计师最最基本的技能，这也是一个梳理思路很好的方式，但不是唯一的形式，Axure也不是唯一工具。只要能清晰表达产品思路、界面UI、流程逻辑及交互状态的好用工具都是值得去尝试的。

　　交互Demo设计甚至向下涉及到视觉风格和互动反馈等各个环节；打交道的人可能包括了产品经理（提供原始的产品概念，用户需求分析或者是功能完整的产品文档），视觉设计师（提供UI风格和设计稿），用户研究员（提出测试用例或者研究需求）。其实每一个方面都有研究探讨的价值意义，这也是成为一个优秀的交互Demo设计必须时刻关注的学习方向。