五款國(guó)外APP原型設(shè)計(jì)工具的優(yōu)缺點(diǎn)對(duì)比

這是25學(xué)堂分享的五款國(guó)外優(yōu)質(zhì)的移動(dòng)APP原型設(shè)計(jì)工具。同時(shí)也對(duì)每款移動(dòng)APP原型設(shè)計(jì)工具的優(yōu)缺點(diǎn)進(jìn)行點(diǎn)評(píng)。

另外,這五款國(guó)外APP原型設(shè)計(jì)工具都是需要付費(fèi)的。因?yàn)榇_實(shí)好用。功能的也很強(qiáng)大。

 

1、Proto.io

基于Web界面,帶有IOS和安卓下的調(diào)試器

proto

Proto.io這個(gè)web應(yīng)用強(qiáng)大得令人吃驚,它有很多很多的功能。不過(guò),因?yàn)樗泄ぷ鞫际且揽客戏?、點(diǎn)擊按鈕和選擇列表的值,有時(shí)候想找到需要的設(shè)定會(huì)讓人有點(diǎn)兒不知所措。

鑒于IF原型的本質(zhì)特點(diǎn)——不同的對(duì)象以不同的速度移動(dòng)——我不得不增加一些自定義的JavaScript計(jì)算腳本。Proto.io提供的單行文本框?qū)τ谌唛L(zhǎng)的計(jì)算腳本來(lái)說(shuō)太小了。為了能夠概覽腳本,我得把它們保存在我電腦上的文本文件里。特別需要注意是,這些JavaScript運(yùn)算式可能會(huì)失敗,卻沒(méi)有任何警告信息。如果有些東西不工作,一定要檢查瀏覽器的控制臺(tái)。(我遇到一個(gè)錯(cuò)誤,是一個(gè)包含負(fù)值的變量造成的。)

創(chuàng)建原型的同時(shí)預(yù)覽

這個(gè)相當(dāng)讓人惱火:你必須每次都點(diǎn)擊 [ Save Project ] 然后點(diǎn) [ Preview ] 才能看到你作出修改后的效果。

把原型發(fā)給客戶

在網(wǎng)頁(yè)上:簡(jiǎn)單——你可以生成一個(gè)公網(wǎng)鏈接,就像這個(gè)。(這些連接也可以用移動(dòng)瀏覽器打開(kāi),然后作為一個(gè)“app”添加到IOS主屏上。)你可以在?Proto.io Spaces?向公眾用戶展示你的作品。

在移動(dòng)設(shè)備上:你可以給用戶建立免費(fèi)的評(píng)估帳號(hào),允許他們?cè)L問(wèn)一個(gè)項(xiàng)目。他們可以在IOS或安卓app里運(yùn)行你的原型。

原型跟app的區(qū)別

不多。不過(guò)動(dòng)效不夠流暢,因?yàn)槲也坏貌辉跐L動(dòng)視圖里添加很多包含自定義JavaScript計(jì)算腳本的交互功能。在web上跑得蠻好的,但是在設(shè)備上實(shí)在太慢了。似乎更簡(jiǎn)單的原型回放速度能正常些。

優(yōu)點(diǎn)

易于制作快速的實(shí)體模型,因?yàn)橛写罅康臉?biāo)準(zhǔn)UI元素庫(kù),而且很多是可以定制的。

Proto.io在這五種工具中是唯一一個(gè)同時(shí)也是基于頁(yè)面的。你可以在一個(gè)項(xiàng)目中包含多個(gè)屏,屏之間可以創(chuàng)建過(guò)渡效果。

支持元件跟Dropbox同步。

缺點(diǎn)

沒(méi)有即時(shí)預(yù)覽。

如果加了很多交互,像本文的例子一樣,動(dòng)效會(huì)變慢。

你的所有原型都保存在Proto.io的web平臺(tái)上,這意味著如果你要取消你的帳號(hào),你連運(yùn)行它們都不再能了。(有個(gè)可能是你把帳號(hào)“寄存”:當(dāng)你重新激活帳號(hào),你的項(xiàng)目還會(huì)在那兒。寄存帳號(hào)是免費(fèi)的。)

3D動(dòng)效不可能。

原型范例

在?Proto.io Spaces上查看(注冊(cè)一個(gè)帳號(hào),把項(xiàng)目導(dǎo)入到你的帳號(hào)就能看了。)

