搞懂這7個圖標(biāo)設(shè)計原則，你就能像專業(yè)圖標(biāo)設(shè)計師一樣

編者按：設(shè)計原則總是看起來簡單抽象不言自明的，但是在細(xì)分的設(shè)計領(lǐng)域，這些原則其實有著各自不同適用情況，有著「特定的條件」。圖標(biāo)設(shè)計，就是如此。今天的這篇文章，來自專業(yè)的圖標(biāo)設(shè)計師 Helena Zhang，她結(jié)合自己制作?Phosphor 系列圖標(biāo)的經(jīng)驗，來分享她對于圖標(biāo)設(shè)計原則的理解。

這些設(shè)計原則就像一份清晰的設(shè)計框架，或者設(shè)計自查表單一樣，幫你規(guī)避設(shè)計陷阱，讓你的設(shè)計成果更加出色。

創(chuàng)建高質(zhì)量系列圖標(biāo)，你得使用一套周到系統(tǒng)的方法，需要有訓(xùn)練有素的雙眼，大量的迭代學(xué)習(xí)，以及堅持實踐，才能做到。下面，我將結(jié)合7項設(shè)計原則，和大量的實際案例，來為你詳細(xì)說明，如何創(chuàng)建高質(zhì)量的圖標(biāo)。

掌握這些設(shè)計原則，就是創(chuàng)造出優(yōu)質(zhì)圖標(biāo)的關(guān)鍵。

額外推薦世界上最大的圖標(biāo)庫：

以及找圖標(biāo)神器：

1、清晰

圖標(biāo)存在的目的，是快速傳達概念。

下圖是 Prius Prime 儀表板上的圖標(biāo)。

在這一系列符號當(dāng)中，你能明白其中哪些的含義？對于這款車的駕駛者而言，可能會隨著使用時間的積累，逐漸明白其中一部分圖標(biāo)的含義。很大程度上，這是因為這些圖標(biāo)本身并不直觀。你可能需要對著說明書，才能明白它們各自的含義。

我們可以從下面看到，圖標(biāo)是怎么一步步變得難以識別的：

當(dāng)圖標(biāo)開始使用我們不熟悉的含義和隱喻時候，它就自然變得難以理解。從左往右數(shù)第三個圖標(biāo)，是安全帶的提示燈圖標(biāo)，當(dāng)它亮起的時候，意味著你沒有系好安全帶。這個含義相對直觀，你可能能夠很快掌握。而最右邊的這個「電動助力轉(zhuǎn)向系統(tǒng)警告燈」含義就非常模糊了。

通常，不清晰的圖標(biāo)設(shè)計會讓你感到沮喪，但是對于開車的人而言，含義模糊的圖標(biāo)意味著誤解，而誤解的結(jié)果可能是生命安全。

下面是我們更為熟悉的圖標(biāo)——喜愛、警告、音樂和向上。

上圖為 Phosphor Carbon 中的圖標(biāo)

向上的箭頭在很多場景當(dāng)中，都是非常清晰、實用的符號。

紐約地鐵中的標(biāo)識

最成功的圖標(biāo)設(shè)計，不僅僅是讓圖標(biāo)本身易于理解，而且對于不同的文化背景、不同年齡段、不同知識背景的人都能理解，只有做到這樣才行。

如果你想要表達的信息過于抽象，那么單獨使用圖標(biāo)，可能不是最清晰的解決方案，應(yīng)當(dāng)將圖標(biāo)和文本標(biāo)簽結(jié)合起來使用。

2、可讀性

有了易于理解的圖標(biāo)之后，你需要確保它的可讀性足夠強。

Icons in the Amtrak mobile app

由于細(xì)節(jié)太過精細(xì)，很難讓 Amtrak 的圖標(biāo)被清晰地感知到。

Transit 應(yīng)用圖標(biāo)也有相同的問題。它們的剪貼板這個圖標(biāo)中的細(xì)節(jié)很難看清：

Icons in the Transit mobile app

稍加調(diào)整之后，好了很多：

Adjusted clipboard icon

當(dāng)你在處理圖標(biāo)中多個不同的圖形元素的時候，應(yīng)該確保其中的空間留足。太細(xì)小的筆觸細(xì)節(jié)、更多的信息量會讓圖標(biāo)顯得更加難以閱讀。

Google Maps 的公交車圖標(biāo)就非常的出色——它看起來足夠小，但是可讀性也很強。

Google Map icons

3、對齊

確保每個圖標(biāo)都感覺平衡，盡量進行視覺對齊

不平衡的播放圖標(biāo)

Unbalanced play icon

在這個播放圖標(biāo)當(dāng)中，盡管三角形被放置在中間位置，但是它并沒有視覺對齊，我們的眼睛看到的時候，會覺得中間的三角形說向左靠的。三角形靠左的這一邊在視覺上更重，因此它應(yīng)該向右移動一點來確保平衡。

就像字體排版設(shè)計師，他們也經(jīng)常會微調(diào)文字的布局來確保視覺平衡。比如字母 i 和 j 頂上的小圓點會偏移，而字母 O 的上下部分則為稍微超出邊界，來確保字體的平衡。

