想要設(shè)計(jì)一套高質(zhì)量的圖標(biāo)，就需要一套成熟的技巧、訓(xùn)練有素的眼睛、不斷的練習(xí)和臨摹。而就將通過(guò)7大原則和大量的案例來(lái)說(shuō)明優(yōu)秀圖標(biāo)的特點(diǎn)，使你了解優(yōu)秀圖標(biāo)的共性，設(shè)計(jì)出更優(yōu)秀的圖標(biāo)。

清晰、可讀性、對(duì)齊、簡(jiǎn)潔、一致性、個(gè)性、易用性

一、清晰

圖標(biāo)的主要目的是快速清晰的傳達(dá)概念。

Prime儀表盤(pán)上的圖標(biāo)設(shè)計(jì)

如上圖所示，你知道他們所傳達(dá)的意思嗎？駕駛員由于長(zhǎng)期開(kāi)車(chē)而了解到他們的意思，但是其中一些圖標(biāo)并不直觀，甚至需要一本說(shuō)明手冊(cè)來(lái)解釋其圖標(biāo)的含義。

如下圖：

當(dāng)圖標(biāo)不符合用戶(hù)的認(rèn)知時(shí)，是很難被理解的，安全帶“提示燈”（左邊第3個(gè)）非常直觀，我們可以快速的了解他的意思?！半妱?dòng)助力轉(zhuǎn)向系統(tǒng)警告燈”（最右邊）的意思要模糊的多。

通常，不清晰的圖標(biāo)只會(huì)令人沮喪，對(duì)于駕駛員而言，誤解警告提示可能會(huì)造成很?chē)?yán)重的后果。

以下是一些較為熟悉的圖標(biāo)：愛(ài)心、警告、音樂(lè)、方向：

Phosphor Carbon圖標(biāo)

箭頭，是一個(gè)路線常用的指示符號(hào)：

紐約市地鐵標(biāo)柱

最成功的圖標(biāo)不僅在一定的用戶(hù)群里中易于理解，且能在不同的文化、年齡、背景下都是通用易于理解的。分析我們的目標(biāo)用戶(hù)，并使用與之能產(chǎn)生共鳴的比喻和色彩。

切記，如果所表示的想法過(guò)于的抽象，則獨(dú)立圖標(biāo)可能不是最清晰的設(shè)計(jì)方案。在這種情況下，可以使用圖標(biāo)+文本組合的形式設(shè)計(jì)，或者找到其他的替代方法。

二、可讀性

一旦有了可理解的符號(hào)，請(qǐng)確保其可讀性。

Amtrak移動(dòng)應(yīng)用程序中的圖標(biāo)

由于圖標(biāo)的細(xì)節(jié)太多，很難在上方（第一行）注意到Station的圖標(biāo)。

在交通應(yīng)用中也有類(lèi)似的問(wèn)題，他們的剪貼板圖標(biāo)讀blob，因?yàn)槊姘搴图糨嬛g的空間太?。?/p>

Transit移動(dòng)應(yīng)用中的圖標(biāo)

稍作調(diào)整將帶來(lái)很大的改進(jìn)：

調(diào)整后的剪貼板圖標(biāo)

對(duì)于組合圖形設(shè)計(jì)，請(qǐng)確保他們之間留出足夠的空間。復(fù)雜的線條將使圖標(biāo)變得更加的難以理解，可讀性就越差。

Google Maps的交通圖標(biāo)非常出色-在尺寸很小的情況下保持了圖標(biāo)的可讀性：

Google Map圖標(biāo)

三、對(duì)齊

要確保每個(gè)圖標(biāo)的平衡，請(qǐng)以光學(xué)方式對(duì)齊其元素。

在上面的圖標(biāo)中，盡管三角形按居中設(shè)計(jì)放在圓的中心，但是我們的眼睛將其讀為偏離邊緣。三角形的較寬部分感覺(jué)比該點(diǎn)“重”，并且將其向右傾斜。

通常版式設(shè)計(jì)師會(huì)做細(xì)微的調(diào)整，在字體上創(chuàng)造平衡的視覺(jué)錯(cuò)覺(jué)（注意“i”和“j”上的偏心點(diǎn)和“O”上的過(guò)沖點(diǎn)）：

