十個圖標設計技巧

導言：

將某一事物的特征概括出來成為圖標是一件非常有意義的事，一眼就能識別事物的特征是不容易的，特別是設計需要48×48像素時，如何讓它跟256×256像素一樣清楚，一個令人難忘並且具備隱喻的圖標是漂亮的、標誌性的，富有意義和功能性。

關於如何創造卓越圖標的十個建議：

一、捕捉對象的特征。

對於icon design 最重要的一點是當你設計出一個圖標，用戶能不能立即辨認，無論是青蛙還是鉛筆，它所表達意義的識別性，必須一目了然，必須具備經典的隱喻特征。

在一本雜誌的圖標教程裏，圖標大師Vu（scrape.sk）和Min Tran（frexy.com）討論了他們關於鉛筆圖形的背後進程：“圖標需要突出對象的最典型特征，表現它所表達的概念和細節。”

正如你所知：鉛筆一般有三種選擇：

1、棱柱形的筆身、光澤釉塗層。

2、棱柱形的筆身、尾部橡皮擦、白色金屬環。

3、圓柱狀筆身，沒有橡皮擦。

我們選擇第二種，因為它具備所有的必要元素，用戶更容易識別。有時候，一些對象會更為複雜，或者更加簡單，你必須列出它們的特點，畫出具體的形象。橡皮擦、白色金屬環，這是鉛筆的特征，使它們成為表現鉛筆形象的“經典”。（圖01）

圖01

二、讓圖標簡單、通用，從而讓它適應一係列項目。

對於圖標設計師DryIcons（dryicons.com）來說，設計圖標的關鍵在於讓圖標盡量簡單，瞄準一個風格和目標，這有助於讓軟件開發者更加靈活的使用圖標，增加圖標的可用性。

如果你的圖標設定範圍更廣，可以使用在首頁或其他地方，那它的潛在市場會更大。（圖02）

“關於趨勢，我們覺得保持圖標的簡單和基本特征是非常重要的，我們遵循這個趨勢”——DryIcons

圖02

三、使用一致的光源。

一個特別有用的技巧：當你在設計一係列圖標時，不緊緊要在風格上一致，像“光源”這些細節也需要注意，雖然這是次要的，但這會影響圖標的整體質量。

在 Windows Vista 裏麵，圖標會在操作係統間有不同的光源，但每一個單元的圖標是一致的。（圖03）

圖03

四、創建矢量格式的圖標。（Argument 1）

圖標通常在一個尺寸範圍內使用，因此創建一個很棒的視覺效果，縮放矢量圖形，可以有多種用途。（PS：在縮放到需要尺寸後，像素會磨損，所以需要對路徑進行調整，精確到每一像素。）

當你需要不同尺寸時，矢量繪圖可以讓你不需要重繪。（PS：矢量繪圖軟件有Photoshop、Illustrator、Fireworks、CorelDraw、Xara Xtreme等）（圖04）

圖04

五、不創建矢量格式的圖標。（Argument 2）

矢量繪圖並不是圖標設計師們的最佳方法（PS：我一般結合著用），由於許多icon需要非常小的尺寸，矢量往往不能很好的呈現，所以必須在指定尺寸內重繪。（我的理解是：圖層複雜、繪製時用到像素、多細節的圖標改變尺寸時，必須重新繪製。）

Wui設計師Firewheel對此的看法：位圖vs矢量，“當你把一個原本24×24px的矢量圖形縮小到16×16px，有沒有辦法可以把24個像素均勻的分布到16個像素呢？答案是否定的，所以圖像模糊，同樣也沒辦法將24px均勻擴大到32px。所以當你把24×24像素的圖形擴大到48×48，你將不再會有一個清晰的像素線，他們都是模糊透明的兩個像素線。（圖05）

圖05

六、注意文化差異。

Turbomilk的經典例子，不同的國家有不同的郵箱。

“圖標的另一個重要方麵就是圖標擁有民族特色，不同國家的文化傳統，環境和手勢等都會有所不同。”---Turbomilk

