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

 

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

4個問題

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

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

5個場景

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

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

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

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

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

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

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

針對臺式機的普通網(wǎng)頁可選擇的工具其實很有限，因為許多原型工具往往更專注于移動端。符合我們4個需求點的工具包括有：

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

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

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

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

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

場景4 – 某些特定功能

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

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

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

場景5-高保真體驗（移動端或PC端）

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

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

移動端

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

PC端

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

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

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

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

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

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

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

當心原型設計別只是為了做原型！準備原型的根本目的是為了證明一個概念，傳達一個想法或測試一種方法。若非如此，一切都是浪費時間。