網站交互設計：線框圖、原型和視覺稿的區別

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

【編者按】本文譯者@小轟同學 。 文仲介紹了線框圖 (Wireframe)、原型 (Prototype) 和視覺稿 (Mockup) 它們三者之間嚴謹的功能區別。

對於很多搞資訊技術的朋友們(非設計師)在交付設計時，就混淆了這幾個詞彙，認為它們都代表同一樣東西：表達自己創意的線框手繪設計稿。 那麼如果希望在工作中更好的表達自己的想法，我們需要對這三者有更好的認識。

混淆概念便帶來麻煩：他們分不清使用者體驗設計師的作品，常常感到困惑。 「這按鈕他媽的怎麼點不了?」「 我不知道這個地方可以按啊!」 類似這樣的問題在使用者體驗的專案中屢見不鮮。 誤把線框圖當成原型，有點像建築裡分不清藍圖(指導如何建築施工的方案)和演示廳。 你完全可以試著在演示廳裡小住一會(它的妙處就在於能直觀傳達房間之美)，但你沒法舒服地躺在藍圖上—藍圖不過是一張紙罷了。

在建築學上，演示廳和藍圖服務于不同的交流物件：

藍圖，即施工方案，詳細描述該如何建造建築

演示廳，給未來的居民提供測試和體驗的機會

演示廳和藍圖的共同之處是，它們都代表著最終的產品，即建築(房屋)。 線框圖、原型和視覺稿亦是如此，這些文檔都是最終產品的不同展現方式。

不管你信不信，我向使用者體驗設計團隊授課的第一件事，就是告訴他們分清這三個概念。 因為，這實在太重要了。

接下來，讓我們詳細討論三者的區別，以後你就懂得在什麼樣的場合下用什麼詞彙了。

線框圖

1、什麼是線框圖?

線框圖 (Wireframe) 是低傳真的設計圖，當明確表達：

內容大綱(什麼東西)

資訊結構(在哪)

使用者的交互行為描述(怎麼操作)

線框圖不僅僅是無意義的線和框的集合;好吧，雖然看上去是的，囧。 你可以把線框圖理解為設計圖的骨幹與核心，它承載著最終產品所有重要的部分。

線框圖可以幫你平衡逼真度與速度。 繪圖時不用在意細枝末節，但必須表達出設計思想，不能漏掉任何重要的部分。 就像給專案以及一起協作的團隊成員(開發工程師、10243.html">視覺設計師、文案作者和專案經理)，開闢了一條輔助理解設計的通道。 說得再明白點，你是在設計城市地圖，地圖上能展現出每一條街道，只不過繪製上做了簡化。 看地圖能看出城市的框架，但無法一覽城市的美感。

繪製線框圖，重點是「快」。 大多數時間請和團隊成員溝通，多做思考。 審美上的視覺效果則應當盡可能簡化。 黑白灰是經典用色，你也可以用藍色代表超連結。 如果你在準備線框圖時花了大把時間(比如，選擇圖示、上傳圖片)，請換個簡單的方式(比如，使用預留位置：一個畫×的圖片，再加上合適的描述文字)。 我們習慣把線框圖稱為低傳真設計圖。

切記，好的線框圖能像水晶一樣，清晰明瞭地表達設計創意，在成員中無縫傳達其思想。

2、何時使用線框圖

線框圖常常用來作專案說明。 鑒於其靜態設計，一次只能通過一張介面演示交互，因此，務必附上說明。 (只要有必要，簡短描述或附在複雜的技術文檔裡，都成)

也因為繪製起來快速、簡單，它也經常用於非正式場合，比如團隊內部交流。 要是開發問起一個東西怎麼做，回復時不妨附上一張迅速繪製的線框圖。 線框圖難以充當使用者測試的材料;倒也能收集些回饋，如果你更關心使用者意見，而非測試方法。

雖然近些年遭人閒話，但線框圖在整個設計過程中發揮著驚人的效果，在複雜專案的初始階段必不可少。

原型

1、什麼是原型

原型 (Prototype) ，常常和線框圖混淆，是中等保真的設計圖，代表最終產品，類比交互設計。 原型當允許使用者：

從介面上，體驗內容與交互

像最終產品一樣，測試主要交互

原型應該盡可能類比最終產品，就算長得不是一模一樣(絕對不能是灰色線框設計)。 交互則應該精心模組化，儘量在體驗上和最終產品保持一致。

原型背後的邏輯不要依賴交互形式。 減少製作原型的成本，加快開發速度。

2、何時使用原型

原型常用於做潛在使用者測試。 在正式介入開發階段前，以最接近最終產品的形式考量產品可用性。

如你所想，原型一般難以成為上好的文檔;因為它得讓「讀者」費一些力氣來理解介面。 但從另一個角度來看，作為介面，原型的直觀和易懂倒使它成為最高效的設計文檔。

請注意，相對其它交流媒介，原型成本高、費時。 我建議繪製原型後，能在接下來的開發階段複用起來。 (唔，你可能得親自編寫 HTML 和樣式表代碼)對於簡單的專案來說，相當好用。 (一旦考慮「複用」，必將增加繪製成本，偏離原型的初衷。 並不建議複用。 ——譯者注)

若設計得當，與使用者測試相結合，原型是物超所值的。

視覺稿

1、什麼是視覺稿

視覺稿 (Mockup) 是高保真的靜態設計圖。 通常來說，視覺稿就是視覺設計的草稿或終稿。 優秀的視覺稿當：

表達資訊框架，靜態演示內容和功能

説明團隊成員以視覺的角度審閱專案

人們常年分不清什麼是視覺稿，什麼是線框圖，和某些軟體公司的名字不無關系。 噗~

2、何時使用視覺稿

如果你想從股東手裡獲得認可，視覺稿尤其管用;收集使用者回饋也相當好使。

把它添到設計文檔裡去吧，絕對是畫龍點睛之筆。

總結

　　原文連結：HTTP://cuikai-wh.com/blog/2460