2021-4-27 周周
編者按：設計原則總是看起來簡單抽象不言自明的，但是在細分的設計領域，這些原則其實有著各自不同適用情況，有著「特定的條件」。圖標設計，就是如此。今天的這篇文章，來自專業的圖標設計師 Helena Zhang，她結合自己制作 Phosphor 系列圖標的經驗，來分享她對于圖標設計原則的理解。
這些設計原則就像一份清晰的設計框架，或者設計自查表單一樣，幫你規避設計陷阱，讓你的設計成果更加出色。
創建高質量系列圖標，你得使用一套周到系統的方法，需要有訓練有素的雙眼，大量的迭代學習，以及堅持實踐，才能做到。下面，我將結合7項設計原則，和大量的實際案例，來為你詳細說明，如何創建高質量的圖標。
掌握這些設計原則，就是創造出優質圖標的關鍵。
圖標存在的目的，是快速傳達概念。
下圖是 Prius Prime 儀表板上的圖標。
在這一系列符號當中，你能明白其中哪些的含義？對于這款車的駕駛者而言，可能會隨著使用時間的積累，逐漸明白其中一部分圖標的含義。很大程度上，這是因為這些圖標本身并不直觀。你可能需要對著說明書，才能明白它們各自的含義。
我們可以從下面看到，圖標是怎么一步步變得難以識別的：
當圖標開始使用我們不熟悉的含義和隱喻時候，它就自然變得難以理解。從左往右數第三個圖標，是安全帶的提示燈圖標，當它亮起的時候，意味著你沒有系好安全帶。這個含義相對直觀，你可能能夠很快掌握。而最右邊的這個「電動助力轉向系統警告燈」含義就非常模糊了。
通常，不清晰的圖標設計會讓你感到沮喪，但是對于開車的人而言，含義模糊的圖標意味著誤解，而誤解的結果可能是生命安全。
下面是我們更為熟悉的圖標——喜愛、警告、音樂和向上。
上圖為 Phosphor Carbon 中的圖標
向上的箭頭在很多場景當中，都是非常清晰、實用的符號。
紐約地鐵中的標識
最成功的圖標設計，不僅僅是讓圖標本身易于理解，而且對于不同的文化背景、不同年齡段、不同知識背景的人都能理解，只有做到這樣才行。
如果你想要表達的信息過于抽象，那么單獨使用圖標，可能不是最清晰的解決方案，應當將圖標和文本標簽結合起來使用。
有了易于理解的圖標之后，你需要確保它的可讀性足夠強。
Icons in the Amtrak mobile app
由于細節太過精細，很難讓 Amtrak 的圖標被清晰地感知到。
Transit 應用圖標也有相同的問題。它們的剪貼板這個圖標中的細節很難看清：
Icons in the Transit mobile app
稍加調整之后，好了很多：
Adjusted clipboard icon
當你在處理圖標中多個不同的圖形元素的時候，應該確保其中的空間留足。太細小的筆觸細節、更多的信息量會讓圖標顯得更加難以閱讀。
Google Maps 的公交車圖標就非常的出色——它看起來足夠小，但是可讀性也很強。
Google Map icons
確保每個圖標都感覺平衡，盡量進行視覺對齊
不平衡的播放圖標
Unbalanced play icon
在這個播放圖標當中，盡管三角形被放置在中間位置，但是它并沒有視覺對齊，我們的眼睛看到的時候，會覺得中間的三角形說向左靠的。三角形靠左的這一邊在視覺上更重，因此它應該向右移動一點來確保平衡。
就像字體排版設計師，他們也經常會微調文字的布局來確保視覺平衡。比如字母 i 和 j 頂上的小圓點會偏移，而字母 O 的上下部分則為稍微超出邊界，來確保字體的平衡。
設計的時候，適當的微調就能達到平衡的效果。
Balanced play icon
明顯更好了。
要點：不要單純的相信數據，要用你的雙眼來進行檢查和修正。
用盡可能少的詞匯來進行表達和描述，這樣會更加優雅高效。
「將你所學的知識分享出去，可以增強你對于這門學科的理解?！?/span>
Material Design 在他們的導視系統中，使用的圖標大都足夠簡潔，他們善用圖標而是說話：
這是一個復雜的船的圖標：
它還有更為簡約的版本：
Succinct boat icon (Source: Material)
簡潔是圖標設計的精髓之一，因為我們經常需要在很小的屏幕上操作，圖標可以傳達很多信息，而不同文本或者其他復雜的內容。
在用戶界面當中，簡約準確的設計風格能夠凸顯重點，讓內容發揮效用。Telegram 的圖標設計，就非常的簡約有趣：
Telegram icons
有的時候，UI圖標會選用更偏向插畫風的樣式。下面這些關于美食的圖標就設計得非常令人愉悅，代表泰國菜的圖標中，蝦的描繪就非常傳神：
Yelp icons by Scott Tusk
圖標可以適用于各種不同的硬件平臺，手機、 電腦、平板，適當的信息量意意味著設計師可以在色彩、層次縱深上，有更大的操作空間。因為圖標本身會應用于特定的APP 或者網站當中，因此圖標可以適時地凸顯品牌和產品特征。
iOS 平臺上的 Procreate 、火狐和 Netflix 的圖標
為了讓圖標家族顯得更加和諧，始終保證相同的樣式和設計規則
在 iOS 13 之前，蘋果的圖標設計有著各種不同的粗細筆觸，不同的填充樣式，大小也各不相同：
仔細看看這套圖標，是不是有的圖標看起來比其他的更重？
任何圖標都有著相應的視覺重量。而視覺重量取決于圖標筆觸的粗細、填充模式、大小和形狀這幾個屬性。而圖標設計的難點就在于，如何控制所有的這些參數，做到整體的一致性。
蘋果公司最近引入了 SF Symbols 這個功能，將圖標直接制作成為圖標字體，在這套字體當中，圖標有 9 種不同的「字重」和3種不同的的風格（也許有點復雜，但是絕對充分夠用）。從圖標到符號，在填充模式、筆觸輪廓等多個不同的屬性上，確保你能挑出感覺更加和諧的圖標。
Icons from Apple’s SF Symbols
對于一個大型的成套圖標而言，保持一致性并不是一件容易的事情，尤其當這套圖標涉及到多個制作者的時候。遵循清晰的原則和規范在此時上至關重要的。
這套 Phosphor 圖標是由我和另一位朋友共同制作并嚴格測試的，我們使用一套準則確保這 700 個圖標保持一致性。盡管每個形狀都不盡相同，但是它們給人的整體視覺重量是完全相同的，并且很好地相互組合到一起：
Subset of the Phosphor Carbon icon family
每套圖標都應當尤其獨有的風格和氣質。是什么讓它們與眾不同？它們對于品牌是否有所助益？它們會給人什么樣的情緒？
Waze icons
Waze 大受歡迎的用戶界面，很大程度上是它本身所使用的圖標設計所造就的。這些用色跳脫斑斕的圖標，仿佛在說「我們就是特立獨行！」
Twitter 的圖標是柔和、清晰明亮的：
Sketch 的圖標則是精致而通透的：
Freemojis 的圖標是可可愛愛的：
而這些 Android 的圖標則風格各異，抽象風、像素風、霓虹風，不一而足：
完美地繪制了整套圖標之后，你的工作并沒有完成。接下來，你需要繼續做測試和其他的準備工作，比如讓參與圖標制作的志愿者可以更好地參與后續的制作和完善，讓設計師在日常設計工作當中使用和測試，在數字屏幕和印刷品上應用確保效果，讓開發者將它們集成到其他的服務當中，確保能夠應用。
一套高質量的圖標，需要經過良好的組織、記錄，并且在不同的應用場景中進行測試，并且最好能夠得到個性化圖標制作工具的支持。
7.1、組織性
你需要確保圖標集的整齊規范，有合理的命名，便于查找，并且想清楚以什么樣的方式來進行分類。按照字母順序？按照大小，還是類型？
這套 Nucleo Sketch 圖標，是按照也沒類型來進行組織分類的
7.2、有據可查
你需要闡明整套圖標的核心原則：
我以我所制作的 Phosphor 系列圖標為例（和以上原則內容有重復）來進行說明：
下面是技術規則。我還是以 Phosphor 圖標作為返利：
按照這這樣的步驟來進行設計，并根據需求來公開相應的文檔，就像下面這樣：
7.3、進行測試
檢查一致性。確保圖標在不同場合可以使用，并且尺寸合理。確保它們和大型是視覺系統能夠協調存在。
將圖標排列在一起，并且按照以上的 7 個原則來進行檢測。
Phosphor 的品質控制流程中所用到的測試表。
7.4、定制化工具
最后，如果你有足夠的資源，可以開發相應的工具來方便用戶使用圖標。
Material Design 讓用戶可以通過自定義庫來訪問圖標，搜索文件，選擇喜歡的格式、配色、大小和主題。
Font Awesome 的圖標設計并沒有完全遵循上面所提到的全部原則，但是它依然是目前來說最易用的圖標集。它提供的功能甚至超出了以上提到的范疇：它支持前端框架、CDN、圖標字體以及 SVG。
下面是一些額外的圖標素材資源。
7.5、資源
這個圖標合集項目雖然在質量上參差不齊，但卻是非常適合拿來搜集靈感、作為參考好地方。
Icon Managers
這是一款來自 Nucleo 的應用程序，你可以導入圖標集，查看，修改，導出，非常實用。
文章來源：優設網 作者：Helena Zhang
藍藍設計( www.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務