本文將結合我在圖標設計方面的思路，希望用壹篇長文來闡述圖標設計的所有要點和具體設計方法，讓所有新設計師更快的上手圖標設計。
本文分為以下五個部分:
？1，認識圖標
2.圖標設計原則
3.設計規範
4.摘要
圖標相信進入UI設計行業的人都不陌生，在我們的日常生活中也隨處可見，比如電器開關、浴室外的標誌、商場指南中的收銀圖標、出口標誌等等。
對於UI設計來說，圖標可以說是整個產品的點睛之筆，它甚至可以直接影響到壹個產品的形象和氣質。在很多UI界面中，圖標幾乎是這個頁面的核心支撐，直接影響產品的視覺體驗和調性。通過視覺分類，圖標可以分為以下幾種類型:
01)線性圖標
線條勾勒出的圖標壹般通過筆畫粗細和圖標細節來區分。
02)區域圖標
具有填充和負空間結構的圖標。相對於線型，面型更有視覺分量，更容易吸引用戶的註意力，辨識度更強。因此，區域圖標經常被設計者用來區分線條圖標的選中狀態。
03)漸變圖標
？
用漸變顏色填充的圖標被認為是區域圖標的壹個分支，但漫射陰影的使用因其豐富的細節而趨於年輕化。
04)線和面混合圖標
通常用線型和面型的組合來營造視覺調性。
05)?平面圖標
？
平面插畫形式的圖標常被用來營造產品氛圍和視覺調性，因為它們更註重細節，視覺層次豐富。
06)?模仿風格圖標
？
通過光影模擬真實物體質感的圖標壹般用於節日或遊戲中。
07)對象映射圖標:
？
有真實攝影對象的圖標常用於電商和超市，生鮮產品。
08)2.5D圖標
？
2.5D立體圖標。2017-2018左右，2.5D圖標在UI界刮起了壹陣風，以至於很多設計師都以為這將成為未來圖標的壹個趨勢，但是這股風似乎很快就要停了...大概是因為設計成本太高，風格過於鮮明，很難被很多產品駕馭。
01)表意準確性。
？
圖標作為信息傳遞的載體，目的是通過簡潔的符號告知用戶某件事，讓用戶記住某件事。如果表達的意思不準確，亂七八糟，讓人迷茫，甚至混淆是非，圖標的意義何在？
如上圖，相信大家壹看就能準確理解其含義。所以我們設計目標的第壹原則就是準確表達意思，讓用戶壹看到圖標就能明白它的意思。這裏需要提到的是，圖標是通用的，符合所有用戶的習慣。不要試圖改變用戶積累的記憶。
02)視覺統壹
在很多app中，我們可以發現圖標的實際大小並不壹致，但視覺大小是統壹的。如果圓形和矩形大小相同，矩形看起來會更大，所以我們要適當縮小部分矩形的圖標大小，使它們在視覺上大小相同。
03)壹致性
在同壹個產品中，設計圖標時，需要保證線條、內外倒角、風格等的壹致性，以保證整個產品的和諧統壹。
04)極度簡單
在界面中，簡化的風格可以讓人容易理解，弱化自己的存在，從而突出內容。所以圖標設計壹定要簡潔明了，讓用戶壹眼就能明白圖標的含義。
01)圖標大小
壹致性是設計目標的關鍵。繪制時，確保所有圖標的大小相同。在UI界面設計中，網格大小必須是4或12的倍數(Android為8，iOS為4)。確保@2x下的圖是4的倍數，這樣才能被2整除，以適合@1x的屏幕；在@3x下畫圖需要是12的倍數，能被2、3、4整除，適合@1x和@2x的屏幕。界面中常用的圖標尺寸有24*24px和48*48px。這裏建議常規圖標的設計尺寸采用48px。
2.擬合網格線
確保圖標的所有節點都連接到網格線上。避免小數點、奇數和其他數值。
圖標設計是UI設計中非常重要的壹個環節。在尺寸有限的界面上，壹個小圖標可以更簡單高效地表達意思，向用戶傳遞正確友好的引導。建議每個UI設計師都要做大量的練習，嘗試不同的風格，滿足不同的業務需求。
好了，圖標設計指南分享到這裏，希望對大家有所幫助。因為篇幅較長，又修改了幾次，有壹些不嚴謹的細節。歡迎指正，感謝閱讀。
下壹篇文章會具體分享圖標設計的流程。
原文鏈接:/s /s/QQueVlK6k3tvHGB99QENKw