
設計院校中有大量的基本課程。大企業與創業公司都在采取回歸本源的設計方式,這一點也不稀奇。
無論你是個終身的涂鴉藝術家,還是一位嚴肅的商標設計師,通過紙張探索靈感都是一項重要的設計技能。
別怕!鉛筆這類工具的力量不會消亡。在這個專注設備的時代,簡單、久經考驗的設計方式仍然大有可為。
實際上,我已經聽到一種日漸強烈的聲音,反對將工時浪費在高保真photoshop效果圖上。手繪稿讓你以一種靈活巧妙的方式,創作迭代式的漸進設計,不必為了高保真設計圖和電子稿而超支時間。
不論你是大公司還是自由設計師,通過快速手繪與客戶交流想法,是一項相當重要的手段。
為什么手繪?
手繪稿在某些方面對線框圖甚至電子稿有所優勢。它便攜、親切、富有創造力,并且久經考驗。再沒什么比紙和鉛筆(或者鋼筆)更簡單的了。
我也發現,手繪稿對客戶而言足夠通俗,使他們能夠提出意見并且做出修改。高保真效果圖看起來就像是“成品”或者即將完成,那會束縛客戶提出改進建議的意愿(可樂橙在這里真的忍不住要插一句,這完全不符合國情啊,不科學啊!)。手繪稿相對散漫、友好、非正式……你可以擦掉進行修改。

線框圖總是充斥大量文字,極少反映出美術趨向和設計基調。特別是對于照片和視覺元素。你可曾見過一個大叉叉傳達出了照片內容?
通過手繪稿,你可以快速、近乎思維練習式地迅速記錄下你的創意。它能飛快見效,讓你在屏幕前花更少工時,從而擁有更多時間來產生創意。卷起袖管然后尋找答案吧。


它最終會轉化為photoshop的視覺稿給客戶。你會發現它與傳統線框圖相近,卻能更接近地反映出設計稿的美術趨向。
通過手繪,能夠消滅那些僅僅為了占位的圖片。要知道,你放在原型圖和效果圖中的一個大叉叉,代表著這里將放入一張真實的圖片。你就會省著用你那些昂貴的版權圖片了。

這就是網站的效果圖。你能看出草圖到線框圖再到效果圖的變化嗎?
從哪入手
有一點可以肯定,多加練習才能精通。隨身攜帶筆記本來涂鴉、迭代、速寫,保持這項技能處在最佳狀態。
我發現,練習的最好辦法,就是在任何排隊的時候拿出來畫一畫——比如買咖啡、雜貨店購物、等待火車……只要是等待時間,都可以用來手繪。
畫下你的所見,這個技巧會對以后有幫助,當你需要向客戶展示的時候。畫下每個給你帶來靈感的東西,隨身攜帶筆記本就意味著你可以隨時記錄靈感,留待以后使用。
隨著手繪量的增加,你會開始學著精煉你的手繪稿,并將它們轉化為更加正式的插圖或繪畫。
為網頁設計而手繪
規劃一個網站時,手繪可以成為非常重要的一環。你可以把它用于設計、用戶體驗測試、界面元素,甚至嘗試字體設計方面的創意。
我曾經在多個網站中用它來想象一些創意元素,比如照片和圖標。我也在關鍵界面問題上使用過這個辦法,例如怎樣使一個按鈕或圖標更加直觀友好。
交流設計元素的推演變化時,手繪也是最好的方法。客戶喜歡這個有創造性的環節。他們會深陷于此,并也喜歡上手繪。
我有個客戶說過:“哇,好像我想什么你就能馬上畫出來。太不可思議了!”這就是和客戶面談時,飛快手繪的魔力。
注意!多加練習

Doodlers Anonymous是個不錯的地方,可以作為學習的起點,看看別人如何手繪、涂鴉并思考他們的創意。它也是一個很棒的分享社區和同行交流場所。
注意,現實是殘酷的。鉆研手繪會很艱苦。如果你不夠老練,或者沒有將你的繪圖稿打磨好……那么找些工作之外的時間專門來畫。
可以在 Worldwide Sketchcrawl, Doodlers Anonymous 和 Urban Sketchers 這樣的網站找到靈感。
訂閱一些手繪博客,鉆研那些日志和手繪稿。然后問問自己,準備好在客戶面前繪畫了嗎?

Urban Sketchers是一個致力于觀察研究手繪的國際非營利組織。他們在Flickr和Facebook上有著完善的社區。他們博客的重要組成,是一個由手繪選稿記者構成的核心小組,他們在全世界范圍內收集別人分享的作品。在他們的網站和Flickr、Facebook社區里,你可以找到很多頗具啟發性的方式來素描你身邊的世界。
記住,簡筆畫沒法給人留下什么印象。具備手繪的能力是非常重要的開端。在投入到客戶的項目中之前,你可能得花些時間“練習”和理解如何用手繪來表達想法。

