如果您從事設計工作，那么通常會聽到草圖(Sketch)、線框(Wireframe)、模型(Mockup)和原型(Prototype)。
許多設計師互換使用這些術語。因為他們是相關的，但是其實它們是不同的。
我們來回顧一下四種類型的可交付設計成果，并探索可以幫助我們創建它們的工具。
1、Sketch (草圖)
（這里說的Sketch并不是大家熟知的鉆石圖標??的原型制作軟件）草圖通常是在一張紙上或用數字工具畫的，給你一個基本的概念表現。
?When？
草圖在設計過程的概念化和初始可視化階段非常有用。
A picture is worth a thousand words.
一圖勝千言
人們是視覺學習者，視覺比文字更能解釋想法。
?How？
草圖可以用紙和筆或者在電腦上通過設計軟件來創建。
制作草圖的注意事項:
不要試圖過分美化你的草圖。繪制粗略的草圖即可，只要它們能幫助你傳達中心思想。
使用蠟紙、模具或者模板可以讓草圖制作的更加快速
練習?Crazy Eights method。Crazy Eights是Google Ventures Design的一種sprint技術，可讓產品團隊在短時間內可視化很多創意。該過程要求每個團隊成員在五分鐘內勾勒出八個想法。
如果你感興趣的話，可以去搜索閱讀Jake Knapp有關Crazy Eights的文章，了解有關此技術的更多信息。
給你的草圖拍照。有三個原因。首先，圖像可以用作項目的文檔。其次，你可以將這些照片用于你的作品集。第三，像Marvel POP這樣的工具可以幫助你把筆和紙上的想法轉換成交互式的iPhone或Android原型。
2. Wireframes（線框圖/低保真圖）
線框圖是一種低保真度的設計產物，它只代表UI的基本元素(線框圖看起來就像是用線設計的，這就是它的名字的由來)。線框圖是你設計的骨架——它們描繪了基本的UI元素，并且是你產品的藍圖。
?When？
線框圖在產品設計過程的初始階段尤為重要。線框圖適用于:
評估個別頁面/屏幕的結構;
理解相關屏幕/頁面是如何一起工作的(從用戶的角度);
準備詳細的項目需求文檔(線框圖可以作為很好的參考)。
?How？
與草圖類似，線框圖也可以用紙和筆來創建。說到數字工具，Balsamiq是一個不錯的工具。
繪制草圖的注意事項:
不要給線框圖添加太多的細節。線框圖是產品的骨架結構。線框圖的目的是評估設計，而不是修飾細節。因此，只添加將在頁面/屏幕上顯示的基本元素。
使用顏色來吸引注意力。線框圖通常是用黑色和白色創建的，但也可以使用有限數量的顏色(比如一種或兩種對比色)來創建視覺重音。
添加簡短的注釋(To The Point)。如果您計劃向團隊展示線框，請始終包含注釋。注釋幫助創建上下文并快速傳遞關鍵思想。
從靜態線框創建可單擊的線框。可點擊的線框可以幫助其他人更好地理解您的想法。
3. Mockups(中/高保真圖)
Mockups是設計的中保真或高保真可視化。Mockups提供了產品設計的視覺外觀，并且對于評估設計的外觀和感覺非常有用。
?When?
在設計過程的視覺設計階段，Mockups都是非常有用的。
Mockups在設計新產品和重新設計現有產品時都可以使用。當團隊想要:
評估視覺設計決策。看看顏色、排版和圖像是如何協同工作的。
嘗試不同的風格。設計師可以嘗試不同的顏色組合，看看什么配色方案最適合用戶。
評估設計的視覺一致性。確保產品中的所有屏幕看起來像整個產品的一部分，而不是單個屏幕的集合。
評估設計的可訪問性(Accessibility)。您的設計應該允許具有各種能力的用戶導航、理解和使用您的產品。
關于色彩對比。請閱讀W3C關于如何為正文和圖像文本選擇適當的對比度的建議
向涉眾展示用戶界面。草圖和線框圖通常需要澄清，而實物模型對人們來說更容易理解。
?How？
Mockups可以在Photoshop、Sketch、Figma和許多其他設計工具中創建。
繪制Mockups的注意事項:
避免使用Lorem Ipsum。許多設計人員用虛擬文本(Lorem Ipsum)填充Mockups。雖然這種方法可以在設計過程中節省一些時間，但當設計者用真實文本內容進行替換時，它會產生許多問題。文本容器可能沒有設計成適合實際內容，可能產生計劃外的額外工作量。
不要為你的模型確定單一的設計理念。使用一個修改的想法或設計理念，并開始細化它，似乎是正確的。然而，這并不是最好的設計方法。當我們設計一個新產品時，我們需要實驗和嘗試各種解決方案。因此，最好嘗試盡可能多的不同的想法，然后選擇一個最適合的方案。
4. Prototypes(原型)
Prototype原型是一個應用程序/網頁的工作模型。與我上面提到的所有其他設計產物不同。原型的目標是模擬用戶和界面之間的交互。
?When?
原型在設計過程的功能設計階段非常有用。
原型可以幫助您:
評估用戶旅程(User Journey)。原型將幫助產品團隊識別交互流的潛在問題。
可用性測試。通過在用戶中測試您的設計，您可以在編寫代碼之前建立信心。
?How？
Adobexd和InVision可以幫助您創建Web、移動、智能手表甚至語音體驗的原型(Adobexd)。
繪制原型圖的注意事項:
為原型選擇正確的保真度。一些設計師認為原型始終是高保真的人工制品。其實并非如此，原型的保真度應與思維的保真度相匹配，并且原型可以是低保真度，中保真度和高保真度。
使用高保真原型來可視化復雜的過渡。當您需要顯示動畫狀態轉換時，Hi-Fi原型就非常有用。
使用高保真原型與用戶一起測試概念。你的設計越像一個真實的產品，你就會從你的測試參與者那里得到更詳細的反饋。
創建編碼的原型。幾乎所有產品都存在技術可行性的問題。并不是設計師創造的所有東西都能很容易地轉化為代碼。但對于設計人員編寫代碼并創建本地原型的項目來說，面對技術可行性問題的風險就低了。(但這一點，對于設計師的要求就比較高了，國內目前能夠勝任編碼工作的設計師少的可憐）
學習如何設計更好的產品
計算機和人之間的交互應該像兩個人之間的對話一樣直觀。《交互設計基礎》將幫助您學習如何進行高效和有說服力的設計。
