【Smashing專欄】選擇移動界面原型設計工具的12個因素

多年以前，一個小男孩正費力地用一把小刀嘗試將樹枝做成木弓。他的爺爺看到了這一幕，于是遞給他一把鋸子，并對他說“做事一定要選對工具”。作為這個故事中的小男孩，我學習了重要的一課：解決問題的工具有很多，但是總有一些比其他的更合適。

近年來，市面上出現了很多新的原型制作工具，其中不少是服務于移動界面設計的。這類工具不斷更新迭代、推陳出新。本文并不會按部就班地介紹如何去選擇合適的原型制作工具，而是討論那些影響選擇過程的重要因素。

我探索并使用過很多不同的工具，在此將設身處地地告訴大家為什么一些工具比另一些更合適。在文章的結尾，“參考資源”部分將給出更加詳細具體的比較，從而幫助你更好地做選擇。

如果你需要一個移動界面原型制作工具，你會怎么做？

盡管選擇很多，但挑一個合適的工具并不是什么難事。你可以通過以下問題來縮小選擇范圍。

首先，根據項目的要求你可以先劃定一個選擇范圍。項目是為了測試可用性嗎？項目是否需要展示視覺效果？原型是為了展示一個抽象的概念還是成熟的產品？

UX設計師們常常會先評估問題再列出方案。我們也不妨這樣挑選工具，先細化選擇因素，再確定最終的選擇方向。以下這些因素將會影響你的選擇：

·?交互保真度

·?交互動效

·?手勢

·?視覺設計

·?演示的便捷性

·?數字化協作

·?文檔說明

·?響應式

需考慮的技術因素

每年都會新出很多令人振奮的原型工具，它們各有特點，可以幫助設計師們解決不同的問題。雖說某些工具在解決特定問題上更有優勢，但是并不存在一個完美的工具！

以下介紹了各個工具在既定標準下的表現。你的選擇應該依據項目需求，那些?“合適”（而非“最佳”）的工具也許才是項目更好的選擇。

“合適”是我們推薦的，而“最佳”可能在功能上稍微突出一點、使得它在完成某些任務時更加方便。

分析原型工具需考慮的技術因素

1.?交互保真度

交互有不同的風格類型。有些僅僅需要表示流程，那么帶有點擊跳轉效果的原型工具就很合適（概念或者可用性測試中常用到）。然而，有些項目（如果原型準備交付開發，需要完善的文檔說明）可能需要你詳細闡明多步驟交互邏輯。不論是哪種情況，你都能找到相應的原型工具。

元素間的相互作用關系（圖片來源：丹尼爾·沃特斯）

合適

有些移動原型工具可以通過熱點鏈接來實現點擊跳轉的效果，如keynote、Fluid UI 以及 Marvel。

更佳

隨著工具支持的可操作狀態、具體事件類型、元素可復用性越來越多，交互也會更加豐富。這類工具包括基于云計算的Pixate、Proto.io，以及電腦客戶端的軟件如Axure、Justinmind。編碼工具如Bootstrap、jQuery、Mobile、Framer也有類似功能。這些工具的作用體現在制作原型的效率上。

2.?交互動效

動效在移動交互中作用重大。在項目啟動時，需要明確誰應該負責實現原型中的動畫效果，是你還是其他人（如開發人員或者動效設計師）？這個問題有助于明確原型中的動效實現到什么水平。

動效展現復雜的交互（圖片來源：themonie）

合適

該類的移動工具通常都自帶交互動效，但是缺少定制化（例如Blueprint及Xcode）。有些更強大工具可以提供動效編輯功能，包括時間線或彈性效果方面的編輯；Axure、Justinmind以及Proto.io都有此類功能。

更佳

如果需要定制更多模擬物理特性的動效，如速度、彈性、摩擦等，你可以嘗試編碼類工具，如Framer以及CSS3動畫。這類工具大多可以實現特殊的元素屬性，如大小、旋轉、不透明度、顏色及虛化程度等。

3.?手勢

移動原型包含對手勢的設計，所以要考慮項目是否需要實現這點。多數UX專用工具支持手勢設計——有一些工具自帶常用的手勢，另一些支持手勢自定義及多手勢操作。

