如果您從事設(shè)計工作，那么通常會聽到草圖(Sketch)、線框(Wireframe)、模型(Mockup)和原型(Prototype)。

許多設(shè)計師互換使用這些術(shù)語。因為他們是相關(guān)的，但是其實它們是不同的。

我們來回顧一下四種類型的可交付設(shè)計成果，并探索可以幫助我們創(chuàng)建它們的工具。

1、Sketch (草圖)

（這里說的Sketch并不是大家熟知的鉆石圖標(biāo)??的原型制作軟件）草圖通常是在一張紙上或用數(shù)字工具畫的，給你一個基本的概念表現(xiàn)。

手繪草圖（圖片來源：Behance）

?When？

草圖在設(shè)計過程的概念化和初始可視化階段非常有用。

A picture is worth a thousand words.

一圖勝千言

人們是視覺學(xué)習(xí)者，視覺比文字更能解釋想法。

?How？

草圖可以用紙和筆或者在電腦上通過設(shè)計軟件來創(chuàng)建。

制作草圖的注意事項:

不要試圖過分美化你的草圖。繪制粗略的草圖即可，只要它們能幫助你傳達中心思想。

使用蠟紙、模具或者模板可以讓草圖制作的更加快速

模具? (圖片來源: Amazon)

練習(xí)?Crazy Eights method。Crazy Eights是Google Ventures Design的一種sprint技術(shù)，可讓產(chǎn)品團隊在短時間內(nèi)可視化很多創(chuàng)意。該過程要求每個團隊成員在五分鐘內(nèi)勾勒出八個想法。

如果你感興趣的話，可以去搜索閱讀Jake Knapp有關(guān)Crazy Eights的文章，了解有關(guān)此技術(shù)的更多信息。

Crazy eights (圖片來源：Google Ventures)

給你的草圖拍照。有三個原因。首先，圖像可以用作項目的文檔。其次，你可以將這些照片用于你的作品集。第三，像Marvel POP這樣的工具可以幫助你把筆和紙上的想法轉(zhuǎn)換成交互式的iPhone或Android原型。

它可以把任何草圖或圖像變成交互式原型 (圖片來源:Mavel)

2. Wireframes（線框圖/低保真圖）

線框圖是一種低保真度的設(shè)計產(chǎn)物，它只代表UI的基本元素(線框圖看起來就像是用線設(shè)計的，這就是它的名字的由來)。線框圖是你設(shè)計的骨架——它們描繪了基本的UI元素，并且是你產(chǎn)品的藍圖。

(圖片來源:Balsamiq)

?When？

線框圖在產(chǎn)品設(shè)計過程的初始階段尤為重要。線框圖適用于:

評估個別頁面/屏幕的結(jié)構(gòu);

理解相關(guān)屏幕/頁面是如何一起工作的(從用戶的角度);

準(zhǔn)備詳細的項目需求文檔(線框圖可以作為很好的參考)。

?How？

與草圖類似，線框圖也可以用紙和筆來創(chuàng)建。說到數(shù)字工具，Balsamiq是一個不錯的工具。

繪制草圖的注意事項:

不要給線框圖添加太多的細節(jié)。線框圖是產(chǎn)品的骨架結(jié)構(gòu)。線框圖的目的是評估設(shè)計，而不是修飾細節(jié)。因此，只添加將在頁面/屏幕上顯示的基本元素。

使用顏色來吸引注意力。線框圖通常是用黑色和白色創(chuàng)建的，但也可以使用有限數(shù)量的顏色(比如一種或兩種對比色)來創(chuàng)建視覺重音。

添加簡短的注釋(To The Point)。如果您計劃向團隊展示線框，請始終包含注釋。注釋幫助創(chuàng)建上下文并快速傳遞關(guān)鍵思想。

帶注釋的線框圖(圖片來源:Chaymae Lougmani)

從靜態(tài)線框創(chuàng)建可單擊的線框。可點擊的線框可以幫助其他人更好地理解您的想法。

3. Mockups(中/高保真圖)

Mockups是設(shè)計的中保真或高保真可視化。Mockups提供了產(chǎn)品設(shè)計的視覺外觀，并且對于評估設(shè)計的外觀和感覺非常有用。

機票預(yù)訂界面高保真圖 (圖片來源:Gleb Kuznetsov ?)

?When?

在設(shè)計過程的視覺設(shè)計階段，Mockups都是非常有用的。

