關注▲彩雲譯設計▲和5萬設計精英，一起共同進步
這是彩雲的第122篇分享
大家好，我是彩雲。看過我以前推文的朋友應該知道，關於圖標這方面的設計文章我發過好多篇了，但從找我幫忙看作品集的朋友那看到，圖標問題依然是非常多。大家不能只是看了，還要去用呀。
可能又有人會說，到底怎麼用呢？就比如說今天這篇文章，你就對照著自己設計的圖標，一條一條的去核對，是否都符合這些原則。其實，最後不論是否符合這些原則，多次對照後，才可能真正內化為自己的能力，設計的時候才能自然地設計出好的圖標了。
今天要介紹的圖標原則共有7條：清晰，易讀，平衡，簡潔，一致性，個性，易用性。
對設計師來說，要設計出一套高質量的圖標體系需要深思熟慮的方法，一雙像素眼，不斷迭代和大量的實踐練習。下面，我將通過7個原則和大量的例子來說明一個優秀圖標的特點，目的是找到好圖標的關鍵屬性，從而設計出高質量的圖標。
1、清晰
圖標的主要目標是快速表達一個概念。
圖片來源：Prius Prime instrument cluster (Source: 2020 Manual)
在這一連串的圖標中，哪些對你來說是清晰易懂的？隨著時間的推移，老司機們可能會認識這些圖標，但其中一些圖標並不直觀，需要一本手冊才能讀懂它們的意思。
以下是用戶測試的結果：
當一個圖標使用了一個不熟悉的隱喻，它很難被理解。安全帶上的提示燈(左起3號)是很字面的，我們可以很快地掌握它。電動助力轉向系統(最右邊)則非常模糊，很難記得住它的意思。
我遇到過的一些最不清晰的圖標是在攝影應用VSCO中。你能猜出它們的意思嗎?
從左到右，這些導航圖標表示:Feed、Discover、Studio、Profile和Members。混淆VSCO的代價很低，因為它只需要點擊幾下就能弄清楚每個圖標代表什麼。
圖標發展歷史中，抽象的符號被反覆使用，從而逐漸標準化，目的是建立共同的理解。1984年，Susan Kare受命為蘋果鍵盤上的「功能」鍵設計一個圖標。她從北歐的地名符號中獲得靈感，設計了這個抽象的符號。
由Kare設計的mac 功能鍵圖標
這個圖標已經成為一個經典，代表了我們所說的蘋果鍵盤上的命令符號。（彩雲註：這個功能鍵的作者也分享了她的創作過程https://vimeo.com/97583369）
Susan Kare 能夠發明這個符號是因為當時還沒有一個格式的標準。在設計圖標時，考慮是否存在一個現有的隱喻，比如設置的齒輪，或者重新發明一個全新的合適的圖標。
下面是一些讓人感覺更熟悉的圖標——點讚、警告、音樂和前進方向的圖標:
來自 Phosphor Carbon 圖標體系的熟悉隱喻
箭頭圖標的作用非常強大，通常用於尋路。
圖片來源：紐約地鐵標誌 (Source: Standards Manual)
圖標被設計最成功的情況是不僅對一群人來說很容易理解，而且在不同文化，年齡和背景下都是通用的。考慮目標用戶，使用能引起他們共鳴的隱喻和顏色。
2、易讀
一旦設計好了容易理解的圖標，然後就是確保它是可讀的。
應用 Amtrak中的圖標
第一個圖標由於細節太多，以至於很難快速辨認出它是什麼。
Transit應用有類似的問題。他們的剪貼板圖標負空間太小，導致無法閱讀。
細微的調整會帶來很大的改善：
調整後的剪貼板圖標
當設計多個形狀時，在他們之間留出足夠的空間。更細或更多的圖形會使得圖標變得更加難以閱讀。
谷歌地圖做了一個很好的設計，他們所設計的圖標在非常小的尺寸時也非常易讀。
3、平衡
為了確保每個圖標視覺平衡，需要在視覺上對齊它的元素。
不平衡的遊戲圖標
在這個播放圖標中，雖然三角形被標準的放在圓圈的中心，但我們的眼睛告訴我們，它是不平衡的。三角形較寬的部分感覺比較「重」，使得它好像在向左傾斜。
就像字體設計師做精細的調整來設計字體的視覺平衡一樣。
UI設計師也需要做類似的調整來平衡一個圖標。為了優化好上面那個播放圖標，稍微向右邊移動一下元素：
圖標變得平衡了，是不是好了很多？
我們從這裡學到的一個點就是：不要簡單地相信數字，要用眼睛來檢查。
4、簡潔
在日常生活中，用幾句話就能很好的表達想法，感覺既高效又優雅。
「向別人講述你所知道的內容可以強化對這門學科的理解。」
說的直白一點：
「一人為師，兩人學習。」
谷歌規範中的圖標很好表達了系統圖標的簡潔性，而不是下面這種過於複雜的圖標。
簡化後的圖標
簡潔適合圖標設計，因為我們經常在小畫布上工作。設計適當的細節，不要使用過多就好。
在界面中，一種簡化的風格能讓人容易理解，並能弱化自己的存在，從而凸顯內容。
Telegram圖標
有時候，UI圖標會呈現出一種更具說明性的風格。在應用Yelp中的圖標非常的精緻。
Yelp icons by Scott Tusk
對於代表手機，平板和桌面應用的主圖標，適當的細節可能意味著又更多的空間感和顏色。因為用戶能夠理解它們在主屏，docks欄，應用商店中的印象，這樣的圖標能夠很好的表達品牌和產品。
Apple app icons for Procreate, Firefox, and Netflix
5、一致性
為了保持圖標的和諧統一，要始終保持相同的視覺規則。
在iOS13之前，蘋果圖標有各種描邊，填充和大小：
Icons from Apple’s Home Screen Quick Actions pre-iOS 13
斜視這一組，有些圖標感覺比其他的更重嗎？
任何給定的圖標都有一個特定的視覺「重量」，由填充，描邊寬度和形狀等屬性來決定。在一個集合中保持這些參數相同可以構建一致性。
蘋果最近優化了他們的圖標，現在看起來更加統一和諧了。他們把圖標的兩種不同狀態之間的填充和描邊形式做了規則統一，使其擁有了更高的一致性。
Icons from Apple’s SF Symbols
對於一個大的圖標庫來說，保持一致性並不是一件很容易的事情，尤其是涉及到多個作者的時候。重要的是要有清晰的原則和規則來遵循。
Phosphor圖標合集保持了700+圖標的一致性，堅持相同的準則，並嚴格測試每個圖標。雖然他們每個形狀都不一樣，但它們都有相同的重量，而且能很好地結合在一起。
Subset of the Phosphor Carbon icon family
6、個性
每個圖標集都有自己的風格。它的獨特之處是什麼?關於這個品牌它表達了什麼?它創造了什麼氛圍?
Waze icons
Waze 受人喜愛的界面在很大程度上依賴於它們的圖標。這些五顏六色、厚實的圖標傳達出:「我們很古怪!」的意味。
Twitter的圖標圓潤，清晰：
Twitter icons
Sketch的圖標精緻:
Sketch icons by Janik Baumgartner
Freemojis 的圖標非常可愛:
Freemojis from Streamline
Android圖標包為主屏幕主題提供了多種多樣的風格——這裡有抽象的、像素的、氣泡的和霓虹燈的風格:
Top to bottom, left to right: iJUK, PixBit, Crayon, Linebit
7、易用性
一個圖標設計的終點並不是單純的好看。它還需要進一步的測試和準備，以確保後續能夠輕鬆的設計出新的圖標，並運用與各種場景，比如手機上，列印出來等等，然後開發也能夠輕鬆地將圖標寫到代碼裡去。
一套非常好的圖標庫應該是有組織，有文檔記錄，並被測試過的。
有組織
保持主文件的整潔，圖標命名邏輯清晰，便於搜索。需要考慮最好的分類方式，是按字母順序？按大小？還是按類型？
A Nucleo Sketch file, organized by type across pages
圖標文檔
闡明這套icon的主要原則:
圖標原則示例:
•清晰度。首先要清楚，使圖標可識別和可讀。永遠不要犧牲圖標清晰度來換取視覺效果。
• 簡潔。使用儘可能少的細節。每一筆都要簡潔而有理由地傳達所要表達的本質。
• 性格。有鮮明的性格，謹慎地添加獨特的細節，給原本非常簡樸的畫面帶來一點特色。
列出具體參數規則：
參數規則示例:
• 使用48x48px的畫布
• 使用1.5px居中的筆畫
• 使用圓角
• 使用連續的筆畫，除非斷開的部分有助於理解
• 使用直線，弧線，並在可能的情況下以15度角為增量，在必要時調整曲線以保持設計原則
• 在可能的情況下使用整數、偶數增量進行設計;
• 使用以下標準尺寸:28x28px的圓，25x25px的正方形，28x22px的橫向矩形，22x28px的縱向矩形
• 保持6px的圖標內框範圍
一些優秀的圖標系統規範
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
測試
檢查圖標的一致性。確保圖標在上下文中正常工作，並在更大的視覺系統中也能協調工作。
將圖標放在一起有助於驗證我們的原則:清晰、易讀、對齊、簡潔、一致性和個性:
Test sheets used in Phosphor’s QA process
自定義工具
最後，如果你有資源，創建工具來方便圖標的使用。
谷歌圖標容易使用與他們的自定義圖標庫很有關係。
Material’s easy-to-use icon library
加上文字說明更好，雖然在上面的一些原則上沒有標記，但已經使他們的圖標非常容易使用。他們提供了各種方法來使用他們的圖標:通過他們的前端框架庫，CDN，圖標字體，或原始的svg。
Font Awesome’s Icon Leaderboard
原文：https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2
作者：Helena Zhang
譯者：彩雲sky
本文翻譯已獲得作者的正式授權（授權截圖如下）
最後彩雲再多說一句，看過很多文章，如果缺少練習，還是做不好，你同意嗎？所以看完文章，就趕緊練起來呀！(簡直苦口婆心)
如果覺得文章有用，下面有一排「分享」「贊」「在看」的三連操作幫忙安排上吧，聽說三連擊的人，工資都漲到暴擊了！