設(shè)計的時候，適當(dāng)?shù)奈⒄{(diào)就能達到平衡的效果。

Balanced play icon

明顯更好了。

要點：不要單純的相信數(shù)據(jù)，要用你的雙眼來進行檢查和修正。

4、簡潔

用盡可能少的詞匯來進行表達和描述，這樣會更加優(yōu)雅高效。

「將你所學(xué)的知識分享出去，可以增強你對于這門學(xué)科的理解?！?/p>

Material Design 在他們的導(dǎo)視系統(tǒng)中，使用的圖標(biāo)大都足夠簡潔，他們善用圖標(biāo)而是說話：

這是一個復(fù)雜的船的圖標(biāo)：

它還有更為簡約的版本：

Succinct boat icon (Source:?Material)

簡潔是圖標(biāo)設(shè)計的精髓之一，因為我們經(jīng)常需要在很小的屏幕上操作，圖標(biāo)可以傳達很多信息，而不同文本或者其他復(fù)雜的內(nèi)容。

在用戶界面當(dāng)中，簡約準(zhǔn)確的設(shè)計風(fēng)格能夠凸顯重點，讓內(nèi)容發(fā)揮效用。Telegram 的圖標(biāo)設(shè)計，就非常的簡約有趣：

Telegram icons

有的時候，UI圖標(biāo)會選用更偏向插畫風(fēng)的樣式。下面這些關(guān)于美食的圖標(biāo)就設(shè)計得非常令人愉悅，代表泰國菜的圖標(biāo)中，蝦的描繪就非常傳神：

Yelp icons by?Scott Tusk

圖標(biāo)可以適用于各種不同的硬件平臺，手機、 電腦、平板，適當(dāng)?shù)男畔⒘恳庖馕吨O(shè)計師可以在色彩、層次縱深上，有更大的操作空間。因為圖標(biāo)本身會應(yīng)用于特定的APP 或者網(wǎng)站當(dāng)中，因此圖標(biāo)可以適時地凸顯品牌和產(chǎn)品特征。

iOS 平臺上的 Procreate 、火狐和 Netflix 的圖標(biāo)

5、一致性

為了讓圖標(biāo)家族顯得更加和諧，始終保證相同的樣式和設(shè)計規(guī)則

在 iOS 13 之前，蘋果的圖標(biāo)設(shè)計有著各種不同的粗細(xì)筆觸，不同的填充樣式，大小也各不相同：

仔細(xì)看看這套圖標(biāo)，是不是有的圖標(biāo)看起來比其他的更重？

任何圖標(biāo)都有著相應(yīng)的視覺重量。而視覺重量取決于圖標(biāo)筆觸的粗細(xì)、填充模式、大小和形狀這幾個屬性。而圖標(biāo)設(shè)計的難點就在于，如何控制所有的這些參數(shù)，做到整體的一致性。

蘋果公司最近引入了 SF Symbols 這個功能，將圖標(biāo)直接制作成為圖標(biāo)字體，在這套字體當(dāng)中，圖標(biāo)有 9 種不同的「字重」和3種不同的的風(fēng)格（也許有點復(fù)雜，但是絕對充分夠用）。從圖標(biāo)到符號，在填充模式、筆觸輪廓等多個不同的屬性上，確保你能挑出感覺更加和諧的圖標(biāo)。

Icons from Apple’s?SF Symbols

對于一個大型的成套圖標(biāo)而言，保持一致性并不是一件容易的事情，尤其當(dāng)這套圖標(biāo)涉及到多個制作者的時候。遵循清晰的原則和規(guī)范在此時上至關(guān)重要的。

這套 Phosphor 圖標(biāo)是由我和另一位朋友共同制作并嚴(yán)格測試的，我們使用一套準(zhǔn)則確保這 700 個圖標(biāo)保持一致性。盡管每個形狀都不盡相同，但是它們給人的整體視覺重量是完全相同的，并且很好地相互組合到一起：

Subset of the?Phosphor Carbon?icon family

6、個性化

每套圖標(biāo)都應(yīng)當(dāng)尤其獨有的風(fēng)格和氣質(zhì)。是什么讓它們與眾不同？它們對于品牌是否有所助益？它們會給人什么樣的情緒？

Waze icons

Waze 大受歡迎的用戶界面，很大程度上是它本身所使用的圖標(biāo)設(shè)計所造就的。這些用色跳脫斑斕的圖標(biāo)，仿佛在說「我們就是特立獨行！」

Twitter 的圖標(biāo)是柔和、清晰明亮的：

Sketch 的圖標(biāo)則是精致而通透的：

Freemojis 的圖標(biāo)是可可愛愛的：

而這些 Android 的圖標(biāo)則風(fēng)格各異，抽象風(fēng)、像素風(fēng)、霓虹風(fēng)，不一而足：

7、易用性

