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種快速測試和演示方式，支持手機端、瀏覽器及桌面端的原型測試。在線預覽和離線演示都可輕松實現，不受終端，網絡地域的限制。
視頻地址：http://doc.mockplus.cn/?p=1668
學習成本：很低。Mockplus是一款讓你關註設計，而非工具本身的工具，致力於讓設計更快、更簡單！無需寫代碼。
項目類型：手機APP，網頁項目，平板項目，自由項目等
上手時間：5-10分鐘
保真度：中低保真
分享和協作: Mockplus的團隊協作功能支持多人編輯同一個項目，可以加強團隊的配合，提高生產力。參與人員可對設計進行批註和審閱，即時獲取反饋。
用戶反饋：周邊購+外賣+智能物業+類京東商城+聊天功能的APP，幾百頁很正常。感覺用mockplus做原型效率真高，幾百頁的交互原型一個月就能完成。
更多反饋：https://www.mockplus.cn/features
2.Balsamiq - 一款基於Flash的快速原型設計工具
平臺：Windows, Mac, Web-based
價格：$89
主要功能:
?Balsamiq Mockups是一款備受青睞的原型圖工具，是2008由一個軟件工程師開發的，能幫助設計師更快地進行原型設計。
?拖拽操作：Balsamiq擁有可以直接進行拖拽使用的元素，包括一些按鈕和列表，值得一提的是，這些元素都是手繪風格。設計師還可在編輯器裏提前準備好需要使用的小部件。
?資源模板：Balsamiq官方網站還提供了很多模板，包括桌面App、移動端App以及網站模板等。可供點擊下載，使用起來快速便捷。
?手繪風格：Balsamiq獨一無二的手寫設計在如今的機械化設計中顯得十分別致，能讓設計師體會一種在空白屏幕裏進行手繪設計的獨特體驗。加上其種類繁多且風格獨特的UI庫，能為設計師提供最便捷的服務。
?線框圖設計：但Balsamiq並不是一款適合做超大型項目的工具，雖然它也可以用於做一些設計，但想要加入一些比較深入的動態效果就比較局限，當然，這和他們的設計初衷也不相一致，Balsamiq更專註於簡潔粗略的線框圖設計。
視頻地址：https://www.youtube.com/watch?v=0mYYqsJ-rE8&feature=youtu.be
學習成本：低。拖拽和放置元素都很簡單。初學者也可以嘗試不用紙筆，而是以貼近紙筆的設計方式進行設計。
項目類型：手機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的系統樣式以及自定義符號和組件庫，設計和管理網站將會更輕松。
視頻地址：https://www.youtube.com/watch?v=Ymn1sPuNMt8
學習成本：較低。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還提供團隊的實時協作，可用於用戶測試的視頻環聊，進行設備上的測試和交互式預覽，團隊共享非常便捷。
視頻地址：https://www.youtube.com/watch?v=uodln1GmrFM
學習成本：較低。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在產品討論階段使用非常合適，可以快速呈現，加之有效的協作，可以有效收集同事和客戶的反饋意見。
視頻地址：https://www.youtube.com/channel/UCndfHdRdEiGOyCOgxQ4W9YQ
學習成本：低。基於其可以在設計文件添加動畫和手勢，因此只需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是性價比較高的選擇，也是我極力推薦的一款工具。
2018年，你一定要選對這些原型工具