色彩色彩、字體、圖標、圖形形狀、圖像和空間是平面設計中非常重要的六個要素。對於UI設計來說，圖標可以說是整個產品的點睛之筆，它甚至可以直接影響壹個產品的形象和氣質。
顯然，圖標不是界面設計師發明的。作為交流的對象，它們有著悠久而多樣的歷史，並植根於古代。它們出現在地圖、標誌、程序、手冊和許多其他信息來源中。然而，隨著新技術和圖形用戶界面的出現，圖標經歷了壹個新的轉折點。
歷史上，在20世紀70年代初，施樂公司提到了第壹個圖形用戶界面的圖標:該圖標是在壹臺名為Xerox Alto的機器上實現的，該機器非常昂貴，並沒有真正普及到廣大用戶。然而，這只是壹個漫長故事的開始:在1981年，施樂之星發布，這被稱為第壹臺將圖標作為其界面壹部分的消費類計算機。特別是，它應用了迄今為止文件夾和垃圾桶的圖標。以下是20世紀80年代的圖標。
表意圖標（也稱為解釋性圖標）
表意符號是指原本不存在的符號，是在發展過程中創造的符號，用於表達某些特定的含義或操作行為。而且，這些符號在發展過程中逐漸繼承了壹些象形符號的特點，將符號本身視為“實物”並不斷演變。例如，“箭”已經從最初的“弓箭”逐漸衍生成壹種特定的表意符號。
交互式圖標
它具有雙向信息傳輸的能力，不僅可以向用戶傳輸壹些信息，指導他們執行特定的操作，還可以讓用戶向程序傳輸控制信息，這在功能重要性方面是最重要的。例如登錄註冊按鈕、切換按鈕、數量按鈕、喜歡、轉發和分享都是交互圖標。
裝飾和娛樂圖標
它通常用於增強整個界面的美感和深化個性化設計風格，它不具有明顯的功能性。這種圖標迎合了目標受眾的喜好和期望，具有特定的外觀風格，增強了用戶的在線體驗，迎合了受眾的喜好，增強了設計親和力。裝飾圖標通常表現出季節性和周期性特征。例如在線活動、用戶評級、空頁面等。
應用程序圖標
各種操作系統平臺上不同數碼產品的入口和品牌展示的標誌是這種數碼產品的身份象征。在大多數情況下，它會將品牌標誌和品牌顏色集成到圖標設計中。壹些圖標還將使用吉祥物和企業視覺識別顏色的組合。真正優秀的應用程序圖標設計實際上是市場研究和品牌設計的結合，其目標是創建壹個用戶無法在屏幕上快速找到的醒目設計。
象形圖標
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或草圖時，繪制基本圖形時不要有小數點和奇數，而是使用偶數。
我們知道了圖標的基本知識，如何判斷我們的圖標是否合適，是否適合整個產品？我們需要知道什麽是好的圖標。考察標準也是基於我們得出的標準，即:可識別性、規範性、整體風格和品牌感。
判斷事物的價值在於它的用途，圖標的目的是幫助用戶理解信息。因此，準確的表意表達（清晰準確的信息傳遞）是圖標最重要也是最低的價值。如果妳設計了用戶無法理解的圖標，即使視覺效果很美，也沒有任何價值。
意義識別:視覺語言是否取代了書面語言，簡而言之，就是讓妳的圖標對用戶來說是可理解的，而不會引起歧義。常見的標簽條指南針表示發現，房屋表示主頁。
視覺識別:是圖標的大小、顏色和線條粗細，在特定的樣式中影響視覺識別和提高視覺識別。
我們應該確保圖標在視覺尺寸上的壹致性，圖標的飽滿度（正反形狀），遵循相同的規律和細節的統壹性。這裏的四點在之前的繪制過程中已經寫得非常詳細了。
整體風格是要註意圖標傳達的性格是否與app的基調壹致。由於每個產品的定位不同，整個app的基調也因人而異。比如騰訊動漫是壹個喜歡卡通的類型，所以圖標設計也要體現這種性格，盡量用卡通圓角的方法來設計。壹句口號:在復雜的世界裏，壹個就夠了。整個APP從啟動圖標到整體調性都簡潔幹凈，克制的色彩運用傳達了產品的調性。
品牌感意味著我們應該與上面提到的品牌概念保持壹致，並向用戶傳達相同的感受。通過吸收品牌色彩、提取品牌元素和采用品牌吉祥物和品牌圖形提取品牌基因。我們應該嘗試從品牌設計的角度來理解，找到我們產品的獨特品牌氣質並選擇適當的手法。然後將這些元素可視化並整合到界面設計中。以下產品從產品名稱到啟動圖標設計都高度集成。
圖標可用性測試是基本規則，源自圖標驗證。
識別度:
1.用戶能理解圖標的含義嗎？
2.是用戶熟悉的圖標嗎？
3.和其他圖標沖突嗎？
4.妳能通過5秒原則嗎？
5.圖標的可擴展性如何？
6.需要添加文本標簽嗎？
設計統壹嗎？
1.視覺語言統壹嗎？
2.圖標的設計復雜度是否統壹？
3.整體設計在視覺系統上是否協調統壹、高度集中？
4.圖標的整體配色是否統壹？
品牌信息:
圖標是否獨特，能否傳達品牌信息？
壹般來說，有四種交付格式:JPG，PNG，GIF和SVG。其中，JPG、PNG和GIF是位圖，受到圖片本身分辨率的限制，無法靈活修改。SVG是壹種矢量格式，支持無損縮放。
在SVG之前，需要切割各種倍數的圖標以適應高清設備。但是現在的開發軟件和插件都有自己的切割多個圖像的功能，例如blue lagoon。
JPG:兼容性強，自帶背景，不支持縮放。
PNG:支持透明格式，但不支持縮放。註意圖標周圍透明區域的大小。
GIF:使用了簡單的動態圖標。當背景透明時，邊緣將呈鋸齒狀，因此沒有辦法支持豐富的顏色。
SVG:無損縮放矢量圖形，體積小，支持單色模式下顏色的開發和自修改，並且可以修改樣式參數。
另壹種交付方式是將SVG格式的圖標上傳到類似iconfont的網站上，然後完成圖標的交付。應該指出的是:
1，SVG不支持漸變顏色填充。
2.SVG不支持筆畫，因此筆畫需要轉換為閉合圖像。
3.當圖標大小相同時，您需要在圖標下方添加壹個大小相同的透明方塊，並將其與圖標壹起導出並上傳。
另壹方面，Iconfont對圖標制作有嚴格的要求，因此您需要在上傳時註意檢查您的圖標是否符合要求。互連
數據源
UI設計師想做好圖標設計？妳知道圖標的歷史嗎？
圖像學簡史
《圖標設計指南》
《聖像烏托邦》
《界面圖標集終極指南》
Svg徽標庫以及與圖標字體的比較