淺談草圖設(shè)計(jì)（一）——自由

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　案例一：

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

　　案例二：

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

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

　　案例三：

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

　　但老大們并沒(méi)有因?yàn)閜pt demo或者草圖風(fēng)格對(duì)匯報(bào)表現(xiàn)出負(fù)面情緒，相反他們能夠主動(dòng)理解探討方案，靈活的針對(duì)每一個(gè)細(xì)節(jié)進(jìn)行推敲。

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

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