說起軟件原型，有些人也許會對更廣泛意義上的原型比較熟悉秩命。其實兩者本質(zhì)也是一樣的東西尉共。原型設(shè)計在絕大多數(shù)的產(chǎn)品階段中已不可或缺。經(jīng)過思路弃锐，數(shù)據(jù)袄友，信息，需求霹菊，評估等相關(guān)信息的收集和整理后剧蚣，設(shè)計師往往需要將這些抽象的思維以原型的方式具體呈現(xiàn)出來。原型設(shè)計為非專業(yè)的股東們和用戶們提拱了一種最直觀的方式來理解設(shè)計者的思路和創(chuàng)造旋廷。也能保證最快最準(zhǔn)確的從用戶那里獲取產(chǎn)品信息的相關(guān)反饋鸠按。

通常，常見軟件原型有以下幾種類型：

1.紙質(zhì)原型 - 這主要是為了設(shè)計師自己記錄創(chuàng)意和想法;

2.快速原型 - 最常見的原型柳洋，講究快速呈現(xiàn)待诅，應(yīng)用范圍廣泛;

3.高保真原型 - 強(qiáng)調(diào)互動和用戶界面，多用于呈現(xiàn)給股東和開發(fā)團(tuán)隊;

4.低保真原型 - 強(qiáng)調(diào)設(shè)計團(tuán)隊成員之間的互動和想法熊镣，運(yùn)用廣泛;

在常見的原型類型中卑雁，除了紙質(zhì)原型，只需用到紙筆绪囱，其他的原型制作都需要使用原型設(shè)計工具测蹲。如今，形形色色的原型工具可以說是眼花繚亂鬼吵，如何選擇呢扣甲？尤其是原型又有不同的受眾，加之時間成本齿椅，人力成本琉挖，資金成本等條件，設(shè)計師往往需要呈現(xiàn)不同品質(zhì)的原型涣脚，以適應(yīng)當(dāng)前的最佳選擇示辈。這里，我精選出了5款各有所長的原型工具遣蚀，希望對您的工具選擇有所幫助矾麻。

每款工具纱耻，我將從主要功能、學(xué)習(xí)成本险耀、價格弄喘、兼容平臺、項目類型甩牺、上手速度蘑志、保真度、分享方式柴灯、用戶反饋等幾方面進(jìn)行介紹卖漫。僅供參考。

1.Mockplus- 快速簡潔的專業(yè)原型設(shè)計工具

平臺：Windows, Mac, Android, IOS

價格：普通-免費(fèi)赠群；專業(yè)-￥199元/年

主要功能:

?Mockplus致力于快速構(gòu)建和迭代原型羊始，為設(shè)計師提供簡潔高效的設(shè)計方式，能在最短時間里創(chuàng)造出最優(yōu)的設(shè)計成果查描。

?快速設(shè)計：Mockplus擁有200多個高度封裝的交互組件突委，3000個矢量圖標(biāo)，以及大量可供直接使用的模板冬三、例子項目以及模板頁面匀油，并且支持在Sketch中直接導(dǎo)出MP文件，為快速原型設(shè)計提供了有效支持勾笆。

?快速交互：Mockplus還是交互設(shè)計的不二選擇敌蚜。只需使用封裝可見的交互組件，用鼠標(biāo)進(jìn)行拖拽即可完成可視化的交互窝爪，不需要任何一行代碼或者參數(shù)的設(shè)置弛车。Mockplus目前支持3種交互方式：頁面交互，組件交互和屬性交互蒲每。交互命令還可一鍵自動還原纷跛，貼切而周到。

?新功能：Mockplus團(tuán)隊推出了一系列人性化設(shè)計邀杏，例如可視化格式刷贫奠，可快速進(jìn)行批量復(fù)制，簡單直觀望蜡；格子功能唤崭，可輕松復(fù)制頁面布局，并且可自定義屬性脖律；數(shù)據(jù)填充浩姥，智能解鎖繁復(fù)操作；最新的表格組件状您，體會Excel里操作般的感覺勒叠；腦圖設(shè)計模式，能快速完成項目的所有頁面構(gòu)架膏孟，然后一鍵轉(zhuǎn)化為原型項目等等眯分。

全新的表格組件

?快速演示：Mockplus擁有8種快速測試和演示方式，支持手機(jī)端柒桑、瀏覽器及桌面端的原型測試弊决。在線預(yù)覽和離線演示都可輕松實現(xiàn)，不受終端魁淳，網(wǎng)絡(luò)地域的限制飘诗。

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

學(xué)習(xí)成本：很低。Mockplus是一款讓你關(guān)注設(shè)計界逛，而非工具本身的工具昆稿，致力于讓設(shè)計更快、更簡單息拜！無需寫代碼溉潭。

項目類型：手機(jī)APP，網(wǎng)頁項目少欺，平板項目喳瓣，自由項目等

上手時間：5-10分鐘

保真度：中低保真

分享和協(xié)作: Mockplus的團(tuán)隊協(xié)作功能支持多人編輯同一個項目，可以加強(qiáng)團(tuán)隊的配合赞别，提高生產(chǎn)力畏陕。參與人員可對設(shè)計進(jìn)行批注和審閱，即時獲取反饋仿滔。

