起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識ICON設計使用手冊：如何設計一個優秀的圖標？
圖標設計，即icon設計，在界面設計中占有很重要的位置，一個好的圖標，可以讓用戶“一秒即懂”，如何設計出優秀的圖標，這篇文章給你解答。
在圖形交互界面（GUI）中，圖標（icon）是一種最常使用的設計元素之一。
怎樣設計一個優秀的圖標呢？
在這篇文章中，我會分享一個簡單的使用清單/使用手冊，幫助你如何把圖標更好地展示給你的用戶。
一、易識別
清晰度是優秀界面的最重要特征，但不幸的是，圖標往往不夠清晰。
圖標必須第一時間傳達最重要的信息。當圖標不能夠立刻表達出所代表含義時，它就會變成一種“視覺噪音”，失去了圖標存在的意義。
優秀的圖標即不用閱讀標簽或文字提示，就可以被認知理解。
幾個簡單的規則，可以幫助你避免使用不能傳達其含義的圖標。
1. 嘗試使用用戶熟悉的icon
用戶對于圖標的理解，一般基于其使用與認知的經驗。這就是為何使用用戶熟悉的圖標效果會比使用獨特的圖標要好。
依靠通用型圖標。就像屋子、打印、玩游戲和搜尋等等這些，不需要進行任何解釋的圖標。
（通俗易懂的圖標）
調查研究，檢查你的競爭對手所用的圖標。
2. 不要使用有歧義的icon
應該避免使用有多重含義的圖標。舉例來說，“心形”圖標和“星星”圖標都可以作為【喜歡】或將內容【收藏】起來。當一起使用時很可能造成用戶干擾。
（心形和星星圖標有歧義）
3. 測試icon的含義表達
不要聽從一些類似“人們每天都用我們的產品（APP），他們肯定能理解圖標的意思”的話。
請測試你的圖標！
【5秒鐘原則】是一種測試圖標的有效方法。問問用戶他們希望這個圖標代表什么？
如果需要花費5秒鐘以上去思考這個圖標，那么這個圖標就不可能有效地傳達其意義。
4. 測試icon的可拓展性
測試你的icon在類似15x15px的尺寸下是否依舊清晰。
（音樂圖標縮放清晰）
5. 給陌生的icon附上標簽文字
如果你還是想要使用特殊的圖標，可以考慮在旁邊給圖標附上文字標簽。
（圖標+文字）
6. 不要重新定義icon的含義
通過更改圖標的含義來混淆用戶相當容易。當圖標的功能與預期認知不同時，會造成用戶混淆。
不要重新發明輪子！
即使意義上的細小區別，也會妨礙到用戶理解圖標的能力。
很長一段時間，Google Docs使用的圖標看起來就像一個漢堡包。大多數界面使用類似的圖標來表示主導航菜單，但Google重新定義了它的含義并將其用作“后退/返回”操作。當用戶點擊此圖標時，他們會被重新引導到Google文檔主頁。
二、視覺舒適
可以通過插畫、顏色以及圖標傳達品牌個性。如果做得好，圖標肯定可以增強設計的美感。
1. 減少圖形細節中的數量
KISS原則適用于所有UI元素，包括圖標icons。保持圖標的簡潔性，并且遵循以下兩條原則，避免沒必要的復雜性：
- 限制顏色使用數量，使用不超過3或4種顏色，保持設計簡潔。
- 通過聚焦于對象的基本特征，來減少圖形設計細節的數量。盡量保持設計的概要性 ，因為設計概要性的在不同的界面和分辨率都可以進行轉換。
（請勿過于花俏，避免設計的圖標上包含太多的視覺細節）
2. 通過添加動畫效果創造愉悅體驗
動畫效果可以表達清晰功能的目的，并且可以創造用戶愉悅體驗。
對于形態改變的情況，使用動畫效果可以創造更好的動態體驗。
三、合適尺寸
圖標應該很好地作為用戶的目標點。
設計師常見的錯誤之一，是在手機上為圖標留下太小的空間。當你為觸摸進行設計時，確保圖標能夠足夠大方便手指的點擊。
參考：目標在屏幕中點擊范圍為7-10mm。并且，請確保在目標對象之間添加填充，以防止不準確的點擊。
（實際目標尺寸=視覺目標尺寸+填充 圖片：Microsoft）
四、一致性
- 一致性是設計中的關鍵原則。
- 一致性設計是一種直觀設計。
當使用相似的元素且具有一致的外觀和功能時，可以讓可用性和可學習性都得到提升改善。
1. 內部一致性
圖標設計應該保持視覺統一，你決定用于你的產品的圖標，應該保持統一樣式。
理想情況下，它們看起來應該是一位設計師設計的。以下是你需要遵循的關于創造統一性的幾條原則：
- 使用相同顏色或者顏色組合在你的圖標上；
- 使用相同的形狀和其他樣式屬性（例如邊框的大小）。
（沒有凝聚力的圖標看起來很糟糕）
2. 與平臺保持一致
確保你的目標風格與平臺一致，它們會讓用戶更容易去理解。
（蘋果iOS和Google 安卓圖標）
3. 與產品系列保持一致
如果你擁有整個產品系列，確保一致的圖標風格（或至少類似）應用在你所有的產品中。
總結
通常來說，為你的項目尋找一個合適的圖標并不容易。這就是為什么我分享這個資源列表來讓這個任務變得簡單。
我會定期更新列表，以便你可以找到更有用的資源。
作者：Nick Babich
翻譯：JaylonG
原文：http://babich.biz/icon-checklist/
#專欄作家#
JaylonG（微信號JJ865477301），人人都是產品經理專欄作家。一枚擅長用產品思維看問題，用邏輯思維做分析，用情感體驗做設計的產品愛好者。愛好廣泛，歡迎交流，拒絕水友。
本文由原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash ，基于 CC0 協議
閱讀類產品需要注意什么