proto.io

iOS app:

Proto.io

Android app:

Proto.io Player

 

價(jià)格:

29美元/月,或者288美元/年,可以有5個(gè)活躍項(xiàng)目。還有10、15、30個(gè)活躍項(xiàng)目的套餐,以及一個(gè)15日免費(fèi)試用期。

 


2、Pixate

 

OS X和Windows桌面應(yīng)用,IOS和安卓調(diào)試器

pixate

Pixate似乎恰到好處的平衡了易用性和功能性:它比簡(jiǎn)單的基于頁(yè)面的工具功能更多,但學(xué)習(xí)曲線并不很陡。仔細(xì)看過(guò)用戶指南和視頻教程后你就能上手了。還有幾個(gè)演示供你解構(gòu),看看它們是怎么做出來(lái)的。

預(yù)覽

Pixate Studio可以使用Xcode的IOS Simulator(Mac版)來(lái)運(yùn)行原型,也可以通過(guò)本地WiFi用IOS或安卓app來(lái)訪問(wèn)原型。這個(gè)功能很棒,特別是Simulator和app都是即時(shí)更新的。

 

發(fā)給客戶

如果你有云套餐(5美元/月),你可以發(fā)布一個(gè)項(xiàng)目,人們可以用IOS或安卓調(diào)試器掃描這個(gè)網(wǎng)頁(yè)上的二維碼來(lái)運(yùn)行原型。

你可以在你的云帳號(hào)里增加無(wú)限量的"協(xié)作者",允許他們?cè)L問(wèn)原型,他們必須在調(diào)試器app中登錄自己的帳號(hào)才能訪問(wèn)。

或者,你可以僅僅把.pixate文件用郵件發(fā)給別人,他們可以在Pixate Studio中打開(kāi)并運(yùn)行(但同時(shí)客戶也能看到原型是怎么做的,還能做出修改)。

跟app的區(qū)別

第六個(gè)頁(yè)面會(huì)消失,因?yàn)镻ixate的canvas畫布只有這么寬(最多五個(gè)頁(yè)面)。

優(yōu)點(diǎn)

易于學(xué)習(xí)

缺點(diǎn)

依舊有些問(wèn)題,有時(shí)可能需要繞開(kāi)bug。

原型范例

在app中查看?|?下載.pixate文件

?

www.pixate.com

Mac或PC應(yīng)用:

Pixate Studio

移動(dòng)應(yīng)用:

iOS?|?Android

 

價(jià)格:

Pixate Studio

免費(fèi)!(曾經(jīng)149美元,直到谷歌于2015年7月收購(gòu)Pixate。)

Pixate Cloud

5美元/用戶/月 或者 50美元/用戶/年,有30天免費(fèi)試用期。

 


3、Facebook Origami

運(yùn)行在蘋果公司的Mac版Quartz Composer中,iPhone或iPad上有個(gè)查看器用來(lái)測(cè)試。

Origami

你很可能已經(jīng)知道,Origami是Facebook?Paper的設(shè)計(jì)團(tuán)隊(duì)開(kāi)發(fā)的。Origami不是個(gè)獨(dú)立程序,它相當(dāng)于Quartz Composer的一個(gè)插件。而Quartz Composer是一個(gè)可視化程序設(shè)計(jì)環(huán)境,蘋果公司開(kāi)發(fā)工具集的一部分。

 

在Quartz Composer里,你通過(guò)把多個(gè)“patch”相互連接來(lái)進(jìn)行編程。不同的patch有不同的功能。Origami主要是一套額外的patch,用來(lái)設(shè)計(jì)app UI。與必須寫代碼相比,很多人更喜歡這種方式(不包括我)。但是,當(dāng)你必須描述諸如“如果這樣,那么就用這段計(jì)算的值那樣做,但如果不是這樣....”,你還是不得不“編程”,只不過(guò)這個(gè)編程是通過(guò)連接幾個(gè)patch,而不是寫幾行代碼。

另外提一下:IDEO也基于Quartz Composer創(chuàng)建了一個(gè)原型設(shè)計(jì)框架,叫Avocado。它有的一些功能,在某些項(xiàng)目里可能會(huì)很方便:藍(lán)牙集成、一個(gè)IOS交互式鍵盤、一個(gè)像滾輪那樣交互的撥號(hào)盤patch、和一個(gè)可翻轉(zhuǎn)的卡片patch,而且層也可以做成可拖拽的。

