產(chǎn)品經(jīng)理告訴你原型你要找對(duì)工具

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

通常，常見(jiàn)軟件原型有以下幾種類(lèi)型：

• 1.紙質(zhì)原型 – 這主要是為了設(shè)計(jì)師自己記錄創(chuàng)意和想法;
• 2.快速原型 – 最常見(jiàn)的原型，講究快速呈現(xiàn)，應(yīng)用范圍廣泛;
• 3.高保真原型 – 強(qiáng)調(diào)互動(dòng)和用戶界面，多用于呈現(xiàn)給股東和開(kāi)發(fā)團(tuán)隊(duì);
• 4.低保真原型 – 強(qiáng)調(diào)設(shè)計(jì)團(tuán)隊(duì)成員之間的互動(dòng)和想法，運(yùn)用廣泛;

在常見(jiàn)的原型類(lèi)型中，除了紙質(zhì)原型，只需用到紙筆，其他的原型制作都需要使用原型設(shè)計(jì)工具。如今，形形色色的原型工具可以說(shuō)是眼花繚亂，如何選擇呢？尤其是原型又有不同的受眾，加之時(shí)間成本，人力成本，資金成本等條件，設(shè)計(jì)師往往需要呈現(xiàn)不同品質(zhì)的原型，以適應(yīng)當(dāng)前的最佳選擇。這里，我精選出了5款各有所長(zhǎng)的原型工具，希望對(duì)您的工具選擇有所幫助。

每款工具，我將從主要功能、學(xué)習(xí)成本、價(jià)格、兼容平臺(tái)、項(xiàng)目類(lèi)型、上手速度、保真度、分享方式、用戶反饋等幾方面進(jìn)行介紹。僅供參考。

1.Mockplus – 快速簡(jiǎn)潔的專(zhuān)業(yè)原型設(shè)計(jì)工具

平臺(tái)：Windows, Mac, Android, IOS

價(jià)格：普通-免費(fèi)；專(zhuān)業(yè)-$199/年

主要功能:

• 1. Mockplus致力于快速構(gòu)建和迭代原型，為設(shè)計(jì)師提供簡(jiǎn)潔高效的設(shè)計(jì)方式，能在最短時(shí)間里創(chuàng)造出最優(yōu)的設(shè)計(jì)成果。
• 2. 快速設(shè)計(jì)：Mockplus擁有200多個(gè)高度封裝的交互組件，3000個(gè)矢量圖標(biāo)，以及大量可供直接使用的模板、例子項(xiàng)目以及模板頁(yè)面，并且支持在Sketch中直接導(dǎo)出MP文件，為快速原型設(shè)計(jì)提供了有效支持。
• 3. 快速交互：Mockplus還是交互設(shè)計(jì)的不二選擇。只需使用封裝可見(jiàn)的交互組件，用鼠標(biāo)進(jìn)行拖拽即可完成可視化的交互，不需要任何一行代碼或者參數(shù)的設(shè)置。Mockplus目前支持3種交互方式：頁(yè)面交互，組件交互和屬性交互。交互命令還可一鍵自動(dòng)還原，貼切而周到。
• 4. 新功能：Mockplus團(tuán)隊(duì)推出了一系列人性化設(shè)計(jì)，例如可視化格式刷，可快速進(jìn)行批量復(fù)制，簡(jiǎn)單直觀；格子功能，可輕松復(fù)制頁(yè)面布局，并且可自定義屬性；數(shù)據(jù)填充，智能解鎖繁復(fù)操作；最新的表格組件，體會(huì)Excel里操作般的感覺(jué)；腦圖設(shè)計(jì)模式，能快速完成項(xiàng)目的所有頁(yè)面構(gòu)架，然后一鍵轉(zhuǎn)化為原型項(xiàng)目等等。

全新的表格組件

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

學(xué)習(xí)成本：很低。Mockplus是一款讓你關(guān)注設(shè)計(jì)，而非工具本身的工具，致力于讓設(shè)計(jì)更快、更簡(jiǎn)單！無(wú)需寫(xiě)代碼。

項(xiàng)目類(lèi)型：手機(jī)APP，網(wǎng)頁(yè)項(xiàng)目，平板項(xiàng)目，自由項(xiàng)目等

上手時(shí)間：5-10分鐘

保真度：中低保真

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

用戶反饋：“ I have used the tool and I love the idea that making real screen view through QR code. I\\’m really satisfied with what I see and even start recommending it at the office to some of my workmates. I love this app and it is super easy-to-use I must say.” – Ari Arturo Velázquez Fierro at Interaction Designer at Infotec.

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

平臺(tái)：Windows, Mac, Web-based

價(jià)格：$89

主要功能:

