經(jīng)常有人會問：“哪個原型設(shè)計工具是最好的？” 我得說，這種問法是錯誤的。
正確的問法應(yīng)該是：“哪個原型工具對我目前的項(xiàng)目是最好的？”

 

還有：每個產(chǎn)品設(shè)計師都應(yīng)該熟練多個原型設(shè)計工具。只懂一個還不夠！

4個問題

原型設(shè)計毫無疑問是設(shè)計思維進(jìn)程中的密不可分的一部分。因?yàn)橛羞@個設(shè)計進(jìn)程的必要部分，我們得以有機(jī)會來證明走馬行空的想法是否可行。當(dāng)原型完成，我們?nèi)ピ囼?yàn)它。我們驗(yàn)證和挑戰(zhàn)我們的假設(shè)。當(dāng)有新信息出現(xiàn)時，我們及時去調(diào)整我們的設(shè)計。
而我們?nèi)绾沃朗褂媚姆N工具更合適呢？還有原型設(shè)計應(yīng)該做到哪種程度？
那么每當(dāng)你接到一個原型設(shè)計的需求，你應(yīng)該首先得搞清楚如下4個問題：

1. 您的產(chǎn)品目標(biāo)設(shè)備是手機(jī)，平板電腦還是臺式機(jī)？
2. 你的原型設(shè)計是否需要高保真？
3. 可以給到你多少時間來準(zhǔn)備？
4. 需要做到哪種程度？

5個場景

為了說明我的觀點(diǎn)，我將給出一些案例來告訴你每個場景下哪個原型工具最適合。我們將使用上面概括的4個問題為每個場景來說明依據(jù)。

場景1 – 可以是低保真，但需要快速準(zhǔn)備好的移動App

1. 目標(biāo)設(shè)備是移動端
2. 只需要低保真
3. 需要盡快準(zhǔn)備！
4. 需要將頁面串聯(lián)，并展示它們的流程

有很多優(yōu)秀的工具適用于這種情況。用于此場景的最佳工具是可以在短時間內(nèi)以低保真方式展示整個應(yīng)用體驗(yàn)的流程的工具。適合這需求目標(biāo)的工具包括有：

• Invision
• Marvel
• Craft (Sketch的一個插件)
• Adobe XD
• Flinto
• Principle
• Origami
• UX Pin
• Pixate

場景2 – 低保真PC網(wǎng)站或Web App

1. 目標(biāo)設(shè)備是桌面瀏覽器（網(wǎng)站）
2. 可以是低保真原型
3. 需要盡快準(zhǔn)備！
4. 需要將頁面串聯(lián)，并展示它們的流程

針對臺式機(jī)的普通網(wǎng)頁可選擇的工具其實(shí)很有限，因?yàn)樵S多原型工具往往更專注于移動端。符合我們4個需求點(diǎn)的工具包括有：

• Invision
• Marvel
• Flinto
• Principle
• Adobe XD
• Keynote
• UX Pin

情景3 – 響應(yīng)式網(wǎng)站

1. 目標(biāo)設(shè)備是全部類型
2. 保真度相對要求較高
3. 不用很趕，但需要保證效率
4. 需要將頁面串聯(lián)，并展示它們的流程，還要展示響應(yīng)的效果

好吧，每當(dāng)客戶要求我準(zhǔn)備“響應(yīng)式”示例時，我其實(shí)更傾向于嘗試重新商議。為什么我們的原型需要做響應(yīng)效果?。空嬲哪繕?biāo)是什么？我們可以分別顯示每種模態(tài)嗎？在不懂前端代碼的情況下，去實(shí)現(xiàn)原型設(shè)計的響應(yīng)式其實(shí)是相當(dāng)困難的。
話雖如此，但有時你還是不得不去準(zhǔn)備……就此場景推薦的工具包括有：

