十條關(guān)于制作圖標(biāo)的建議

編按：在UI設(shè)計(jì)中，少不了的是設(shè)計(jì)圖標(biāo)。圖標(biāo)的制作看似簡(jiǎn)單，實(shí)則很有難度。整體的配色，主題，小細(xì)節(jié)等等，都能讓你的圖標(biāo)不夠完美。那么如何創(chuàng)建高質(zhì)量的圖標(biāo)呢？我們一起來(lái)看看吧。

將某一事物的特征概括出來(lái)成為圖標(biāo)是一件非常有意義的事，一眼就能識(shí)別事物的特征是不容易的，特別是設(shè)計(jì)需要48X48像素時(shí)，如何讓它跟256X256像素一樣清楚。一個(gè)令人難忘并且具備隱喻的圖標(biāo)是漂亮的、標(biāo)志性的，富有意義和功能性。

關(guān)于如何創(chuàng)造卓越圖標(biāo)的十個(gè)建議：

一、捕捉對(duì)象的特征

對(duì)于icon design 最重要的一點(diǎn)是當(dāng)你設(shè)計(jì)出一個(gè)圖標(biāo)，用戶能不能立即辨認(rèn).無(wú)論是青蛙還是鉛筆，它所表達(dá)意義的識(shí)別性，必須一目了然.必須具備經(jīng)典的隱喻特征。

在一本雜志的圖標(biāo)教程里，圖標(biāo)大師Vu（scrape.sk）和Min Tran（frexy.com）討論了他們關(guān)于鉛筆圖形的背后進(jìn)程：

“圖標(biāo)需要突出對(duì)象的最典型特征，表現(xiàn)它所表達(dá)的概念和細(xì)節(jié)。
正如你所知：鉛筆一般有三種選擇：

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

2、棱柱形的筆身、尾部橡皮擦、白色金屬環(huán)

3、圓柱狀筆身，沒(méi)有橡皮擦

我們選擇第二種，應(yīng)為它具備所有的必要元素，用戶更容易識(shí)別。有時(shí)候，一些對(duì)象會(huì)更為復(fù)雜，或者更加簡(jiǎn)單，你必須列出它們的特點(diǎn)，畫(huà)出具體的形象。橡皮擦、白色金屬環(huán)，這是鉛筆的特征，使它們成為表現(xiàn)鉛筆形象的“經(jīng)典”。

二、讓圖標(biāo)簡(jiǎn)單、通用.從而讓它適應(yīng)一系列項(xiàng)目.

對(duì)于圖標(biāo)設(shè)計(jì)師DryIcons（dryicons.com）來(lái)說(shuō)，設(shè)計(jì)圖標(biāo)的關(guān)鍵在于讓圖標(biāo)盡量簡(jiǎn)單.瞄準(zhǔn)一個(gè)風(fēng)格和目標(biāo).這有助于讓軟件開(kāi)發(fā)者更加靈活的使用圖標(biāo)，增加圖標(biāo)的可用性.

如果你的圖標(biāo)設(shè)定范圍更廣，可以使用在首頁(yè)或其他地方，那它的潛在市場(chǎng)會(huì)更大.

“關(guān)于趨勢(shì)，我們覺(jué)得保持圖標(biāo)的簡(jiǎn)單和基本特征是非常重要的，我們遵循這個(gè)趨勢(shì)”——DryIcons

三、使用一致的光源

一個(gè)特別有用的技巧：當(dāng)你在設(shè)計(jì)一系列圖標(biāo)時(shí),不緊緊要在風(fēng)格上一致,像“光源”這些細(xì)節(jié)也需要注意.雖然這是次要的，但這會(huì)影響圖標(biāo)的整體質(zhì)量。在 Windows Vista 里面，圖標(biāo)會(huì)在操作系統(tǒng)間有不同的光源，但每一個(gè)單元的圖標(biāo)是一致的。

四、創(chuàng)建矢量格式的圖標(biāo)（Argument 1）

圖標(biāo)通常在一個(gè)尺寸范圍內(nèi)使用，因此創(chuàng)建一個(gè)視覺(jué)效果很棒的可縮放矢量圖形，可以有多種用途.（ps：在縮放到需要尺寸后，像素會(huì)磨損，所以需要對(duì)路徑進(jìn)行調(diào)整，精確到每一像素）