這是一件早期的電子手繪作品。當時我在實驗混合型的電子線框圖,用Wacom數位板草草畫成的。從這些早期手繪作品中,我學到了對客戶而言,簡筆畫是遠遠不夠的。
手繪時應該提出的問題
首先問問自己,是否了解所設計頁面中的所有元素?如果是個改版項目,我會檢查現有內容,思考用戶希望看到什么。
如果是個新站點,我會瀏覽同行網站,做一些競爭分析,然后看看那些最“典型”的用戶需要什么,將這些內容加入列表中。
接下來,我會詢問客戶是否有某些設計偏好。很多情況下,客戶都有他們自己喜歡和推崇的網站。了解這些,并領會他們偏好的設計語言是非常有幫助的。配色方案、字體、語言/文案風格、視覺元素,還有那些會影響到市場專員的設計趨勢。Pinterest、氛圍圖片庫和“尋寶游戲”,有助于掌握一個客戶的個人喜好。
手繪表達設計

以此為例,這是我給一所私立學校設計網站時畫的。目的就是避免花大量時間在高保真photoshop效果圖上,也能把主頁的線框圖具象化。
首先,我用便簽條或者寫一份文檔,來收集這個頁面的最關鍵信息。當然,最開始都是在紙上寫字,但文字是具有代表性的靈感源頭,而且能為我整理出一份所需的導航、內容、支持信息的綜合列表。
然后,我會將文字項的列表轉化為縮略圖。畫出導航、內容區塊、廣告、欄目、支持信息區塊、頁頭、頁尾等等。如果紙張不夠用,就在下方再粘一張。
接著,我會選出最終優勝的創意,用于最后的手繪稿。一旦我形成一系列有用的創意,就決定朝著它的方向繼續進行。在這個階段我總能從客戶和設計師同行那里獲得大量的反饋。手繪看起來非常通俗,客戶在選出最佳創意時也感覺更輕松,此時,距離正式的PSD效果圖還早。
典型的項目流程

這是從手繪線框圖演化來的高保真Photoshop視覺稿。能從中看出手繪對于照片的美術趨向產生的幫助。
在大多數項目中,我從簡單的矩形入手,畫出一系列縮略圖。這個過程相當簡單,但它能幫助我產生一系列確定的方案,供客戶、項目經理、和設計師同行選擇。
當我們談及縮略圖和其背后的創意時,我會根據選定的縮略圖進一步畫出草圖。這些粗糙的草圖主要為了確定內容優先級,推動頁面布局的定稿。我也會畫出照片和創意元素,比如該布局中的按鈕或其他圖標圖形元素。
在草圖階段,我希望回答諸如“用戶要的是什么”和“如何體現內容優先級”這類問題。這個階段非常需要合作討論。我會將草圖與客戶、經理、項目同僚和其他設計師分享。如果有必要,我們會暫停一會兒,畫出一兩個草圖擺到用戶面前以供測試。然后重復這一階段,對草圖進行精煉、迭代和推演。
一旦草圖的方向明確了,我會畫出正式的手繪稿。像傳統線框圖一樣,手繪線框圖的頁面上有確定內容……文字、圖標和照片。于是,我對于照片的美術趨向在手繪稿中得到了檢驗和探討。我也通過手繪線框圖來將最終的UI元素具象化,確保它們有用。我們通常會對這些進行測試,甚至對于某些非常復雜的界面,還要畫出那些用戶會遇到的過渡界面的線框圖。
很多次,進行到正式陳述的階段時,我會用墨水代替石墨來畫圖。墨水能為手繪稿增加一點正式感,如果再加入顏色,我就不必擔心遺漏頁面上某些實際UI元素。
最終,你總會形成自己的流程。手繪最神奇的地方在于,它能達到完全的自由。你能在任何時候捕捉靈感。
畫好會議手繪稿所需的“插件”

找到合適的工具來為客戶手繪很重要。我是Uni-Bal Vision的忠實粉絲,它是防水的。一支順手的筆刷,可以很好地大面積填充深色墨水。
所以,總而言之,下面介紹一些畫好互動手繪稿所需的“會議”用品。
鋼筆——我愛用鋼筆繪圖。當然,用墨水揮灑創意需要一定的自信,不過你可以隨時重畫那些線條。客戶也喜歡墨水的清晰。我最愛的鋼筆是Uni-Ball Vision。它是防水的,可以放心用水彩筆畫上顏色。
“便攜式”白板——找一塊舊白板,將它切成更小更易攜帶的“移動”白板。移動白板可以跟著你穿梭于辦公室之間,還能通過Evernote來記錄迭代修改和手繪稿。
大素描本——別在客戶項目中用小素描本,不要怕,找些14英寸寬的東西來用。盡可能在大的東西上呈現創意。
活動掛圖——它和便攜白板類似……是件不可思議的工具,能讓你的客戶緊密圍繞某個創意或概念。而有粘性的那種能粘在墻上,用來應對長時間設計會議和整個下午的團隊工作。
結論
作為一名設計師,最貴重的財產就是你的頭腦。快速即興表達視覺信息的能力,讓你區別于網頁開發流程中的其他角色。而手繪能將你從鼠標和顯示器中解放出來,現場展現客戶所需的答案。
具備了可靠的手繪技巧,設計師可以即興表達創意,將交談轉化為實實在在的創新。手繪可以很通俗閑散,能讓整個項目保持親切。
那么,拿起一只鋼筆或鉛筆、一本素描本,然后將你的涂鴉轉化雇主和客戶的銷售額吧。