淺談草圖設計（一）——自由

(圖趣網(wǎng)頁設計轉(zhuǎn)載整理，淺談草圖設計)

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

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

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

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

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

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

　　草圖是最自由的設計。

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

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

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

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

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

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

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

　　自由成本強調(diào)的是自由、靈活。當然低成本是我們要追求的，但是為了達到目的適當?shù)暮雎砸彩欠浅１匾?。如果你需要一間會議室、幾塊白板或者其他材料，為了能夠很好的實現(xiàn)目標，應該大膽的向leader提出需求。

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

　　案例一：

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

　　案例二：

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

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

　　案例三：

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

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

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

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