• 1. Balsamiq Mockups是一款備受青睞的原型圖工具，是2008由一個(gè)軟件工程師開(kāi)發(fā)的，能幫助設(shè)計(jì)師更快地進(jìn)行原型設(shè)計(jì)。
• 2. 拖拽操作：Balsamiq擁有可以直接進(jìn)行拖拽使用的元素，包括一些按鈕和列表，值得一提的是，這些元素都是手繪風(fēng)格。設(shè)計(jì)師還可在編輯器里提前準(zhǔn)備好需要使用的小部件。
• 3. 資源模板：Balsamiq官方網(wǎng)站還提供了很多模板，包括桌面App、移動(dòng)端App以及網(wǎng)站模板等。可供點(diǎn)擊下載，使用起來(lái)快速便捷。
• 4. 手繪風(fēng)格：Balsamiq獨(dú)一無(wú)二的手寫(xiě)設(shè)計(jì)在如今的機(jī)械化設(shè)計(jì)中顯得十分別致，能讓設(shè)計(jì)師體會(huì)一種在空白屏幕里進(jìn)行手繪設(shè)計(jì)的獨(dú)特體驗(yàn)。加上其種類(lèi)繁多且風(fēng)格獨(dú)特的UI庫(kù)，能為設(shè)計(jì)師提供最便捷的服務(wù)。
• 5. 線框圖設(shè)計(jì)：但Balsamiq并不是一款適合做超大型項(xiàng)目的工具，雖然它也可以用于做一些設(shè)計(jì)，但想要加入一些比較深入的動(dòng)態(tài)效果就比較局限，當(dāng)然，這和他們的設(shè)計(jì)初衷也不相一致，Balsamiq更專(zhuān)注于簡(jiǎn)潔粗略的線框圖設(shè)計(jì)。

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

項(xiàng)目類(lèi)型：手機(jī)APP，網(wǎng)頁(yè)項(xiàng)目等

上手時(shí)間：15-20 分鐘

保真度：低保真

分享和協(xié)作：Balsamiq可以說(shuō)是專(zhuān)為協(xié)作而設(shè)計(jì)。整個(gè)團(tuán)隊(duì)可以進(jìn)行交流，以確保設(shè)計(jì)的正確方向?？蛻艉屠习宥伎梢愿宄孛枋鲎约旱男枨?。在Balsamiq Mockups中共享文件，可以通過(guò)共享模型項(xiàng)目文件，共享交互式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è)計(jì)和開(kāi)發(fā)協(xié)同進(jìn)行的簡(jiǎn)單靜態(tài)網(wǎng)站原型工具

平臺(tái)：Mac，Windows

價(jià)格：2個(gè)項(xiàng)目免費(fèi)（10個(gè)項(xiàng)目：16美元/月，無(wú)限項(xiàng)目：35美元/月）

主要功能:

• 1. 直觀的設(shè)計(jì)和開(kāi)發(fā)網(wǎng)站：Webflow為網(wǎng)頁(yè)設(shè)計(jì)人員提供了HTML，CSS和JavaScript的全部功能。但是不需要編寫(xiě)代碼，而是直接進(jìn)行直觀操作。在您構(gòu)建網(wǎng)站并填充網(wǎng)站內(nèi)容時(shí)，Webflow的“Designer”會(huì)自動(dòng)創(chuàng)建簡(jiǎn)潔的語(yǔ)義代碼，這些代碼可以直接發(fā)布到網(wǎng)頁(yè)上，也可以交給開(kāi)發(fā)人員參考。
• 2. 空白畫(huà)布，創(chuàng)作空間無(wú)限：您可以在畫(huà)布上填充需要的任何元素：盒子模型，浮動(dòng)組件等，元素布局自由，盡在掌握中，然后使用強(qiáng)大的排版和配色工具進(jìn)行美化設(shè)計(jì)。
• 3. 精準(zhǔn)的交互和動(dòng)畫(huà)：直觀的可視化界面不僅僅局限于頁(yè)面布局和風(fēng)格選擇，而且還可以自由使用JavaScript和CSS動(dòng)畫(huà)的所有功能。
• 4. 輕松管理和低成本維護(hù)：整個(gè)網(wǎng)站的風(fēng)格和組件都可以有效進(jìn)行管理和維護(hù)?？梢暬瘶?gòu)建絕不是重復(fù)、笨重的工作流程。如果結(jié)合CSS的系統(tǒng)樣式以及自定義符號(hào)和組件庫(kù)，設(shè)計(jì)和管理網(wǎng)站將會(huì)更輕松。

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

項(xiàng)目類(lèi)型：Web網(wǎng)站

上手時(shí)間：15-20分鐘

保真度：高保真。

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

用戶反饋：“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 – 更簡(jiǎn)單的網(wǎng)頁(yè)，桌面和移動(dòng)原型工具