視覺(jué)設(shè)計(jì)師也做類(lèi)似的調(diào)整來(lái)平衡一個(gè)圖標(biāo)。要更正上面的示例，請(qǐng)將元素移動(dòng)一點(diǎn)：

效果會(huì)更好

學(xué)習(xí)方法是：不要簡(jiǎn)單地相信數(shù)字；用你的眼睛檢查你的工作。

四、簡(jiǎn)潔

一個(gè)用幾句話(huà)就能很好地表達(dá)出來(lái)的想法，讓人感覺(jué)高效而優(yōu)雅。比如下方的這個(gè)聲明：教別人你所知道的東西能增強(qiáng)你對(duì)這門(mén)學(xué)科的理解。

我們可以更簡(jiǎn)潔的說(shuō)：一人教，兩個(gè)人學(xué)。

材料很好地說(shuō)明了系統(tǒng)圖標(biāo)引導(dǎo)的簡(jiǎn)潔性，而不是說(shuō)：

過(guò)于復(fù)雜的船形圖標(biāo)（來(lái)源：Material）

簡(jiǎn)約的設(shè)計(jì)：

簡(jiǎn)潔的船形圖標(biāo)（來(lái)源：Material）

簡(jiǎn)約很適合圖標(biāo)設(shè)計(jì)，因?yàn)槲覀兘?jīng)常在小尺寸上進(jìn)行設(shè)計(jì)，注意圖標(biāo)要使用適當(dāng)?shù)募?xì)節(jié)量，不要使用過(guò)多的內(nèi)容

在用戶(hù)界面中，還原性風(fēng)格可以理解并為內(nèi)容騰出空間。電報(bào)的圖標(biāo)簡(jiǎn)短有趣：

電報(bào)圖標(biāo)

有時(shí)，UI圖標(biāo)會(huì)呈現(xiàn)出更具說(shuō)明性的風(fēng)格。這些多色調(diào)的Yelp圖標(biāo)是一種顯示流行食物搜索的令人愉快的方式。泰國(guó)美食圖標(biāo)中的蝦很精致：

Yelp圖標(biāo)由Scott Tusk

比如APP圖標(biāo)、iPad和桌面應(yīng)用程序的應(yīng)用程序圖標(biāo)，適當(dāng)?shù)募?xì)節(jié)量會(huì)讓圖標(biāo)有更多的深度和色彩。由于觀眾可以在移動(dòng)主屏幕，APP和應(yīng)用商店中了解自己的行為，因此圖標(biāo)可以更加體現(xiàn)品牌和產(chǎn)品。

蘋(píng)果應(yīng)用程序圖標(biāo)

五、一致性

為了保持一套圖標(biāo)的和諧性，請(qǐng)始終保持相同的樣式規(guī)則設(shè)計(jì)。

在iOS 13之前，Apple的圖標(biāo)具有各種線性圖標(biāo)、填充圖標(biāo)、不同的大小等：

iOS之前的Apple主屏幕快速操作中的圖標(biāo)13

重點(diǎn)觀察上面一組圖標(biāo)，一些圖標(biāo)感覺(jué)比其他圖標(biāo)重嗎？

每一個(gè)圖標(biāo)都具有一定的視覺(jué)權(quán)重，該視覺(jué)權(quán)重由諸如線條的粗細(xì)、大小和形狀之類(lèi)的參數(shù)決定的。在一個(gè)集合中保持這些參數(shù)相同有利于保持圖標(biāo)的一致性。

蘋(píng)果最近推出了SF symbols（舊金山的一個(gè)小伙伴的設(shè)計(jì)）來(lái)糾正這一錯(cuò)誤。SF symbols包含了9種權(quán)重和3種比例的圖標(biāo)風(fēng)格，也許有點(diǎn)復(fù)雜但是絕對(duì)徹底，從一個(gè)圖標(biāo)到另一個(gè)圖標(biāo)，在填充和輪廓變化之間，這些感覺(jué)更加和諧。

蘋(píng)果SF Symbols中的圖標(biāo)