移動端需要原型中包含手勢操作（圖片來源：尼古拉斯·諾瓦）

合適

Blueprint、AppCooker以及許多基于云計算的移動工具如Proto.io都內置手勢設計組件。這類工具通常支持點擊、橫掃、滑動，其中一些支持長按及雙擊等。不過這些手勢沒有可配置的參數，不利于處理某些特殊的手勢操作。

更佳

如果原型需要更精細的手勢操作，例如拖拽的減緩、加速、方向，這時就要求移動工具帶有應用程序編碼接口，該接口可以是基于編碼的，也可以是基于可讀指令的。Hammer和Axure就是很好的例子。不少工具甚至支持多點觸摸，Justinmind、Pixate以及Framer都可以執行雙指縮放及旋轉的操作。

4.?視覺設計

在做移動原型時，應確認好需要實現的保真度。用戶體驗師們（UXers）常常也負責視覺設計，而在大公司則是交由專門的設計師來完成的。保真度由項目的目標及受眾來決定：產品推介會和交付開發使用高保真，可用性測試使用中至低保真，概念驗證使用低保真。

原型中的顏色傳遞了不同的情感（圖片來源：See-ming Lee）

合適

移動原型工具（如Blueprint）、編碼工具（如Framer及CSS3 animation）、云端工具（如Flinto、Pixate及InVision）支持使用外部導入的視覺元素來制作交互。其中有些甚至支持視覺設計的插件。使用這類工具時，用戶體驗師們常常需要在原型工具及設計工具（如Sketch及Photoshop）之間來回切換。

更佳

有些原型工具支持細致的視覺設計，包括漸變、投影、自定義字體及可復用的樣式（如Axure及Justinmind）。這有利于一體化的制作流程，滿足了原型設計的大部分需求。不過，相對于更高要求的視覺設計，如蒙版、多路徑矢量圖以及圖像編輯的操作，用戶體驗師們還需要依靠專門的視覺工具。

5.?演示便捷性

向受眾群體演示移動原型，對驗證設計來說至關重要。

演示移動原型通常有兩種方式：在電腦上演示或直接在最終設備上演示。兩者之間有所不同，如從電腦端投射至設備端還是相反的方式。在項目啟動時，需考慮到哪種方式更合理以及使用的原型工具支持哪種方式。

原型應在對應的情境中演示（圖片來源：K2_UX）

合適

很多編碼工具（jQuery Mobile及CSS3 animation）都將原型存儲在云端，再通過鏈接加載到設備上，增加了演示步驟。而像iOS上的ProtoSee等工具則可以直接在設備上生成原型，方便演示。有些工具做得更好，如Axure、InVision及Proto.io，它們允許從云端將原型拖拽到設備上。

更佳

很多供應商為各類設備推出專門的配套軟件。用戶體驗師們可以一邊在電腦上制作原型，一邊連接Wi-Fi使用移動設備瀏覽原型。Pixate、Flinto以及Framer都推出來了原生應用支持這一功能。我們在使用時應注意Wi-Fi的穩定性以及原型的尺寸。

有趣的是，支持在移動端直接制作原型的工具也都提供了更方便的演示方式。AppCooker、Blueprint以及Marvel都可以在編輯與預覽模式間相互切換。

6.?數字化協作

設計不是封閉式工作。在整個項目中，用戶體驗師需要和利益相關者及其他專家們協同作業（包括視覺設計師以及開發人員）。因此，原型設計的協作創建尤為重要。應先找到大家認同的合作模式。

原型制作需要團隊合作（圖片來源：Kevin?Dooley）

合適

很多原型工具僅僅服務于用戶體驗師們，并不支持共同編輯以及收集反饋，例如Pixate及Framer。有些工具雖不支持共同編輯但是提供了一定程度的協作功能，例如Marvel及InVison支持收集外部反饋，最終驅動原型改進。

更佳

有些移動原型工具提供更多協作功能，如項目共享，版本控制，多線程創建。Justinmind及Axure都做到了這一點，并且支持預覽者對原型進行評論。

