轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   yvirxh.cn  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里

當(dāng)你在計(jì)劃設(shè)計(jì)一個(gè)網(wǎng)站設(shè)計(jì)的時(shí)候，不一定要完全依賴電子設(shè)備。學(xué)會(huì)如何手繪可以幫助提高UI設(shè)計(jì)的效率，給你更多的靈感。
UI設(shè)計(jì)學(xué)院里都會(huì)給學(xué)生們教授很多基礎(chǔ)課程。毫無疑問，很多大型機(jī)構(gòu)或者創(chuàng)業(yè)公司都在使用返璞歸真的方法來進(jìn)行設(shè)計(jì)創(chuàng)作。無論你是長(zhǎng)期涂鴉的骨灰級(jí)高手，還是剛剛起步的素描小菜鳥，能夠使用紙張與畫筆來進(jìn)行創(chuàng)作是非常重要的界面設(shè)計(jì)技能。不用擔(dān)心。模仿鉛筆功能的一些工具也不是蓋的。在這個(gè)以設(shè)備為主打的時(shí)代，還是很大的空間來進(jìn)行簡(jiǎn)單又能被認(rèn)可的設(shè)計(jì)創(chuàng)作。
實(shí)際上，我常常聽到很多人埋怨UI設(shè)計(jì)師們浪費(fèi)太多時(shí)間與成本在使用PS制作精致的方案草圖。手繪則具備更大的靈活性，它可以幫助你在縮減成本的同時(shí)發(fā)展更具原創(chuàng)性的方案草圖。

無論你是在一個(gè)大公司工作，或是一位自由職業(yè)UI設(shè)計(jì)師，通過手繪草圖來與顧客交流都是必不可少的。

為什么要繪制草圖？

手繪草圖相對(duì)數(shù)字線框圖或者電子繪畫更有優(yōu)勢(shì)。它方便攜帶，簡(jiǎn)單易懂，更具創(chuàng)造力，屢試不爽。沒有什么比使用筆和紙更簡(jiǎn)單直接的表達(dá)方式了。
我發(fā)現(xiàn)，客戶更喜歡在獲得信息的同時(shí)能夠提出建議和進(jìn)行更改。使用電子設(shè)備制作出來的圖紙看起來接近成品，這樣會(huì)讓客戶失去建議和修改的欲望。手繪草圖則非常隨意，你可以隨意修改。

圖：這樣的線框圖看起來文字非常多，并且很難通過這個(gè)圖來表達(dá)作品的風(fēng)格和基調(diào)，特別是一些照片與視覺上的素材。你什么時(shí)候見過這些大“XX”描述過將要放在這里的圖片？

通過速寫，你可以迅速的將自己腦海中的創(chuàng)意記錄下來。手繪草圖是非常有效率的，你可以減少在電腦前的工作時(shí)間，花更多的時(shí)間關(guān)注于創(chuàng)作。你只需要卷起袖子就可以找到解決方案。

圖：這個(gè)草圖最終會(huì)制作成PS格式的電子圖片。你可以看見電子草圖與手繪草圖布局的相似之處，也會(huì)發(fā)現(xiàn)手繪草圖更能表現(xiàn)最終作品的藝術(shù)風(fēng)格。

使用手繪草圖可以減少替代圖片的使用（就是那些替代你正式圖片用的大叉叉）。手繪網(wǎng)頁草圖也可以為你節(jié)省購(gòu)買替代圖片的成本。

圖：這個(gè)就是網(wǎng)頁的樣本。你看到從手繪草圖到最終樣本的進(jìn)化過程了嗎？

如何開始？

有一點(diǎn)是可以肯定的，那就是熟能生巧。所以拿起筆，操起速寫本開始不停的涂鴉吧。
我發(fā)現(xiàn)最好的方法就是在排隊(duì)或者等待的時(shí)候練習(xí)速寫，在你喝咖啡的時(shí)候，或者在雜貨店購(gòu)物的時(shí)候，又或者在等火車的時(shí)候。任何等待的時(shí)間都可以利用來進(jìn)行手繪練習(xí)。
畫下任何你看到的東西，這將會(huì)幫助你給在客戶面前呈現(xiàn)你的想法。對(duì)每日所見的物品進(jìn)行繪畫可以幫你收集靈感，隨身攜帶速寫本的話你就可以隨時(shí)記錄下自己的想法。
隨著練習(xí)的時(shí)間與數(shù)量的增加，你的手繪將會(huì)越來越精致，并且會(huì)發(fā)展成為更正式的繪畫風(fēng)格。

網(wǎng)頁設(shè)計(jì)師的手繪

