當(dāng)你在方案設(shè)計(jì)一個(gè)網(wǎng)頁(yè)的時(shí)候，不務(wù)必要完全依賴電子設(shè)備。懂得怎樣手繪能夠幫助提升設(shè)計(jì)的效率，給你更多的靈感。
設(shè)計(jì)學(xué)院里都會(huì)給學(xué)生們教授許多基本課程。毫無(wú)疑問(wèn)，許多大型機(jī)構(gòu)或者創(chuàng)業(yè)企業(yè)都在操作返璞歸真的手法來(lái)實(shí)行設(shè)計(jì)創(chuàng)造。無(wú)論你是長(zhǎng)期涂鴉的骨灰級(jí)高手，還是剛剛起步的素描小小菜，可以操作紙張與畫(huà)筆來(lái)實(shí)行創(chuàng)造是極其緊要的設(shè)計(jì)技能。不用擔(dān)心。模仿鉛筆功能的有些工具也不是蓋的。在這個(gè)以設(shè)備為主打的時(shí)代，還是很大的空間來(lái)實(shí)行簡(jiǎn)易又能被認(rèn)同的設(shè)計(jì)創(chuàng)造。
實(shí)際上，我常常聽(tīng)到許多人埋怨設(shè)計(jì)師們浪費(fèi)太多時(shí)間與成本在操作PS制作精致的計(jì)劃草圖。手繪則齊備更大的靈活性，它能夠幫助你在縮減成本的同時(shí)成長(zhǎng)更具原創(chuàng)性的計(jì)劃草圖。
無(wú)論你是在一個(gè)大企業(yè)工作，或是一位自由職業(yè)設(shè)計(jì)師，通過(guò)手繪草圖來(lái)與顧客交流都是不可或缺的。
為何要繪制草圖?
手繪草圖相對(duì)數(shù)字線框圖或者電子繪畫(huà)更有優(yōu)點(diǎn)。它方便攜帶，簡(jiǎn)易易懂，更具創(chuàng)作力，屢試不爽。沒(méi)有何比操作筆和紙更簡(jiǎn)易徑直的表達(dá)方式了。

我發(fā)現(xiàn)， 用戶更喜愛(ài)在獲取信息的同時(shí)可以提出建議和實(shí)行更改。操作電子設(shè)備制作出來(lái)的圖紙看起來(lái)接近成品，這樣會(huì)讓 用戶失去建議和修改的欲望。手繪草圖則極其隨便，你能夠隨便修改。

圖：這樣的線框圖看起來(lái)文字極其多，并且很難通過(guò)這個(gè)圖來(lái)表達(dá)作品的風(fēng)格和基調(diào)，特別是有些照片與視覺(jué)上的素材。你何時(shí)見(jiàn)過(guò)這些大“XX”描述過(guò)將要放在這里的圖片?
通過(guò)速寫(xiě)，你能夠迅速的將自己腦海中的創(chuàng)意記錄下來(lái)。手繪草圖是極其靈驗(yàn)率的，你能夠減輕在電腦前的工作時(shí)間，花更多的時(shí)間關(guān)注于創(chuàng)造。你只需要卷起袖子就能夠找到修復(fù)計(jì)劃。

圖：這個(gè)草圖最終會(huì)制作成PS格式的電子圖片。你能夠看見(jiàn)電子草圖與手繪草圖部署的相似之處，也會(huì)發(fā)現(xiàn)手繪草圖更能表現(xiàn)最終作品的藝術(shù)風(fēng)格。
操作手繪草圖能夠減輕替代圖片的操作(就是那些替代你正式圖片用的大叉叉)。手繪網(wǎng)頁(yè)草圖也能夠?yàn)槟愎?jié)約購(gòu)買替代圖片的成本。

