“轉(zhuǎn)眼間已經(jīng)在CDC生活了快兩年的時間。從一名電子商務(wù)畢業(yè)生到一位職業(yè)的交互設(shè)計師，經(jīng)歷了許多的坎坷。常常會面對各種困難和壓力，當(dāng)發(fā)現(xiàn)有太多未知的領(lǐng)域，只有在學(xué)習(xí)、思考、實踐中能夠找到答案與自信?！?/p>

草圖設(shè)計是這一年來學(xué)習(xí)、思考、實踐、總結(jié)的一項設(shè)計方法，嘗試于產(chǎn)品設(shè)計的各個環(huán)節(jié)。草圖設(shè)計對于設(shè)計師來說并不陌生，在日常工作中都有用到，相信很多設(shè)計師跟我都有同樣想法，并且希望推廣草圖設(shè)計給同行以及產(chǎn)品經(jīng)理，作為靈感與實現(xiàn)，需求與設(shè)計之間的橋梁。也非常希望感興趣的同學(xué)回復(fù)轉(zhuǎn)播此文，留下觀點參與評論。

“WHY｜為什么要使用草圖？”

首先為什么要關(guān)注草圖，草圖不是很普通很簡單的東西嗎，大家平時都是在紙上畫畫，值得小題大做嗎？事情源于我曾經(jīng)看過的兩本書——《用戶體驗草圖設(shè)計》、《關(guān)鍵設(shè)計報告》。里面記錄了大量的設(shè)計案例以及作品的解讀。當(dāng)時看完之后，我并不太明白這些與草圖設(shè)計有什么關(guān)系，由于設(shè)計案例緯度跨度很大，我甚至不知道作者到底要說什么。感覺就像記者采訪了一批有名氣的設(shè)計師，做個筆錄而已。

但是看到了大量講解設(shè)計師在產(chǎn)品設(shè)計中一些初期的、真實的、原始的設(shè)計稿讓我非常興奮。驚嘆他們的天分，設(shè)計的巧妙。不僅如此，他們的設(shè)計稿都非常的個性，并沒有統(tǒng)一形式，但都貼近自身想法和真實體驗。

直到最近，我又回想起這本書，突然明白為什么作者會寫這些。草圖設(shè)計不僅僅是在紙上寫寫畫畫，書中記錄的每一個案例都是草圖設(shè)計。讓人興奮的也正是這些，使用不同材料不同形式表達不同創(chuàng)意的案例。為什么要使用草圖？因為:

　　草圖是最自由的設(shè)計。

自由媒介
任何可以傳達信息的介質(zhì)都可以用來做草圖設(shè)計。紙、白板、圖片、便簽、視頻、語言、電腦甚至“無事物”的表演等都可以作為媒介，只要它可以表達你的靈感。

自由空間
不再僅僅坐在椅子上，面對著1440*900的電腦屏幕（即使是雙屏又能怎樣呢？），在這個狹小的窗口里做高保真界面的設(shè)計。

草圖設(shè)計允許我們利用更廣闊的空間，即使是一張A3的白紙也要比電腦屏幕大，更不用說真實的桌面、會議室、白板，甚至我們可以走到大街上。

當(dāng)你微微感覺到江郎才盡的時候，第一要做的就是站起來，離開你的電腦屏幕，找到更廣闊的設(shè)計空間，不僅僅是物理空間，更重要的是思維的空間。

自由成本
只要有價值，成本應(yīng)該是自由的。成本不僅僅指材料的價值，還有時間。對于紙的使用往往招來環(huán)保主義者的批斗，浪費紙的評價和意識不能太隨意太極端。當(dāng)然紙材料只是其中一種，如果需要大量的白板、甚至昂貴的攝影器材，為了達到目的，材料與時間的成本是要綜合考慮的。

