推薦閱讀

陳小成

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

時間：2013-11-15 | 分類：功能說明

瀏覽：10159

    文中介紹了線框圖 (Wireframe)、原型 (Prototype) 和視覺稿 (Mockup) 它們?nèi)咧g嚴(yán)謹(jǐn)?shù)墓δ軈^(qū)別。

    對于很多搞信息技術(shù)的朋友們（非設(shè)計師）在交付設(shè)計時，就混淆了這幾個詞匯，認(rèn)為它們都代表同一樣?xùn)|西：表達(dá)自己創(chuàng)意的線框手繪設(shè)計稿。那么如果希望在工作中更好的表達(dá)自己的想法，我們需要對這三者有更好的認(rèn)識。

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

    在建筑學(xué)上，演示廳和藍(lán)圖服務(wù)于不同的交流對象：

藍(lán)圖，即施工方案，詳細(xì)描述該如何建造建筑；
演示廳，給未來的居民提供測試和體驗的機會；
演示廳和藍(lán)圖的共同之處是，它們都代表著最終的產(chǎn)品，即建筑（房屋）。線框圖、原型和視覺稿亦是如此，這些文檔都是最終產(chǎn)品的不同展現(xiàn)方式。

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

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

線框圖

2013-11-15 09:07 上傳

下載附件 (59.19 KB)

1、什么是線框圖？

線框圖 (Wireframe) 是低保真的設(shè)計圖，當(dāng)明確表達(dá)：

內(nèi)容大綱（什么東西）
信息結(jié)構(gòu)（在哪）
用戶的交互行為描述（怎么操作）
線框圖不僅僅是無意義的線和框的集合；好吧，雖然看上去是的，囧。你可以把線框圖理解為設(shè)計圖的骨干與核心，它承載著最終產(chǎn)品所有重要的部分。

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

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

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

2、何時使用線框圖

線框圖常常用來作項目說明。鑒于其靜態(tài)設(shè)計，一次只能通過一張界面演示交互，因此，務(wù)必附上說明。（只要有必要，簡短描述或附在復(fù)雜的技術(shù)文檔里，都成）

也因為繪制起來快速、簡單，它也經(jīng)常用于非正式場合，比如團(tuán)隊內(nèi)部交流。要是開發(fā)問起一個東西怎么做，回復(fù)時不妨附上一張迅速繪制的線框圖。線框圖難以充當(dāng)用戶測試的材料；倒也能收集些反饋，如果你更關(guān)心用戶意見，而非測試方法。

雖然近些年遭人閑話，但線框圖在整個設(shè)計過程中發(fā)揮著驚人的效果，在復(fù)雜項目的初始階段必不可少。

原型

2013-11-15 09:09 上傳

下載附件 (55 KB)

1、什么是原型

原型 (Prototype) ，常常和線框圖混淆，是中等保真的設(shè)計圖，代表最終產(chǎn)品，模擬交互設(shè)計。原型當(dāng)允許用戶：

從界面上，體驗內(nèi)容與交互
像最終產(chǎn)品一樣，測試主要交互
原型應(yīng)該盡可能模擬最終產(chǎn)品，就算長得不是一模一樣（絕對不能是灰色線框設(shè)計）。交互則應(yīng)該精心模塊化，盡量在體驗上和最終產(chǎn)品保持一致。

原型背后的邏輯不要依賴交互形式。減少制作原型的成本，加快開發(fā)速度。

2、何時使用原型

原型常用于做潛在用戶測試。在正式介入開發(fā)階段前，以最接近最終產(chǎn)品的形式考量產(chǎn)品可用性。

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

請注意，相對其它交流媒介，原型成本高、費時。我建議繪制原型后，能在接下來的開發(fā)階段復(fù)用起來。（唔，你可能得親自編寫 HTML 和樣式表代碼）對于簡單的項目來說，相當(dāng)好用。（一旦考慮「復(fù)用」，必將增加繪制成本，偏離原型的初衷。并不建議復(fù)用?！g者注）

若設(shè)計得當(dāng)，與用戶測試相結(jié)合，原型是物超所值的。

視覺稿

2013-11-15 09:11 上傳

下載附件 (53.8 KB)

1、什么是視覺稿

視覺稿 (Mockup) 是高保真的靜態(tài)設(shè)計圖。通常來說，視覺稿就是視覺設(shè)計的草稿或終稿。優(yōu)秀的視覺稿當(dāng)：

表達(dá)信息框架，靜態(tài)演示內(nèi)容和功能
幫助團(tuán)隊成員以視覺的角度審閱項目
人們常年分不清什么是視覺稿，什么是線框圖，和某些軟件公司的名字不無關(guān)系。噗~

2、何時使用視覺稿

如果你想從股東手里獲得認(rèn)可，視覺稿尤其管用；收集用戶反饋也相當(dāng)好使。

把它添到設(shè)計文檔里去吧，絕對是畫龍點睛之筆。

總結(jié)