圖：這個(gè)就是網(wǎng)頁(yè)的樣本。你看到從手繪草圖到最終樣本的進(jìn)化進(jìn)程了嗎?
怎樣著手?
有一點(diǎn)是能夠肯定的，那就是熟能生巧。所以拿起筆，操起速寫(xiě)本著手不停的涂鴉吧。
我發(fā)現(xiàn)最佳的手法就是在排隊(duì)或者等待的時(shí)候練習(xí)速寫(xiě)，在你喝咖啡的時(shí)候，或者在雜貨店購(gòu)物的時(shí)候，又或者在等火車的時(shí)候。任何等待的時(shí)間都能夠借助來(lái)實(shí)行手繪練習(xí)。
畫(huà)下任何你看到的東西，這將會(huì)幫助你給在 用戶面前體現(xiàn)你的想法。對(duì)每日所見(jiàn)的物品實(shí)行繪畫(huà)能夠幫你收集靈感，隨身攜帶速寫(xiě)本的話你就能夠隨時(shí)記錄下自己的想法。
隨著練習(xí)的時(shí)間與數(shù)量的提升，你的手繪將會(huì)越來(lái)越精致，并且會(huì)成長(zhǎng)成為修正式的繪畫(huà)風(fēng)格。
網(wǎng)站設(shè)計(jì)師的手繪
在方案制作一個(gè)網(wǎng)頁(yè)時(shí)，手繪是方案中必不可少的一個(gè)部分。你能夠操作它來(lái)實(shí)行設(shè)計(jì)、客戶體驗(yàn)檢測(cè)，客戶界面元素設(shè)計(jì)，甚至是字體的檢測(cè)。
我曾經(jīng)在幾個(gè)網(wǎng)頁(yè)上操作手繪草圖的手法來(lái)實(shí)行項(xiàng)宗旨創(chuàng)造與制作，例如攝影圖片和圖標(biāo)設(shè)計(jì)。我也曾經(jīng)操作手繪來(lái)修復(fù)棘手的客戶界面問(wèn)題，例如怎樣制作可以舒適操作的按鈕。
手繪是實(shí)行設(shè)計(jì)想法交流的最好工具。并且 用戶們也喜愛(ài)具備創(chuàng)意的元素。讓他們也加入到這個(gè)進(jìn)程中來(lái)，你會(huì)發(fā)現(xiàn)他們也喜愛(ài)涂涂畫(huà)畫(huà)。
之前有一個(gè) 用戶對(duì)我說(shuō)過(guò)：“我想到了你就能夠畫(huà)出來(lái)，實(shí)在是太神奇了。”這就是在 用戶會(huì)議中現(xiàn)場(chǎng)手繪的魔力。
警示!練習(xí)，練習(xí)，再練習(xí)

圖：Doodlers Anonymous是一個(gè)很棒的社區(qū)，你能夠在這里著手練習(xí)手繪，也能夠看到其他人的涂鴉作品的同時(shí)發(fā)現(xiàn)別人的閃光點(diǎn)。這同時(shí)也是一個(gè)共享與交流的好社區(qū)。
要警惕，這個(gè)世界是很殘酷的。練習(xí)手繪也會(huì)是很困難的。如果你不是個(gè)繪畫(huà)老手，或者沒(méi)有籌備好繪畫(huà)的工具…… 那就還是在工作之余多花些時(shí)間練習(xí)吧。
如果想找些靈感，就常去瞧瞧 Worldwide Sketchcrawl， Doodlers Anonymous，還有 Urban Sketchers。
在研讀繪畫(huà)教材和不斷在繪畫(huà)博客上提交習(xí)作之后，你就要想想，我是不是已經(jīng)籌備好在 用戶面前實(shí)行手繪了?