在計(jì)劃制作一個(gè)網(wǎng)頁時(shí)，手繪是計(jì)劃中不可或缺的一個(gè)部分。你可以使用它來進(jìn)行設(shè)計(jì)、用戶體驗(yàn)測(cè)試，用戶界面元素設(shè)計(jì)，甚至是字體的測(cè)試。
我曾經(jīng)在幾個(gè)網(wǎng)頁上使用手繪草圖的方法來進(jìn)行項(xiàng)目的創(chuàng)作與制作，例如攝影圖片和圖標(biāo)設(shè)計(jì)。我也曾經(jīng)使用手繪來解決棘手的用戶界面問題，例如如何制作能夠舒適使用的按鈕。
手繪是進(jìn)行設(shè)計(jì)想法交流的最佳工具。并且客戶們也喜歡具有創(chuàng)意的元素。讓他們也加入到這個(gè)過程中來，你會(huì)發(fā)現(xiàn)他們也喜歡涂涂畫畫。

以前有一個(gè)客戶對(duì)我說過：“我想到了你就可以畫出來，實(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è)繪畫老手，或者沒有準(zhǔn)備好繪畫的工具…… 那就還是在工作之余多花些時(shí)間練習(xí)吧。
如果想找些靈感，就常去看看 Worldwide Sketchcrawl， Doodlers Anonymous，還有 Urban Sketchers。

在研讀繪畫教程和不斷在繪畫博客上提交習(xí)作之后，你就要想想，我是不是已經(jīng)準(zhǔn)備好在客戶面前進(jìn)行手繪了？

圖：城市畫者是一個(gè)國(guó)際性的、非盈利性的、致力于手繪觀察的網(wǎng)站。它在Flickr和Facebook上都有很有影響力的社區(qū)。它的官方博客上精選了一群手繪高手的習(xí)作來分享給大家。你可以在它的博客、Flickr還有Facebook社區(qū)上找到很多值得參考的繪畫技巧。

要記住，簡(jiǎn)筆畫是不能打動(dòng)人的。所以有能力進(jìn)行手繪是非常重要的一點(diǎn)。也許你需要花些時(shí)間來練習(xí)，并想想如何在客戶面前展現(xiàn)你的創(chuàng)意。

圖：這是個(gè)初期的電子手繪草圖。我當(dāng)時(shí)在嘗試著將線框數(shù)位手繪與Wacom數(shù)位板混搭使用。從這里我發(fā)現(xiàn)，想要更多地與客戶進(jìn)行互動(dòng)，簡(jiǎn)筆畫是遠(yuǎn)遠(yuǎn)不夠的。

在手繪設(shè)計(jì)項(xiàng)目草圖時(shí)需要提出的問題

首先我會(huì)問自己，我了解那些我將會(huì)在設(shè)計(jì)中使用到的東西嗎？如果是一個(gè)再設(shè)計(jì)項(xiàng)目，我會(huì)將已有的元素列成清單，并寫出顧客們期待看到的新元素。
如果是一個(gè)新的網(wǎng)頁，我會(huì)參考同類型的網(wǎng)站，并對(duì)這些網(wǎng)站進(jìn)行競(jìng)爭(zhēng)分析，同時(shí)明確用戶們的需要，把這些要點(diǎn)寫成清單。
接下來，我會(huì)詢問客戶是否有特別喜愛的設(shè)計(jì)風(fēng)格。很多時(shí)候客戶都有自己喜愛的網(wǎng)站。了解這些對(duì)接下來的設(shè)計(jì)是很有幫助的。色彩搭配、字體選擇、語言風(fēng)格、視覺元素，還有設(shè)計(jì)趨勢(shì)，這些往往會(huì)對(duì)市場(chǎng)營(yíng)銷造成影響。圖片分享、情緒展板、還有設(shè)計(jì)“尋寶”，這些環(huán)節(jié)都會(huì)幫助你了解客戶的喜好。

手繪一個(gè)設(shè)計(jì)草圖

圖：這是我為一個(gè)私立學(xué)校設(shè)計(jì)網(wǎng)頁是畫的草圖。目的就是要在充分展現(xiàn)網(wǎng)頁布局的同時(shí)，又不浪費(fèi)太多時(shí)間在PS的渲染上。

首先，將頁面上的關(guān)鍵內(nèi)容收集起來。我會(huì)使用便利貼或者建立一個(gè)文檔。當(dāng)然，我還是會(huì)從文字入手，不過文字只是將最原始的創(chuàng)意記錄下來，這樣我就清楚網(wǎng)頁上將會(huì)出現(xiàn)什么內(nèi)容。

