本文共?2957?字螺男，預(yù)計閱讀?8?分鐘繁莹，記得點(diǎn)擊上面的藍(lán)字關(guān)注我哦～

想要設(shè)計一套高質(zhì)量的圖標(biāo)页屠，需要一套成熟的技巧粹胯、訓(xùn)練有素的眼睛蓖柔、不斷的練習(xí)和臨摹。本文我將通過7大原則和大量的案例來說明優(yōu)秀圖標(biāo)的特點(diǎn)风纠，目的是使你了解優(yōu)秀圖標(biāo)的共性况鸣，以設(shè)計出更優(yōu)秀的圖標(biāo)。

清晰竹观、可讀性镐捧、對齊、簡潔臭增、一致性懂酱、個性、易用性?

清晰

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

如上圖所示誊抛，你知道他們所傳達(dá)的意思嗎玩焰？駕駛員由于長期開車而了解到他們的意思，但是其中一些圖標(biāo)并不直觀芍锚，甚至需要一本說明手冊來解釋其圖標(biāo)的含義昔园。

如下圖：

當(dāng)圖標(biāo)不符合用戶的認(rèn)知時，是很難被理解的并炮，安全帶“提示燈”（左邊第3個）非常直觀默刚，我們可以快速的了解他的意思√悠牵“電動助力轉(zhuǎn)向系統(tǒng)警告燈”（最右邊）的意思要模糊的多荤西。

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

以下是一些較為熟悉的圖標(biāo)：愛心癌瘾、警告觅丰、音樂、方向：

Phosphor Carbon圖標(biāo)

箭頭妨退，是一個路線常用的指示符號：

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

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

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

可讀性

一旦有了可理解的符號拱层，請確保其可讀性

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

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

在交通應(yīng)用中也有類似的問題根灯，他們的剪貼板圖標(biāo)讀blob，因為面板和剪輯之間的空間太胁粽ぁ：

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

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

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

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

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

Google Map圖標(biāo)

對齊

要確保每個圖標(biāo)的平衡，請以光學(xué)方式對齊其元素

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

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

視覺設(shè)計師也做類似的調(diào)整來平衡一個圖標(biāo)粗悯。要更正上面的示例虚循，請將元素移動一點(diǎn)：

效果會更好

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

簡潔

一個用幾句話就能很好地表達(dá)出來的想法横缔，讓人感覺高效而優(yōu)雅。比如下方的這個聲明：

教別人你所知道的東西能增強(qiáng)你對這門學(xué)科的理解

我們可以更簡潔的說：

一人教衫哥，兩個人學(xué)

優(yōu)秀茎刚！

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

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

簡約的設(shè)計：

簡潔的船形圖標(biāo)（來源：Material）

簡約很適合圖標(biāo)設(shè)計撤逢，因為我們經(jīng)常在小尺寸上進(jìn)行設(shè)計斗蒋，注意圖標(biāo)要使用適當(dāng)?shù)募?xì)節(jié)量，不要使用過多的內(nèi)容

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

電報圖標(biāo)

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

Yelp圖標(biāo)由Scott Tusk

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

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

一致性

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

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

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

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

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

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

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

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

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

?Phosphor Carbon?圖標(biāo)

個性

每一個圖標(biāo)都很有特色，是什么讓它與眾不同避消？它對品牌有何評價低滩？它會讓用戶產(chǎn)生什么樣的心情？

Waze圖標(biāo)

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

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

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

Freemoji可愛又溫暖：

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

從上到下，從左到右：iJUK迄委，PixBit褐筛，Crayon，Linebit

易用性

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

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

有組織的

保持主文件整潔旁瘫，為資產(chǎn)命名并放置它們祖凫，以便于查找〕甑剩考慮最好的分類方法惠况，按字母順序？按大心小稠屠？按類型？

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

有據(jù)可查

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

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

設(shè)計走查

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

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

Phosphor?的自檢表

定制工具

最后，如果你有資源的話蓄坏，可以創(chuàng)建一個組件庫方便使用价捧。

Material使它們的圖標(biāo)易于使用其自定義圖標(biāo)庫進(jìn)行訪問，搜索所需的文件涡戳，并以你喜歡的文件格式下載不同的樣式（“主題”）结蟋，不同的顏色和不同的大小：

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

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

作者：Helena Zhang

譯者：haselina

關(guān)注公眾號渔彰，領(lǐng)免費(fèi)圖標(biāo)資源庫

*?Feather嵌屎，一組精美的200多個最小輪廓圖標(biāo)，可以很好地縮放

*?材質(zhì)系統(tǒng)圖標(biāo)恍涂，5種樣式的UI的1k +實用圖標(biāo)

*?Nucleo宝惰，一組約3萬+種圖標(biāo)，有3種樣式：輪廓再沧，平面/彩色和字形