圖：這是個(gè)前期的電子手繪草圖。我當(dāng)時(shí)在試試著將線框數(shù)位手繪與Wacom數(shù)位板混搭操作。從這里我發(fā)現(xiàn)，想要更多地與 用戶實(shí)行互動(dòng)，簡(jiǎn)筆畫(huà)是遠(yuǎn)遠(yuǎn)不夠的。
在手繪設(shè)計(jì)項(xiàng)目草圖時(shí)需要提出的問(wèn)題
首先我會(huì)問(wèn)自己，我理解那些我將會(huì)在設(shè)計(jì)中操作到的東西嗎?如果是一個(gè)再設(shè)計(jì)項(xiàng)目，我會(huì)將已有的元素列成清單，并寫(xiě)出顧客們期待看到的新元素。
如果是一個(gè)新的網(wǎng)頁(yè)，我會(huì)參考同類別的網(wǎng)站，并對(duì)這些網(wǎng)站實(shí)行競(jìng)爭(zhēng)解析，同時(shí)明晰客戶們的需要，把這些要素寫(xiě)成清單。
接下來(lái)，我會(huì)詢問(wèn) 用戶是否有特別喜歡的設(shè)計(jì)風(fēng)格。許多時(shí)候 用戶都有自己喜歡的網(wǎng)站。理解這些對(duì)接下來(lái)的設(shè)計(jì)是很有幫助的。色彩搭配、字體選取、語(yǔ)言風(fēng)格、視覺(jué)元素，還有設(shè)計(jì)趨向，這些往往會(huì)對(duì)市場(chǎng)營(yíng)銷導(dǎo)致影響。圖片共享、情緒展板、還有設(shè)計(jì)“尋寶”，這些流程都會(huì)幫助你理解 用戶的喜好。
手繪一個(gè)設(shè)計(jì)草圖

圖：這是我為一個(gè)私立學(xué)校設(shè)計(jì)網(wǎng)頁(yè)是畫(huà)的草圖。宗旨就是要在充分展現(xiàn)網(wǎng)頁(yè)部署的同時(shí)，又不浪費(fèi)太多時(shí)間在PS的渲染上。
首先，將頁(yè)面上的關(guān)鍵內(nèi)容收集起來(lái)。我會(huì)操作便利貼或者建立一個(gè)文檔。當(dāng)然，我還是會(huì)從文字著手，不過(guò)文字只是將最原始的創(chuàng)意記錄下來(lái)，這樣我就清楚網(wǎng)頁(yè)上將會(huì)出現(xiàn)什么內(nèi)容。
第二，我會(huì)從不同的創(chuàng)意中挑出有些來(lái)實(shí)行手繪。一點(diǎn)我有了很棒的點(diǎn)子，我就能夠下定決心完成它。通常我都會(huì)從 用戶和同行中得到許多反饋。手繪草圖在視覺(jué)上是很不正式的，這樣 用戶會(huì)更放心的選取中意的計(jì)劃來(lái)實(shí)行下一步的制作。
典型的項(xiàng)目環(huán)節(jié)

