本文為自譯文章,原文地址
設(shè)計(jì)一個(gè)漂亮的圖標(biāo)很容易,但是想要設(shè)計(jì)一個(gè)圖標(biāo)集并不是那么容易。要讓這些圖標(biāo)看起來是統(tǒng)一并且是精美的。
為什么要讓圖標(biāo)看起來統(tǒng)一呢?
圖標(biāo)就像是反映真實(shí)物體的圖形符號(hào),當(dāng)它們組合成圖標(biāo)集的時(shí)候,每個(gè)圖標(biāo)是具有其自己獨(dú)特的含義。用圖標(biāo)跟互聯(lián)網(wǎng)上的人溝通就好像用語言跟真實(shí)世界的伙伴溝通一樣。
在一個(gè)圖標(biāo)集中使用不同的風(fēng)格就好像在一個(gè)句子中用了好多種語言---就算人們理解了這句話的意思,也不會(huì)太在意這句話。圖標(biāo)統(tǒng)一風(fēng)格將發(fā)揮很大的作用。
創(chuàng)建統(tǒng)一風(fēng)格的圖標(biāo)集是個(gè)很大的挑戰(zhàn),下面是根據(jù)我的經(jīng)驗(yàn)給出的6條建議:
1. 堅(jiān)持一個(gè)風(fēng)格
聽起來很簡單,對(duì)不對(duì)?但這是讓圖標(biāo)精美和一致的最重要的一點(diǎn)。在還沒有決定用哪種風(fēng)格的時(shí)候,不要開始設(shè)計(jì)圖標(biāo)。
圖標(biāo)很多款式和風(fēng)格變化,最常見的有:線性圖標(biāo)、填充圖標(biāo)、扁平圖標(biāo)、擬物圖標(biāo)、手繪涂鴉圖標(biāo)等。
一旦確定了圖標(biāo)的風(fēng)格,在這個(gè)圖標(biāo)集里的圖標(biāo)都要是這種風(fēng)格的。一個(gè)不同風(fēng)格的圖標(biāo)會(huì)看起來很顯眼吸引人,但這并不是一種好的方式,破壞了統(tǒng)一性和美感,以及整個(gè)圖標(biāo)集的價(jià)值。
看看下面這個(gè)例子,地圖圖標(biāo)很顯眼,設(shè)計(jì)師在給圖標(biāo)上色的時(shí)候犯了一個(gè)錯(cuò)誤,其他圖標(biāo)都是線性的,而地圖圖標(biāo)是被填充的。

主要的問題是到底要選擇哪一種風(fēng)格?這里有很多因素要考慮進(jìn)去。這是個(gè)很大的問題,在我的下一篇文章中會(huì)闡釋。
2. 保持同樣的細(xì)節(jié)
這跟上面提到的堅(jiān)持同一個(gè)風(fēng)格是不一樣的。
每一種風(fēng)格的圖標(biāo)也有它自身的特點(diǎn)。比如說,我們可以畫出各種各樣的線性圖標(biāo)。所以保持同樣的細(xì)節(jié)也很重要。圖標(biāo)要展示更多細(xì)節(jié)還是極簡風(fēng)格?描邊要粗一些還是細(xì)一些?或者混合粗細(xì)描邊?那么對(duì)于圓角呢:圓角還是尖角?圓角的尺寸有多大?拐角連接的地方要圓形還是直接連?
給圖標(biāo)打造細(xì)節(jié)的時(shí)候要考慮清楚,制作圖標(biāo)集的從始至終都要堅(jiān)持同樣的細(xì)節(jié)。
3.合適的尺寸
同一個(gè)圖標(biāo)集中的圖標(biāo)是保持同樣的尺寸。
圖標(biāo)不只要在同樣尺寸的輔助線框里,而是應(yīng)該看起來大小相等。想象同樣尺寸的兩個(gè)圖形--圓和正方形,正方形會(huì)看起來更大一些,因?yàn)樗烁蟮拿娣e。為了讓它們看起來一樣大,應(yīng)該做一些改變,比如說,適當(dāng)?shù)目s小正方形。
4.使用網(wǎng)格
精美的圖標(biāo)集往往都是在設(shè)計(jì)的時(shí)候使用網(wǎng)格。只是不要過度使用網(wǎng)格,如果圖標(biāo)并沒有那么精準(zhǔn)的貼合網(wǎng)格,就不要再糾結(jié)了。好的圖標(biāo)集使用網(wǎng)格,但是太嚴(yán)格的去遵守反而會(huì)越弄越糟。
5.使用同樣的元素
這個(gè)很簡單:如果在上一個(gè)圖標(biāo)中使用了16px的圓形,那么在另外一個(gè)圖標(biāo)中,直接拷貝過來使用。毫無疑問,在同一個(gè)圖標(biāo)集中使用同樣的元素會(huì)讓它看起來更統(tǒng)一,拷貝元素會(huì)節(jié)省大量的時(shí)間。
6.使用同樣的配色
雖然這個(gè)沒必要說,但我還是要說一下,應(yīng)該使用同樣的配色。選擇顏色,加入到色卡中,然后盡量只是用色卡中的幾個(gè)顏色。
最后,在統(tǒng)一圖標(biāo)的時(shí)候也要保證識(shí)別性
圖標(biāo)應(yīng)該傳遞出正確的含義,圖標(biāo)的可識(shí)別性會(huì)讓它看起來更加精美和實(shí)用。
制作統(tǒng)一的圖標(biāo)集比看起來難的多。注意最小的細(xì)節(jié),一遍又一遍的檢查調(diào)整。記住這些建議,趕快在實(shí)際設(shè)計(jì)中試試吧。