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

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

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

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

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

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

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

平臺：Windows, Mac, Android, IOS

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

主要功能:

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

全新的表格組件

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

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

項(xiàng)目類型：手機(jī)APP，網(wǎng)頁項(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)力。參與人員可對設(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ì)工具

平臺：Windows, Mac, Web-based

價(jià)格：$89

主要功能:

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

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

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

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

保真度：低保真

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

平臺：Mac，Windows

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

主要功能:

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

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

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

上手時(shí)間：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。

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

主要功能:

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

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

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

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

保真度：高保真。

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

平臺：Mac，Windows

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

主要功能:

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

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

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

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

保真度：高保真。

分享和協(xié)作：InVision最突出的優(yōu)勢就是它的協(xié)作功能，所有參與原型項(xiàng)目的成員都可以提供反饋，記錄問題和查看實(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ì)過程中，對工具的要求往往會更多，譬如設(shè)計(jì)靈感的查找，更短的學(xué)習(xí)時(shí)間，更低的成本，多樣的快速演示和分享方式，比較深入的交互和動效，以及更多的人性化設(shè)置，綜合每款工具的分析，Mockplus是性價(jià)比較高的選擇，也是我極力推薦的一款工具。

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