第二，我會(huì)從不同的創(chuàng)意中挑出一些來進(jìn)行手繪。一點(diǎn)我有了很棒的點(diǎn)子，我就可以下定決心完成它。通常我都會(huì)從客戶和同行中得到很多反饋。手繪草圖在視覺上是很不正式的，這樣客戶會(huì)更放心的選擇中意的方案來進(jìn)行下一步的制作。

典型的項(xiàng)目流程

圖：這就是由選出的草圖制作成的PS成品。你可以看見手繪草圖對(duì)圖片選擇的幫助。

大部分的項(xiàng)目，我都會(huì)從簡(jiǎn)單的方形和一些縮略圖開始畫起。這個(gè)過程非常簡(jiǎn)單，但是它幫助我為客戶、經(jīng)理和合作伙伴提供很多選擇。

當(dāng)我們開始討論縮略圖和縮略圖背后的想法時(shí)，我會(huì)將選好的縮略圖用粗糙的手繪來進(jìn)行表示。這些草圖可以幫助確定網(wǎng)頁中內(nèi)容的主次和頁面的布局。我也會(huì)畫下照片和其他素材，用來為按鍵或者其他圖標(biāo)的排版做準(zhǔn)備。
在初期我會(huì)盡量弄清楚用戶想要的是什么，還有如何安排好網(wǎng)頁上的內(nèi)容。這個(gè)階段是需要合作的。我會(huì)將我的草圖展示給客戶、經(jīng)理、團(tuán)隊(duì)伙伴們。如果需要，我們甚至?xí)屢恍┯脩魜磉M(jìn)行測(cè)試。接下來我再對(duì)草圖進(jìn)行變更和完善。

一旦草圖大致定下來之后，我會(huì)畫一個(gè)正式的線框圖。像傳統(tǒng)的線框圖一樣，手繪的線框圖會(huì)有具體的內(nèi)容，文字、圖標(biāo)以及圖片。這樣我的設(shè)計(jì)風(fēng)格以及一些創(chuàng)意就會(huì)在這個(gè)草圖中得到測(cè)試和印證。我也會(huì)使用手繪線框來測(cè)試用戶界面的元素，以確保它們能夠被使用。我們會(huì)測(cè)試所有的方案，有時(shí)候也會(huì)有產(chǎn)生一些介于兩者之間的設(shè)計(jì)方案。
有些時(shí)候，當(dāng)我需要對(duì)客戶進(jìn)行正式的展示時(shí)，我會(huì)使用墨水而不是石墨來進(jìn)行手繪。墨水會(huì)增加手繪的正式感，如果要上色的話，我也不用擔(dān)心因?yàn)槭牟环€(wěn)定而模糊了網(wǎng)頁上的界面元素。

最后，你將會(huì)建立自己的設(shè)計(jì)流程。手繪最棒的一點(diǎn)就是它使設(shè)計(jì)變得自由。你可以隨時(shí)隨地記錄自己的創(chuàng)意。

實(shí)用的手繪“利器”

圖：找到合適的繪圖工具很重要。我很喜歡用Uni-Ball Vision. 一只便攜的小毛筆可以方便填充顏色。

一般來說，這些就是會(huì)議中互動(dòng)繪畫常用的工具。

鋼筆——我很愛用鋼筆來畫畫。當(dāng)然，這需要有一定的自信，但是你可以隨時(shí)重組你的線條?？蛻粢埠芟矚g墨水的可見性。我最喜歡的筆是Uni-Ball Vision。它是防水的，你可以使用水彩來上色。

便攜白板——拿一張舊的白板，然后裁成小塊，這樣就有很多小的便攜白板了。你可以帶著你的便攜白板從一個(gè)辦公室到另一個(gè)辦公室，也可以與印象筆記一起使用來記錄工作和草圖。

大尺寸速寫本——不要畏畏縮縮的用小尺寸的速寫本來為客戶畫圖。找一個(gè)至少14英寸長(zhǎng)的本子。這樣可以更好的展示你的作品。

活動(dòng)掛圖——活動(dòng)掛圖其實(shí)跟便攜白板差不多，都是可以吸引客戶的工具。如果是可粘貼的，就可以貼在墻上方便長(zhǎng)時(shí)間的設(shè)計(jì)討論。

那又怎樣？

最為一個(gè)UI設(shè)計(jì)師，最棒的工具就是你的想法。你快速展現(xiàn)信息的能力將你與網(wǎng)頁建設(shè)流程中的其他人區(qū)分開來。手繪則可以將你從鼠標(biāo)和顯示器前解放出來。