7.?文檔說明

不是所有的原型都需要文檔說明。交互及流程有時已經足夠了。而在那些包含很多業務邏輯且復雜的原型中，文檔說明成為開發者們梳理細節的重要工具。文檔說明包含了用戶體驗師們考慮到但在交互設計中沒有展示的特性。

文檔說明記錄了原型中沒有體現的細節（圖片來源：Domiriel）

合適

很多原型工具通過原型本身展示說明文檔（Flinto及Pixate）。有些工具則能夠支持導出為PDF或者PNG圖片。這類工具對注釋功能不一定支持，例如Proto.io并沒有注釋的功能，而AppCooker及Blueprint則允許用戶標記注釋。

更佳

Axure及Justinmind這類平臺工具擁有更靈活的文檔說明功能，支持注釋單個UI組件或者整個頁面，制作動態的文檔說明類別，一鍵生成完整的規范說明。另外，很多可編碼工具支持內聯文檔說明（Framer及jQuery Mobile），對開發者十分友好。

8.響應式

明確原型是否需要做成響應式。另外，如果你做的是響應式網站設計，也需要考慮到工具是否支持自適應或流體布局，是否自帶響應式組件，以及演示的方法。

在真實的設備上測試響應式（圖片來源：Jeremy?Keith）

合適

有些工具無法展示屏幕的斷點切換效果，例如Marvel以及Keynote一類的演示軟件。不過，斷點可以單獨標記說明，在旁邊對比展示出來。

有些工具支持單個斷點的不同方向切換，甚至是同一個設計在不同斷點上的連續變化，但是還不能在演示過程中動態地跳轉斷點。這類工具并不多，包括Blueprint、InVision以及Pixate。

更佳

支持響應式設計的UX工具已經出現。Axure就有此類功能，允許用戶設計不同視圖時的自適應原型。利用一些黑科技，流體設計也能實現。Proto.io和Justinmind可以實現真正的流體設計。

前端響應式架構可以實現更靈活的樣式，例如Bootstrap和Foundation。其他工具如HotGloo以及WebFlow等也支持響應式。

選擇的潛在影響因素

結束了對工具的研究，你對自己選擇的工具十分滿意，迫不及待地想要進行設計了。對成果的期待讓你充滿動力，卻也可能讓你變得盲目！除了技術因素，也需要考量其他因素。在給出建議之前，我們一起來簡單地了解一下這些因素。

易學性

選擇一個原型工具，尤其是完全陌生的工具，是個技術活。除了項目本身的時間，你還可能需要花時間學習工具的各種復雜特性和工具漏洞，然后重新設計。這些因素不應該打擊你投入學習的勇氣。

學習需要你轉身進入新的情境（圖片來源：wplynn）

熟悉一個工具的基本功能大概需要半年到一年時間。而精通一些工具，需要兩到三年不斷練習使用才可以。精通意味著遇到問題能夠立即解決，不需要細細琢磨。這些是根據我的個人經驗來說的，也取決于你對代碼以及制作原型的熟悉程度。

你需要養成一個成長相關的心態：分類、邏輯表達、事件監測及響應都需要時間去適應。在這些方面，每一個工具的用戶界面表現都是不同的，需要你自己去摸索。然而，你所掌握的每一個工具都會增加你觸類旁通的知識。

成本

需要安裝的工具，先了解它們的階梯定價。例如，Axure有標準版和專業版，在費用和功能上都有所區別。另外，單個證書所支持的設備數以及升級頻率也需要考慮。

云端工具通常都是按月收費。計算一下半年至一年的費用，這個時間通常可以滿足大部分中等規模至大規模的項目。這些工具所支持的項目數量、功能、甚至允許的預覽者人數都不一樣。不妨查查InVision和Proto.io在這方面的限制條件。另外，也有些既可以單機又支持云端的工具，例如Justinmind和Pixate。

不要低估免費的作用！有些云端服務提供了一至三個免費項目。可下載的工具通常都有一個月的試用期限。有些供應商為尚未畢業的用戶體驗設計師提供免費或者打折的工具：Pixate在被谷歌收購之前一直都有“教育優惠”；Axure有優秀學生項目；Proto.io提供了50%的教育折扣。