預(yù)覽

在桌面:Quartz Composer有一個(gè)查看器,你在編輯器里的任何修改會(huì)在查看器里即時(shí)得到反映。

在設(shè)備上:用Origami Live app,你可以在IOS設(shè)備上測(cè)試,IOS設(shè)備需要插在Mac上。app對(duì)所有手勢(shì)(觸摸、滑動(dòng)等)都會(huì)作出反應(yīng),但實(shí)際上只是Quartz Composer里運(yùn)行的程序的觀察窗而已。如果你的Mac難以以60fps運(yùn)行原型,那么它在Origami Live里面也跑不了多快。

發(fā)給客戶

這個(gè)就難了。你當(dāng)然可以給你的原型做一個(gè)屏幕錄像,但是這樣就達(dá)不到做一個(gè)交互式原型的目的了,還不如用After Effects做點(diǎn)什么呢。唯一一個(gè)在其它電腦上測(cè)試原型的現(xiàn)實(shí)辦法是準(zhǔn)備相同的配置。如果你的客戶用Mac,她可以安裝Quartz Composer + Origami來(lái)運(yùn)行你的原型——當(dāng)然,還得首先注冊(cè)蘋果開(kāi)發(fā)者帳號(hào)。

跟app的區(qū)別

可能會(huì)比真家伙慢一點(diǎn)兒,這取決于你的電腦。Quartz Composer絕對(duì)是個(gè)電老虎,會(huì)讓你的散熱風(fēng)扇狂轉(zhuǎn)的,尤其是當(dāng)你的Mac沒(méi)有強(qiáng)大的顯卡(比如我的Mac Mini),或者連接了多個(gè)顯示器(罪過(guò)?。?。我只用一臺(tái)顯示器,最多才能跑到20fps。

優(yōu)點(diǎn)

文檔雖然有些不全,但是有個(gè)非?;钴S的用戶社區(qū)。此外,你還可以找到不少的視頻、教程和博文。

缺點(diǎn)

不容易知道活兒該怎么做,有那么多patch,不知道該用哪個(gè)。

Quartz Composer否保持活躍開(kāi)發(fā)現(xiàn)在還不清楚,最近的版本是2011年11月份發(fā)布的。但另一方面,蘋果公司很可能會(huì)在擱置這個(gè)工具之前,發(fā)行一個(gè)使用Quartz框架的替換工具來(lái)做可視化交互設(shè)計(jì)。

原型范例

下載.qtz文件

facebook.github.io/origami

Mac 應(yīng)用:

install instructions

IOS查看器:

Origami Live

 

價(jià)格:

免費(fèi)!你還需要一個(gè)蘋果開(kāi)發(fā)者帳號(hào),那也是免費(fèi)的,就像啤酒、或者隨便蘋果公司的開(kāi)發(fā)人員喝的什么。(譯者注:蘋果公司每隔數(shù)周都會(huì)舉行“啤酒狂歡”獎(jiǎng)勵(lì)員工,為他們提供免費(fèi)啤酒和開(kāi)胃菜。)

 


4、Framer

Framer Studio是Mac上的原型設(shè)計(jì)應(yīng)用,但Framer.js僅需要Safari或Chrome.

交互原型設(shè)計(jì)框架?Framer.js ?官網(wǎng):http://framerjs.com/

Framerjs

 

這里沒(méi)有拖放、按鈕或連接點(diǎn),用Framer你必須“寫代碼”。程序員會(huì)覺(jué)得這跟在家一樣自在,而設(shè)計(jì)師就未必了。不過(guò)它并不很難————Framer Studio使用了一款精簡(jiǎn)版的JavaScript,叫CoffeeScript。實(shí)際的引擎(Framer.js)使用JavaScripts,這就造就了大量的可能性:只要瀏覽器可以做的你都能做,比如使用即時(shí)數(shù)據(jù)連接服務(wù)器,或者創(chuàng)建一個(gè)Twitter客戶端顯示實(shí)時(shí)推文。

預(yù)覽

在桌面:Framer Studio在右側(cè)有個(gè)即時(shí)可交互的預(yù)覽,你做的修改可以馬上更新。

在設(shè)備上:有安卓和IOS下的app,在同一個(gè)WiFi網(wǎng)絡(luò)里它們都可以連接到Framer Studio,每次在Framer Studio保存修改后會(huì)自動(dòng)刷新原型。

發(fā)給客戶

只需點(diǎn)一下鼠標(biāo)就能生成一個(gè)公開(kāi)頁(yè)面(比如這個(gè)),可以用Chrome或Safari查看,移動(dòng)瀏覽器也行(鏈接可以作為“應(yīng)用”加入到IOS主屏)。同樣的鏈接也能用IOS和安卓查看器(其實(shí)就是無(wú)邊框的瀏覽器)打開(kāi)。像IF這樣較大的原型在查看器里加載需要花幾秒鐘,但加載后動(dòng)效就平滑了。

跟app的區(qū)別

這個(gè)原型比其它四個(gè)更能干一些:你可以在最近的一頁(yè)切換登錄、注冊(cè)和重置密碼模式。(你并不能真正的登錄或注冊(cè),但這些操作在Framer里也能再現(xiàn)。)

優(yōu)點(diǎn)

與 Sketch 或 Photoshop的集成是再好不過(guò)了:設(shè)計(jì)的時(shí)候可以用你給的命名來(lái)引用層或?qū)ο?。(Framer.js包含一個(gè)Mac應(yīng)用Framer Generator,也能做到這一點(diǎn)。)