以QQ多人視頻為例，在設(shè)計的初期需要做幾場用戶訪談。但當(dāng)時的情況是沒有時間做demo及高保真的原型。為了不浪費這些與用戶親密接觸的機會，就繪制、打印了大量場景草圖，來驗證我們對各種場景下用戶如何使用多人視頻的預(yù)期。

由于草圖繪制對精度要求不高，使用mockup軟件在很短的時間內(nèi)就完成了十幾個場景的草圖。在每場用戶訪談的最后將打印的草圖展示給用戶，并讓用戶講解如何使用多人視頻。這種方式大大提高了用戶訪談的價值，為后期方案的細化奠定了堅實的基礎(chǔ)。

自由成本強調(diào)的是自由、靈活。當(dāng)然低成本是我們要追求的，但是為了達到目的適當(dāng)?shù)暮雎砸彩欠浅１匾摹Ｈ绻阈枰婚g會議室、幾塊白板或者其他材料，為了能夠很好的實現(xiàn)目標(biāo)，應(yīng)該大膽的向leader提出需求。

自由感知
不要懷疑草圖設(shè)計的表達能力，無論是產(chǎn)品經(jīng)理還是用戶還是leader，都能夠通過草圖理解你的設(shè)計意圖。不僅如此，手繪風(fēng)格與手工制作的質(zhì)感能夠天然的拉近溝通雙方的距離。相比較線框圖，對方并不會有太大的排斥感。舉幾個例子：

案例一：

上圖是windows phone 7 QQ LBS好友列表概念的一個草圖設(shè)計。當(dāng)時是因為突然有了靈感，想針對對wp7 QQ的聯(lián)系人列表做一些創(chuàng)新，于是就動手做了上面的視頻。來表達聯(lián)系人、地理位置、距離感等概念。材料就是用紙打印一下，剪切后用膠水加工一下，然后用iphone 4拍了下來。雖然材質(zhì)視頻制作都很簡陋，但是跟老大匯報想法，跟同事和產(chǎn)品討論設(shè)計的時候，他們都沒有排斥感相反會很愿意參與討論。

案例二：

上圖是QQ硬盤概念版。當(dāng)時是希望表達一個與操作系統(tǒng)體驗一致的概念。仔細觀察你可以發(fā)現(xiàn)，這其實是一個局部修改了的XP系統(tǒng)文件夾。其實在出這一個稿之前，有過類似的交互稿（用XP系統(tǒng)文件夾截圖后修改）已經(jīng)提交給產(chǎn)品，但并未引起重視。

當(dāng)再一次開會討論這個需求時，我拿出打印的草圖，產(chǎn)品卻表現(xiàn)出很大的興趣并帶走，表示要與開發(fā)溝通實現(xiàn)的問題。

案例三：

上圖是QQ多人視頻會話方案演示的ppt。當(dāng)時由于急于給老大們匯報，但是無論產(chǎn)品功能模塊，還是交互邏輯都是非常的復(fù)雜，傳統(tǒng)的交互設(shè)計說明書郵件，需求文檔都很難短時間把方案說清楚，所以制作了一個類似demo的ppt。一定覺得不可思議，本身用ppt做demo就是很不常規(guī)的做法，在加上草圖就更難想象會是什么效果。

但老大們并沒有因為ppt demo或者草圖風(fēng)格對匯報表現(xiàn)出負面情緒，相反他們能夠主動理解探討方案，靈活的針對每一個細節(jié)進行推敲。

相對于高保真設(shè)計稿，自由感知，使得方案本身及容易被理解，又存在較大的探討發(fā)覺的空間，符合設(shè)計前期夸張發(fā)散要求。

講了這么多你是否也認同草圖設(shè)計呢？經(jīng)過長時間的實踐，我相信每個人都會有不同的心得和體會。本篇就先討論到這里。歡迎各位留言探討。如果大家對這個話題感興趣，下一篇將繼續(xù)針對界面設(shè)計，討論草圖設(shè)計的一些工具方法。THX~~~

• (本文出自Tencent CDC Blog，轉(zhuǎn)載時請注明出處)