创建高保真的移动Demo(工具篇)

2.4.2 添加跳转关系
根据展示的思路（Mindjet ）或者脚本（St o rybo ard）的产出物，我们已经清晰的知道Demo 的展示 逻辑和任务流程，即已经定义好了用户/观众的交互路径，这时候只需要将页面元素拼装成Demo 中 会出现的页面，在这些用来交互的控件上面添加跳转关系就可以了。
我周围最为常用的添加互动的软件是Axure，添加完并导出之后生成一个装着HT ML文件的文件夹。 A xure的好处就是内置了非常丰富的网站交互模式和鼠标事件。基本上网站上有的Click、Ho ver等 操作都有，对应页面间的跳转、打开新页面等反馈也非常丰富。
的Storyboard，Quartz Composer，Flash或是After Effects等，当然这需要你具备对细节极致追 求的心态、懂一些基础英文、数学和编程技巧。 有哪些更细致的效果呢：支持除点击之外的手势操作（长按、轻抚、多指操作等）；界面切换时有 更逼真的动态效果和视觉引导；支持声音、视频等多媒体的播放。 Xcode的Storyboard，前身是Xcode里面的Interface Builder，在Xcode里面的一个便捷图形化的 工具。在开发环境中，没有任何限制，设计师可以嵌入各种各样有趣的交互，动态效果和声音去创 造一个真实的iO S App的体验。这里有同学翻译了一篇很实用并且详尽的教程，我也试着有跟着边 学边做了一个小Demo 。 好处是可以直接使用大量的iO S自带的标准界面控件，支持触摸手势，并且在页面切换时有和实 际iPhone App中一样的动态效果。缺点也很明显，当跳转关系非常复杂的时候，软件的可用性就打 折扣了，不得不眼花花地去找到某条连接（Segue）来调整手势或者 是页面转场等动画，就如下图 所示。还有个明显不足，因为Xcode是为工程师和开发者设计的，所以整个界面非常复杂，信息量 极大，不熟悉的话很容易抓狂。
2.3 界面元素 这里的界面元素指的是两个方面，一个是要决定视觉风格上的各种元素在Demo 体现的程度，颜色 、质感、字体、图片等等，就是我们常常说的视觉设计 （Visual Design）；另一个方面就是界面上 内容，比如一些用户提供内容的App，或者一些带有SNS特征的App，可能每个用户的界面呈现都
什么是”更好”的Demo ：
核心功能完整，主要任务流足够深度 交互保真程度高，操作的体验感真实 根据场合与目的有适当的视觉细节 避免制作过程”过于费工”或”效率底下”
二、工具与步骤
设计师们特别是交互设计师往往需要承担制作Demo 的工作，而这个过程从上涉及到产品想法和主 要功能、信息架构和界面的组织，甚至向下涉及到视觉风 格和互动反馈等各个环节；打交道的人可 能包括了产品经理（提供原始的产品概念，用户需求分析或者是功能完整的产品文档），视觉设计 师（提供UI风格和设计 稿），用户研究员（提出测试用例或者研究需求）。
会很不一样，这个 时候更加要关注在Demo中要呈现那些内容和故事。
我认为，在Demo 界面中呈现的内容都应该更加贴近于软件或服务最终呈现的效果。善用产品 的Persona，结合各个功能的主要使用场景，在这些抽 象出的”目标用户”的角度上来想象和模拟这 些可能会个性化的界面内容（头像、签名、日志、聊天对话等等）。是不是很像导演呢，人物角色 在场景中经历并演绎 着使用产品或者服务的故事，企图 原型绘制 原型绘制算是基本功，根据不同的年代、不同的习惯和不同的机器，最典型的就要算是Visio 、 Framework、Adobe Illustrator、Axure和OmniGraffle最常为大家使用和熟知了。事实上本人和周 围更流行的工具是Axure（Win、Mac系统） 和OmniGraffle（Mac系统），丰富强大的基础绘图 功能，丰富的控件模版库，输出物简洁美观，都使得工作效率大大提高。下图是 OmniGraffle的软 件界面，有兴趣的可以下载试用版哦，A xure，O mniGraf f le。
2.4 互动与反馈
这基本上算是整个Demo 制作的精髓部分了，有了这部分的工作，你的静态页面将有如注入生命一 样动起来！本节将从准备图片素材、添加跳转关系、更多的反馈三个方面来详细说说会用到工具和 技巧。
2.4.1 准备图片素材
在高保真原型制作中，使用的就是视觉设计后的界面图片素材。所以要制作动态的Demo 的话，需 要Demo中涉及到的所有功能的视觉元素的图片：界面 整体效果图、各控件切图、各层次的界面内 容的文本或图片等等。这时候需要我们自己在psd的源文件里面切出所有的图片素材，这个步骤就 是炒菜中的切菜备 料。这里介绍一个很好用便捷的免费Photoshop切图插件Cut&Slice me（目前 仅支持CS6），Photoshop CC也有类似的功能。
一、什么是”更好”的Demo 什么是Demo ？Demo 是Demo nst rat io n的缩写，表示”示范”、”展示”，常指具有示范或展示功能及 意味的事物。本文中Demo 的含义更接近与维基百科中的这个解释：一种原型，主要用来展示想法 、表现、方法或者是产品特点的简易样例或未完成的产品版本。它常常用来对投资者、合伙人、记 者甚至于潜在的用户展示其选择方法的可行性。 在视觉、交互和内容的保真程度上有着高保真和低保真的区分，所以本文的Demo 就是指在这三个 纬度（视觉、交互、内容）保真程度都较高的原型。 Demo 往往用在以下几个场合和对象： 1. 新产品 / 功能的演示－投资者、老板、合伙人 2. 用户研究/市场调研－研究员、潜在目标用户 3. 可用性测试－真实用户 4. 交互 / 设计走查－设计师、产品经理、专家
St o rybo ard：故事板，也叫分镜脚本，虽然更多用在电影、动画、电视剧、广告等影像媒体的创作 前期，下 图是一个简易故事板的例子。Demo和产品完整App的不同之处在于目的在于”展示”而非” 使用”，所以可以借助storyboard的方法将产品核心使 用场景下的主要功能用任务的形式在时间线上 做一个规划和梳理。在交互展示性的Demo 中，st o rybo ard的作用就更加强大了，通过对场景和情节 的引 入，往往会使整个产品或服务看起来更有说服力。
类似的工具还有pro t o .io （类似f lint o ，基于网站的应用），Pro t o t ypr（类似Brief s，有Mac客户端 和iPhone App，自备梯子）等等，有兴趣的都可以下载来玩玩，这些都是收费的软件或者服务，几 十到几百人民币，不算贵咯！ 2.4.3 更细致的效果 其实做到上面2.4 .2的部分，你的Demo 已经相对完整并可供把玩了，但是总有些人是完美主义者， 还想再进一步怎么办？这时你也许就需要更多的一 些时间精力和爱来学新的东西——Xcode
这个时候，需要以下方法B：下载一个网盘App（如AirDisk Pro），iPhone链接电脑在iTunes的”应 用程序”下面找到这个A pp并添加这个压缩包，然后在手机的A pp里面解压这个文件夹，浏览就可以 了；同样也可以利用一个内置浏览器的阅读类App 和一个解压App来达成，具体操作看这里）。
创建高保真的移动Demo（工具篇）
学习交互设计的童鞋，都躲不过画原型图这个必考科目。如何创建保真度（视觉、交互、内容）都 较高的 Demo 呢，今天腾讯设计师分享的好文，除了推荐很多简单易上手的画图神器，更宝贵更值 得细读的是她的思路，完全体现了一个设计师该有的严谨与细致。童鞋们感受一 下。 正文：
思维管理软件： MindManager、Mindjet 。也叫思维导图或者心智图，既可以用在放射性思考的展开 过程，也可以用在整理各级主题的相互关系，最快可以整理并可视化出一个抽象的概念或者过程，
下图就是一个简单的Mindjet的输出物例子。利用思维管理 软件，就能将Demo里要展示的产品主要 功能抽丝剥茧列清楚层级关系，并且安排好主次关系。
Quartz Composer，简单的说是一个强大的动画合成软件，是Apple的开发软件包中自带的软件。 Quartz Composer编辑好的内容可以输出到Interface Builder（就是现在Xcode的Storyboard）。 优势在于它生成的动态效果灵活丰富，自由度相当高（它可以自定义曲线控制运动速度与轨 迹）， 另外它虽然是编程工具，但基本不用写代码就可以实现生成动态效果与交互所需要的逻辑。
综上所述，这个办法可行却麻烦，且由于不支持各种触摸手势的互动只满足基本的页面跳转，故互 动体验和保真程度都不好。
这里推荐一个简单的软件Briefs（Mac 系统），和它的iPhone App，Briefscase。即在Mac制作 好Demo，然后用App打开这个Demo。它的好处在于首先专门为移动应用（基于iO S设备）的原型 制作 而打造，内置各种屏幕尺寸的iO S设备模型。其次，也是最重要的一点，Briefs支持触摸为主的 手势操作。它支持界面间的基本动态切换效果，这样 Demo中页面的呆板跳转就变为了iO S一直倡 导的优雅转场，更好的在空间层面上表达页面间的层级关系和视觉引导。最后，当你连上手机时， 就可以实时修改 和预览你的Demo，就像在Xcode上编程一样避免了来回的上传下载安装，没有什 么比这点更能高效地帮助你工作了。
最常使用视觉软件就是A do be家族的几兄弟了，Pho t o sho p（风格材质制作，图层样式等效果的合 成等）、Illustrator（图标等矢 量图形绘制）、InDesign（页面排版）基本能满足绝大部分的需求。 当然也有大量针对不同的视觉设计细节流程比如图标设计、字体设计、取色配色、切 图、预览、图 片格式转换等等开发的各种软件、网站和插件等工具。实际工作中需要各种软件中切换、各种流程 上的合作，又着实是另一门大学问了！
所以，完成整个过程的步骤比单纯地制作线框图或者纸原型要复杂很多，涉及到工具也非常丰富。 工具的意义正是帮助我们在工作中提高效率，提升表现效果，市面上一些较典型的工具根据其擅长 的环节，可以做如下简单的分类和介绍：
思路整理 原型绘制 界面元素 互动与反馈 移动展示
其中前三部分是广大设计师熟知并且常用的一些工具，而随着移动互联网的大潮，越来越多的工作 需要我们展示移动设备上的产品和功能。于是，本文更多笔墨将针对移动Demo 的制作和展示上的 有用工具。这里的工具包括了软件工具、移动App、工作方法和一些概念。