當我們完成一系列的APP設計草圖或者UI效果圖的時候，如果想要快速制作一個比較合理的APP展示demo是移動產(chǎn)品經(jīng)理或者說移動APP設計師必要的一項工作。

當我們提到這個在手機上快速制作APP Demo的交互神器肯定會想到POP。

因為POP最簡單粗暴易上手，顧名思義就是做紙原型。

分三個步驟，第一步在紙上畫出線框圖，第二步拍下這些圖，第三步就是添加跳轉(zhuǎn)鏈接，就是這么簡單！

移動APP原型設計神器 POP（Prototyping on Paper）

還有之前25學堂推薦的：五款移動APP在線原型設計工具，值得收藏。

然而今天25學堂向大家推薦的這款手機上快速制作APP Demo的交互神器是App.eal

app.eal（中文名：愛備）是一個有意思的應用，也是手機做Demo來說功能非常強大的一款，也是為數(shù)不多有中文版本的一個App。比起POP來說，支持轉(zhuǎn)場效果、支持導航欄與標簽欄等都是我們喜聞樂見的功能。

支持設置眾多的交互細節(jié)能夠幫助制作出更逼真的Demo。

app.eal是一款基于圖片的原型工具，能夠?qū)崿F(xiàn)無需代碼便可快速建立原型。助你快速實現(xiàn)自己的設計構思，幫助你提供更為精良的原型設計方案。

該款手機上快速制作APP Demo的交互神器-App.eal酷站網(wǎng)址：www.appealapp.com/cn/index.html

下面是25學堂精心為大家準備的一些制作移動APP demo的流程和步驟：

第一步、 準備圖片素材

在高保真原型制作中，使用的就是視覺設計后的界面圖片素材。所以要制作動態(tài)的Demo的話，需要Demo中涉及到的所有功能的視覺元素的圖片：界面整體效果圖、各控件切圖、各層次的界面內(nèi)容的文本或圖片等等。這時候需要我們自己在psd的源文件里面切出所有的圖片素材，這個步驟就是炒菜中的切菜備料。這里介紹一個很好用便捷的免費Photoshop切圖插件Cut&Slice me(目前僅支持CS6)，Photoshop CC也有類似的功能。

第二步、 添加跳轉(zhuǎn)關系

根據(jù)展示的思路(Mindjet)或者腳本(Storyboard)的產(chǎn)出物，我們已經(jīng)清晰的知道Demo的展示邏輯和任務流程，即已經(jīng)定義好了用戶/觀眾的交互路徑，這時候只需要將頁面元素拼裝成Demo中會出現(xiàn)的頁面，在這些用來交互的控件上面添加跳轉(zhuǎn)關系就可以了。

第三步、 調(diào)整出更細致的效果

其實做到上面2的部分，你的Demo已經(jīng)相對完整并可供把玩了，但是總有些人是完美主義者，還想再進一步怎么辦?這時你也許就需要更多的一些時間精力和愛來學新的東西——Xcode的Storyboard，Quartz Composer，F(xiàn)lash或是After Effects等，當然這需要你具備對細節(jié)極致追求的心態(tài)、懂一些基礎英文、數(shù)學和編程技巧。

有哪些更細致的效果呢：支持除點擊之外的手勢操作(長按、輕撫、多指操作等);界面切換時有更逼真的動態(tài)效果和視覺引導;支持聲音、視頻等多媒體的播放。

第四步、 應用移動展示效果

Demo的最終目的是秀出來，不知道你是否發(fā)現(xiàn)傳統(tǒng)PC軟件(Axure和網(wǎng)頁三劍客Flash、Fireworks和Dreamware)制作的Demo在移動設備上的展示總是很奇怪或者蹩腳。原因很好理解，這些軟件都是基于網(wǎng)頁產(chǎn)品的原型Demo工具，生成的可交互文件格式為HTML或者是swf，很顯然與App在手機上的運行機制和所受限制完全不同。