線框圖、原型和視覺稿的區(qū)別

旺旺旺旺旺仔

2012-08-07

0 評論 6444 瀏覽 5 收藏

8 分鐘

前言：本文為譯稿 ¹，對三個常見概念進行了剖析。有刪節(jié)，部分段落重組。

背景

兩三年以前，我發(fā)現(xiàn)很多搞信息技術的朋友們（非設計師）交付設計時，用著上面列出的詞匯。他們以為線框圖 (Wireframe)、原型 (Prototype) 和視覺稿 (Mockup) 是一個東西：表達自己創(chuàng)意的線框手繪設計稿。

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

在建筑學上，演示廳和藍圖服務于不同的交流對象：

藍圖，即施工方案，詳細描述該如何建造建筑
演示廳，給未來的居民提供測試和體驗的機會

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

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

接下來，讓我們詳細討論三者的區(qū)別，以后你就懂得在什么樣的場合下用什么詞匯了。

線框圖

1、什么是線框圖？

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

內容大綱（什么東西）
信息結構（在哪）
用戶的交互行為描述（怎么操作）

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

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

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

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