當(dāng)你需要不同尺寸時(shí)，矢量繪圖可以讓你不需要重繪.（ps：矢量繪圖軟件有photoshop、Illustrator、Fireworks、CorelDraw、Xara Xtreme等）

五、不創(chuàng)建矢量格式的圖標(biāo)（Argument 2）

相反：矢量繪圖并不是圖標(biāo)設(shè)計(jì)師們的最佳方法（ps：我一般結(jié)合著用）由于許多icon需要非常小的尺寸，矢量往往不能很好的呈現(xiàn)，所以必須在指定尺寸內(nèi)重繪（我的理解是：圖層復(fù)雜、繪制時(shí)用到像素、多細(xì)節(jié)的圖標(biāo)改變尺寸時(shí)，必須重新繪制）

Wui設(shè)計(jì)師Firewheel對(duì)此的看法：位圖vs矢量

“當(dāng)你把一個(gè)原本24X24px的矢量圖形縮小到16X16px，有辦法可以把24個(gè)像素均勻的分布到16個(gè)像素呢？答案是否定的,所以圖像模糊.同樣也沒(méi)法將24px均勻擴(kuò)大到32px.

所以當(dāng)你把24×24像素的圖形擴(kuò)大到48×48，你將不再會(huì)有一個(gè)清晰的像素線，他們都是模糊透明的兩個(gè)像素線.”（關(guān)于小標(biāo)：騰訊QQ、人人主頁(yè)、jodanfc、r.sky、blacksnail等國(guó)內(nèi)設(shè)計(jì)師的作品都很不錯(cuò)）

六、注意文化差異

Turbomilk（turbomilk.com）的經(jīng)典例子，不同的國(guó)家有不同的郵箱

“圖標(biāo)的另一個(gè)重要方面就是圖標(biāo)擁有民族特色.不同國(guó)家的文化傳統(tǒng)，環(huán)境和手勢(shì)等都會(huì)有所不同.”—Turbomilk

要特別注意：這一規(guī)則在設(shè)計(jì)預(yù)警圖標(biāo)和交通標(biāo)志時(shí)，每個(gè)國(guó)家的根據(jù)都有所不同。

七、使用別樣的色彩組合

如果icon的顏色很平淡普通，那它就會(huì)被忽視.圖標(biāo)脫穎而出的方法就是：使用很棒色彩搭配和有趣的形狀.記住，圖標(biāo)很傷在單一的背景下顯示，所以他們需要站出來(lái).除此之外同時(shí)還可以使用更多的光澤和適當(dāng)?shù)年幱皝?lái)使它盡量動(dòng)人.（ps:jjying和kidaubis的作品尤為突出）

Jasper Hauser（ Camino icon designer ）（www.jasperhauser.nl ）接受采訪時(shí)說(shuō)到：什么是一個(gè)好的圖標(biāo)設(shè)計(jì).

“好的圖標(biāo)需要兩個(gè)良好的基礎(chǔ)：1，形狀 2，顏色的使用 （ps：我認(rèn)為必須在畫(huà)出一個(gè)完美的圖形（形狀有趣，不能有鋸齒等等)的基礎(chǔ)上，再去添加它的顏色，繪制它的質(zhì)感）

如appzapper（www.appzapper.com）圖標(biāo)所示，你看到它有一個(gè)基本的形狀，使用了多種顏色搭配，如果你做一個(gè)藍(lán)色的圓圈則不會(huì)脫穎而出。

八、設(shè)計(jì)icon，從大尺寸圖標(biāo)到小尺寸，圖標(biāo)要一樣清楚.

藝術(shù)家Brian Brasher在Firewheel Design接受的采訪：

FD：如何讓圖標(biāo)變大，但在不同的分辨率下都顯示清楚？（ps：依次畫(huà)出各種尺寸，標(biāo)準(zhǔn)尺寸1024，512,256，128，56,48,32,16，按需制作，不必框死，jodanfc的作品尤為突出.我的經(jīng)驗(yàn)是：在繪制不同尺寸時(shí)，可將最基本的形狀進(jìn)行縮放，然后對(duì)齊像素，微調(diào)后，再重新上色繪制質(zhì)感和細(xì)節(jié)）

