- 相關(guān)推薦
規劃網(wǎng)頁(yè)設計草圖的方法建議
當你在計劃設計一個(gè)網(wǎng)頁(yè)的時(shí)候，不一定要完全依賴(lài)電子設備。學(xué)會(huì )如何手繪可以幫助提高設計的效率，給你更多的靈感。
設計學(xué)院里都會(huì )給學(xué)生們教授很多基礎課程。毫無(wú)疑問(wèn)，很多大型機構或者創(chuàng )業(yè)公司都在使用返璞歸真的方法來(lái)進(jìn)行設計創(chuàng )作。無(wú)論你是長(cháng)期涂鴉的骨灰級高手，還是剛剛起步的素描小菜鳥(niǎo)，能夠使用紙張與畫(huà)筆來(lái)進(jìn)行創(chuàng )作是非常重要的設計技能。不用擔心。模仿鉛筆功能的一些工具也不是蓋的。在這個(gè)以設備為主打的時(shí)代，還是很大的空間來(lái)進(jìn)行簡(jiǎn)單又能被認可的設計創(chuàng )作。
實(shí)際上，我常常聽(tīng)到很多人埋怨設計師們浪費太多時(shí)間與成本在使用PS制作精致的方案草圖。手繪則具備更大的靈活性，它可以幫助你在縮減成本的同時(shí)發(fā)展更具原創(chuàng )性的方案草圖。
無(wú)論你是在一個(gè)大公司工作，或是一位自由職業(yè)設計師，通過(guò)手繪草圖來(lái)與顧客交流都是必不可少的。
為什么要繪制草圖?
手繪草圖相對數字線(xiàn)框圖或者電子繪畫(huà)更有優(yōu)勢。它方便攜帶，簡(jiǎn)單易懂，更具創(chuàng )造力，屢試不爽。沒(méi)有什么比使用筆和紙更簡(jiǎn)單直接的表達方式了。
我發(fā)現，客戶(hù)更喜歡在獲得信息的同時(shí)能夠提出建議和進(jìn)行更改。使用電子設備制作出來(lái)的圖紙看起來(lái)接近成品，這樣會(huì )讓客戶(hù)失去建議和修改的欲望。手繪草圖則非常隨意，你可以隨意修改。
圖：這樣的線(xiàn)框圖看起來(lái)文字非常多，并且很難通過(guò)這個(gè)圖來(lái)表達作品的風(fēng)格和基調，特別是一些照片與視覺(jué)上的素材。你什么時(shí)候見(jiàn)過(guò)這些大“XX”描述過(guò)將要放在這里的圖片?
通過(guò)速寫(xiě)，你可以迅速的將自己腦海中的創(chuàng )意記錄下來(lái)。手繪草圖是非常有效率的，你可以減少在電腦前的工作時(shí)間，花更多的時(shí)間關(guān)注于創(chuàng )作。你只需要卷起袖子就可以找到解決方案。
圖：這個(gè)草圖最終會(huì )制作成PS格式的電子圖片。你可以看見(jiàn)電子草圖與手繪草圖布局的相似之處，也會(huì )發(fā)現手繪草圖更能表現最終作品的藝術(shù)風(fēng)格。
使用手繪草圖可以減少替代圖片的使用(就是那些替代你正式圖片用的大叉叉)。手繪網(wǎng)頁(yè)草圖也可以為你節省購買(mǎi)替代圖片的成本。
圖：這個(gè)就是網(wǎng)頁(yè)的樣本。你看到從手繪草圖到最終樣本的進(jìn)化過(guò)程了嗎?
如何開(kāi)始?
有一點(diǎn)是可以肯定的，那就是熟能生巧。所以拿起筆，操起速寫(xiě)本開(kāi)始不停的涂鴉吧。
我發(fā)現最好的方法就是在排隊或者等待的時(shí)候練習速寫(xiě)，在你喝咖啡的時(shí)候，或者在雜貨店購物的時(shí)候，又或者在等火車(chē)的時(shí)候。任何等待的時(shí)間都可以利用來(lái)進(jìn)行手繪練習。
畫(huà)下任何你看到的東西，這將會(huì )幫助你給在客戶(hù)面前呈現你的想法。對每日所見(jiàn)的物品進(jìn)行繪畫(huà)可以幫你收集靈感，隨身攜帶速寫(xiě)本的話(huà)你就可以隨時(shí)記錄下自己的想法。
隨著(zhù)練習的時(shí)間與數量的增加，你的手繪將會(huì )越來(lái)越精致，并且會(huì )發(fā)展成為更正式的繪畫(huà)風(fēng)格。
網(wǎng)頁(yè)設計師的手繪
在計劃制作一個(gè)網(wǎng)頁(yè)時(shí)，手繪是計劃中不可或缺的一個(gè)部分。你可以使用它來(lái)進(jìn)行設計、用戶(hù)體驗測試，用戶(hù)界面元素設計，甚至是字體的測試。
我曾經(jīng)在幾個(gè)網(wǎng)頁(yè)上使用手繪草圖的方法來(lái)進(jìn)行項目的創(chuàng )作與制作，例如攝影圖片和圖標設計。我也曾經(jīng)使用手繪來(lái)解決棘手的用戶(hù)界面問(wèn)題，例如如何制作能夠舒適使用的按鈕。
手繪是進(jìn)行設計想法交流的最佳工具。并且客戶(hù)們也喜歡具有創(chuàng )意的元素。讓他們也加入到這個(gè)過(guò)程中來(lái)，你會(huì )發(fā)現他們也喜歡涂涂畫(huà)畫(huà)。
以前有一個(gè)客戶(hù)對我說(shuō)過(guò)：“我想到了你就可以畫(huà)出來(lái)，實(shí)在是太神奇了�！边@就是在客戶(hù)會(huì )議中現場(chǎng)手繪的魔力。
警示!練習，練習，再練習
圖：Doodlers Anonymous是一個(gè)很棒的社區，你可以在這里開(kāi)始練習手繪，也可以看到其他人的涂鴉作品的同時(shí)發(fā)現別人的閃光點(diǎn)。這同時(shí)也是一個(gè)分享與交流的好社區。
要警惕，這個(gè)世界是很殘酷的。練習手繪也會(huì )是很困難的。如果你不是個(gè)繪畫(huà)老手，或者沒(méi)有準備好繪畫(huà)的工具…… 那就還是在工作之余多花些時(shí)間練習吧。
如果想找些靈感，就常去看看 Worldwide Sketchcrawl， Doodlers Anonymous，還有 Urban Sketchers。
在研讀繪畫(huà)教程和不斷在繪畫(huà)博客上提交習作之后，你就要想想，我是不是已經(jīng)準備好在客戶(hù)面前進(jìn)行手繪了?
圖：城市畫(huà)者是一個(gè)國際性的、非盈利性的、致力于手繪觀(guān)察的網(wǎng)站。它在Flickr和Facebook上都有很有影響力的社區。它的官方博客上精選了一群手繪高手的習作來(lái)分享給大家。你可以在它的博客、Flickr還有Facebook社區上找到很多值得參考的繪畫(huà)技巧。
要記住，簡(jiǎn)筆畫(huà)是不能打動(dòng)人的。所以有能力進(jìn)行手繪是非常重要的一點(diǎn)。也許你需要花些時(shí)間來(lái)練習，并想想如何在客戶(hù)面前展現你的創(chuàng )意。
圖：這是個(gè)初期的電子手繪草圖。我當時(shí)在嘗試著(zhù)將線(xiàn)框數位手繪與Wacom數位板混搭使用。從這里我發(fā)現，想要更多地與客戶(hù)進(jìn)行互動(dòng)，簡(jiǎn)筆畫(huà)是遠遠不夠的。
在手繪設計項目草圖時(shí)需要提出的問(wèn)題
首先我會(huì )問(wèn)自己，我了解那些我將會(huì )在設計中使用到的東西嗎?如果是一個(gè)再設計項目，我會(huì )將已有的元素列成清單，并寫(xiě)出顧客們期待看到的新元素。
如果是一個(gè)新的網(wǎng)頁(yè)，我會(huì )參考同類(lèi)型的網(wǎng)站，并對這些網(wǎng)站進(jìn)行競爭分析，同時(shí)明確用戶(hù)們的需要，把這些要點(diǎn)寫(xiě)成清單。
接下來(lái)，我會(huì )詢(xún)問(wèn)客戶(hù)是否有特別喜愛(ài)的設計風(fēng)格。很多時(shí)候客戶(hù)都有自己喜愛(ài)的網(wǎng)站。了解這些對接下來(lái)的設計是很有幫助的。色彩搭配、字體選擇、語(yǔ)言風(fēng)格、視覺(jué)元素，還有設計趨勢，這些往往會(huì )對市場(chǎng)營(yíng)銷(xiāo)造成影響。圖片分享、情緒展板、還有設計“尋寶”，這些環(huán)節都會(huì )幫助你了解客戶(hù)的喜好。
手繪一個(gè)設計草圖
圖：這是我為一個(gè)私立學(xué)校設計網(wǎng)頁(yè)是畫(huà)的草圖。目的就是要在充分展現網(wǎng)頁(yè)布局的同時(shí)，又不浪費太多時(shí)間在PS的渲染上。
首先，將頁(yè)面上的關(guān)鍵內容收集起來(lái)。我會(huì )使用便利貼或者建立一個(gè)文檔。當然，我還是會(huì )從文字入手，不過(guò)文字只是將最原始的創(chuàng )意記錄下來(lái)，這樣我就清楚網(wǎng)頁(yè)上將會(huì )出現什么內容。
第二，我會(huì )從不同的創(chuàng )意中挑出一些來(lái)進(jìn)行手繪。一點(diǎn)我有了很棒的點(diǎn)子，我就可以下定決心完成它。通常我都會(huì )從客戶(hù)和同行中得到很多反饋。手繪草圖在視覺(jué)上是很不正式的，這樣客戶(hù)會(huì )更放心的選擇中意的方案來(lái)進(jìn)行下一步的制作。
典型的項目流程
圖：這就是由選出的草圖制作成的PS成品。你可以看見(jiàn)手繪草圖對圖片選擇的幫助。
大部分的項目，我都會(huì )從簡(jiǎn)單的方形和一些縮略圖開(kāi)始畫(huà)起。這個(gè)過(guò)程非常簡(jiǎn)單，但是它幫助我為客戶(hù)、經(jīng)理和合作伙伴提供很多選擇。
當我們開(kāi)始討論縮略圖和縮略圖背后的想法時(shí)，我會(huì )將選好的縮略圖用粗糙的手繪來(lái)進(jìn)行表示。這些草圖可以幫助確定網(wǎng)頁(yè)中內容的主次和頁(yè)面的布局。我也會(huì )畫(huà)下照片和其他素材，用來(lái)為按鍵或者其他圖標的排版做準備。
在初期我會(huì )盡量弄清楚用戶(hù)想要的是什么，還有如何安排好網(wǎng)頁(yè)上的內容。這個(gè)階段是需要合作的。我會(huì )將我的草圖展示給客戶(hù)、經(jīng)理、團隊伙伴們。如果需要，我們甚至會(huì )讓一些用戶(hù)來(lái)進(jìn)行測試。接下來(lái)我再對草圖進(jìn)行變更和完善。
一旦草圖大致定下來(lái)之后，我會(huì )畫(huà)一個(gè)正式的線(xiàn)框圖。像傳統的線(xiàn)框圖一樣，手繪的線(xiàn)框圖會(huì )有具體的內容，文字、圖標以及圖片。這樣我的設計風(fēng)格以及一些創(chuàng )意就會(huì )在這個(gè)草圖中得到測試和印證。我也會(huì )使用手繪線(xiàn)框來(lái)測試用戶(hù)界面的元素，以確保它們能夠被使用。我們會(huì )測試所有的方案，有時(shí)候也會(huì )有產(chǎn)生一些介于兩者之間的設計方案。
有些時(shí)候，當我需要對客戶(hù)進(jìn)行正式的展示時(shí)，我會(huì )使用墨水而不是石墨來(lái)進(jìn)行手繪。墨水會(huì )增加手繪的正式感，如果要上色的話(huà)，我也不用擔心因為石墨的不穩定而模糊了網(wǎng)頁(yè)上的界面元素。
最后，你將會(huì )建立自己的設計流程。手繪最棒的一點(diǎn)就是它使設計變得自由。你可以隨時(shí)隨地記錄自己的創(chuàng )意。
實(shí)用的手繪“利器”
圖：找到合適的繪圖工具很重要。我很喜歡用Uni-Ball Vision. 一只便攜的小毛筆可以方便填充顏色。
一般來(lái)說(shuō)，這些就是會(huì )議中互動(dòng)繪畫(huà)常用的工具。
鋼筆——我很愛(ài)用鋼筆來(lái)畫(huà)畫(huà)。當然，這需要有一定的自信，但是你可以隨時(shí)重組你的線(xiàn)條�？蛻�(hù)也很喜歡墨水的可見(jiàn)性。我最喜歡的筆是Uni-Ball Vision。它是防水的，你可以使用水彩來(lái)上色。
便攜白板——拿一張舊的白板，然后裁成小塊，這樣就有很多小的便攜白板了。你可以帶著(zhù)你的便攜白板從一個(gè)辦公室到另一個(gè)辦公室，也可以與印象筆記一起使用來(lái)記錄工作和草圖。
大尺寸速寫(xiě)本——不要畏畏縮縮的用小尺寸的速寫(xiě)本來(lái)為客戶(hù)畫(huà)圖。找一個(gè)至少14英寸長(cháng)的本子。這樣可以更好的展示你的作品。
活動(dòng)掛圖——活動(dòng)掛圖其實(shí)跟便攜白板差不多，都是可以吸引客戶(hù)的工具。如果是可粘貼的，就可以貼在墻上方便長(cháng)時(shí)間的設計討論。
那又怎樣?
最為一個(gè)設計師，最棒的工具就是你的想法。你快速高效展現信息的能力將你與網(wǎng)頁(yè)建設流程中的其他人區分開(kāi)來(lái)。手繪則可以將你從鼠標和顯示器前解放出來(lái)。
擁有過(guò)硬的手繪技能的話(huà)，設計師們可以即興創(chuàng )作，并將對話(huà)引導向創(chuàng )新的道路上。手繪可以是慵懶的，這樣可以保持項目的親切感。
趕快握好你的筆，操起速寫(xiě)本，將你的涂鴉變成有市場(chǎng)價(jià)值的圖畫(huà)吧。
【規劃網(wǎng)頁(yè)設計草圖的方法建議】相關(guān)文章：
網(wǎng)頁(yè)設計布局方法01-31
自適應網(wǎng)頁(yè)設計的方法03-13