草圖設計（一）：最自由的一項設計方法

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

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

　　“WHY|為什麼要使用草圖?”

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

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

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

　　草圖是最自由的設計

　　自由媒介

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

　　自由空間

　　不再僅僅坐在椅子上，面對著1440*900的電腦屏幕(即使是雙屏又能怎樣呢?)，在這個狹小的窗口裡做高保真界面的設計。

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

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

　　自由成本

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

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

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

　　自由成本強調的是自由、靈活。當然低成本是我們要追求的，但是為了達到目的適當的忽略也是非常必要的。如果你需要一間會議室、幾塊白板或者其他材料，為了能夠很好的實現目標，應該大膽的向leader提出需求。

　　自由感知

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

　　案例一：

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

　　案例二：

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

　　當再一次開會討論這個需求時，我拿出打印的草圖，產品卻表現出很大的興趣並帶走，表示要與開發溝通實現的問題。

　　案例三：

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

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

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

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

　　作者：鐘南

　　文章來源：騰訊CDC