BB：大圖標(biāo)意味著很多細(xì)節(jié)，具有豐富圖形用戶界面的設(shè)計(jì)師會(huì)將各種尺寸一一畫(huà)出，如果拋除尺寸的限制，那意味著很多大小的圖標(biāo)看起來(lái)會(huì)很模糊，最恐怖的就是圖標(biāo)在低于32px時(shí).

（ps：繪制小標(biāo)時(shí)要省略不必要細(xì)節(jié)，在16或12等px時(shí)可以使用正視，只要能看出隱喻即可，不必跟大標(biāo)一模一樣）

九、仔細(xì)規(guī)劃出你的設(shè)計(jì)過(guò)程

從想法到想法躍然紙上（建立紙面原型）使其符合隱喻和項(xiàng)目需要，然后仔到軟件繪制，確定它的尺寸大小等這些過(guò)程規(guī)劃是很重要的.

Michael Matas（ Mac OS X platform icon designer）分享了他自己的工作方法：

“開(kāi)始我總是在白板上畫(huà).我試著畫(huà)出良好的圖標(biāo)和明確的隱喻.我勾勒出不同的想法

各種idea總會(huì)覆蓋整個(gè)白板.當(dāng)我想出一個(gè)很好的比喻后，我就去開(kāi)始畫(huà)出圖標(biāo)的布局和構(gòu)圖，我會(huì)想用什么角度（透視）去表現(xiàn)它.我在谷歌圖片里搜索一切可以利用的照片，再對(duì)著照片根據(jù)自己的想法將它畫(huà)出來(lái)，直到理想為止.然后我在ps中繪制路徑.搜索圖片，可以幫助我獲得紋理和形狀的想法.如果我可以，我總是試圖通過(guò)實(shí)物獲得靈感.

（ps：我也是，當(dāng)有實(shí)物照片時(shí)，你就能更好的掌握?qǐng)D標(biāo)的細(xì)節(jié)，質(zhì)感、紋理等.生活中要注意觀察，我每到一個(gè)地方都會(huì)仔細(xì)觀察，看有沒(méi)有好玩的物體，結(jié)構(gòu)，紋理等可以為我的設(shè)計(jì)服務(wù)，然后拍照）

十、創(chuàng)造一個(gè)有趣的富有隱喻的圖標(biāo).

圖標(biāo)是富有含義的圖形符號(hào)，因此隱喻是影響用戶行為的關(guān)鍵點(diǎn)。
下面是一個(gè)團(tuán)隊(duì)關(guān)于一個(gè)圖標(biāo)集的隱喻討論，感興趣的大家可以去看，在此就不翻譯了。
一個(gè)人的idea有限，所以對(duì)于一些較難表現(xiàn)的圖標(biāo)、重要項(xiàng)目的圖標(biāo)，有必要進(jìn)行腦暴并且跟客戶交流溝通，而不是直接讓一個(gè)icon designer埋頭做。

補(bǔ)充：

如果你是一個(gè)初學(xué)者，你必須勤奮，要多畫(huà)，多看好作品，少交流，有一定基礎(chǔ)后，遇到各種瓶頸，可以去請(qǐng)教他人.好的designer人品都很nice，只要你問(wèn)，他們都會(huì)耐心的去幫助你。
或者你也可以去iconfans，跟大家交流，那里有各種教程.你也可以加入iconfans特工隊(duì)跟大家一起做練習(xí)。
除此之外，較好的美術(shù)功底（敏感的光影和色彩搭配技巧，良好的手繪技巧等）也是畫(huà)好icon所必須的。

最后一點(diǎn)：要以一個(gè)專業(yè)圖標(biāo)設(shè)計(jì)師的要求來(lái)要求自己。
我相信只要你記住這些，然后用“心”去畫(huà)，堅(jiān)持下去，你就可以成為一個(gè)“awesome icon designer”！

相關(guān)文章推薦：

【設(shè)計(jì)干貨】設(shè)計(jì)師應(yīng)該掌握的17個(gè)小技巧

【色彩】論設(shè)計(jì)的靈魂是什么？是色彩

作者: aricworks

文章來(lái)源: https://www.uisdc.com/ten-icon-design-skills