用戶反饋：周邊購+外賣+智能物業(yè)+類京東商城+聊天功能的APP惠毁，幾百頁很正常。感覺用mockplus做原型效率真高堤撵，幾百頁的交互原型一個月就能完成仁讨。?

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

2.Balsamiq?- 一款基于Flash的快速原型設(shè)計工具

平臺：Windows, Mac, Web-based

價格：$89

主要功能:

?Balsamiq Mockups是一款備受青睞的原型圖工具，是2008由一個軟件工程師開發(fā)的实昨，能幫助設(shè)計師更快地進(jìn)行原型設(shè)計洞豁。

?拖拽操作：Balsamiq擁有可以直接進(jìn)行拖拽使用的元素，包括一些按鈕和列表荒给，值得一提的是丈挟，這些元素都是手繪風(fēng)格。設(shè)計師還可在編輯器里提前準(zhǔn)備好需要使用的小部件志电。

?資源模板：Balsamiq官方網(wǎng)站還提供了很多模板曙咽，包括桌面App、移動端App以及網(wǎng)站模板等挑辆±欤可供點(diǎn)擊下載孝情，使用起來快速便捷。

?手繪風(fēng)格：Balsamiq獨(dú)一無二的手寫設(shè)計在如今的機(jī)械化設(shè)計中顯得十分別致洒嗤，能讓設(shè)計師體會一種在空白屏幕里進(jìn)行手繪設(shè)計的獨(dú)特體驗箫荡。加上其種類繁多且風(fēng)格獨(dú)特的UI庫，能為設(shè)計師提供最便捷的服務(wù)渔隶。

?線框圖設(shè)計：但Balsamiq并不是一款適合做超大型項目的工具羔挡，雖然它也可以用于做一些設(shè)計，但想要加入一些比較深入的動態(tài)效果就比較局限间唉，當(dāng)然绞灼，這和他們的設(shè)計初衷也不相一致，Balsamiq更專注于簡潔粗略的線框圖設(shè)計呈野。

視頻地址：https://www.youtube.com/watch?v=0mYYqsJ-rE8&feature=youtu.be

學(xué)習(xí)成本：低低矮。拖拽和放置元素都很簡單。初學(xué)者也可以嘗試不用紙筆际跪，而是以貼近紙筆的設(shè)計方式進(jìn)行設(shè)計商佛。

項目類型：手機(jī)APP，網(wǎng)頁項目等

上手時間：15-20 分鐘

保真度：低保真

分享和協(xié)作：Balsamiq可以說是專為協(xié)作而設(shè)計姆打。整個團(tuán)隊可以進(jìn)行交流良姆，以確保設(shè)計的正確方向♂Ｏ罚客戶和老板都可以更清楚地描述自己的需求玛追。在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?- 設(shè)計和開發(fā)協(xié)同進(jìn)行的簡單靜態(tài)網(wǎng)站原型工具

平臺：Mac，Windows

價格：2個項目免費(fèi)（10個項目：16美元/月垒玲，無限項目：35美元/月）

主要功能:

?直觀的設(shè)計和開發(fā)網(wǎng)站：Webflow為網(wǎng)頁設(shè)計人員提供了HTML陆馁，CSS和JavaScript的全部功能。但是不需要編寫代碼合愈，而是直接進(jìn)行直觀操作叮贩。在您構(gòu)建網(wǎng)站并填充網(wǎng)站內(nèi)容時，Webflow的“Designer”會自動創(chuàng)建簡潔的語義代碼佛析，這些代碼可以直接發(fā)布到網(wǎng)頁上，也可以交給開發(fā)人員參考寸莫。

?空白畫布捺萌，創(chuàng)作空間無限：您可以在畫布上填充需要的任何元素：盒子模型酷誓，浮動組件等呛牲，元素布局自由着茸，盡在掌握中，然后使用強(qiáng)大的排版和配色工具進(jìn)行美化設(shè)計。

?精準(zhǔn)的交互和動畫：直觀的可視化界面不僅僅局限于頁面布局和風(fēng)格選擇掰邢，而且還可以自由使用JavaScript和CSS動畫的所有功能怀估。

?輕松管理和低成本維護(hù)：整個網(wǎng)站的風(fēng)格和組件都可以有效進(jìn)行管理和維護(hù)康铭。可視化構(gòu)建絕不是重復(fù)、笨重的工作流程。如果結(jié)合CSS的系統(tǒng)樣式以及自定義符號和組件庫平匈，設(shè)計和管理網(wǎng)站將會更輕松梅垄。

視頻地址：https://www.youtube.com/watch?v=Ymn1sPuNMt8

學(xué)習(xí)成本：較低。Webflow可以讓設(shè)計師在相對較短的時間內(nèi)創(chuàng)建一個網(wǎng)站输玷。雖然您不需要寫代碼队丝，但仍需要根據(jù)客戶需求導(dǎo)出甚至更改網(wǎng)站的html / css標(biāo)簽。

項目類型：Web網(wǎng)站

上手時間：15-20分鐘

