如何創(chuàng)建統(tǒng)一風格的圖標集

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

設計一個漂亮的圖標很容易,但是想要設計一個圖標集并不是那么容易。要讓這些圖標看起來是統(tǒng)一并且是精美的。

為什么要讓圖標看起來統(tǒng)一呢?

圖標就像是反映真實物體的圖形符號,當它們組合成圖標集的時候,每個圖標是具有其自己獨特的含義。用圖標跟互聯(lián)網上的人溝通就好像用語言跟真實世界的伙伴溝通一樣。

在一個圖標集中使用不同的風格就好像在一個句子中用了好多種語言---就算人們理解了這句話的意思,也不會太在意這句話。圖標統(tǒng)一風格將發(fā)揮很大的作用。

創(chuàng)建統(tǒng)一風格的圖標集是個很大的挑戰(zhàn),下面是根據我的經驗給出的6條建議:

1. 堅持一個風格

聽起來很簡單,對不對?但這是讓圖標精美和一致的最重要的一點。在還沒有決定用哪種風格的時候,不要開始設計圖標。

圖標很多款式和風格變化,最常見的有:線性圖標填充圖標扁平圖標擬物圖標手繪涂鴉圖標等。

一旦確定了圖標的風格,在這個圖標集里的圖標都要是這種風格的。一個不同風格的圖標會看起來很顯眼吸引人,但這并不是一種好的方式,破壞了統(tǒng)一性和美感,以及整個圖標集的價值。

看看下面這個例子,地圖圖標很顯眼,設計師在給圖標上色的時候犯了一個錯誤,其他圖標都是線性的,而地圖圖標是被填充的。


enter image description here
enter image description here

主要的問題是到底要選擇哪一種風格?這里有很多因素要考慮進去。這是個很大的問題,在我的下一篇文章中會闡釋。

2. 保持同樣的細節(jié)

這跟上面提到的堅持同一個風格是不一樣的。

每一種風格的圖標也有它自身的特點。比如說,我們可以畫出各種各樣的線性圖標。所以保持同樣的細節(jié)也很重要。圖標要展示更多細節(jié)還是極簡風格?描邊要粗一些還是細一些?或者混合粗細描邊?那么對于圓角呢:圓角還是尖角?圓角的尺寸有多大?拐角連接的地方要圓形還是直接連?

給圖標打造細節(jié)的時候要考慮清楚,制作圖標集的從始至終都要堅持同樣的細節(jié)。

3.合適的尺寸

同一個圖標集中的圖標是保持同樣的尺寸。

圖標不只要在同樣尺寸的輔助線框里,而是應該看起來大小相等。想象同樣尺寸的兩個圖形--圓和正方形,正方形會看起來更大一些,因為它包含了更大的面積。為了讓它們看起來一樣大,應該做一些改變,比如說,適當的縮小正方形。

4.使用網格

精美的圖標集往往都是在設計的時候使用網格。只是不要過度使用網格,如果圖標并沒有那么精準的貼合網格,就不要再糾結了。好的圖標集使用網格,但是太嚴格的去遵守反而會越弄越糟。

5.使用同樣的元素

這個很簡單:如果在上一個圖標中使用了16px的圓形,那么在另外一個圖標中,直接拷貝過來使用。毫無疑問,在同一個圖標集中使用同樣的元素會讓它看起來更統(tǒng)一,拷貝元素會節(jié)省大量的時間。

6.使用同樣的配色

雖然這個沒必要說,但我還是要說一下,應該使用同樣的配色。選擇顏色,加入到色卡中,然后盡量只是用色卡中的幾個顏色。

最后,在統(tǒng)一圖標的時候也要保證識別性

圖標應該傳遞出正確的含義,圖標的可識別性會讓它看起來更加精美和實用。

制作統(tǒng)一的圖標集比看起來難的多。注意最小的細節(jié),一遍又一遍的檢查調整。記住這些建議,趕快在實際設計中試試吧。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

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