• 原始的HTML / CSS / JS（真正的響應(yīng)式）
• Axure（靜態(tài)斷點(diǎn)）
• UXPin（靜態(tài)斷點(diǎn)）

場景4 – 某些特定功能

1. 目標(biāo)設(shè)備是全部類型
2. 保真度相對要求較高
3. 不用很趕，但需要保證效率
4. 需要展示動效，元素及動畫效果需要在適合的時機(jī)出現(xiàn)，而不需要關(guān)注頁面間的流程

在原型稿中搞些動畫其實(shí)可以是蠻有趣的。我發(fā)現(xiàn)即使用戶也許沒有注意到這些動畫，但這些細(xì)微差別的體驗(yàn)還是很有價值的——當(dāng)你花時間實(shí)現(xiàn)“平滑的過場”時，整體體驗(yàn)會更加愉悅和流暢。

• Principle (最快的方式實(shí)現(xiàn)模擬效果)
• Adobe After Effects
• 真正的 HTML/CSS/JS
• Flinto
• Origami
• Phonegap
• Xcode
• framer

場景5-高保真體驗(yàn)（移動端或PC端）

1. 目標(biāo)設(shè)備是移動端或同時包括PC端
2. 必須盡可能高保真
3. 有充裕的時間
4. 需要顯示屏幕的流程關(guān)系，同時還需要準(zhǔn)備屏幕元素和功能的高保真動畫

有時，你的原型需要真正高保真，同時還展示app的整個流程交互關(guān)系。毫無疑問這是一個相當(dāng)花時間的任務(wù)，有時我可能會問，“為什么我們不索性作為正式的產(chǎn)品來直接來開發(fā)呢？”
如果你確實(shí)需要構(gòu)建一個高保真的原型，包括一些有趣的和獨(dú)特的動畫，并允許用戶在頁面之間導(dǎo)航跳轉(zhuǎn)，創(chuàng)造一個真正的體驗(yàn) —— 那么你可用到如下這些很棒的工具：

移動端

• Proto.io
• Principle
• Flinto
• Origami
• PhoneGap
• framer
• Xcode

PC端

• 原生HTML/CSS/JS
• Principle
• Flinto
• framer
• Xcode

不要固執(zhí)地只懂得用一個原型工具就算

業(yè)內(nèi)如此多的原型設(shè)計工具。而本文并不是說提及的已經(jīng)是原型工具的詳盡列表。相反地，提及的僅是所關(guān)注幾個最流行的工具而已。

關(guān)鍵點(diǎn)其實(shí)是，不要專注于用哪個具體的工具，而是專注于你有原型要達(dá)成一個怎樣的目標(biāo)。你需要溝通什么？你需要展示什么？你需要測試什么？你必須建立什么樣的模式？需要什么樣的保真度？要多快搞定？

當(dāng)你懂得專注于搞清楚原型設(shè)計的需求目標(biāo)時，應(yīng)該用哪些工具將變得很顯而易見的事情了。那么我們應(yīng)該有更廣泛的原型工具的經(jīng)驗(yàn)。當(dāng)需求出現(xiàn)，你有所準(zhǔn)備才懂得選擇哪一個工具。

最后要說的是：原型存在只是為了交流東西。

每當(dāng)你進(jìn)行原型設(shè)計時，我會鼓勵你少關(guān)注原型的表現(xiàn)效果，而更多地關(guān)注你為什么這樣做。你想實(shí)現(xiàn)什么？
通常，我發(fā)現(xiàn)自己做的原型設(shè)計算得上真正高保真體驗(yàn)是那些為了實(shí)現(xiàn)產(chǎn)品的，而不一定是做得很漂亮的。要知道原型只是為了便于需求的溝通和測試的整體產(chǎn)品概念的東西。

當(dāng)心原型設(shè)計別只是為了做原型！準(zhǔn)備原型的根本目的是為了證明一個概念，傳達(dá)一個想法或測試一種方法。若非如此，一切都是浪費(fèi)時間。