色彩 color 、 文字 Font 、 圖標 icon 、 圖形 shape 、 圖片 image 、 空間 space ，是我們做平面設計中非常重要的 6 個元素，而對於 UI 設計而言，圖標可以說是整個產品的點睛之筆，它甚至可以直接影響著壹款產品的形象和氣質。
顯然，圖標不是由界面設計師發明的。作為壹種交流的對象，它們有著悠久而多樣的歷史，根植於古代。它們出現在地圖、標誌、方案、手冊和許多其他信息來源中。然而，隨著新技術和圖形化用戶界面的出現，圖標經歷了新的轉折進步。
從歷史上看，施樂公司在20世紀70年代初的時候，在功勞中提到了第壹個圖形化用戶界面的圖標：圖標是在壹臺名為Xerox Alto的機器上實現的，這臺機器非常昂貴，並沒有真正普及到廣大的用戶。然而，這只是壹個漫長的故事的開始：1981年，Xerox Star（施樂之星）發布了，它被稱為第壹臺將圖標作為界面的壹部分的消費類計算機。特別是，它應用了至今為止的文件夾和垃圾箱的圖標。下面是圖標從80年代
表意圖標（又稱解釋性圖標）
表意符號是指原本不存在實物的符號，是在發展過程中創造的壹種符號，用於表達某些特定的含義或操作行為。而且在發展過程中，這些符號逐漸繼承了壹些象形符號的特性，將符號本身作為「實物」並且不斷演化。例如「箭頭」從最初的「弓箭」已經逐步衍生為壹種特定的表意符號。
交互圖標
具有雙向信息傳遞能力，不僅可以向用戶傳遞某種信息，引導幫助用戶執行特定操作，同時也允許用戶向程序傳遞控制信息，從功能重要程度來講，它的重要性是最高的。比如：登陸註冊按鈕，開關按鈕，數量按鈕，點贊，轉發分享等都屬於交互性圖標。
裝飾和娛樂用圖標
通常是用來提升整個界面的美感，加深個性化設計風格，並不具備明顯的功能性。這類圖標迎合了目標受眾的偏好與期望，具備有特定的風格的外觀，提升用戶線上體驗感，迎合受眾群的偏好，提升設計親和度。裝飾性圖標通常呈現出季節性和周期性的特征。例如線上活動、用戶等級、空頁面等
應用圖標
不同數字產品在各個操作系統平臺上的入口和品牌展示用的標識，它是這個數字產品的身份象征。在絕大多數的情況下，它會將這個品牌的LOGO和品牌用色融入到圖標設計當中來。也有的圖標會采用吉祥物和企業視覺識別色的組合。真正優秀的應用圖標設計，其實是結合市場調研和品牌設計的組合，它的目標在於創造壹個不會讓用戶能夠在屏幕上快速找到的醒目設計。
象形圖標
ios相當長壹段時間流行 “Skeumorphic設計理念”，屬於超寫實設計。並且認為只要有可能，在應用上增加現實的、物理的緯度，與現實越相像，操作越相同，就越容易使用戶理解運作模式，接受度就越高。例如日本鼎鼎有名的富士山圖標，由此說明好的設計不僅美觀度高，功能性同樣十分重要，特別是與旅遊相關的設計，需要讓人跨越語言的障礙。
隱喻圖標
icon 中的隱喻元素很重要，它可以讓我們壹看到這個 icon 就知道是什麽意思。比如，壹個房子代表首頁，壹個叉叉代表出錯或關閉。當我縮小壹個 icon 時，我都會保留隱喻元素，來保證 icon 仍然可以準確傳達信息。
工具圖標
主要以行業類別為分類，使用範圍廣泛，大眾或行內人士識別度高，且被長期使用。比如：建築行業，醫療行業，化工行業等等。
混合圖標
也就是前三種的結合，目的在於達到不同的視覺效果和應用結構。前段時間追波很流行的MBE粗描邊風格icon就是綜合圖標的產物，多表達設計師個人設計風格或適用某類設計感較強的軟件。
字符圖標
字符圖標“Glyph”壹詞是源自於排版領域，現在已經隨著數字設計而逐步在數字設計領域紮根了，它源自於希臘語，含義為“雕刻”。在排版領域當中，符號圖標通常是包含特定的含義、特定功能、可表意也可書寫的類文字系統，它可以是字母，也可以是圖形，有的時候甚至是兩者的組合。
在這類圖標設計中，比較典型的當屬天氣類圖標了。從單個圖標到組合圖標，都能充分體現出來。
扁平圖標
扁平圖標包含線性、面型、線+面，面+面，變現方式多樣，拓展性強，更個性化，年輕化壹些，相同，同樣設計風格的icon，在更換顏色後就能體現和傳達不壹樣的信息。
擬物化圖標
擬物化圖標是扁平化圖標的對立面，正如同當初擬物化圖標設計師常說的，它就是“抄現實”，盡量將現實世界中的形狀、紋理、光影都融入到整個圖標的設計，擬真是它的特點。擬物化圖標這壹設計趨勢幾乎是跟隨著Macintosh的誕生和進化壹步壹步走過來，走到極致，然後從UI設計領域開始，被扁平化設計所替代。不過，擬物化圖標現在依然廣泛地運用在不同領域，尤其是遊戲設計和遊戲類產品的圖標設計當中。2.5D圖標和桌面應用圖標。
Windows,iOS, etc., 中文版和英文版甚至各種語言版本，在不打開菜單之前，基本上都長壹樣。很多圖標已經能夠被大多數用戶快速識別，甚至成為國際通用的圖標。例如Windows UI
壹個圖標能夠表述清楚含義的時候，只需占用壹個字符的位置就可以傳遞給用戶操作信息。例如掃壹掃、郵件發送成功，用文案表示需要3-4個字，英文或其它語言可能更長，而用圖標代替只需要壹個字符位置
支付寶右上角 + 表示更多功能，此時壹個字符位置解釋清楚其含義；微信下壹個類似聲波圖標表示語音，直觀易理解
進入碎片化時代和進入讀圖時代，幾乎是相同的節奏。圖片內容能在短時間內產生更大的影響力，研究表明，大腦處理圖片內容的速度比文字內容快60000倍，人類大腦對圖形圖像的記憶也遠勝於對文字的記憶。所以，在推廣品牌時，圖片內容可以說是壹圖勝千言。使用圖標通過視覺引導幫助用戶快速識別信息。
Tik Tok和ins沒有任何文字說明情況下，我們就知道第5個標簽就是個人中心
科學證明，在大腦中相對於其他感覺來說與視覺信息處理相關的腦區占統治地位，人腦對於圖像的記憶遠遠高於文字。圖標多采用幾何圖形，並以對稱、壹致的設計目標來進行設計，由於其高度濃縮的特性，圖標具有更加簡潔的特性，更加便於記憶。
圖標最底層邏輯：線性圖標、面型圖標、線+面型圖標、面+面型圖標、2.5D圖標、擬物圖標。網上五花八門的圖標是在這些基礎上進行視覺區分，而當我們設計圖標時候需要思考
1、產品視覺風格定位（行業領域）
2、圖標具體應用的界面
3、產品面相的用戶人群是怎樣的？
先看壹組不用風格的圖標，由上面不同APP圖標可以看出不同行業、不同場景、不同用戶，圖標的設計和表達方式是不壹樣的，所以設計前需要思考，妳需要表達的設計思路和產品的定位。
1、拆解關鍵詞及關鍵詞聯想
將需求信息中的關鍵詞進行拆解及發散，轉化為生活中常見的事物，釋放它所代表的內在含義。關鍵詞的同義詞、近義詞、形狀相關或相關聯想的物體
例如說到榮譽，馬上就能想到獎杯、獎狀、金牌、皇冠等。然後通過這些詞聯想，去找壹些氣質相符的圖片制作情緒版，通過情緒版可以感受到產品的調性，然後從中提取壹些形狀和色彩做為產品圖標的主要造型
2、根據關鍵詞聯想輸出圖形
根據上壹步拆解的詞語或物體，通過簡單基本形狀轉為生活中常見圖形。常用的2中方法是用AI鋼筆工具（sketch貝塞爾工具）或者布爾運算進行繪制
3、根據場景輸出
這裏的場景可能是實際應用的場景，比如大眾點評tab標簽欄、功能區（品類區）、運營類圖標等這些圖標需要引導用戶去點擊，所以在視覺上更加豐富壹些；而個人中心、分類區、詳情頁更多側重功能上的引導，相對來說較簡潔，屬於二級使用場景，線型圖標居多。
我們常見各個圖標文章分析應該註意十幾點，而這些沒有規律和邏輯難以記憶，壹時記住了也容易忘記。這些總結其實是從Material Design或者iOS規範中得來的。認真研究這些細節，圖標制作就不難了
圖標端點分為直角和圓角，我們在設計過程中要統壹圖標端點，保持壹致的設計語言
拐角
相對於其他圖形，人類的眼睛更容易識別圓角矩形而不是直角矩形，因為人在眼睛的生理構造上中央凹(fovea centralis），是視網膜中視覺最敏銳的區域)在處理圓形時最快，而處理矩形邊緣則需要涉及大腦中更多的“神經影像工具”。所以，人眼處理圓角更容易，因為它們看起來比普通矩形更接近於圓。
圓角自身的圓形屬性會給人圓潤、可愛 ， 更加安全、親密的感覺。因此社交、娛樂、直播、美食等圖標多會使用圓角圖標
直角則會給人壹種尖銳、具有攻擊性的感覺，圖標整體細節更多，通常出現在金融等商務屬性比較強的產品。比如：36氪、金融類產品等。
傾斜角度統壹
內部空間比例的不壹致易導致圖標視覺重點不統壹。如下圖左第二個圖標重偏下，第四個圖標重心偏上，右邊是早期PP助手的標簽欄圖標，圖標內部挖空面積占比率相同，整體視覺和諧統壹。
在繪制描邊圖標時，要時刻註意圖標的描邊粗細是否統壹。在 @1x 壹倍圖設計模式下，以 24px 為網格基準的話，常使用的圖標粗細有： 1px 、 1.5px、2px、3px ，1.5的粗細對顯示屏要求比較高（半個單位的路徑會導致圖標在最終顯示時邊緣模糊，不清晰）
細描邊給人視覺感更加精致，粗描邊相對更加粗獷，由於目前流行趨勢的發展，常常也有粗描邊和細描邊結合的設計風格
除了保持相同的視覺權重，圖標的描線寬度也應該保持壹致，達到像素級統壹。元素之間的最小間距，應該大於或等於描邊的寬度。
蘋果、谷歌、IBM，國內的阿裏Ant Design都出過相關的圖標網格規範，這裏以谷歌的Material System 圖標網格來進行說明。在24*24px圖標尺寸，上下左右安全邊距是2px，關鍵形狀的四個基本形狀為圓形20*20px、正方形18*18px、縱向矩形和橫向矩形20*16px。通過關鍵形狀的規則統壹圖標大小及位置，達到視覺的平衡
對齊像素點
清晰度（像素完美對齊）為了避免使圖標失真，可以通過將X軸和Y軸坐標設置為整數來將圖標定位在像素上。在使用軟件AI或者sketch的時候繪制基礎圖形不要出現小數點和奇數，多用偶數
我們了解了 icon 的基本知識，怎樣評判我們的 icon 是否合適，是否貼合整個產品呢？我們需要了解什麽才是壹個好的 icon 。檢驗標準也是基於我們繪制的標準，分別是： 識別性，規範性、整體風格與品牌感。
判斷事物的價值在於它的用途是什麽，圖標的用途是幫助用戶理解信息，所以表意準確（清晰準確的傳達信息）就是圖標最重要、最底層的價值，如果妳設計的圖標用戶看不懂，即使視覺再美觀也沒有任何價值可言。
含義識別：是視覺語言是否替換文字語言，簡言之就是讓妳的圖標可以被用戶理解，不會讓用戶產生歧義。常見的就標簽欄指南針表示發現，房子表示首頁等
視覺識別：是圖標的大小，顏色，線條的粗細，這些影響影響視覺識別的因素，在具體樣式中提高視覺識別性。
我們要保證圖標在視覺大小的壹致性，圖標飽滿度（正負形）、遵循同壹種規律，細節統壹性。這裏的4點在前面繪制過程中已經寫的非常詳細了。
整體風格是要註意圖標傳達的性格與 app 的基調是否壹致，每個產品因為定位，針對人群不同，整個 app 的基調也不壹樣，例如騰訊動漫，它的性格就是偏卡通可愛的類型，那麽的圖標設計上也要體現這個性格特點，盡量使用卡通圓潤的方法去設計。壹個廣告語：復雜世界裏，壹個就夠了，整個APP從啟動圖標到整體調性都是簡潔幹凈，克制的色彩運用傳達產品調性。
品牌感就是我們上面談到的要與品牌理念相符，傳達給用戶的感受壹致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設計的角度去理解，尋找自己產品獨特的品牌氣質，挑選合適的技法。然後把這些元素具象化，融入在界面設計中。下面幾款產品從產品名到啟動圖標設計高度融合。
圖標可用性測試是基本規則是根據圖標驗證推導的
識別度：
1、用戶是否能夠理解圖標的含義？
2、是否是用戶熟悉的圖標？
3、是否與其他圖標含義沖突？
4、是否能通過5秒原則？
5、圖標的可擴展性怎麽樣？
6、是否需要增加文字標簽？
設計是否統壹
1、視覺語言是否統壹？
2、圖標的設計復雜程度是否統壹？
3、整體設計是否協調、統壹、視覺體系高度集中？
4、圖標整體配色是否統壹？
品牌信息：
圖標是否獨特性、能否傳遞品牌信息？
壹般情況下有 JPG、PNG、GIF、SVG 四種交付格式。其中JPG、PNG、GIF為位圖，受圖片本身的分辨率大小限制，無法靈活的修改尺寸。而SVG為矢量格式，支撐無損縮放。
在沒有SVG前因為要考慮到適配高清設備，需要切各種倍數的圖標進行適配。不過現在的開發軟件及插件都自帶切多倍圖的功能，比如藍湖。
JPG：兼容性強，自帶背景，不支持縮放。
PNG：支撐透明格式，不支持縮放，需要註意圖標四周透明區域大小。
GIF：簡單的動態圖標使用，透明背景時邊緣會有鋸齒，沒有辦法支持豐富的顏色。
SVG：無損縮放矢量圖形、體積小，單色模式下支持開發自行修改顏色，可修改樣式參數。
另外壹種交付方式是將SVG格式的圖標上傳至類似iconfont的網站後，完成圖標的交付。需要註意的是：
1、SVG不支持漸變顏色填充
2、SVG不支持描邊，需要將描邊轉化為閉合圖像
3、圖標的大小相同時，需要在圖標下方增加壹個相同尺寸的透明方形，同圖標壹起導出上傳
而iconfont對於圖標制作要求嚴格，上傳時需要註意查看自己的圖標是否符合要求。 鏈接
資料來源
UI設計師想做好圖標設計？請問圖標歷史了解過嗎？
圖像學的簡要歷史
《Icon Design Guide》
《Icon Utopia》
《the Ultimate Guide to an Interface Icon Set》
《svg圖標庫以及與icon font對比》