2018年，你必定要選對這些原型工具

提及軟件原型，有些人也許會對更普遍意義上的原型比較熟悉。其實二者本質也是同樣的東西。原型設計在絕大多數的產品階段中已不可或缺。通過思路，數據，信息，需求，評估等相關信息的收集和整理後，設計師每每須要將這些抽象的思惟以原型的方式具體呈現出來。原型設計爲非專業的股東們和用戶們提拱了一種最直觀的方式來理解設計者的思路和創造。也能保證最快最準確的從用戶那裏獲取產品信息的相關反饋。

一般，常見軟件原型有如下幾種類型：

1.紙質原型 - 這主要是爲了設計師本身記錄創意和想法;

2.快速原型 - 最多見的原型，講究快速呈現，應用範圍普遍;

3.高保真原型 - 強調互動和用戶界面，多用於呈現給股東和開發團隊;

4.低保真原型 - 強調設計團隊成員之間的互動和想法，運用普遍;

在常見的原型類型中，除了紙質原型，只需用到紙筆，其餘的原型製做都須要使用原型設計工具。現在，形形色色的原型工具能夠說是眼花繚亂，如何選擇呢？尤爲是原型又有不一樣的受衆，加之時間成本，人力成本，資金成本等條件，設計師每每須要呈現不一樣品質的原型，以適應當前的最佳選擇。這裏，我精選出了5款各有所長的原型工具，但願對您的工具選擇有所幫助。

每款工具，我將從主要功能、學習成本、價格、兼容平臺、項目類型、上手速度、保真度、分享方式、用戶反饋等幾方面進行介紹。僅供參考。

1.Mockplus - 快速簡潔的專業原型設計工具

平臺：Windows, Mac, Android, IOS

價格：普通-免費；專業-￥199元/年

主要功能:

Mockplus致力於快速構建和迭代原型，爲設計師提供簡潔高效的設計方式，能在最短期裏創造出最優的設計成果。

快速設計：Mockplus擁有200多個高度封裝的交互組件，3000個矢量圖標，以及大量可供直接使用的模板、例子項目以及模板頁面，而且支持在Sketch中直接導出MP文件，爲快速原型設計提供了有效支持。

快速交互：Mockplus仍是交互設計的不二選擇。只需使用封裝可見的交互組件，用鼠標進行拖拽便可完成可視化的交互，不須要任何一行代碼或者參數的設置。Mockplus目前支持3種交互方式：頁面交互，組件交互和屬性交互。交互命令還可一鍵自動還原，貼切而周到。

新功能：Mockplus團隊推出了一系列人性化設計，例如可視化格式刷，可快速進行批量複製，簡單直觀；格子功能，可輕鬆複製頁面佈局，而且可自定義屬性；數據填充，智能解鎖繁複操做；最新的表格組件，體會Excel裏操做般的感受；腦圖設計模式，能快速完成項目的全部頁面構架，而後一鍵轉化爲原型項目等等。

全新的表格組件

快速演示：Mockplus擁有8種快速測試和演示方式，支持手機端、瀏覽器及桌面端的原型測試。在線預覽和離線演示均可輕鬆實現，不受終端，網絡地域的限制。

視頻地址：doc.mockplus.cn/?p=1668

學習成本：很低。Mockplus是一款讓你關注設計，而非工具自己的工具，致力於讓設計更快、更簡單！無需寫代碼。

項目類型：手機APP，網頁項目，平板項目，自由項目等

上手時間：5-10分鐘

保真度：中低保真

分享和協做: Mockplus的團隊協做功能支持多人編輯同一個項目，能夠增強團隊的配合，提升生產力。參與人員可對設計進行批註和審閱，即時獲取反饋。

用戶反饋：周邊購+外賣+智能物業+類京東商城+聊天功能的APP，幾百頁很正常。感受用mockplus作原型效率真高，幾百頁的交互原型一個月就能完成。

更多反饋：www.mockplus.cn/features

2.Balsamiq - 一款基於Flash的快速原型設計工具

平臺：Windows, Mac, Web-based

價格：$89

主要功能:

Balsamiq Mockups是一款備受青睞的原型圖工具，是2008由一個軟件工程師開發的，能幫助設計師更快地進行原型設計。

拖拽操做：Balsamiq擁有能夠直接進行拖拽使用的元素，包括一些按鈕和列表，值得一提的是，這些元素都是手繪風格。設計師還可在編輯器裏提早準備好須要使用的小部件。

資源模板：Balsamiq官方網站還提供了不少模板，包括桌面App、移動端App以及網站模板等。可供點擊下載，使用起來快速便捷。

手繪風格：Balsamiq獨一無二的手寫設計在現在的機械化設計中顯得十分別致，能讓設計師體會一種在空白屏幕裏進行手繪設計的獨特體驗。加上其種類繁多且風格獨特的UI庫，能爲設計師提供最便捷的服務。

線框圖設計：但Balsamiq並非一款適合作超大型項目的工具，雖然它也能夠用於作一些設計，但想要加入一些比較深刻的動態效果就比較侷限，固然，這和他們的設計初衷也不相一致，Balsamiq更專一於簡潔粗略的線框圖設計。

視頻地址：www.youtube.com/watch?v=0mY…

學習成本：低。拖拽和放置元素都很簡單。初學者也能夠嘗試不用紙筆，而是以貼近紙筆的設計方式進行設計。

項目類型：手機APP，網頁項目等

上手時間：15-20 分鐘

保真度：低保真

分享和協做：Balsamiq能夠說是專爲協做而設計。整個團隊能夠進行交流，以確保設計的正確方向。客戶和老闆均可以更清楚地描述本身的需求。在Balsamiq Mockups中共享文件，能夠經過共享模型項目文件，共享交互式PDF文檔等方式。

