手機(jī)上快速制作APP Demo的交互神器-App.eal

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

當(dāng)我們提到這個(gè)在手機(jī)上快速制作APP Demo的交互神器肯定會(huì)想到POP。

因?yàn)镻OP最簡(jiǎn)單粗暴易上手,顧名思義就是做紙?jiān)汀?

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

移動(dòng)APP原型設(shè)計(jì)神器 POP(Prototyping on Paper)

還有之前25學(xué)堂推薦的:五款移動(dòng)APP在線原型設(shè)計(jì)工具,值得收藏。

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

app.eal(中文名:愛備)是一個(gè)有意思的應(yīng)用,也是手機(jī)做Demo來說功能非常強(qiáng)大的一款,也是為數(shù)不多有中文版本的一個(gè)App。比起POP來說,支持轉(zhuǎn)場(chǎng)效果、支持導(dǎo)航欄與標(biāo)簽欄等都是我們喜聞樂見的功能。

app.eal

 

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

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

app demo制作

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

 

下面是25學(xué)堂精心為大家準(zhǔn)備的一些制作移動(dòng)APP demo的流程和步驟:

第一步、 準(zhǔn)備圖片素材

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

 

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

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

justmind

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

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

 

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

 

第四步、 應(yīng)用移動(dòng)展示效果

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

 

每天更新,
全站高品質(zhì)素材免費(fèi)下載!