如何創(chuàng)建統(tǒng)一風(fēng)格的圖標(biāo)集

本文為自譯文章,原文地址

設(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)是被填充的。


enter image description here
enter image description here

主要的問題是到底要選擇哪一種風(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ì)中試試吧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,039評(píng)論 25 709
  • 野丹丹(譯)于嘰嘰(編輯) 經(jīng)過我長期的軟磨硬泡,終于跟美女視覺設(shè)計(jì)師野丹丹同學(xué)約到了一篇優(yōu)質(zhì)翻譯稿。原文由全球著...
    于嘰嘰閱讀 1,616評(píng)論 6 40
  • 類似Iconfinder的圖標(biāo)和矢量圖形市場,為網(wǎng)頁和印刷設(shè)計(jì)者提供了豐富的實(shí)惠可用的矢量圖標(biāo)資源。 我們會(huì)對(duì)每一...
    Kemr閱讀 2,888評(píng)論 1 30
  • 周一見: 今天一睜眼,兩條新聞?wù)ㄩ_鍋。一條是:順豐小哥被啪啪啪打臉,王衛(wèi)聲援不追究到底不配當(dāng)總裁。另一條是:201...
    小賣部長閱讀 348評(píng)論 0 0
  • (一) 2016年12月8號(hào)開始的,為期30天的寫手圈第11期新媒體寫作訓(xùn)練班的學(xué)習(xí),至今天-就要結(jié)束了,班長給我...
    靈渠清韻閱讀 407評(píng)論 1 1

友情鏈接更多精彩內(nèi)容