Mockups在設(shè)計新產(chǎn)品和重新設(shè)計現(xiàn)有產(chǎn)品時都可以使用。當(dāng)團隊想要:

評估視覺設(shè)計決策。看看顏色、排版和圖像是如何協(xié)同工作的。

嘗試不同的風(fēng)格。設(shè)計師可以嘗試不同的顏色組合，看看什么配色方案最適合用戶。

評估設(shè)計的視覺一致性。確保產(chǎn)品中的所有屏幕看起來像整個產(chǎn)品的一部分，而不是單個屏幕的集合。

評估設(shè)計的可訪問性(Accessibility)。您的設(shè)計應(yīng)該允許具有各種能力的用戶導(dǎo)航、理解和使用您的產(chǎn)品。

關(guān)于色彩對比。請閱讀W3C關(guān)于如何為正文和圖像文本選擇適當(dāng)?shù)膶Ρ榷鹊慕ㄗh

向涉眾展示用戶界面。草圖和線框圖通常需要澄清，而實物模型對人們來說更容易理解。

?How？

Mockups可以在Photoshop、Sketch、Figma和許多其他設(shè)計工具中創(chuàng)建。

繪制Mockups的注意事項:

避免使用Lorem Ipsum。許多設(shè)計人員用虛擬文本(Lorem Ipsum)填充Mockups。雖然這種方法可以在設(shè)計過程中節(jié)省一些時間，但當(dāng)設(shè)計者用真實文本內(nèi)容進行替換時，它會產(chǎn)生許多問題。文本容器可能沒有設(shè)計成適合實際內(nèi)容，可能產(chǎn)生計劃外的額外工作量。

不要為你的模型確定單一的設(shè)計理念。使用一個修改的想法或設(shè)計理念，并開始細化它，似乎是正確的。然而，這并不是最好的設(shè)計方法。當(dāng)我們設(shè)計一個新產(chǎn)品時，我們需要實驗和嘗試各種解決方案。因此，最好嘗試盡可能多的不同的想法，然后選擇一個最適合的方案。

4. Prototypes(原型)

Prototype原型是一個應(yīng)用程序/網(wǎng)頁的工作模型。與我上面提到的所有其他設(shè)計產(chǎn)物不同。原型的目標(biāo)是模擬用戶和界面之間的交互。

在AdobeXD中創(chuàng)建的原型(圖片來源:Adobe)

?When?

原型在設(shè)計過程的功能設(shè)計階段非常有用。

原型可以幫助您:

評估用戶旅程(User Journey)。原型將幫助產(chǎn)品團隊識別交互流的潛在問題。

可用性測試。通過在用戶中測試您的設(shè)計，您可以在編寫代碼之前建立信心。

?How？

Adobexd和InVision可以幫助您創(chuàng)建Web、移動、智能手表甚至語音體驗的原型(Adobexd)。

繪制原型圖的注意事項:

為原型選擇正確的保真度。一些設(shè)計師認為原型始終是高保真的人工制品。其實并非如此，原型的保真度應(yīng)與思維的保真度相匹配，并且原型可以是低保真度，中保真度和高保真度。

使用高保真原型來可視化復(fù)雜的過渡。當(dāng)您需要顯示動畫狀態(tài)轉(zhuǎn)換時，Hi-Fi原型就非常有用。

音樂應(yīng)用中的放大過渡 （圖片來源:Ehsan Rahimi）

使用高保真原型與用戶一起測試概念。你的設(shè)計越像一個真實的產(chǎn)品，你就會從你的測試參與者那里得到更詳細的反饋。

創(chuàng)建編碼的原型。幾乎所有產(chǎn)品都存在技術(shù)可行性的問題。并不是設(shè)計師創(chuàng)造的所有東西都能很容易地轉(zhuǎn)化為代碼。但對于設(shè)計人員編寫代碼并創(chuàng)建本地原型的項目來說，面對技術(shù)可行性問題的風(fēng)險就低了。(但這一點，對于設(shè)計師的要求就比較高了，國內(nèi)目前能夠勝任編碼工作的設(shè)計師少的可憐）

學(xué)習(xí)如何設(shè)計更好的產(chǎn)品

計算機和人之間的交互應(yīng)該像兩個人之間的對話一樣直觀。《交互設(shè)計基礎(chǔ)》將幫助您學(xué)習(xí)如何進行高效和有說服力的設(shè)計。