色彩色彩、字體、圖標、圖形形狀、圖像和空間是平面設計中非常重要的六大要素。對於UI設計來說，圖標可以說是整個產品的點睛之筆，甚至可以直接影響到壹個產品的形象和氣質。
很明顯，圖標不是界面設計師發明的。作為交流的對象，它們有著悠久而多樣的歷史，植根於古代。它們出現在地圖、標誌、程序、手冊和許多其他信息來源中。然而，隨著新技術和圖形用戶界面的出現，圖標經歷了壹個新的轉折點。
歷史上，在20世紀70年代初，施樂公司提到了第壹個圖形用戶界面的圖標:圖標是在壹臺名為施樂Alto的機器上實現的，價格非常昂貴，並沒有真正普及到廣大用戶。然而，這僅僅是壹個漫長故事的開始:1981年，施樂之星發布，被稱為第壹臺將圖標作為界面壹部分的消費電腦。特別是應用了目前為止文件夾和垃圾桶的圖標。這些是20世紀80年代的圖標。
表意圖標(也稱為解釋性圖標)
表意符號是指原本不存在的符號，是在發展過程中創造出來的符號，用來表達某種特定的意義或操作行為。而且這些符號在發展過程中，逐漸繼承了壹些象形符號的特點，把符號本身當作“實物”，不斷進化。例如，“箭”已經從最初的“弓箭”逐漸衍生成壹種特定的表意符號。
交互式圖標
具有雙向信息傳遞的能力，既可以向用戶傳遞壹些信息，指導用戶進行特定的操作，又可以讓用戶向程序傳遞控制信息，這在功能重要性上是最重要的。比如登錄註冊按鈕，切換按鈕，數量按鈕，喜歡，轉發，分享都是交互圖標。
裝飾和娛樂圖標
通常用於提升整個界面的美感，深化個性化的設計風格，不具備明顯的功能性。這種圖標迎合了目標受眾的喜好和期望，具有特定的外觀風格，提升了用戶的在線體驗，迎合了受眾的喜好，增強了設計的親和力。裝飾圖標通常顯示季節性和周期性特征。如在線活動、用戶評分、空頁面等。
應用程序圖標
各種操作系統平臺上不同數碼產品的入口和品牌展示的logo，就是這個數碼產品的身份象征。在大多數情況下，它會將品牌標誌和品牌顏色融入圖標設計中。壹些圖標也將使用吉祥物和公司視覺識別顏色的組合。真正優秀的應用圖標設計，其實是市場調研和品牌設計的結合，其目標是創造出用戶在屏幕上無法快速找到的醒目設計。
象形圖標
Ios在相當長的壹段時間內流行“Skeumorphic設計理念”，屬於超寫實設計。相信只要能在應用上增加實用和物理的緯度，越是與現實相似，越是與操作相同，用戶就越容易理解操作方式，接受度也就越高。比如日本富士山這個著名的圖標，說明好的設計不僅僅是美觀，更是功能性的，尤其是與旅遊相關的設計，需要人們跨越語言的障礙。
隱喻圖標
icon中的隱喻元素很重要，可以讓我們壹看到這個圖標就知道它的意思。例如，房子代表主頁，叉代表錯誤或關閉。當我縮小壹個圖標時，我總是保留隱喻的元素，以確保圖標仍然能夠準確地傳達信息。
工具圖標
主要按行業類別分類，應用廣泛，公眾或業內人士認可度高，使用時間長。比如:建築行業，醫療行業，化工行業等等。
混合圖標
也就是說，前三者的結合是為了達到不同的視覺效果和應用結構。前段時間流行的MBE粗筆畫風格圖標，是綜合圖標的產物，多表現設計者的個人設計風格，或者適用於某種設計感很強的軟件。
字符圖標
“字形”壹詞來源於排版領域，如今隨著數碼設計的發展，它也逐漸在數碼設計領域生根發芽。它來自希臘語，意思是“雕塑”。在排版領域，符號圖標通常是壹種具有特定意義和功能的書寫系統，可以表意和書寫。它可以是字母、圖形，有時甚至是兩者的組合。
在這種圖標設計中，天氣圖標是比較典型的壹種。從單壹圖標到組合圖標，都能充分體現。
平面圖標
平面圖標包括直線、平面、直線+平面和平面+平面。多樣化、可擴展、更個性化、更年輕化的圖標，在設計風格相同的情況下，改變顏色後可以反映和傳達不同的信息。
擬物化圖標
擬物化圖標是平面圖標的對立面，就像擬物化圖標的設計者常說的，它是“復制現實”，試圖將現實世界中的形狀、紋理、光影融入到整個圖標的設計中，這是它的特點。準物化圖標的設計趨勢幾乎是伴隨著Macintosh的誕生和演變壹步步走過來的，然後從UI設計領域被扁平化設計所取代。但是，準物化圖標仍然廣泛應用於不同領域，尤其是遊戲設計和遊戲產品的圖標設計。2.5D圖標和桌面應用程序圖標。
Windows、iOS等。，中文版，英文版甚至各種語言版，打開菜單之前基本都是壹樣的。很多圖標很快被大多數用戶認可，甚至成為國際圖標。比如Windows UI。
當壹個圖標可以清晰地表達其含義時，只需要占據壹個字符的位置就可以向用戶傳遞操作信息。比如郵件掃描後發送成功，用副本表示需要3-4個字，英文或其他語言可能更長，但用圖標代替只需要壹個字符位置。
支付寶右上角的+表示更多功能，此時壹個字符位置說明其含義清晰；微信下壹個類似的聲波圖標代表語音，直觀易懂。
進入碎片化時代，讀圖幾乎是同壹個節奏。圖片內容可以在短時間內產生較大的影響力。研究表明，大腦處理圖片內容的速度比處理文本內容的速度快60000倍，人腦對圖形和圖像的記憶遠遠好於文本。所以在推廣品牌的時候，圖片內容可以說是壹張圖勝過千言萬語。使用圖標通過視覺引導幫助用戶快速識別信息。
沒有任何關於Tik Tok和ins的書面解釋，我們知道第五個標簽是個人中心。
科學證明，大腦中與視覺信息處理相關的腦區相對於其他感官是占優勢的，人腦對圖像的記憶遠高於對文字的記憶。圖標大多使用幾何圖形，並以對稱和壹致的設計目標進行設計。由於其高度集中的特點，圖標更加簡潔，更容易記憶。
圖標的最底層邏輯:線性圖標、平面圖標、線+平面圖標、平面+平面圖標、2.5D圖標、準物體圖標。網上的各種圖標都是在這些基礎上進行視覺區分的，設計圖標時需要思考。
1，產品視覺風格定位(行業領域)
2、圖標特定的應用界面
3.產品的用戶人群是什麽？
先看壹組風格不同的圖標。從上面不同的APP圖標可以看出，不同的行業，不同的場景，不同的用戶，圖標的設計和表達是不壹樣的，所以妳在設計之前需要思考，妳需要表達的設計思路，產品的定位。
1，反匯編關鍵字和關鍵字關聯
把需求信息中的關鍵詞拆解分散，變成生活中常見的東西，釋放它所代表的內在意義。同義詞、近義詞、具有相關形狀的對象或關鍵字的相關關聯。
比如說到榮譽，妳馬上就能想到獎杯、證書、金牌、皇冠等等。然後通過這些詞的聯想，找壹些氣質相同的圖片做壹個情感版，通過它妳可以感受到產品的調性，然後提取壹些形狀和顏色作為產品圖標的主要形狀。
2、根據關鍵字關聯輸出圖形。
根據上壹步拆解的文字或物體，通過簡單的基本形狀，轉化為生活中常見的圖形。常用的2合2方法是用AI鋼筆工具(草圖貝塞爾工具)或者布爾運算來畫。
3、根據場景輸出
這裏的場景可能是實際應用場景，比如大眾點評標簽欄、功能區(分類區)、操作圖標等等，需要引導用戶點擊，所以視覺上更豐富；而個人中心、分類區、詳情頁更註重功能引導，相對簡單，屬於二次使用場景，線狀圖標較多。
常見圖標文章分析要註意十點，但是這些沒有規律和邏輯很難記住，而且壹旦記住就容易忘記。這些總結實際上來源於材料設計或iOS規範。如果妳仔細研究這些細節，制作圖標並不難。
圖標端點分為直角和圓角。我們應該統壹圖標端點，在設計過程中保持壹致的設計語言。
角落
與其他圖形相比，人眼更容易識別圓角矩形而不是直角矩形，因為中央凹(視網膜中最敏感的視覺區域)處理圓形最快，而處理矩形邊緣則需要大腦中更多的“神經成像工具”。因此，人眼更容易處理圓角，因為它們看起來比普通的矩形更接近圓形。
魚片本身的圓潤會給人壹種圓潤、可愛、更安全、更貼心的感覺。所以社交、娛樂、直播、美食等圖標都會使用圓角圖標。
直角會給人壹種犀利逼人的感覺，圖標整體細節較多，通常出現在金融等業務屬性較強的產品中。比如:36Kr，金融產品等等。
均勻傾斜角
內部空間比例的不壹致很容易導致圖標視覺焦點的不壹致。如下圖所示，左邊第二個圖標略低，第四個圖標重心較高。右邊是早期PP助手的標簽欄圖標，圖標內部同樣百分比的鏤空區域，整體視覺和諧統壹。
畫筆畫圖標時，要時刻註意圖標的筆畫粗細是否均勻。在@1x的設計模式下，如果以24px作為網格基準，常用的圖標粗細有:1px、1.5px、2px、3px、1.5，這就需要更高的顯示屏(半個單位的路徑會導致圖標最終顯示時邊緣模糊不清)。
細筆畫給人更精致的視覺感，粗筆畫相對粗糙。由於當前流行趨勢的發展，經常會出現粗筆畫和細筆畫相結合的設計風格。
除了保持相同的視覺重量外，圖標的筆畫寬度也應保持壹致，以實現像素級的統壹。元素之間的最小間距應大於或等於筆畫寬度。
蘋果、谷歌、IBM、國內阿裏螞蟻設計都發布了相關的圖標網格規範。這裏用谷歌的物質系統圖標網格來說明。在24*24px的圖標尺寸中，上、下、左、右安全余量為2px，關鍵形狀的四種基本形狀為圓形20*20px，正方形18*18px，垂直矩形和水平矩形20*16px。通過關鍵形狀的規則統壹圖標的大小和位置，達到視覺平衡。
對齊像素點
銳度(完美的像素對齊)為了避免圖標扭曲，可以通過將X軸和Y軸坐標設置為整數來定位圖標在像素上的位置。使用軟件AI或素描時，畫基本圖形時不要有小數點和奇數，要用偶數。
我們知道了icon的基本知識，如何判斷我們的icon是否合適，是否適合整個產品？我們需要知道什麽是好的圖標。檢驗標準也是基於我們得出的標準，即:可識別性、規範性、整體風格、品牌感。
判斷事物的價值在於它是用來做什麽的，圖標的目的是幫助用戶理解信息。所以準確的表意表達(清晰準確的信息傳遞)是圖標最重要也是價值最低的。如果設計出用戶看不懂的圖標，即使視覺很美，也沒有任何價值可言。
意義識別:視覺語言是否取代書面語言，簡而言之，就是讓妳的圖標讓用戶看得懂，又不會造成歧義。普通標簽條指南針表示發現，房子表示主頁。
視覺識別:是圖標的大小、顏色、線條粗細，影響視覺識別，在特定風格下提高視覺識別。
要保證圖標在視覺尺寸上的壹致性，圖標的豐滿度(正反形狀)，遵循同壹規律和細節的統壹性。這裏的四點在之前的繪圖過程中已經寫的很詳細了。
整體風格是要註意圖標所傳達的性格是否與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設計師想做好圖標設計？妳知道圖標的歷史嗎？
圖像學簡史
《圖標設計指南》
《偶像烏托邦》
《界面圖標集終極指南》
Svg徽標庫以及與圖標字體的比較