圖：這就是由選出的草圖制作成的PS成品。你能夠看見(jiàn)手繪草圖對(duì)圖片選取的幫助。
大部分的項(xiàng)目，我都會(huì)從簡(jiǎn)易的方形和有些縮略圖著手畫(huà)起。這個(gè)進(jìn)程極其簡(jiǎn)易，但是它幫助我為 用戶、經(jīng)理和合作伙伴提供許多選取。
當(dāng)我們著手探討縮略圖和縮略圖背后的想法時(shí)，我會(huì)將選好的縮略圖用粗糙的手繪來(lái)實(shí)行表示。這些草圖能夠幫助確立網(wǎng)頁(yè)中內(nèi)容的主次和頁(yè)面的部署。我也會(huì)畫(huà)下照片和其他素材，用來(lái)為按鍵或者其他圖標(biāo)的排版做籌備。
在前期我會(huì)盡量弄清楚客戶想要的是什么，還有怎樣安排好網(wǎng)頁(yè)上的內(nèi)容。這個(gè)階段是需要合作的。我會(huì)將我的草圖展示給 用戶、經(jīng)理、團(tuán)隊(duì)同事們。如果需要，我們甚至?xí)層行┛蛻魜?lái)實(shí)行檢測(cè)。接下來(lái)我再對(duì)草圖實(shí)行變更和完竣。
一旦草圖大致定下來(lái)之后，我會(huì)畫(huà)一個(gè)正式的線框圖。像傳統(tǒng)的線框圖一樣，手繪的線框圖會(huì)有詳盡的內(nèi)容，文字、圖標(biāo)以及圖片。這樣我的設(shè)計(jì)風(fēng)格以及有些創(chuàng)意就會(huì)在這個(gè)草圖中得到檢測(cè)和印證。我也會(huì)操作手繪線框來(lái)檢測(cè)客戶界面的元素，以確保它們可以被操作。我們會(huì)檢測(cè)所有的計(jì)劃，有時(shí)候也會(huì)有形成有些介于二者之間的設(shè)計(jì)計(jì)劃。
一些時(shí)候，當(dāng)我需要對(duì) 用戶實(shí)行正式的展示時(shí)，我會(huì)操作墨水而不是石墨來(lái)實(shí)行手繪。墨水會(huì)提升手繪的正式感，如果要上色的話，我也不用擔(dān)心由于石墨的不穩(wěn)固而模糊了網(wǎng)頁(yè)上的界面元素。
最后，你將會(huì)建立自己的設(shè)計(jì)環(huán)節(jié)。手繪最棒的一點(diǎn)就是它使設(shè)計(jì)變?yōu)樽杂伞Ｄ隳軌螂S時(shí)隨地記錄自己的創(chuàng)意。
實(shí)用的手繪“利器”

圖：找到適合的繪圖工具很緊要。我很喜愛(ài)用Uni-Ball Vision. 一只便攜的小毛筆能夠方便填充顏色。
普通來(lái)講，這些就是會(huì)議中互動(dòng)繪畫(huà)慣用的工具。
鋼筆——我很愛(ài)用鋼筆來(lái)畫(huà)畫(huà)。當(dāng)然，這需要有務(wù)必的自信，但是你能夠隨時(shí)重構(gòu)你的線條。 用戶也很喜愛(ài)墨水的可見(jiàn)性。我最喜愛(ài)的筆是Uni-Ball Vision。它是防水的，你能夠操作水彩來(lái)上色。
便攜白板——拿一張舊的白板，然后裁成小塊，這樣就有許多小的便攜白板了。你能夠帶著你的便攜白板從一個(gè)辦公室到另一個(gè)辦公室，也能夠與印象筆記一起操作來(lái)記錄工作和草圖。
大尺寸速寫(xiě)本——不要畏畏縮縮的用小尺寸的速寫(xiě)本來(lái)為 用戶畫(huà)圖。找一個(gè)至少14英寸長(zhǎng)的本子。這樣能夠更好的展示你的作品。
活動(dòng)掛圖——活動(dòng)掛圖其實(shí)跟便攜白板差不多，都是能夠吸引 用戶的工具。如果是可粘貼的，就能夠貼在墻上方便長(zhǎng)時(shí)間的設(shè)計(jì)探討。
那又如何?
最為一個(gè)設(shè)計(jì)師，最棒的工具就是你的想法。你火速高效展現(xiàn)信息的能力將你與網(wǎng)頁(yè)建設(shè)環(huán)節(jié)中的其他人區(qū)分開(kāi)來(lái)。手繪則能夠?qū)⒛銖氖髽?biāo)和顯示器前解放出來(lái)。
擁有過(guò)硬的手繪技能的話，設(shè)計(jì)師們能夠即興創(chuàng)造，并將對(duì)話引導(dǎo)向革新的路途上。手繪能夠是慵懶的，這樣能夠保持項(xiàng)宗旨親切感。
趕快握好你的筆，操起速寫(xiě)本，將你的涂鴉變成有市場(chǎng)價(jià)值的圖畫(huà)吧。