原文：Morgan Carter

原型是設計中最重要的方面之一，它讓我們可以在沒有開始完整的開發階段，更快也更簡單地測試產品概念。

我們可以在早期試驗一些瘋狂的想法，并且對于這些想法可以最終成為現實更為自信。

從低保真原型到高保真原型的過程更像是從放大到縮小的各個階段。我們在進入到細節中去之前，對設計決定進行測試和迭代，而繪制想法的草圖就顯得尤為重要。

在深入地思考一個產品之前，原型階段可以讓你看到一片森林，而不僅僅是一棵樹木。

五個維度的真實性

有五個方式來測量一個原型的真實程度。

隨著真實性的增加，這五個維度不一定會平均地分布在各個階段（一個中等真實度的原型不一定適用在中等階段，但也許在一些高階段和低階段適用）。

視覺精煉層次

原型與最終產品看上去有多相似？一個低保真的原型也許就是一個手繪的草稿，而一個高保真原型就會是精確到像素，看上去和真實的產品沒什么區別。

功能的廣度

原型能夠包含多少的功能？一個低保真的原型聚焦于那些最重要的任務，而高保真原型會有更細節的任務（比如：重置你的密碼）

功能的深度

每一個功能能夠被多大程度地制作成原型？一個低保真的原型可以在頁面和頁面之間跳轉，并在已有典型數據的情況下，告訴你大概的用戶流程。一個高保真的原型可以讓你輸入數據，知道那些在進行不同的輸入時影響到輸出的區分

。

交互的豐富性

原型中會有多少的交互？低保真原型也許會相當簡單，在用戶使用時沒有任何的反饋信息。高保真原型將會考慮動畫效果，hover狀態，表單驗證，和所有用戶與產品直接的細節交互。

數據模型的豐富性

你的原型中應用的數據有多豐富？低保真原型使用的是有限的，典型的數據設置，顯示最常見的

用例。高保真原型會包括邊緣的情況，比如非常長的用戶名（應該減少用戶名的長度），無數據（提供默認人物頭像），第一次使用（使用空白狀態），或者極端大的數據量（使用翻頁或者過濾）。

低保真原型

一個低保真的原型是你的產品的宏觀層面。你聚焦于最重要的任務，并且是一個最簡要的形式。你不用擔心反饋，交互或者邊緣的情況。

我們一開始要用低保真原型是因為我們想要將我們的關注點放在導航，用戶流程，和哪些功能將要被包含在產品中。如果我們一開始就著手于小的細節，如字體或者顏色，就會出現幾個問題：

1.你的客戶或者老會認為這就是最終產品的樣子。保持一個草稿的狀態是為了明確：這不是一個精確到像素的解釋。

2.你的客戶或者老板（或你自己）將會開始專注于這些在這個階段并不重要的細節。對于用戶流程根本沒有關系的字體，只會導致干擾。

3.一旦你開始花大量的時間將設計的視覺部分做得完美，你就會依賴它。如果這不是一個好的設計，你將不忍心將它舍棄。如果這個草稿花的時間并不多，那么舍棄它將更加容易。

4.它讓一個不好的決定看上去像一個好的決定。在過去，我作曲和合成我自己的音樂。當我作曲的時候，我經常讓樂器的聲音聽上去很不好。如果我的樂器聲音非常美妙，那么就算我寫了一首很爛的曲子，它聽上去卻是好的。如果這個音樂在很爛的合成以后還是聽上去不錯，它意味著在很好的合成之后，它聽上去會更好。同樣道理，在前期投入太多在視覺層面，會毀掉你的觀點。如果設計草圖很容易理解，并且看上去不錯，那么它應該在設計的最終階段也會看上去非常好，并且非常容易理解。

很多人使用像InVision這樣的工具，進入高保真原型階段。但是我發現它最有用的是：用戶是怎么樣從一個頁面到另外一個頁面，每一個頁面具體是什么樣子并不重要。

在這個階段你可以問這些問題：

哪一些元素可以包含在屏幕內，而哪一些可以被去掉？

在信息架構之間最好的導航方式是什么？

在有導航的情況下我的“位置”夠清晰么？

中保真原型

定義中度保真的原型挺困難的。它也許是這五個維度的中間階段，或者它在一些維度中比較低，或者在另外一些維度中比較高。

它也許在一些重要功能上更進一步，但是還是缺少細節的功能。專注的維度，將會最終依賴于項目的需求。

在這個維度，你會專注于每個單獨頁面的布局。你知道這些頁面如何適應于綜合的導航，你也是思考在頁面的哪個位置放置相關元素（甚至你還不知道每一個元素它們最終是什么樣的）

動畫可以在這個階段展現。一旦你開始布局每一個頁面，你可以思考如何從一個頁面切換到另外一個頁面。也許從一個狀態直接跳轉到另外一種狀態會令人迷惑，所以動畫可以幫助用戶在應用中切換。Material Design Guideline提供了很多不錯的過渡方式。

在這個階段你可以問這些問題：

在這個頁面里什么是最重要的元素，以及我如何層級里給它制定優先級？

這個按鈕的顏色是什么?

我應該給這一次輸入使用一個選擇的下拉菜單還是單選按鈕？

高保真原型

高保真原型專注于產品的細節層面。大的方向已經有了，高保真原型是確定你的設計從視覺上傳達了產品的功能。你開始思考如何給你的設計添磚加瓦，專注于顏色和對比度，以及任何細節的交互。如果你使用動畫，你將會在這個階段努力將它做好。

在這個階段，效果圖將會真實地展現在最終的屏幕里。

在這個階段你可以問這些問題：

人們意識不到這個按鈕是可點擊的，我是否應該給它加上漸變？

我們是否可以在這兩種顏色之間增加對比度，使之可以更加容易的閱讀？

這個元素當鼠標點擊時是什么效果？

當沒有完整數據的時候這個看上去是什么樣的？

現實中的原型

在真實的情況下（特別是在初創公司），你可能不會完全按照低保真－中保真－高保真這個流程。這也是可以理解的。只花10分鐘畫你的設計草圖，并且與其他人一起討論，比起直接在photoshop中制作更加有效。

最后，在一些階段，你需要將原型制作成代碼。一旦你到達了一個高保真的程度，它可以直接更快地轉化成代碼，而不需要通過photoshop或Sketch。但是到了這個階段，并不代表設計的流程就結束了。如果你知道如何寫代碼，那么在瀏覽器中設計（直接用代碼制作）也很好呀，它避免了很多設計師和程序員的交流成本。但是如果你不會寫代碼，原型就變得越發重要了－花了幾分鐘畫原型圖，會在給你的程序員節省按天計算的時間哦。