用草圖來規劃網站

　　設計院校中有大量的基本課程。大企業與創業公司都在採取迴歸本源的設計方式，這一點也不稀奇。

　　無論你是個終身的塗鴉藝術家，還是一位嚴肅的商標設計師，通過紙張探索靈感都是一項重要的設計技能。

　　別怕！鉛筆這類工具的力量不會消亡。在這個專注裝置的時代，簡單、久經考驗的設計方式仍然大有可為。

　　實際上，我已經聽到一種日漸強烈的聲音，反對將工時浪費在高保真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英寸寬的東西來用。儘可能在大的東西上呈現創意。

　　活動掛圖——它和便攜白板類似……是件不可思議的工具，能讓你的客戶緊密圍繞某個創意或概念。而有粘性的那種能粘在牆上，用來應對長時間設計會議和整個下午的團隊工作。

　　結論

　　作為一名設計師，最貴重的財產就是你的頭腦。快速即興表達視覺資訊的能力，讓你區別於網頁開發流程中的其他角色。而手繪能將你從滑鼠和顯示器中解放出來，現場展現客戶所需的答案。

　　具備了可靠的手繪技巧，設計師可以即興表達創意，將交談轉化為實實在在的創新。手繪可以很通俗閒散，能讓整個專案保持親切。

　　那麼，拿起一隻鋼筆或鉛筆、一本素描本，然後將你的塗鴉轉化僱主和客戶的銷售額吧。