要特別注意：這一規則在設計預警圖標和交通標誌時，每個國家的根據都有所不同。（圖06）

圖06

七、使用別樣的色彩組合。

如果icon的顏色很平淡普通，那它就會被忽視，圖標脫穎而出的方法就是：使用很棒色彩搭配和有趣的形狀。記住，圖標很少在單一的背景下顯示，所以他們需要站出來，除此之外同時還可以使用更多的光澤和適當的陰影來使它盡量動人。（ps:jjying和kidaubis的作品尤為突出）

Jasper Hauser（ Camino icon designer ）接受采訪時說到：什麼是一個好的圖標設計，“好的圖標需要兩個良好的基礎：形狀 和顏色的使用 （PS：我認為必須在畫出一個完美圖形的基礎上，再去添加它的顏色，繪製它的質感。）

如appzapper圖標所示，你看到它有一個基本的形狀，使用了多種顏色搭配，如果你做一個藍色的圓圈則不會脫穎而出。（圖07、08）

圖07

圖08

八、設計icon，從大尺寸圖標到小尺寸，圖標要一樣清楚。

藝術家Brian Brasher在Firewheel Design接受的采訪：

FD：如何讓圖標變大，但在不同的分辨率下都顯示清楚？（PS：依次畫出各種尺寸，標準尺寸1024、512、256、128、56、48、32、16，按需要製作，不必框活，jodanfc的作品尤為突出。我的經驗是：在繪製不同尺寸時，可將最基本的形狀進行縮放，然後對齊像素，微調後再重新上色繪製質感和細節。）

BB：大圖標意味著很多細節，具有豐富圖形，用戶界麵的設計師會將各種尺寸一一畫出，如果拋除尺寸的限製，那意味著很多大小的圖標看起來會很模糊，最恐怖的就是圖標在低於32px時。（PS：繪製小標時要省略不必要細節，在16或12等px時可以使用正視，隻要能看出隱喻即可，不必跟大標一模一樣。）（圖09）

圖09

九、仔細規劃出你的設計過程。

從想法到想法躍然紙上（建立紙麵原型），使其符合隱喻和項目需要，然後再到軟件繪製，確定它的尺寸大小等這些過程規劃是很重要的。

Michael Matas（Mac OS X platform icon designer）分享了他自己的工作方法：“開始我總是在白板上畫，我試著畫出良好的圖標和明確的隱喻，我勾勒出不同的想法。

各種idea總會覆蓋整個白板，當我想出一個很好的比喻後，我就去開始畫出圖標的布局和構圖，我會想用什麼角度（透視）去表現它，我在穀歌圖片裏搜索一切可以利用的照片，再對著照片根據自己的想法將它畫出來，直到理想為止，然後我在PS中繪製路徑，搜索圖片，可以幫助我獲得紋理和形狀的想法，如果我可以，我總是試圖通過實物獲得靈感。（PS：當有實物照片時，你就能更好的掌握圖標的細節、質感、紋理等。生活中要注意觀察，我每到一個地方都會仔細觀察，看有沒有好玩的物體、結構、紋理等可以為我的設計服務，然後拍照。）（圖10）

圖10

十、創造一個有趣的富有隱喻的圖標。

圖標是富有含義的圖形符號，因此隱喻是影響用戶行為的關鍵點。

一個人的idea有限，所以對於一些較難表現的圖標、重要項目的圖標，有必要跟客戶交流溝通，而不是直接讓一個icon designer埋頭做。（圖11）

圖11

補充：

如果你是一個初學者，你必須勤奮，要多畫，多看好作品，少交流，有一定基礎後，遇到各種瓶頸，可以去請教他人。除此之外，較好的美術功底（敏感的光影和色彩搭配技巧，良好的手繪技巧等）也是畫好icon所必須的。

最後一點：要以一個專業圖標設計師的要求來要求自己。我相信隻要你記住這些，然後用“心”去畫，堅持下去，你就可以成為一個“Awesome icon designer”！