原文：Morgan Carter
原型是設(shè)計(jì)中最重要的方面之一，它讓我們可以在沒有開始完整的開發(fā)階段，更快也更簡單地測試產(chǎn)品概念。
我們可以在早期試驗(yàn)一些瘋狂的想法，并且對于這些想法可以最終成為現(xiàn)實(shí)更為自信。
從低保真原型到高保真原型的過程更像是從放大到縮小的各個(gè)階段。我們在進(jìn)入到細(xì)節(jié)中去之前，對設(shè)計(jì)決定進(jìn)行測試和迭代，而繪制想法的草圖就顯得尤為重要。
在深入地思考一個(gè)產(chǎn)品之前，原型階段可以讓你看到一片森林，而不僅僅是一棵樹木。
五個(gè)維度的真實(shí)性
有五個(gè)方式來測量一個(gè)原型的真實(shí)程度。
隨著真實(shí)性的增加，這五個(gè)維度不一定會平均地分布在各個(gè)階段（一個(gè)中等真實(shí)度的原型不一定適用在中等階段，但也許在一些高階段和低階段適用）。
視覺精煉層次
原型與最終產(chǎn)品看上去有多相似？一個(gè)低保真的原型也許就是一個(gè)手繪的草稿，而一個(gè)高保真原型就會是精確到像素，看上去和真實(shí)的產(chǎn)品沒什么區(qū)別。
功能的廣度
原型能夠包含多少的功能？一個(gè)低保真的原型聚焦于那些最重要的任務(wù)，而高保真原型會有更細(xì)節(jié)的任務(wù)（比如：重置你的密碼）
功能的深度
每一個(gè)功能能夠被多大程度地制作成原型？一個(gè)低保真的原型可以在頁面和頁面之間跳轉(zhuǎn)，并在已有典型數(shù)據(jù)的情況下，告訴你大概的用戶流程。一個(gè)高保真的原型可以讓你輸入數(shù)據(jù)，知道那些在進(jìn)行不同的輸入時(shí)影響到輸出的區(qū)分
。
交互的豐富性
原型中會有多少的交互？低保真原型也許會相當(dāng)簡單，在用戶使用時(shí)沒有任何的反饋信息。高保真原型將會考慮動畫效果，hover狀態(tài)，表單驗(yàn)證，和所有用戶與產(chǎn)品直接的細(xì)節(jié)交互。
數(shù)據(jù)模型的豐富性
你的原型中應(yīng)用的數(shù)據(jù)有多豐富？低保真原型使用的是有限的，典型的數(shù)據(jù)設(shè)置，顯示最常見的
用例。高保真原型會包括邊緣的情況，比如非常長的用戶名（應(yīng)該減少用戶名的長度），無數(shù)據(jù)（提供默認(rèn)人物頭像），第一次使用（使用空白狀態(tài)），或者極端大的數(shù)據(jù)量（使用翻頁或者過濾）。
低保真原型
一個(gè)低保真的原型是你的產(chǎn)品的宏觀層面。你聚焦于最重要的任務(wù)，并且是一個(gè)最簡要的形式。你不用擔(dān)心反饋，交互或者邊緣的情況。
我們一開始要用低保真原型是因?yàn)槲覀兿胍獙⑽覀兊年P(guān)注點(diǎn)放在導(dǎo)航，用戶流程，和哪些功能將要被包含在產(chǎn)品中。如果我們一開始就著手于小的細(xì)節(jié)，如字體或者顏色，就會出現(xiàn)幾個(gè)問題：
1.你的客戶或者老會認(rèn)為這就是最終產(chǎn)品的樣子。保持一個(gè)草稿的狀態(tài)是為了明確：這不是一個(gè)精確到像素的解釋。
2.你的客戶或者老板（或你自己）將會開始專注于這些在這個(gè)階段并不重要的細(xì)節(jié)。對于用戶流程根本沒有關(guān)系的字體，只會導(dǎo)致干擾。
3.一旦你開始花大量的時(shí)間將設(shè)計(jì)的視覺部分做得完美，你就會依賴它。如果這不是一個(gè)好的設(shè)計(jì)，你將不忍心將它舍棄。如果這個(gè)草稿花的時(shí)間并不多，那么舍棄它將更加容易。
4.它讓一個(gè)不好的決定看上去像一個(gè)好的決定。在過去，我作曲和合成我自己的音樂。當(dāng)我作曲的時(shí)候，我經(jīng)常讓樂器的聲音聽上去很不好。如果我的樂器聲音非常美妙，那么就算我寫了一首很爛的曲子，它聽上去卻是好的。如果這個(gè)音樂在很爛的合成以后還是聽上去不錯(cuò)，它意味著在很好的合成之后，它聽上去會更好。同樣道理，在前期投入太多在視覺層面，會毀掉你的觀點(diǎn)。如果設(shè)計(jì)草圖很容易理解，并且看上去不錯(cuò)，那么它應(yīng)該在設(shè)計(jì)的最終階段也會看上去非常好，并且非常容易理解。
很多人使用像InVision這樣的工具，進(jìn)入高保真原型階段。但是我發(fā)現(xiàn)它最有用的是：用戶是怎么樣從一個(gè)頁面到另外一個(gè)頁面，每一個(gè)頁面具體是什么樣子并不重要。
在這個(gè)階段你可以問這些問題：
哪一些元素可以包含在屏幕內(nèi)，而哪一些可以被去掉？
在信息架構(gòu)之間最好的導(dǎo)航方式是什么？
在有導(dǎo)航的情況下我的“位置”夠清晰么？
中保真原型
定義中度保真的原型挺困難的。它也許是這五個(gè)維度的中間階段，或者它在一些維度中比較低，或者在另外一些維度中比較高。
它也許在一些重要功能上更進(jìn)一步，但是還是缺少細(xì)節(jié)的功能。專注的維度，將會最終依賴于項(xiàng)目的需求。
在這個(gè)維度，你會專注于每個(gè)單獨(dú)頁面的布局。你知道這些頁面如何適應(yīng)于綜合的導(dǎo)航，你也是思考在頁面的哪個(gè)位置放置相關(guān)元素（甚至你還不知道每一個(gè)元素它們最終是什么樣的）
動畫可以在這個(gè)階段展現(xiàn)。一旦你開始布局每一個(gè)頁面，你可以思考如何從一個(gè)頁面切換到另外一個(gè)頁面。也許從一個(gè)狀態(tài)直接跳轉(zhuǎn)到另外一種狀態(tài)會令人迷惑，所以動畫可以幫助用戶在應(yīng)用中切換。Material Design Guideline提供了很多不錯(cuò)的過渡方式。
在這個(gè)階段你可以問這些問題：
在這個(gè)頁面里什么是最重要的元素，以及我如何層級里給它制定優(yōu)先級？
這個(gè)按鈕的顏色是什么?
我應(yīng)該給這一次輸入使用一個(gè)選擇的下拉菜單還是單選按鈕？
高保真原型
高保真原型專注于產(chǎn)品的細(xì)節(jié)層面。大的方向已經(jīng)有了，高保真原型是確定你的設(shè)計(jì)從視覺上傳達(dá)了產(chǎn)品的功能。你開始思考如何給你的設(shè)計(jì)添磚加瓦，專注于顏色和對比度，以及任何細(xì)節(jié)的交互。如果你使用動畫，你將會在這個(gè)階段努力將它做好。
在這個(gè)階段，效果圖將會真實(shí)地展現(xiàn)在最終的屏幕里。
在這個(gè)階段你可以問這些問題：
人們意識不到這個(gè)按鈕是可點(diǎn)擊的，我是否應(yīng)該給它加上漸變？
我們是否可以在這兩種顏色之間增加對比度，使之可以更加容易的閱讀？
這個(gè)元素當(dāng)鼠標(biāo)點(diǎn)擊時(shí)是什么效果？
當(dāng)沒有完整數(shù)據(jù)的時(shí)候這個(gè)看上去是什么樣的？
現(xiàn)實(shí)中的原型
在真實(shí)的情況下（特別是在初創(chuàng)公司），你可能不會完全按照低保真－中保真－高保真這個(gè)流程。這也是可以理解的。只花10分鐘畫你的設(shè)計(jì)草圖，并且與其他人一起討論，比起直接在photoshop中制作更加有效。
最后，在一些階段，你需要將原型制作成代碼。一旦你到達(dá)了一個(gè)高保真的程度，它可以直接更快地轉(zhuǎn)化成代碼，而不需要通過photoshop或Sketch。但是到了這個(gè)階段，并不代表設(shè)計(jì)的流程就結(jié)束了。如果你知道如何寫代碼，那么在瀏覽器中設(shè)計(jì)（直接用代碼制作）也很好呀，它避免了很多設(shè)計(jì)師和程序員的交流成本。但是如果你不會寫代碼，原型就變得越發(fā)重要了－花了幾分鐘畫原型圖，會在給你的程序員節(jié)省按天計(jì)算的時(shí)間哦。