保真度：高保真欲鹏。

分享和協(xié)作：一旦在Webflow發(fā)布網(wǎng)頁机久，您的站點(diǎn)就已經(jīng)算是完成了，可以直接分享給他人貌虾。但如果還需進(jìn)一步改進(jìn)再分享吞加，可以使用Webflow Hosting進(jìn)行網(wǎng)頁托管。

用戶反饋：“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?- 更簡單的網(wǎng)頁尽狠，桌面和移動原型工具

平臺：Web端衔憨。支持Chrome，F(xiàn)irefox和Safari袄膏，不兼容Internet Explorer践图。

價格：個人- $8.25/月；高級版- $19.08/月沉馆；團(tuán)隊版- $41.58/月

主要功能:

?高保真：Fliud UI是一款基于網(wǎng)頁端的原型設(shè)計設(shè)計工具码党，與其他的大部分原型圖工具不同，F(xiàn)liud UI支持添加手勢斥黑，并且具有動畫效果揖盘，可以制作高保真的原型圖。

?快速線框圖工具：Fluid UI更多是線框圖設(shè)計锌奴，但也能影響到后期的界面設(shè)計兽狭、產(chǎn)品功能設(shè)置以及上線前測試。

?界面關(guān)系展示：Fluid UI能夠?qū)⒉煌慕缑媛?lián)立起來，以便于看到產(chǎn)品不同界面之間的關(guān)系箕慧，對于UX流程設(shè)計有很大幫助服球。

?快速設(shè)計：Fliud UI有16個用于iOS，Android颠焦，Windows8的用戶界面庫斩熊，其中包含超過2000個可定制的小部件和圖標(biāo)，可以直接從這些內(nèi)置庫里拖拽元素創(chuàng)建頁面伐庭，簡潔高效粉渠。FluidUI還提供團(tuán)隊的實時協(xié)作，可用于用戶測試的視頻環(huán)聊似忧，進(jìn)行設(shè)備上的測試和交互式預(yù)覽渣叛，團(tuán)隊共享非常便捷。

視頻地址：https://www.youtube.com/watch?v=uodln1GmrFM

學(xué)習(xí)成本：較低盯捌。FluidUI是一個原型開發(fā)工具，可以讓您快速設(shè)計蘑秽，測試并獲取有關(guān)的反饋信息饺著，無編寫代碼要求。

項目類型：Web應(yīng)用程序和桌面應(yīng)用程序

上手時間：10-15分鐘

保真度：高保真肠牲。

分享和協(xié)作：強(qiáng)大的協(xié)作功能幼衰，不受空間限制，隨時可以實時進(jìn)行設(shè)計缀雳。只需邀請你的團(tuán)隊成員到同一個原型項目上渡嚣，就可以進(jìn)行添加，反饋和評論等操作肥印。分享原型识椰，你可以選擇在設(shè)備上直接查看，或通過電子郵件分享深碱，甚至直接將項目發(fā)送給客戶腹鹉。

用戶反饋：“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端的原型設(shè)計工具

平臺：Mac，Windows

價格：1個項目免費(fèi)（3個項目：15美元/月敷硅，無限項目：25美元/月功咒，團(tuán)隊版：99美元/月）

主要功能:

?靜動轉(zhuǎn)化：在InVision中，設(shè)計人員可以直接上傳設(shè)計文件并添加動畫绞蹦，手勢和轉(zhuǎn)換力奋，將靜態(tài)畫面轉(zhuǎn)換為可點(diǎn)擊的交互式原型。

?多格式支持：支持PNG幽七，JPG景殷，GIF，AI和PSD格式的文件。

?高效協(xié)作：InVision App在產(chǎn)品討論階段使用非常合適滨彻，可以快速呈現(xiàn)藕届，加之有效的協(xié)作，可以有效收集同事和客戶的反饋意見亭饵。

視頻地址：https://www.youtube.com/channel/UCndfHdRdEiGOyCOgxQ4W9YQ

學(xué)習(xí)成本：低休偶。基于其可以在設(shè)計文件添加動畫和手勢辜羊，因此只需5分鐘內(nèi)即可獲得高保真原型設(shè)計踏兜。無需代碼和編程。

項目類型：移動和Web應(yīng)用程序

上手時間：15-20分鐘

保真度：高保真八秃。

分享和協(xié)作：InVision最突出的優(yōu)勢就是它的協(xié)作功能碱妆，所有參與原型項目的成員都可以提供反饋，記錄問題和查看實時設(shè)計昔驱。

用戶反饋：“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

以上是我總結(jié)出的5款軟件原型設(shè)計工具疹尾，各具特色，也各有不足骤肛，希望總有一款適合你當(dāng)前的項目纳本。但在設(shè)計過程中，對工具的要求往往會更多腋颠，譬如設(shè)計靈感的查找繁成，更短的學(xué)習(xí)時間，更低的成本淑玫，多樣的快速演示和分享方式巾腕，比較深入的交互和動效，以及更多的人性化設(shè)置絮蒿，綜合每款工具的分析尊搬，Mockplus是性價比較高的選擇，也是我極力推薦的一款工具歌径。