创建更好的移动Demo:工具篇

一、什么是“更好”的Demo

什么是Demo？Demo是Demonstration的缩写，表示“示范”、“展示”，常指具有示范或展示功能及意味的事物。本文中Demo的含义更接近与维基百科中的这个解释：一种原型，主要用来展示想法、表现、方法或者是产品特点的简易样例或未完成的产品版本。它常常用来对投资者、合伙人、记者甚至于潜在的用户展示其选择方法的可行性。在视觉、交互和内容的保真程度上有着高保真和低保真的区分，所以本文的Demo就是指在这三个纬度（视觉、交互、内容）保真程度都较高的原型。

Demo往往用在以下几个场合和对象：

新产品 / 功能的演示－投资者、老板、合伙人

用户研究/市场调研－研究员、潜在目标用户

可用性测试－真实用户

交互 / 设计走查－设计师、产品经理、专家

什么是“更好”的Demo：

核心功能完整，主要任务流足够深度
交互保真程度高，操作的体验感真实
根据场合与目的有适当的视觉细节
避免制作过程“过于费工”或“效率低下”

二、工具与步骤

设计师们特别是交互设计师往往需要承担制作Demo的工作，而这个过程从上涉及到产品想法和主要功能、信息架构和界面的组织，甚至向下涉及到视觉风格和互动反馈等各个环节；打交道的人可能包括了产品经理（提供原始的产品概念，用户需求分析或者是功能完整的产品文档），视觉设计师（提供UI风格和设计稿），用户研究员（提出测试用例或者研究需求）。

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

思路整理
原型绘制
界面元素
互动与反馈
移动展示

其中前三部分是广大设计师熟知并且常用的一些工具，而随着移动互联网的大潮，越来越多的工作需要我们展示移动设备上的产品和功能。于是，本文更多笔墨将针对移动Demo的制作和展示上的有用工具。这里的工具包括了软件工具、移动App、工作方法和一些概念。

2.1 思路整理

在制作Demo时，我们并不是要做一个高大全的东西出来，一个是没必要，另一个理由是不划算。基本上只要满足在展示或者演示的过程中“不露破绽”即可，所以最开始并不必急着去搭建产品的架构或者界面，而是要围绕着展示目标和形式，并且充分考虑到谁将来用这个Demo，来规划整体的思路——Demo的“剧本”。

思维管理软件：MindManager、Mindjet。也叫思维导图或者心智图，既可以用在放射性思考的展开过程，也可以用在整理各级主题的相互关系，最快可以整理并可视化出一个抽象的概念或者过程，下图就是一个简单的Mindjet的输出物例子。利用思维管理软件，就能将Demo里要展示的产品主要功能抽丝剥茧列清楚层级关系，并且安排好主次关系。

Storyboard：故事板，也叫分镜脚本，虽然更多用在电影、动画、电视剧、广告等影像媒体的创作前期，下图是一个简易故事板的例子。Demo和产品完整App的不同之处在于目的在于“展示”而非“使用”，所以可以借助storyboard的方法将产品核心使用场景下的主要功能用任务的形式在时间线上做一个规划和梳理。在交互展示性的Demo中，storyboard的作用就更加强大了，通过对场景和情节的引入，往往会使整个产品或服务看起来更有说服力。

2.4.2 添加跳转关系

根据展示的思路（Mindjet）或者脚本（Storyboard）的产出物，我们已经清晰的知道Demo的展示逻辑和任务流程，即已经定义好了用户/观众的交互路径，这时候只需要将页面元素拼装成Demo中会出现的页面，在这些用来交互的控件上面添加跳转关系就可以了。

我周围最为常用的添加互动的软件是Axure，添加完并导出之后生成一个装着HTML文件的文件夹。Axure的好处就是内置了非常丰富的网站交互模式和鼠标事件。基本上网站上有的Click、Hover等操作都有，对应页面间的跳转、打开新页面等反馈也非常丰富。

这时我们不难发现，这些操作和互动都是针对网站或者网页产品的，Demo展示的时候也需要网页浏览器来解析播放。如果要在手机上看，事情就会变得有点复杂。以下一个迂回的解决方案：

Step1 发布设置

