設(shè)計教程

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

9224

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

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

1、Proto.io

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

proto

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

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

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

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

把原型發(fā)給客戶

在網(wǎng)頁上：簡單——你可以生成一個公網(wǎng)鏈接，就像這個。（這些連接也可以用移動瀏覽器打開，然后作為一個“app”添加到IOS主屏上。）你可以在?Proto.io Spaces?向公眾用戶展示你的作品。

在移動設(shè)備上：你可以給用戶建立免費(fèi)的評估帳號，允許他們訪問一個項(xiàng)目。他們可以在IOS或安卓app里運(yùn)行你的原型。

原型跟app的區(qū)別

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

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

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

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

支持元件跟Dropbox同步。

缺點(diǎn)

沒有即時預(yù)覽。

如果加了很多交互，像本文的例子一樣，動效會變慢。

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

3D動效不可能。

原型范例

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

proto.io

iOS app:

Proto.io

Android app:

Proto.io Player

價格：

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

2、Pixate

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

pixate

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

預(yù)覽

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

發(fā)給客戶

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

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

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

跟app的區(qū)別

第六個頁面會消失，因?yàn)镻ixate的canvas畫布只有這么寬（最多五個頁面）。

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

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

缺點(diǎn)

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

原型范例

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

www.pixate.com

Mac或PC應(yīng)用：

Pixate Studio

移動應(yīng)用：

iOS?|?Android

價格：

Pixate Studio

免費(fèi)?。ㄔ?jīng)149美元，直到谷歌于2015年7月收購Pixate。）

Pixate Cloud

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

3、Facebook Origami

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

Origami

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

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

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

預(yù)覽

在桌面：Quartz Composer有一個查看器，你在編輯器里的任何修改會在查看器里即時得到反映。

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

發(fā)給客戶

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

跟app的區(qū)別

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

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

文檔雖然有些不全，但是有個非常活躍的用戶社區(qū)。此外，你還可以找到不少的視頻、教程和博文。

缺點(diǎn)

不容易知道活兒該怎么做，有那么多patch，不知道該用哪個。

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

原型范例

下載.qtz文件

facebook.github.io/origami

Mac 應(yīng)用：

install instructions

IOS查看器：

Origami Live

價格：

免費(fèi)！你還需要一個蘋果開發(fā)者帳號，那也是免費(fèi)的，就像啤酒、或者隨便蘋果公司的開發(fā)人員喝的什么。（譯者注：蘋果公司每隔數(shù)周都會舉行“啤酒狂歡”獎勵員工，為他們提供免費(fèi)啤酒和開胃菜。）

4、Framer

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

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

Framerjs

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

預(yù)覽

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

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

發(fā)給客戶

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

跟app的區(qū)別

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

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

與 Sketch 或 Photoshop的集成是再好不過了：設(shè)計的時候可以用你給的命名來引用層或?qū)ο蟆＃‵ramer.js包含一個Mac應(yīng)用Framer Generator，也能做到這一點(diǎn)。）

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

缺點(diǎn)

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

原型范例

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

Mac應(yīng)用：

iOS app:

Android app:

價格：

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

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

5、Form by RelativeWave

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

Form

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

預(yù)覽

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