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

 

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

4個問題

原型設計毫無疑問是設計思維進程中的密不可分的一部分。因為有這個設計進程的必要部分，我們得以有機會來證明走馬行空的想法是否可行。當原型完成，我們去試驗它。我們驗證和挑戰我們的假設。當有新信息出現時，我們及時去調整我們的設計。
而我們如何知道使用哪種工具更合適呢？還有原型設計應該做到哪種程度？
那么每當你接到一個原型設計的需求，你應該首先得搞清楚如下4個問題：

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

5個場景

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

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

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

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

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

場景2 – 低保真PC網站或Web App

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

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

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

情景3 – 響應式網站

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

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

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

場景4 – 某些特定功能

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

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

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

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

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

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

移動端

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

PC端

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

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

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

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

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

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

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

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