用戶反饋：

「Balsamiq is bitchin'. Pure and simple. It's rare to find a tool that both devs and non-devs enjoy using, and use productively together. Huge fan!」—Jay Simons form VP of Marketing, Atlassian.

3.Webflow - 設計和開發協同進行的簡單靜態網站原型工具

平臺：Mac，Windows

價格：2個項目免費（10個項目：16美圓/月，無限項目：35美圓/月）

主要功能:

直觀的設計和開發網站：Webflow爲網頁設計人員提供了HTML，CSS和JavaScript的所有功能。可是不須要編寫代碼，而是直接進行直觀操做。在您構建網站並填充網站內容時，Webflow的「Designer」會自動建立簡潔的語義代碼，這些代碼能夠直接發佈到網頁上，也能夠交給開發人員參考。

空白畫布，創做空間無限：您能夠在畫布上填充須要的任何元素：盒子模型，浮動組件等，元素佈局自由，盡在掌握中，而後使用強大的排版和配色工具進行美化設計。

精準的交互和動畫：直觀的可視化界面不只僅侷限於頁面佈局和風格選擇，並且還能夠自由使用JavaScript和CSS動畫的全部功能。

輕鬆管理和低成本維護：整個網站的風格和組件均可以有效進行管理和維護。可視化構建毫不是重複、笨重的工做流程。若是結合CSS的系統樣式以及自定義符號和組件庫，設計和管理網站將會更輕鬆。

視頻地址：www.youtube.com/watch?v=Ymn…

學習成本：較低。Webflow可讓設計師在相對較短的時間內建立一個網站。雖然您不須要寫代碼，但仍須要根據客戶需求導出甚至更改網站的html / css標籤。

項目類型：Web網站

上手時間：15-20分鐘

保真度：高保真。

分享和協做：一旦在Webflow發佈網頁，您的站點就已經算是完成了，能夠直接分享給他人。但若是還需進一步改進再分享，可使用Webflow Hosting進行網頁託管。

用戶反饋：「In comparison to the many site designing tools we've used during our 13 years in business, Webflow is absolutely the most user-friendly and capable out there.」

4.Fliud UI - 更簡單的網頁，桌面和移動原型工具

平臺：Web端。支持Chrome，Firefox和Safari，不兼容Internet Explorer。

價格：我的- $8.25/月；高級版- $19.08/月；團隊版- $41.58/月

主要功能:

高保真：Fliud UI是一款基於網頁端的原型設計設計工具，與其餘的大部分原型圖工具不一樣，Fliud UI支持添加手勢，而且具備動畫效果，能夠製做高保真的原型圖。

快速線框圖工具：Fluid UI更可能是線框圖設計，但也能影響到後期的界面設計、產品功能設置以及上線前測試。

界面關係展現：Fluid UI可以將不一樣的界面聯立起來，以便於看到產品不一樣界面之間的關係，對於UX流程設計有很大幫助。

快速設計：Fliud UI有16個用於iOS，Android，Windows8的用戶界面庫，其中包含超過2000個可定製的小部件和圖標，能夠直接從這些內置庫裏拖拽元素建立頁面，簡潔高效。FluidUI還提供團隊的實時協做，可用於用戶測試的視頻環聊，進行設備上的測試和交互式預覽，團隊共享很是便捷。

視頻地址：www.youtube.com/watch?v=uod…

學習成本：較低。FluidUI是一個原型開發工具，可讓您快速設計，測試並獲取有關的反饋信息，無編寫代碼要求。

項目類型：Web應用程序和桌面應用程序

上手時間：10-15分鐘

保真度：高保真。

分享和協做：強大的協做功能，不受空間限制，隨時能夠實時進行設計。只需邀請你的團隊成員到同一個原型項目上，就能夠進行添加，反饋和評論等操做。分享原型，你能夠選擇在設備上直接查看，或經過電子郵件分享，甚至直接將項目發送給客戶。

用戶反饋：「It’s a great tool for working the project from scratch, for creating high quality prototype. It’s very easy and intuitive. Sharing is very easy.」—John Wastion.

5.Invision - 基於web端的原型設計工具

平臺：Mac，Windows

價格：1個項目免費（3個項目：15美圓/月，無限項目：25美圓/月，團隊版：99美圓/月）

主要功能:

靜動轉化：在InVision中，設計人員能夠直接上傳設計文件並添加動畫，手勢和轉換，將靜態畫面轉換爲可點擊的交互式原型。

多格式支持：支持PNG，JPG，GIF，AI和PSD格式的文件。

高效協做：InVision App在產品討論階段使用很是合適，能夠快速呈現，加之有效的協做，能夠有效收集同事和客戶的反饋意見。

視頻地址：www.youtube.com/channel/UCn…

學習成本：低。基於其能夠在設計文件添加動畫和手勢，所以只需5分鐘內便可得到高保真原型設計。無需代碼和編程。

項目類型：移動和Web應用程序

上手時間：15-20分鐘

保真度：高保真。

分享和協做：InVision最突出的優點就是它的協做功能，全部參與原型項目的成員均可以提供反饋，記錄問題和查看實時設計。

用戶反饋：「A lot of the products we're making are really meaty. InVision allows us to see if these really complex solutions are working." Joshua Taylor, Evernote

以上是我總結出的5款軟件原型設計工具，各具特點，也各有不足，但願總有一款適合你當前的項目。但在設計過程當中，對工具的要求每每會更多，譬如設計靈感的查找，更短的學習時間，更低的成本，多樣的快速演示和分享方式，比較深刻的交互和動效，以及更多的人性化設置，綜合每款工具的分析，Mockplus是性價比較高的選擇，也是我極力推薦的一款工具。