如果你需要用一個工具進行多個項目，那么購買比訂閱更值得，對個人或者小的設計工作室來說，購買是最好的選擇。你花在訂閱上的總計費用可能并不劃算，除非你的團隊遍布各個地方，你們的工具依賴了實時的溝通協作。較大的設計機構和公司都有此類的財務預算。

技術支持

你對工具的選擇不僅需要參照工具的性能，也需要考慮它們所提供的技術支持，包括視頻教程、使用攻略、API庫等等。Proto.io每月舉辦的網絡研討會是個很好的例子；Axure提供了詳細的使用攻略；Framer建立了API網站以及應用案列。

另外需要考慮的是工具更新的速度，以便滿足不斷提高的用戶體驗需求。每三個月一次小迭代以及每半年至一年一次大迭代的原型工具基本上可以跟上設計需求。例如，Framer有很多修復故障以及發布新功能的小升級；而Axure通常每年一次大的迭代，其間會有增值更新。

第三方資源

原型工具的供應商都比較注重社區的建設。設計師們也是如此；因此，知識分享很普遍。很多工具都有網上論壇，包括Axure、Proto.io以及Justinmind，用戶上傳自己的原型設計并相互交流。也有一些供應商使用其他方式解決問題，例如Framer，建立了Facebook交流小組。

第三方資源能夠幫助你解決原型設計中遇到的問題（圖片來源：r.nial bradshaw）

另外，也需要參考用戶體驗社區對工具的接受度。出版物以及專業活動的數量表明了設計師們的喜好。對于被廣泛認可的工具來說，你常常可以找到相應的培訓教程以及出售的設計素材。例如，Axure有很多相關的文章、書籍以及每年一度的網絡研討會，而Framer在許多城市都有專業的工作坊以及用戶自發建立的GitHub資源庫。

總結

本文介紹了如何為用戶體驗挑選合適的移動原型工具，從技術因素以及更加策略性選擇標準的角度作出了分析。要知道，選擇沒有對錯之分——設計師們各自有著不同的工作方式、專業技能以及需求。

更明智的選擇建立在了解自己的強項之上。你知道編碼嗎？你擅長視覺傳達嗎？你知道自己的主要訴求嗎？回答這些問題、收集項目相關的信息，有助于你更好地作出選擇。

推薦

只懂一技之長還是不夠，在此希望大家掌握以下各類工具組中的至少一個原型工具：

·?能解決各類移動問題的大平臺：Axure、Justinmind

·?能定制交互及動效的編碼工具：Framer、jQuery Mobile

·?云端協作工具：Flinto、Proto.io、Pixate

·?在移動設備本地安裝的、可快速實現概念原型的工具：Blueprint、AppCooker、Fluid UI

對自己使用的工具保持精通水準；對新工具保持好奇之心（例如Principle、InVision Motion以及Adobe Experience Design CC）；為你的業務伙伴以及終端用戶提供良好的原型體驗。我期待聽到你在為移動設備選擇原型工具方面的經驗。

參考資源

工具深度比較的文章

“Designer’s Toolkit: Prototyping Tools,” Emily Schwartzman, Cooper

“UX Tools,” Fabricio Teixeira and Caio Braga, UXdesign.cc

“The UX/UI Prototyping Tools List,” Michael McDearmon

Prototyping Tools, Javier-Simón Cuello

深入分析工具優劣的文章

“Breaking Down the Pros and Cons to Some of Today’s Most Popular Prototyping Tools and Applications,” Stephen Meszaros

“Comparing 9 Mobile Prototyping Tools Every Designer Should Consider,” Dave Crow

“Comparing Popular Layer-Based and Code-Based Prototyping Tools,” Bona Kim, UX Magazine

“Comparing Four Popular, Page–Based, Interactive Prototyping Tools,” Bona Kim, UX Magazine

翻譯：丫丫??王曉芳

終審：趙艷兵

本文轉載自異步社區。

機器視覺

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。