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

时间:2016-04-08

当我们完成一系列的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来说,支持转场效果、支持导航栏与标签栏等都是我们喜闻乐见的功能。

app.eal

 

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

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

app demo制作
该款手机上快速制作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中会出现的页面,在这些用来交互的控件上面添加跳转关系就可以了。

justmind

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

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

 

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

 

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

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

 

上一条:从滴滴打车APP和快的打车APP上可以学到什么? 下一条:回顾织梦模板网精心整理的APP设计规范大全

相关文章

最新文章