五款國外APP原型設計工具的優缺點對比

發表於2015-09-27

這是五款國外優質的移動APP原型設計工具。同時也對每款移動APP原型設計工具的優缺點進行點評。

另外,這五款國外APP原型設計工具都是需要付費的。因為確實好用。功能的也很強大。

1、Proto.io

基於Web介面,帶有IOS和安卓下的偵錯程式

Proto.io這個web應用強大得令人吃驚,它有很多很多的功能。不過,因為所有工作都是依靠拖放、點選按鈕和選擇列表的值,有時候想找到需要的設定會讓人有點兒不知所措。

鑑於IF原型的本質特點——不同的物件以不同的速度移動——我不得不增加一些自定義的JavaScript計算指令碼。Proto.io提供的單行文字框對於冗長的計算指令碼來說太小了。為了能夠概覽指令碼,我得把它們儲存在我電腦上的文字檔案裡。特別需要注意是,這些JavaScript運算式可能會失敗,卻沒有任何警告資訊。如果有些東西不工作,一定要檢查瀏覽器的控制檯。(我遇到一個錯誤,是一個包含負值的變數造成的。)

建立原型的同時預覽

這個相當讓人惱火:你必須每次都點選 [ Save Project ] 然後點 [ Preview ] 才能看到你作出修改後的效果。

把原型發給客戶

在網頁上:簡單——你可以生成一個公網連結,就像這個。(這些連線也可以用移動瀏覽器開啟,然後作為一個“app”新增到IOS主屏上。)你可以在 Proto.io Spaces 向公眾使用者展示你的作品。
在移動裝置上:你可以給使用者建立免費的評估帳號,允許他們訪問一個專案。他們可以在IOS或安卓app裡執行你的原型。

原型跟app的區別

不多。不過動效不夠流暢,因為我不得不在滾動檢視裡新增很多包含自定義JavaScript計算指令碼的互動功能。在web上跑得蠻好的,但是在裝置上實在太慢了。似乎更簡單的原型回放速度能正常些。

優點

易於製作快速的實體模型,因為有大量的標準UI元素庫,而且很多是可以定製的。
Proto.io在這五種工具中是唯一一個同時也是基於頁面的。你可以在一個專案中包含多個屏,屏之間可以建立過渡效果。
支援元件跟Dropbox同步。

缺點

沒有即時預覽。
如果加了很多互動,像本文的例子一樣,動效會變慢。
你的所有原型都儲存在Proto.io的web平臺上,這意味著如果你要取消你的帳號,你連執行它們都不再能了。(有個可能是你把帳號“寄存”:當你重新啟用帳號,你的專案還會在那兒。寄存帳號是免費的。)
3D動效不可能。

原型範例

在 Proto.io Spaces上檢視(註冊一個帳號,把專案匯入到你的帳號就能看了。)

proto.io

iOS app:
Proto.io

Android app:
Proto.io Player

價格:

29美元/月,或者288美元/年,可以有5個活躍專案。還有10、15、30個活躍專案的套餐,以及一個15日免費試用期。


2、Pixate

OS X和Windows桌面應用,IOS和安卓偵錯程式

Pixate似乎恰到好處的平衡了易用性和功能性:它比簡單的基於頁面的工具功能更多,但學習曲線並不很陡。仔細看過使用者指南和視訊教程後你就能上手了。還有幾個演示供你解構,看看它們是怎麼做出來的。

預覽

Pixate Studio可以使用Xcode的IOS Simulator(Mac版)來執行原型,也可以通過本地WiFi用IOS或安卓app來訪問原型。這個功能很棒,特別是Simulator和app都是即時更新的。

發給客戶

如果你有云套餐(5美元/月),你可以釋出一個專案,人們可以用IOS或安卓偵錯程式掃描這個網頁上的二維碼來執行原型。
你可以在你的雲帳號裡增加無限量的”協作者”,允許他們訪問原型,他們必須在偵錯程式app中登入自己的帳號才能訪問。
或者,你可以僅僅把.pixate檔案用郵件發給別人,他們可以在Pixate Studio中開啟並執行(但同時客戶也能看到原型是怎麼做的,還能做出修改)。

