谷歌規(guī)范中的圖標(biāo)很好表達(dá)了系統(tǒng)圖標(biāo)的簡(jiǎn)潔性，而不是下面這種過(guò)于復(fù)雜的圖標(biāo)。

簡(jiǎn)化后的圖標(biāo)：

簡(jiǎn)潔適合圖標(biāo)設(shè)計(jì)，因?yàn)槲覀兘?jīng)常在小畫布上工作。設(shè)計(jì)適當(dāng)?shù)募?xì)節(jié)，不要使用過(guò)多就好。

在界面中，一種簡(jiǎn)化的風(fēng)格能讓人容易理解，并能弱化自己的存在，從而凸顯內(nèi)容。

Telegram圖標(biāo)

有時(shí)候，UI圖標(biāo)會(huì)呈現(xiàn)出一種更具說(shuō)明性的風(fēng)格。在應(yīng)用Yelp中的圖標(biāo)非常的精致。

Yelp icons by Scott Tusk

對(duì)于代表手機(jī)，平板和桌面應(yīng)用的主圖標(biāo)，適當(dāng)?shù)募?xì)節(jié)可能意味著又更多的空間感和顏色。因?yàn)橛脩裟軌蚶斫馑鼈冊(cè)谥髌粒琩ocks欄，應(yīng)用商店中的印象，這樣的圖標(biāo)能夠很好的表達(dá)品牌和產(chǎn)品。

Apple app icons for Procreate, Firefox, and Netflix

05 一致性

為了保持圖標(biāo)的和諧統(tǒng)一，要始終保持相同的視覺(jué)規(guī)則。

在iOS13之前，蘋果圖標(biāo)有各種描邊，填充和大?。?/p>

Icons from Apple’s Home Screen Quick Actions pre-iOS 13

斜視這一組，有些圖標(biāo)感覺(jué)比其他的更重嗎？

任何給定的圖標(biāo)都有一個(gè)特定的視覺(jué)“重量”，由填充，描邊寬度和形狀等屬性來(lái)決定。在一個(gè)集合中保持這些參數(shù)相同可以構(gòu)建一致性。

蘋果最近優(yōu)化了他們的圖標(biāo)，現(xiàn)在看起來(lái)更加統(tǒng)一和諧了。他們把圖標(biāo)的兩種不同狀態(tài)之間的填充和描邊形式做了規(guī)則統(tǒng)一，使其擁有了更高的一致性。

Icons from Apple’s SF Symbols

對(duì)于一個(gè)大的圖標(biāo)庫(kù)來(lái)說(shuō)，保持一致性并不是一件很容易的事情，尤其是涉及到多個(gè)作者的時(shí)候。重要的是要有清晰的原則和規(guī)則來(lái)遵循。

Phosphor圖標(biāo)合集保持了700+圖標(biāo)的一致性，堅(jiān)持相同的準(zhǔn)則，并嚴(yán)格測(cè)試每個(gè)圖標(biāo)。雖然他們每個(gè)形狀都不一樣，但它們都有相同的重量，而且能很好地結(jié)合在一起。

Subset of the Phosphor Carbon icon family

06 個(gè)性

每個(gè)圖標(biāo)集都有自己的風(fēng)格。它的獨(dú)特之處是什么?關(guān)于這個(gè)品牌它表達(dá)了什么?它創(chuàng)造了什么氛圍?

Waze icons

Waze 受人喜愛(ài)的界面在很大程度上依賴于它們的圖標(biāo)。這些五顏六色、厚實(shí)的圖標(biāo)傳達(dá)出:“我們很古怪!”的意味。

Twitter的圖標(biāo)圓潤(rùn)，清晰：

Twitter icons

Sketch的圖標(biāo)精致:

Sketch icons by Janik Baumgartner

Freemojis 的圖標(biāo)非常可愛(ài):

Freemojis from Streamline

Android圖標(biāo)包為主屏幕主題提供了多種多樣的風(fēng)格——這里有抽象的、像素的、氣泡的和霓虹燈的風(fēng)格:

Top to bottom, left to right: iJUK, PixBit, Crayon, Linebit

07 易用性

