前言：本文為(wèi)譯稿 ，對三個(gè)常見概念進行(xíng)了剖析。有(yǒu)删節，部分段落重組。

背景

兩三年以前，我發現很(hěn)多(duō)搞信息技(jì)術(shù)的朋友(yǒu)們（非設計(jì)師(shī)）交付設計(jì)時(shí)，用着上(shàng)面列出的詞彙。他們以為(wèi)線框圖 (Wireframe)、原型 (Prototype) 和(hé)視(shì)覺稿 (Mockup) 是一個(gè)東西：表達自己創意的線框手繪設計(jì)稿。

混淆概念便帶來(lái)麻煩：他們分不清用戶體(tǐ)驗設計(jì)師(shī)的作(zuò)品，常常感到困惑。「這按鈕他媽的怎麽點不了？」「我不知道(dào)這個(gè)地方可(kě)以按啊！」類似這樣的問題在用戶體(tǐ)驗的項目中屢見不鮮。誤把線框圖當成原型，有(yǒu)點像建築裏分不清藍(lán)圖（指導如何建築施工的方案）和(hé)演示廳。你(nǐ)完全可(kě)以試着在演示廳裏小(xiǎo)住一會(huì)（它的妙處就在于能直觀傳達房(fáng)間(jiān)之美），但(dàn)你(nǐ)沒法舒服地躺在藍(lán)圖上(shàng)；藍(lán)圖不過是一張紙罷了。

在建築學上(shàng)，演示廳和(hé)藍(lán)圖服務于不同的交流對象：

• 藍(lán)圖，即施工方案，詳細描述該如何建造建築
• 演示廳，給未來(lái)的居民提供測試和(hé)體(tǐ)驗的機會(huì)

演示廳和(hé)藍(lán)圖的共同之處是，它們都代表着最終的産品，即建築（房(fáng)屋）。線框圖、原型和(hé)視(shì)覺稿亦是如此，這些(xiē)文檔都是最終産品的不同展現方式。

不管你(nǐ)信不信，我向用戶體(tǐ)驗設計(jì)團隊授課的第一件事，就是告訴他們分清這三個(gè)概念。因為(wèi)，這實在太重要了。

接下來(lái)，讓我們詳細討(tǎo)論三者的區(qū)别，以後你(nǐ)就懂得(de)在什麽樣的場(chǎng)合下用什麽詞彙了。

線框圖

1、什麽是線框圖？

線框圖 (Wireframe) 是低(dī)保真的設計(jì)圖，當明(míng)确表達：

• 內(nèi)容大(dà)綱（什麽東西）
• 信息結構（在哪）
• 用戶的交互行(xíng)為(wèi)描述（怎麽操作(zuò)）

線框圖不僅僅是無意義的線和(hé)框的集合；好吧(ba)，雖然看上(shàng)去是的，囧。你(nǐ)可(kě)以把線框圖理(lǐ)解為(wèi)設計(jì)圖的骨幹與核心，它承載着最終産品所有(yǒu)重要的部分。

線框圖可(kě)以幫你(nǐ)平衡保真度與速度。繪圖時(shí)不用在意細枝末節，但(dàn)必須表達出設計(jì)思想，不能漏掉任何重要的部分。就像給項目以及一起協作(zuò)的團隊成員（開(kāi)發工程師(shī)、視(shì)覺設計(jì)師(shī)、文案作(zuò)者和(hé)項目經理(lǐ)），開(kāi)辟了一條輔助理(lǐ)解設計(jì)的通(tōng)道(dào)。說得(de)再明(míng)白點，你(nǐ)是在設計(jì)城市地圖，地圖上(shàng)能展現出每一條街(jiē)道(dào)，隻不過繪制(zhì)上(shàng)做(zuò)了簡化。看地圖能看出城市的框架，但(dàn)無法一覽城市的美感。

繪制(zhì)線框圖，重點是「快」。大(dà)多(duō)數(shù)時(shí)間(jiān)請(qǐng)和(hé)團隊成員溝通(tōng)，多(duō)做(zuò)思考。審美上(shàng)的視(shì)覺效果則應當盡可(kě)能簡化。黑(hēi)白灰是經典用色，你(nǐ)也可(kě)以用藍(lán)色代表超鏈接。如果你(nǐ)在準備線框圖時(shí)花(huā)了大(dà)把時(shí)間(jiān)（比如，選擇圖标、上(shàng)傳圖片），請(qǐng)換個(gè)簡單的方式（比如，使用占位符：一個(gè)畫(huà)×的圖片，再加上(shàng)合适的描述文字）。我們習慣把線框圖稱為(wèi)低(dī)保真設計(jì)圖。