跟app的區別

第六個頁面會消失,因為Pixate的canvas畫布只有這麼寬(最多五個頁面)。

優點

易於學習

缺點

依舊有些問題,有時可能需要繞開bug

原型範例

在app中檢視 | 下載.pixate檔案

 

www.pixate.com

Mac或PC應用:
Pixate Studio

移動應用:
iOS | Android

價格:

Pixate Studio

免費!(曾經149美元,直到谷歌於2015年7月收購Pixate。)

Pixate Cloud

5美元/使用者/月 或者 50美元/使用者/年,有30天免費試用期。


3、Facebook Origami

執行在蘋果公司的Mac版Quartz Composer中,iPhone或iPad上有個檢視器用來測試。

你很可能已經知道,Origami是Facebook Paper的設計團隊開發的。Origami不是個獨立程式,它相當於Quartz Composer的一個外掛。而Quartz Composer是一個視覺化程式設計環境,蘋果公司開發工具集的一部分。

在Quartz Composer裡,你通過把多個“patch”相互連線來進行程式設計。不同的patch有不同的功能。Origami主要是一套額外的patch,用來設計app UI。與必須寫程式碼相比,很多人更喜歡這種方式(不包括我)。但是,當你必須描述諸如“如果這樣,那麼就用這段計算的值那樣做,但如果不是這樣….”,你還是不得不“程式設計”,只不過這個程式設計是通過連線幾個patch,而不是寫幾行程式碼。

另外提一下:IDEO也基於Quartz Composer建立了一個原型設計框架,叫Avocado。它有的一些功能,在某些專案裡可能會很方便:藍芽整合、一個IOS互動式鍵盤、一個像滾輪那樣互動的撥號盤patch、和一個可翻轉的卡片patch,而且層也可以做成可拖拽的。

預覽

在桌面:Quartz Composer有一個檢視器,你在編輯器裡的任何修改會在檢視器裡即時得到反映。
在裝置上:用Origami Live app,你可以在IOS裝置上測試,IOS裝置需要插在Mac上。app對所有手勢(觸控、滑動等)都會作出反應,但實際上只是Quartz Composer裡執行的程式的觀察窗而已。如果你的Mac難以以60fps執行原型,那麼它在Origami Live裡面也跑不了多快。

發給客戶

這個就難了。你當然可以給你的原型做一個螢幕錄影,但是這樣就達不到做一個互動式原型的目的了,還不如用After Effects做點什麼呢。唯一一個在其它電腦上測試原型的現實辦法是準備相同的配置。如果你的客戶用Mac,她可以安裝Quartz Composer + Origami來執行你的原型——當然,還得首先註冊蘋果開發者帳號。

跟app的區別

可能會比真傢伙慢一點兒,這取決於你的電腦。Quartz Composer絕對是個電老虎,會讓你的散熱風扇狂轉的,尤其是當你的Mac沒有強大的顯示卡(比如我的Mac Mini),或者連線了多個顯示器(罪過!)。我只用一臺顯示器,最多才能跑到20fps。

優點

文件雖然有些不全,但是有個非常活躍的使用者社群。此外,你還可以找到不少的視訊、教程和博文。

缺點

不容易知道活兒該怎麼做,有那麼多patch,不知道該用哪個。
Quartz Composer否保持活躍開發現在還不清楚,最近的版本是2011年11月份釋出的。但另一方面,蘋果公司很可能會在擱置這個工具之前,發行一個使用Quartz框架的替換工具來做視覺化互動設計。

原型範例

下載.qtz檔案

facebook.github.io/origami

Mac 應用:
install instructions

IOS檢視器:
Origami Live

價格:

免費!你還需要一個蘋果開發者帳號,那也是免費的,就像啤酒、或者隨便蘋果公司的開發人員喝的什麼。(譯者注:蘋果公司每隔數週都會舉行“啤酒狂歡”獎勵員工,為他們提供免費啤酒和開胃菜。)