平臺(tái)：Web端。支持Chrome，F(xiàn)irefox和Safari，不兼容Internet Explorer。

價(jià)格：個(gè)人- $8.25/月；高級(jí)版- $19.08/月；團(tuán)隊(duì)版- $41.58/月

主要功能:

• 1. 高保真：Fliud UI是一款基于網(wǎng)頁(yè)端的原型設(shè)計(jì)設(shè)計(jì)工具，與其他的大部分原型圖工具不同，F(xiàn)liud UI支持添加手勢(shì)，并且具有動(dòng)畫(huà)效果，可以制作高保真的原型圖。
• 2. 快速線框圖工具：Fluid UI更多是線框圖設(shè)計(jì)，但也能影響到后期的界面設(shè)計(jì)、產(chǎn)品功能設(shè)置以及上線前測(cè)試。
• 3. 界面關(guān)系展示：Fluid UI能夠?qū)⒉煌慕缑媛?lián)立起來(lái)，以便于看到產(chǎn)品不同界面之間的關(guān)系，對(duì)于UX流程設(shè)計(jì)有很大幫助。
• 4. 快速設(shè)計(jì)：Fliud UI有16個(gè)用于iOS，Android，Windows8的用戶界面庫(kù)，其中包含超過(guò)2000個(gè)可定制的小部件和圖標(biāo)，可以直接從這些內(nèi)置庫(kù)里拖拽元素創(chuàng)建頁(yè)面，簡(jiǎn)潔高效。FluidUI還提供團(tuán)隊(duì)的實(shí)時(shí)協(xié)作，可用于用戶測(cè)試的視頻環(huán)聊，進(jìn)行設(shè)備上的測(cè)試和交互式預(yù)覽，團(tuán)隊(duì)共享非常便捷。

學(xué)習(xí)成本：較低。Fluid UI是一個(gè)原型開(kāi)發(fā)工具，可以讓您快速設(shè)計(jì)，測(cè)試并獲取有關(guān)的反饋信息，無(wú)編寫(xiě)代碼要求。

項(xiàng)目類(lèi)型：Web應(yīng)用程序和桌面應(yīng)用程序

上手時(shí)間：10-15分鐘

保真度：高保真。

分享和協(xié)作：強(qiáng)大的協(xié)作功能，不受空間限制，隨時(shí)可以實(shí)時(shí)進(jìn)行設(shè)計(jì)。只需邀請(qǐng)你的團(tuán)隊(duì)成員到同一個(gè)原型項(xiàng)目上，就可以進(jìn)行添加，反饋和評(píng)論等操作。分享原型，你可以選擇在設(shè)備上直接查看，或通過(guò)電子郵件分享，甚至直接將項(xiàng)目發(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è)計(jì)工具

平臺(tái)：Mac，Windows

價(jià)格：1個(gè)項(xiàng)目免費(fèi)（3個(gè)項(xiàng)目：15美元/月，無(wú)限項(xiàng)目：25美元/月，團(tuán)隊(duì)版：99美元/月）

主要功能:

• 1. 靜動(dòng)轉(zhuǎn)化：在InVision中，設(shè)計(jì)人員可以直接上傳設(shè)計(jì)文件并添加動(dòng)畫(huà)，手勢(shì)和轉(zhuǎn)換，將靜態(tài)畫(huà)面轉(zhuǎn)換為可點(diǎn)擊的交互式原型。
• 2. 多格式支持：支持PNG，JPG，GIF，AI和PSD格式的文件。
• 3. 高效協(xié)作：InVision App在產(chǎn)品討論階段使用非常合適，可以快速呈現(xiàn)，加之有效的協(xié)作，可以有效收集同事和客戶的反饋意見(jiàn)。

學(xué)習(xí)成本：低?；谄淇梢栽谠O(shè)計(jì)文件添加動(dòng)畫(huà)和手勢(shì)，因此只需5分鐘內(nèi)即可獲得高保真原型設(shè)計(jì)。無(wú)需代碼和編程。

項(xiàng)目類(lèi)型：移動(dòng)和Web應(yīng)用程序

上手時(shí)間：15-20分鐘

保真度：高保真。

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

用戶反饋：“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è)計(jì)工具，各具特色，也各有不足，希望總有一款適合你當(dāng)前的項(xiàng)目。但在設(shè)計(jì)過(guò)程中，對(duì)工具的要求往往會(huì)更多，譬如設(shè)計(jì)靈感的查找，更短的學(xué)習(xí)時(shí)間，更低的成本，多樣的快速演示和分享方式，比較深入的交互和動(dòng)效，以及更多的人性化設(shè)置，綜合每款工具的分析，Mockplus是性價(jià)比較高的選擇，也是我極力推薦的一款工具。

相關(guān)文章--《UI大牛教你布爾運(yùn)算》