点击Publish>Generate HTML，在Mobile / Device的面板中可以安需要设置设备和Icon等内容。

Step2 xa0手机浏览方法A：将整个文件夹传到一个网络地址上，类似发布一个网站，使其中的每个HTML有自己的访问网址。在手机的浏览器上访问这个网址，就可以看到了，具体操作看这里。但事实上如何将一个文件夹发布到网络上，就已经是一件很多设计师觉得比较麻烦并纠结的事情，因为你需要网络空间或者一个服务器之类的东西。

这个时候，需要以下方法B：下载一个网盘App（如AirDisk Pro），iPhone链接电脑在iTunes的“应用程序”下面找到这个App并添加这个压缩包，然后在手机的App里面解压这个文件夹，浏览就可以了；同样也可以利用一个内置浏览器的阅读类App 和一个解压App来达成，具体操作看这里。

综上所述，这个办法可行却麻烦，且由于不支持各种触摸手势的互动只满足基本的页面跳转，故互动体验和保真程度都不好。

这里推荐一个简单的软件Briefs（Mac系统），和它的iPhone App，Briefscase。即在Mac制作好Demo，然后用App打开这个Demo。它的好处在于首先专门为移动应用（基于iOS设备）的原型制作而打造，内置各种屏幕尺寸的iOS设备模型。其次，也是最重要的一点，Briefs支持触摸为主的手势操作。它支持界面间的基本动态切换效果，这样Demo中页面的呆板跳转就变为了iOS一直倡导的优雅转场，更好的在空间层面上表达页面间的层级关系和视觉引导。最后，当你连上手机时，就可以实时修改和预览你的Demo，就像在Xcode上编程一样避免了来回的上传下载安装，没有什么比这点更能高效地帮助你工作了。

还有网站强烈推荐给大家，flintoxa0，是一个专门为iOS原型设计的工具，链接添加非常高效，也支持iPhone中页面切换的各种转场效果；更方便的一点是在分享环节中，会自动生成一个网页地址，用手机和电脑都可以访问到这个Demo了。最妙的是当你将这个链接直接发送到邮箱里，在iPhone上打开邮件点击链接，在浏览器中点击“分享”按钮，就可以将这个Demo直接添加到手机桌面上了哦，就像一个真的App！

类似的工具还有 proto.io（类似flinto，基于网站的应用），Prototypr（类似Briefs，有Mac客户端和iPhone App，）等等，有兴趣的都可以下载来玩玩，这些都是收费的软件或者服务，几十到几百人民币，不算贵咯！

2.4.3 更细致的效果

其实做到上面2.4.2的部分，你的Demo已经相对完整并可供把玩了，但是总有些人是完美主义者，还想再进一步怎么办？这时你也许就需要更多的一些时间精力和爱来学新的东西——Xcode的Storyboard，Quartz Composer，Flash或是After Effects等，当然这需要你具备对细节极致追求的心态、懂一些基础英文、数学和编程技巧。

有哪些更细致的效果呢：支持除点击之外的手势操作（长按、轻抚、多指操作等）；界面切换时有更逼真的动态效果和视觉引导；支持声音、视频等多媒体的播放。

Xcode的Storyboard，前身是Xcode里面的Interface Builder，在Xcode里面的一个便捷图形化的工具。在开发环境中，没有任何限制，设计师可以嵌入各种各样有趣的交互，动态效果和声音去创造一个真实的iOS App的体验。这里有同学翻译了一篇很实用并且详尽的教程，我也试着有跟着边学边做了一个小Demo。

好处是可以直接使用大量的iOS自带的标准界面控件，支持触摸手势，并且在页面切换时有和实际iPhone App中一样的动态效果。缺点也很明显，当跳转关系非常复杂的时候，软件的可用性就打折扣了，不得不眼花花地去找到某条连接（Segue）来调整手势或者是页面转场等动画，就如下图所示。还有个明显不足，因为Xcode是为工程师和开发者设计的，所以整个界面非常复杂，信息量极大，不熟悉的话很容易抓狂。过程中也常遇到一些问题，就像那篇教程的作者说的一样，这时候我们需要身边的iOS工程师的帮忙咯！这里是另一个详尽的入门教程。