做原型必看：Proto.io, Pixate, Origami, Framer 和 Form 五款產品原型工具的詳細說明和對比

本文由Panblack翻譯，原文作者  Tes Mat

基于頁面還是層

為什么我會選擇這五款？我發現用多數原型設計工具再造這種重度動畫效果的應用（圖標以不同的速度向不同的方向移動）幾乎不可能。大多數工具僅僅是讓你連接靜態“頁面”，只有那些更復雜的才能讓你在給定的頁面里不同的對象或“層”添加動效。

我接下來會進一步解釋。

基于頁面的工具

在基于頁面的工具里，你布置好不同的屏，然后建立熱點或者按鈕將它們連接在一起。你輕觸一個屏上某個按鈕來進入另一個屏。基于頁面的工具一般支持 屏之間的多種過渡效果，比如淡入、從右滑入，從下滑入等等。雖然有點笨拙，但是當你還在設法搞清楚一個app的流程，比如說需要多少屏、它們如何呈現出 來、按鈕如何布置等等，用這種工具快速作出“實體模型”還算是個不錯的方法。

基于頁面的工具有： Briefs ,  InVision ,  Notism ,  Flinto ,  Fluid , Mockup.io ,  Prott ,  POP ,  Marvel ,  Balsamiq ,  Red Pen 和 Keynotopia .

的確，這里面有些工具可以讓你在一個頁面里帶有動效或者滾動區域，但是你無法用它們來模擬真實的原生app所有的交互效果。

基于層的工具

每個元件、界面元素，或者說層，都可以設置為可觸摸、可滑動、可拖拽，還能帶動效。然而，用這類工具制作一個完整的app原型會讓人發瘋的，會有太多的工作量，基本上就等于創建一個真正的app。但是，它們用來測試新的交互效果，或者微調一下動效的時間參數還是很棒的。

我測試的是Proto.io, Pixate, Framer, 非死book的Origami 和 RelativeWave的Form。坦率的說，還有幾個其他的 — Axure 和 Indigo Studio —不過它們好像更加企業級（就是挺貴的），我有可能以后嘗試一下。

好吧，我們就繼續看看這些 獲選 的工具。

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

價格：

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

Pixate

OS X和Windows桌面應用，IOS和安卓調試器

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

預覽

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

發給客戶

1. 如果你有云套餐（5美元/月），你可以 發布一個項目 ，人們可以用IOS或安卓調試器掃描這個網頁上的二維碼來運行原型。
2. 你可以在你的云帳號里增加無限量的"協作者"，允許他們訪問原型，他們必須在調試器app中登錄自己的帳號才能訪問。
3. 或者，你可以僅僅把.pixate文件用郵件發給別人，他們可以在Pixate Studio中打開并運行（但同時客戶也能看到原型是怎么做的，還能做出修改）。

跟app的區別

第六個頁面會消失，因為Pixate的canvas畫布只有這么寬（最多五個頁面）。

• 易于學習

缺點

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

原型范例

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

www.pixate.com

價格：

Pixate Studio

免費！（曾經149美元，直到谷歌于2015年7月收購Pixate。）

Pixate Cloud

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

非死book Origami

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

你很可能已經知道，Origami是非死book 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文件

非死book.github.io/origami

價格：

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

Framer

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

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

預覽

• 在桌面：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

價格：

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

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

Form by RelativeWave

Mac應用，帶有一個iPhone或iPad上的查看器

Form還很年輕（2014年9月發布），而且很明顯，它是從非死book和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應用曾經是79.99美元，谷歌去年11月（那時Form發布了僅僅數月）收購了RelativeWave之后就免費提供了。

如何挑選？

如果你從未用過上述的任何一個，而且想快速的做出原型：

• Pixate
• or Proto.io

但是如果你愿意投入時間學習一個強大的工具：

• Form, 如果你喜歡可視化編程
• Framer, 如果你更愿意寫代碼

這五款工具我已經全都了解了（至少一點點吧），所以我可能會在不同的場景使用不同的工具：

• 當我還處在研究app流程的階段，我用一款基于頁面的工具，在這個階段不需要高保真的原型設計。
• Proto.io也可以用作低保真原型設計： 它包含IOS、安卓、Windows Phone的標準界面元素，而且你可以鏈接不同的屏。它還有個進一步的優勢，就是后期可以用Sketch或Photoshop設計的元件，來讓原型“漂亮點兒”。
• 當已經有現成的UI設計和元件了，用Pixate，只要動效別太復雜。
• 如果原型里需要使用設備的傳感器或相機，那就用Form。
• 其他的情況都用Framer。