完美地繪制了整套圖標(biāo)之后，你的工作并沒有完成。接下來，你需要繼續(xù)做測試和其他的準(zhǔn)備工作，比如讓參與圖標(biāo)制作的志愿者可以更好地參與后續(xù)的制作和完善，讓設(shè)計師在日常設(shè)計工作當(dāng)中使用和測試，在數(shù)字屏幕和印刷品上應(yīng)用確保效果，讓開發(fā)者將它們集成到其他的服務(wù)當(dāng)中，確保能夠應(yīng)用。

一套高質(zhì)量的圖標(biāo)，需要經(jīng)過良好的組織、記錄，并且在不同的應(yīng)用場景中進行測試，并且最好能夠得到個性化圖標(biāo)制作工具的支持。

7.1、組織性

你需要確保圖標(biāo)集的整齊規(guī)范，有合理的命名，便于查找，并且想清楚以什么樣的方式來進行分類。按照字母順序？按照大小，還是類型？

這套?Nucleo?Sketch 圖標(biāo)，是按照也沒類型來進行組織分類的

7.2、有據(jù)可查

你需要闡明整套圖標(biāo)的核心原則：

我以我所制作的 Phosphor 系列圖標(biāo)為例（和以上原則內(nèi)容有重復(fù)）來進行說明：

• 清晰：首先要清晰，確保圖標(biāo)可被識別，具有可讀性，不能犧牲圖標(biāo)的意義和清晰度。
• 簡潔：盡可能少地使用細(xì)節(jié)。Phosphor 系列圖標(biāo)的原則是還原。每個筆觸都要簡潔明了，傳達準(zhǔn)確地信息。
• 個性：可以特立獨行一點。謹(jǐn)慎的添加獨特的細(xì)節(jié)，讓原本可能非常冷硬的圖標(biāo)設(shè)計變得溫暖。

下面是技術(shù)規(guī)則。我還是以 Phosphor 圖標(biāo)作為返利：

• 使用 48x48 px 的畫布
• 使用 1.5 px 居中筆觸
• 筆觸末端使用圓角
• 使用連續(xù)的筆觸，除非斷開的線條有助于理解
• 盡可能使用直線、完美的弧線，角度以15度為增量
• 必要時調(diào)整曲線以符合設(shè)計原則
• 盡可能使用整數(shù)、使用偶數(shù)作為度量，必要時可以減少 1px 或者 0.5px
• 盡可能使用下面的元素來進行設(shè)計：28x28 px 的圓圈，25x25 px 的正方形，28x22 px 的矩形
• 保留6 px 的裁切區(qū)域

按照這這樣的步驟來進行設(shè)計，并根據(jù)需求來公開相應(yīng)的文檔，就像下面這樣：

• Material System icons
• IBM’s?UI icons,?App icons, and?contributor guide for icons
• Shopify Polaris Icons

7.3、進行測試

檢查一致性。確保圖標(biāo)在不同場合可以使用，并且尺寸合理。確保它們和大型是視覺系統(tǒng)能夠協(xié)調(diào)存在。

將圖標(biāo)排列在一起，并且按照以上的 7 個原則來進行檢測。

Phosphor 的品質(zhì)控制流程中所用到的測試表。

7.4、定制化工具

最后，如果你有足夠的資源，可以開發(fā)相應(yīng)的工具來方便用戶使用圖標(biāo)。

Material Design 讓用戶可以通過自定義庫來訪問圖標(biāo)，搜索文件，選擇喜歡的格式、配色、大小和主題。

Font Awesome 的圖標(biāo)設(shè)計并沒有完全遵循上面所提到的全部原則，但是它依然是目前來說最易用的圖標(biāo)集。它提供的功能甚至超出了以上提到的范疇：它支持前端框架、CDN、圖標(biāo)字體以及 SVG。

Font Awesome 的圖標(biāo)排行榜

下面是一些額外的圖標(biāo)素材資源。

7.5、資源

• Feather：這是一款精美的簡約線性圖標(biāo)合集，包含有 200+ 圖標(biāo)，可以輕松縮放
• Material system icons：包含 1000+ 實用的 UI 圖標(biāo)，有5 種不同樣式
• Nucleo：這套圖標(biāo)非常全，有3萬多個，有三種不同樣式，線性、多彩扁平和符號式
• Streamline：這是一組精美的、包含三萬多個線性圖標(biāo)的圖標(biāo)合集圖標(biāo)合集

這個圖標(biāo)合集項目雖然在質(zhì)量上參差不齊，但卻是非常適合拿來搜集靈感、作為參考好地方。

Icon Managers

這是一款來自 Nucleo 的應(yīng)用程序，你可以導(dǎo)入圖標(biāo)集，查看，修改，導(dǎo)出，非常實用。

???特別感謝: Toby Fried, Monica Chang, Darcy O’Donnell, Sara Thompson, Lonny Huff, Stephany Shigekuni, Clarissa Soto, Tate Chow, Christine Lee, Victor Vasquez, Chris Rodemeyer, David Landa, Pawel Piekarski, Matthew Vargas, and Marlon Bishop