切記，好的線框圖能像水(shuǐ)晶一樣，清晰明(míng)了地表達設計(jì)創意，在成員中無縫傳達其思想。

2、何時(shí)使用線框圖

線框圖常常用來(lái)作(zuò)項目說明(míng)。鑒于其靜态設計(jì)，一次隻能通(tōng)過一張界面演示交互，因此，務必附上(shàng)說明(míng)。（隻要有(yǒu)必要，簡短(duǎn)描述或附在複雜的技(jì)術(shù)文檔裏，都成）

也因為(wèi)繪制(zhì)起來(lái)快速、簡單，它也經常用于非正式場(chǎng)合，比如團隊內(nèi)部交流。要是開(kāi)發問起一個(gè)東西怎麽做(zuò)，回複時(shí)不妨附上(shàng)一張迅速繪制(zhì)的線框圖。線框圖難以充當用戶測試的材料；倒也能收集些(xiē)反饋，如果你(nǐ)更關心用戶意見，而非測試方法。

雖然近些(xiē)年遭人(rén)閑話(huà)，但(dàn)線框圖在整個(gè)設計(jì)過程中發揮着驚人(rén)的效果，在複雜項目的初始階段必不可(kě)少(shǎo)。

原型

1、什麽是原型

原型 (Prototype) ，常常和(hé)線框圖混淆，是中等保真的設計(jì)圖，代表最終産品，模拟交互設計(jì)。原型當允許用戶：

• 從界面上(shàng)，體(tǐ)驗內(nèi)容與交互
• 像最終産品一樣，測試主要交互

原型應該盡可(kě)能模拟最終産品，就算(suàn)長得(de)不是一模一樣（絕對不能是灰色線框設計(jì)）。交互則應該精心模塊化，盡量在體(tǐ)驗上(shàng)和(hé)最終産品保持一緻。

原型背後的邏輯不要依賴交互形式。減少(shǎo)制(zhì)作(zuò)原型的成本，加快開(kāi)發速度。

2、何時(shí)使用原型

原型常用于做(zuò)潛在用戶測試。在正式介入開(kāi)發階段前，以最接近最終産品的形式考量産品可(kě)用性。

如你(nǐ)所想，原型一般難以成為(wèi)上(shàng)好的文檔；因為(wèi)它得(de)讓「讀者」費一些(xiē)力氣來(lái)理(lǐ)解界面。但(dàn)從另一個(gè)角度來(lái)看，作(zuò)為(wèi)界面，原型的直觀和(hé)易懂倒使它成為(wèi)最高(gāo)效的設計(jì)文檔。

請(qǐng)注意，相對其它交流媒介，原型成本高(gāo)、費時(shí)。我建議繪制(zhì)原型後，能在接下來(lái)的開(kāi)發階段複用起來(lái)。（唔，你(nǐ)可(kě)能得(de)親自編寫 HTML 和(hé)樣式表代碼）對于簡單的項目來(lái)說，相當好用。（一旦考慮「複用」，必将增加繪制(zhì)成本，偏離原型的初衷。并不建議複用。——譯者注）

若設計(jì)得(de)當，與用戶測試相結合，原型是物超所值的。

視(shì)覺稿

1、什麽是視(shì)覺稿

視(shì)覺稿 (Mockup) 是高(gāo)保真的靜态設計(jì)圖。通(tōng)常來(lái)說，視(shì)覺稿就是視(shì)覺設計(jì)的草稿或終稿。優秀的視(shì)覺稿當：

• 表達信息框架，靜态演示內(nèi)容和(hé)功能
• 幫助團隊成員以視(shì)覺的角度審閱項目

人(rén)們常年分不清什麽是視(shì)覺稿，什麽是線框圖，和(hé)某些(xiē)軟件公司的名字不無關系。噗~

2、何時(shí)使用視(shì)覺稿

如果你(nǐ)想從股東手裏獲得(de)認可(kě)，視(shì)覺稿尤其管用；收集用戶反饋也相當好使。

把它添到設計(jì)文檔裏去吧(ba)，絕對是畫(huà)龍點睛之筆。

總結

參考資料：馬丁 《如何區(qū)分線框圖、原型和(hé)視(shì)覺稿？》（英文） 

本文對你(nǐ)有(yǒu)幫助，向作(zuò)者捐贈。

作(zuò)者：小(xiǎo)轟

文章來(lái)源：時(shí)光立方