任何JavaScript能做到的——比如從web service獲得即時(shí)數(shù)據(jù),使用加速度傳感器——用Framer都是可以實(shí)現(xiàn)的。

缺點(diǎn)

你必須為所有東西寫代碼,包括動(dòng)效或交互。你需要熟悉或者了解CoffeeScript,或許再加上JavaScript。

原型范例

在線查看?|?下載.framer項(xiàng)目

framerjs.com

Mac應(yīng)用:

Framer Studio

iOS app:

Frameless

Android app:

Framer

 

價(jià)格:

Framer.js,JavaScript框架,是開(kāi)源免費(fèi)的。

Framer Studio 需要99美元。(有14天免費(fèi)試用期。)

 


5、Form by RelativeWave

Mac應(yīng)用,帶有一個(gè)iPhone或iPad上的查看器

Form

Form還很年輕(2014年9月發(fā)布),而且很明顯,它是從Facebook和IDEO在Quartz Composer上所做的得到了啟發(fā)。RelativeWave的那些家伙很可能想:“如果沒(méi)有Quartz Composer這個(gè)包袱,Origami會(huì)是什么樣呢?” Origami用戶會(huì)覺(jué)得Form用起來(lái)很舒服,很多patch是相同的,而且Form只包含你需要的那些patch。

預(yù)覽

原型是在通過(guò)WiFi或USB連接的IOS設(shè)備上運(yùn)行的。如果沒(méi)有設(shè)備連上,你會(huì)發(fā)現(xiàn)雙擊兩個(gè)patch之間的連接時(shí)不會(huì)有讀數(shù)顯示出來(lái)。如果像Quartz Composer那樣,Mac應(yīng)用里帶個(gè)查看器的話肯定是很方便的,這個(gè)功能似乎已經(jīng)在計(jì)劃中了。

發(fā)給客戶

免費(fèi)的IOS查看器能夠打開(kāi).form文件,你只需要把文件用郵件發(fā)給客戶,讓他們用自己的IOS設(shè)備運(yùn)行即可。

跟app的區(qū)別

我覺(jué)得不多。如果你發(fā)現(xiàn)了就告訴我。

優(yōu)點(diǎn)

與Origami相比:原型在設(shè)備上是以原生方式運(yùn)行的,所以比Origami Live反應(yīng)靈敏得多。

你可以使用設(shè)備上的相機(jī)、加速度傳感器、陀螺儀和定位功能。(Origami可以使用Mac上的攝像頭)

缺點(diǎn)

跟Origami一樣,如果搞了一個(gè)復(fù)雜的原型,跑起來(lái)就像面湯一樣粘呼呼的。把patch組合起來(lái)能夠獲得更好的概覽效果。

原型范例

下載.form文件

www.relativewave.com

Mac應(yīng)用:

Form

iOS app:

Form Viewer

價(jià)格

免費(fèi)!Mac應(yīng)用曾經(jīng)是79.99美元,谷歌去年11月(那時(shí)Form發(fā)布了僅僅數(shù)月)收購(gòu)了RelativeWave之后就免費(fèi)提供了。

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