一個(gè)圖標(biāo)設(shè)計(jì)的終點(diǎn)并不是單純的好看。它還需要進(jìn)一步的測(cè)試和準(zhǔn)備，以確保后續(xù)能夠輕松的設(shè)計(jì)出新的圖標(biāo)，并運(yùn)用與各種場(chǎng)景，比如手機(jī)上，打印出來(lái)等等，然后開(kāi)發(fā)也能夠輕松地將圖標(biāo)寫到代碼里去。

一套非常好的圖標(biāo)庫(kù)應(yīng)該是有組織，有文檔記錄，并被測(cè)試過(guò)的。

1. 有組織

保持主文件的整潔，圖標(biāo)命名邏輯清晰，便于搜索。需要考慮最好的分類方式，是按字母順序？按大小？還是按類型？

A Nucleo Sketch file, organized by type across pages

2. 圖標(biāo)文檔

闡明這套icon的主要原則:

圖標(biāo)原則示例:

• 清晰度。首先要清楚，使圖標(biāo)可識(shí)別和可讀。永遠(yuǎn)不要犧牲圖標(biāo)清晰度來(lái)?yè)Q取視覺(jué)效果。
• 簡(jiǎn)潔。使用盡可能少的細(xì)節(jié)。每一筆都要簡(jiǎn)潔而有理由地傳達(dá)所要表達(dá)的本質(zhì)。
• 性格。有鮮明的性格，謹(jǐn)慎地添加獨(dú)特的細(xì)節(jié)，給原本非常簡(jiǎn)樸的畫面帶來(lái)一點(diǎn)特色。

列出具體參數(shù)規(guī)則：

參數(shù)規(guī)則示例:

• 使用48x48px的畫布
• 使用1.5px居中的筆畫
• 使用圓角
• 使用連續(xù)的筆畫，除非斷開(kāi)的部分有助于理解
• 使用直線，弧線，并在可能的情況下以15度角為增量，在必要時(shí)調(diào)整曲線以保持設(shè)計(jì)原則
• 在可能的情況下使用整數(shù)、偶數(shù)增量進(jìn)行設(shè)計(jì);
• 使用以下標(biāo)準(zhǔn)尺寸:28x28px的圓，25x25px的正方形，28x22px的橫向矩形，22x28px的縱向矩形
• 保持6px的圖標(biāo)內(nèi)框范圍

一些優(yōu)秀的圖標(biāo)系統(tǒng)規(guī)范

Material System icons

https://material.io/design/iconography/system-icons.html

IBM’s UI icons, App icons, and contributor guide for icons

https://www.ibm.com/design/language/iconography/ui-icons/design

Shopify Polaris Icons

https://polaris.shopify.com/design/icons

3. 測(cè)試

檢查圖標(biāo)的一致性。確保圖標(biāo)在上下文中正常工作，并在更大的視覺(jué)系統(tǒng)中也能協(xié)調(diào)工作。

將圖標(biāo)放在一起有助于驗(yàn)證我們的原則:清晰、易讀、對(duì)齊、簡(jiǎn)潔、一致性和個(gè)性:

Test sheets used in Phosphor’s QA process

4. 自定義工具

最后，如果你有資源，創(chuàng)建工具來(lái)方便圖標(biāo)的使用。

谷歌圖標(biāo)容易使用與他們的自定義圖標(biāo)庫(kù)很有關(guān)系。

Material’s easy-to-use icon library

加上文字說(shuō)明更好，雖然在上面的一些原則上沒(méi)有標(biāo)記，但已經(jīng)使他們的圖標(biāo)非常容易使用。他們提供了各種方法來(lái)使用他們的圖標(biāo):通過(guò)他們的前端框架庫(kù)，CDN，圖標(biāo)字體，或原始的svg。

Font Awesome’s Icon Leaderboard

最后彩云再多說(shuō)一句，看過(guò)很多文章，如果缺少練習(xí)，還是做不好，你同意嗎？所以看完文章，就趕緊練起來(lái)呀！(簡(jiǎn)直苦口婆心)

#推薦閱讀#

被說(shuō)圖標(biāo)細(xì)節(jié)不夠，到底差在哪？高手總結(jié)了這10條關(guān)鍵原則

被說(shuō)UI界面細(xì)節(jié)不夠，到底差在哪？大佬總結(jié)了這些關(guān)鍵原則

簡(jiǎn)單實(shí)用，快速提升UI水平的8個(gè)技巧

原文：https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2

作者：Helena Zhang

譯者：彩云Sky；公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議