起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識7大原則，帶你設計出更優秀的圖標
想要設計一套高質量的圖標，就需要一套成熟的技巧、訓練有素的眼睛、不斷的練習和臨摹。而就將通過7大原則和大量的案例來說明優秀圖標的特點，使你了解優秀圖標的共性，設計出更優秀的圖標。
清晰、可讀性、對齊、簡潔、一致性、個性、易用性
一、清晰
圖標的主要目的是快速清晰的傳達概念。
Prime儀表盤上的圖標設計
如上圖所示，你知道他們所傳達的意思嗎？駕駛員由于長期開車而了解到他們的意思，但是其中一些圖標并不直觀，甚至需要一本說明手冊來解釋其圖標的含義。
如下圖：
當圖標不符合用戶的認知時，是很難被理解的，安全帶“提示燈”（左邊第3個）非常直觀，我們可以快速的了解他的意思?！半妱又D向系統警告燈”（最右邊）的意思要模糊的多。
通常，不清晰的圖標只會令人沮喪，對于駕駛員而言，誤解警告提示可能會造成很嚴重的后果。
以下是一些較為熟悉的圖標：愛心、警告、音樂、方向：
Phosphor Carbon圖標
箭頭，是一個路線常用的指示符號：
紐約市地鐵標柱
最成功的圖標不僅在一定的用戶群里中易于理解，且能在不同的文化、年齡、背景下都是通用易于理解的。分析我們的目標用戶，并使用與之能產生共鳴的比喻和色彩。
切記，如果所表示的想法過于的抽象，則獨立圖標可能不是最清晰的設計方案。在這種情況下，可以使用圖標+文本組合的形式設計，或者找到其他的替代方法。
二、可讀性
一旦有了可理解的符號，請確保其可讀性。
Amtrak移動應用程序中的圖標
由于圖標的細節太多，很難在上方（第一行）注意到Station的圖標。
在交通應用中也有類似的問題，他們的剪貼板圖標讀blob，因為面板和剪輯之間的空間太?。?/p>
Transit移動應用中的圖標
稍作調整將帶來很大的改進：
調整后的剪貼板圖標
對于組合圖形設計，請確保他們之間留出足夠的空間。復雜的線條將使圖標變得更加的難以理解，可讀性就越差。
Google Maps的交通圖標非常出色-在尺寸很小的情況下保持了圖標的可讀性：
Google Map圖標
三、對齊
要確保每個圖標的平衡，請以光學方式對齊其元素。
在上面的圖標中，盡管三角形按居中設計放在圓的中心，但是我們的眼睛將其讀為偏離邊緣。三角形的較寬部分感覺比該點“重”，并且將其向右傾斜。
通常版式設計師會做細微的調整，在字體上創造平衡的視覺錯覺（注意“i”和“j”上的偏心點和“O”上的過沖點）：
視覺設計師也做類似的調整來平衡一個圖標。要更正上面的示例，請將元素移動一點：
效果會更好
學習方法是：不要簡單地相信數字；用你的眼睛檢查你的工作。
四、簡潔
一個用幾句話就能很好地表達出來的想法，讓人感覺高效而優雅。比如下方的這個聲明：教別人你所知道的東西能增強你對這門學科的理解。
我們可以更簡潔的說：一人教，兩個人學。
材料很好地說明了系統圖標引導的簡潔性，而不是說：
過于復雜的船形圖標（來源：Material）
簡約的設計：
簡潔的船形圖標（來源：Material）
簡約很適合圖標設計，因為我們經常在小尺寸上進行設計，注意圖標要使用適當的細節量，不要使用過多的內容
在用戶界面中，還原性風格可以理解并為內容騰出空間。電報的圖標簡短有趣：
電報圖標
有時，UI圖標會呈現出更具說明性的風格。這些多色調的Yelp圖標是一種顯示流行食物搜索的令人愉快的方式。泰國美食圖標中的蝦很精致：
Yelp圖標由Scott Tusk
比如APP圖標、iPad和桌面應用程序的應用程序圖標，適當的細節量會讓圖標有更多的深度和色彩。由于觀眾可以在移動主屏幕，APP和應用商店中了解自己的行為，因此圖標可以更加體現品牌和產品。
蘋果應用程序圖標
五、一致性
為了保持一套圖標的和諧性，請始終保持相同的樣式規則設計。
在iOS 13之前，Apple的圖標具有各種線性圖標、填充圖標、不同的大小等：
iOS之前的Apple主屏幕快速操作中的圖標13
重點觀察上面一組圖標，一些圖標感覺比其他圖標重嗎？
每一個圖標都具有一定的視覺權重，該視覺權重由諸如線條的粗細、大小和形狀之類的參數決定的。在一個集合中保持這些參數相同有利于保持圖標的一致性。
蘋果最近推出了SF symbols（舊金山的一個小伙伴的設計）來糾正這一錯誤。SF symbols包含了9種權重和3種比例的圖標風格，也許有點復雜但是絕對徹底，從一個圖標到另一個圖標，在填充和輪廓變化之間，這些感覺更加和諧。
蘋果SF Symbols中的圖標
對于一套比較復雜并且比較多的圖標庫來說，維護一致性并不是一件容易的事情，特別是對于涉及多個設計師或者團隊的時候，關鍵是要有明確的原則和規則來遵循。
下面是我和其他設計師共同設計的700+圖標，并在視覺上保持一致性，堅持相同的準則和嚴格測試每個圖標。雖然每一個都有不同的形狀，但它們承載著相同的重量，并能很好地結合在一起：
Phosphor Carbon圖標
六、個性
每一個圖標都很有特色，是什么讓它與眾不同？它對品牌有何評價？它會讓用戶產生什么樣的心情？
Waze圖標
Waze最受歡迎的界面在很大程度上取決于其視覺。這些色彩斑斕的圖標仿佛在說：“我們很特別！”
Twitter的圖標柔軟，明亮，清晰：
Sketch的圖標既精致又飄逸：
Freemoji可愛又溫暖：
Android圖標包可迎合主屏幕主題的各種心情-比如 抽象、像素風、氣泡和霓虹燈風格：
從上到下，從左到右：iJUK，PixBit，Crayon，Linebit
七、易用性
一套圖標在經過精致的設計后，是還沒有結束的。它需要進一步的測試和準備，以確保其他設計師更容易使用或補充其他圖標的設計。需要跨設計師進行使用，開發需要將他們編碼到代碼中。
一套高質量的圖標是有組織的、有規則、有文檔記錄的，并在上下游中使用和迭代。最好也受圖標管理器等支持自定義編輯。
八、其他
1. 有組織的
保持主文件整潔，為資產命名并放置它們，以便于查找?？紤]最好的分類方法，按字母順序？按大?。堪搭愋?？
Nucleo圖標管理文件（按不同類型分類管理）
2. 有據可查
說明圖標的主要原則和使用規范：
比如：圖標原則說明
- 清晰度 。保證圖標的可識別性和可讀性，切勿以犧牲圖標的識別性追求獨特的設計
- 簡潔。使用盡可能少的細節。圖標的風格是還原性的，每條線條都要簡潔明了，以傳達所代表內容的本質
- 角色。要有創意，謹慎添加獨特的細節
3. 設計走查
檢查圖標的一致性，確保圖標在上下文中以相關大小使用，確保它們與較大的視覺系統協調性。
將圖標彼此并排放置有助于證明我們的上述原則（清晰度、可讀性、對齊、簡潔、一致性和個性）：
Phosphor的自檢表
4. 定制工具
最后，如果你有資源的話，可以創建一個組件庫方便使用。
Material使它們的圖標易于使用其自定義圖標庫進行訪問，搜索所需的文件，并以你喜歡的文件格式下載不同的樣式（“主題”），不同的顏色和不同的大?。?/p>
Material的易于使用的圖標庫
原文地址：https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2
作者：Helena Zhang
譯者：haselina
本文由 @UX Talk 翻譯發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
- 目前還沒評論，等你發揮！
