手机上快速制作APP Demo的交互神器-App.eal

当我们完成一系列的APP设计草图或者UI效果图的时候，如果想要快速制作一个比较合理的APP展示demo是移动产品经理或者说移动APP设计师必要的一项工作。

当我们提到这个在手机上快速制作APP Demo的交互神器肯定会想到POP。

因为POP最简单粗暴易上手，顾名思义就是做纸原型。

分三个步骤，第一步在纸上画出线框图，第二步拍下这些图，第三步就是添加跳转链接，就是这么简单！

移动APP原型设计神器 POP（Prototyping on Paper）

还有之前网站模版网(www.genban.org)推荐的：五款移动APP在线原型设计工具，值得收藏。

然而今天网站模版网(www.genban.org)向大家推荐的这款手机上快速制作APP Demo的交互神器是App.eal

app.eal（中文名：爱备）是一个有意思的应用，也是手机做Demo来说功能非常强大的一款，也是为数不多有中文版本的一个App。比起POP来说，支持转场效果、支持导航栏与标签栏等都是我们喜闻乐见的功能。

 

支持设置众多的交互细节能够帮助制作出更逼真的Demo。

app.eal是一款基于图片的原型工具，能够实现无需代码便可快速建立原型。助你快速实现自己的设计构思，帮助你提供更为精良的原型设计方案。

该款手机上快速制作APP Demo的交互神器-App.eal酷站网址：www.appealapp.com/cn/index.html

 

下面是网站模版网(www.genban.org)精心为大家准备的一些制作移动APP demo的流程和步骤：

第一步、 准备图片素材

在高保真原型制作中，使用的就是视觉设计后的界面图片素材。所以要制作动态的Demo的话，需要Demo中涉及到的所有功能的视觉元素的图片：界面整体效果图、各控件切图、各层次的界面内容的文本或图片等等。这时候需要我们自己在psd的源文件里面切出所有的图片素材，这个步骤就是炒菜中的切菜备料。这里介绍一个很好用便捷的免费Photoshop切图插件Cut&Slice me(目前仅支持CS6)，Photoshop CC也有类似的功能。

 

第二步、 添加跳转关系

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

第三步、 调整出更细致的效果

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

 

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

 

第四步、 应用移动展示效果

Demo的最终目的是秀出来，不知道你是否发现传统PC软件(Axure和网页三剑客Flash、Fireworks和Dreamware)制作的Demo在移动设备上的展示总是很奇怪或者蹩脚。原因很好理解，这些软件都是基于网页产品的原型Demo工具，生成的可交互文件格式为HTML或者是swf，很显然与App在手机上的运行机制和所受限制完全不同。