對(duì)于一套比較復(fù)雜并且比較多的圖標(biāo)庫(kù)來(lái)說(shuō)，維護(hù)一致性并不是一件容易的事情，特別是對(duì)于涉及多個(gè)設(shè)計(jì)師或者團(tuán)隊(duì)的時(shí)候，關(guān)鍵是要有明確的原則和規(guī)則來(lái)遵循。

下面是我和其他設(shè)計(jì)師共同設(shè)計(jì)的700+圖標(biāo)，并在視覺(jué)上保持一致性，堅(jiān)持相同的準(zhǔn)則和嚴(yán)格測(cè)試每個(gè)圖標(biāo)。雖然每一個(gè)都有不同的形狀，但它們承載著相同的重量，并能很好地結(jié)合在一起：

Phosphor Carbon圖標(biāo)

六、個(gè)性

每一個(gè)圖標(biāo)都很有特色，是什么讓它與眾不同？它對(duì)品牌有何評(píng)價(jià)？它會(huì)讓用戶(hù)產(chǎn)生什么樣的心情？

Waze圖標(biāo)

Waze最受歡迎的界面在很大程度上取決于其視覺(jué)。這些色彩斑斕的圖標(biāo)仿佛在說(shuō)：“我們很特別！”

Twitter的圖標(biāo)柔軟，明亮，清晰：

Sketch的圖標(biāo)既精致又飄逸：

Freemoji可愛(ài)又溫暖：

Android圖標(biāo)包可迎合主屏幕主題的各種心情-比如 抽象、像素風(fēng)、氣泡和霓虹燈風(fēng)格：

從上到下，從左到右：iJUK，PixBit，Crayon，Linebit

七、易用性

一套圖標(biāo)在經(jīng)過(guò)精致的設(shè)計(jì)后，是還沒(méi)有結(jié)束的。它需要進(jìn)一步的測(cè)試和準(zhǔn)備，以確保其他設(shè)計(jì)師更容易使用或補(bǔ)充其他圖標(biāo)的設(shè)計(jì)。需要跨設(shè)計(jì)師進(jìn)行使用，開(kāi)發(fā)需要將他們編碼到代碼中。

一套高質(zhì)量的圖標(biāo)是有組織的、有規(guī)則、有文檔記錄的，并在上下游中使用和迭代。最好也受圖標(biāo)管理器等支持自定義編輯。

八、其他

1. 有組織的

保持主文件整潔，為資產(chǎn)命名并放置它們，以便于查找。考慮最好的分類(lèi)方法，按字母順序？按大??？按類(lèi)型？

Nucleo圖標(biāo)管理文件（按不同類(lèi)型分類(lèi)管理）

2. 有據(jù)可查

說(shuō)明圖標(biāo)的主要原則和使用規(guī)范：

比如：圖標(biāo)原則說(shuō)明

• 清晰度 。保證圖標(biāo)的可識(shí)別性和可讀性，切勿以犧牲圖標(biāo)的識(shí)別性追求獨(dú)特的設(shè)計(jì)
• 簡(jiǎn)潔。使用盡可能少的細(xì)節(jié)。圖標(biāo)的風(fēng)格是還原性的，每條線條都要簡(jiǎn)潔明了，以傳達(dá)所代表內(nèi)容的本質(zhì)
• 角色。要有創(chuàng)意，謹(jǐn)慎添加獨(dú)特的細(xì)節(jié)

3. 設(shè)計(jì)走查

檢查圖標(biāo)的一致性，確保圖標(biāo)在上下文中以相關(guān)大小使用，確保它們與較大的視覺(jué)系統(tǒng)協(xié)調(diào)性。

將圖標(biāo)彼此并排放置有助于證明我們的上述原則（清晰度、可讀性、對(duì)齊、簡(jiǎn)潔、一致性和個(gè)性）：

Phosphor的自檢表

4. 定制工具

最后，如果你有資源的話(huà)，可以創(chuàng)建一個(gè)組件庫(kù)方便使用。

Material使它們的圖標(biāo)易于使用其自定義圖標(biāo)庫(kù)進(jìn)行訪問(wèn)，搜索所需的文件，并以你喜歡的文件格式下載不同的樣式（“主題”），不同的顏色和不同的大?。?/p>

Material的易于使用的圖標(biāo)庫(kù)

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

作者：Helena Zhang

譯者：haselina

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

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