4、Framer

Framer Studio是Mac上的原型設計應用,但Framer.js僅需要Safari或Chrome.

互動原型設計框架 Framer.js  官網:http://framerjs.com/

 

這裡沒有拖放、按鈕或連線點,用Framer你必須“寫程式碼”。程式設計師會覺得這跟在家一樣自在,而設計師就未必了。不過它並不很難————Framer Studio使用了一款精簡版的JavaScript,叫CoffeeScript。實際的引擎(Framer.js)使用JavaScripts,這就造就了大量的可能性:只要瀏覽器可以做的你都能做,比如使用即時資料連線伺服器,或者建立一個Twitter客戶端顯示實時推文。

預覽

在桌面:Framer Studio在右側有個即時可互動的預覽,你做的修改可以馬上更新。
在裝置上:有安卓和IOS下的app,在同一個WiFi網路裡它們都可以連線到Framer Studio,每次在Framer Studio儲存修改後會自動重新整理原型。

發給客戶

只需點一下滑鼠就能生成一個公開頁面(比如這個),可以用Chrome或Safari檢視,移動瀏覽器也行(連結可以作為“應用”加入到IOS主屏)。同樣的連結也能用IOS和安卓檢視器(其實就是無邊框的瀏覽器)開啟。像IF這樣較大的原型在檢視器里載入需要花幾秒鐘,但載入後動效就平滑了。

跟app的區別

這個原型比其它四個更能幹一些:你可以在最近的一頁切換登入、註冊和重置密碼模式。(你並不能真正的登入或註冊,但這些操作在Framer裡也能再現。)

優點

與 Sketch 或 Photoshop的整合是再好不過了:設計的時候可以用你給的命名來引用層或物件。(Framer.js包含一個Mac應用Framer Generator,也能做到這一點。)
任何JavaScript能做到的——比如從web service獲得即時資料,使用加速度感測器——用Framer都是可以實現的。

缺點

你必須為所有東西寫程式碼,包括動效或互動。你需要熟悉或者瞭解CoffeeScript,或許再加上JavaScript。

原型範例

線上檢視 | 下載.framer專案

framerjs.com

Mac應用:
Framer Studio

iOS app:
Frameless

Android app:
Framer

價格:

Framer.js,JavaScript框架,是開源免費的。

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


5、Form by RelativeWave

Mac應用,帶有一個iPhone或iPad上的檢視器

Form還很年輕(2014年9月釋出),而且很明顯,它是從Facebook和IDEO在Quartz Composer上所做的得到了啟發。RelativeWave的那些傢伙很可能想:“如果沒有Quartz Composer這個包袱,Origami會是什麼樣呢?” Origami使用者會覺得Form用起來很舒服,很多patch是相同的,而且Form只包含你需要的那些patch。

預覽

原型是在通過WiFi或USB連線的IOS裝置上執行的。如果沒有裝置連上,你會發現雙擊兩個patch之間的連線時不會有讀數顯示出來。如果像Quartz Composer那樣,Mac應用裡帶個檢視器的話肯定是很方便的,這個功能似乎已經在計劃中了

發給客戶

免費的IOS檢視器能夠開啟.form檔案,你只需要把檔案用郵件發給客戶,讓他們用自己的IOS裝置執行即可。

跟app的區別

我覺得不多。如果你發現了就告訴我。

優點

與Origami相比:原型在裝置上是以原生方式執行的,所以比Origami Live反應靈敏得多。
你可以使用裝置上的相機、加速度感測器、陀螺儀和定位功能。(Origami可以使用Mac上的攝像頭)

缺點

跟Origami一樣,如果搞了一個複雜的原型,跑起來就像麵湯一樣粘呼呼的。把patch組合起來能夠獲得更好的概覽效果。

原型範例

下載.form檔案

www.relativewave.com

Mac應用:
Form

iOS app:
Form Viewer

價格

免費!Mac應用曾經是79.99美元,谷歌去年11月(那時Form釋出了僅僅數月)收購了RelativeWave之後就免費提供了。

相關文章