在 UI 設計的視覺體系中，圖標是傳遞信息的視覺語言，更是彰顯產品個性的關鍵元素。一枚富有設計感的圖標，既能降低用戶認知成本，又能讓產品在同類競品中脫穎而出。今天，我們就結合實用設計技巧與行業趨勢，帶大家走進 UI 圖標的創作世界，同時聊聊 UI 設計師的職業發展路徑。

游戲 UI 設計的核心不是 “畫面精致”，而是 “信息傳遞高效”。設計師在交付前可自查三個問題：是否考慮了信息的所有變量？復雜內容是否足夠易懂？設計能否適配所有使用情景？只有兼顧美觀與實用性，才能讓 UI 真正服務于游戲體驗。

從 1973 年第一代圖形用戶界面誕生至今，圖標已從簡單的功能符號，演變為 UI 設計中 “無聲的交互語言”。它既是用戶快速識別功能的 “導航標”，也是提升產品質感的 “視覺名片”。想要掌握圖標設計的精髓，無需復雜理論，只需理清其發展邏輯、設計原則與落地方法 —— 以下 8 大核心模塊，帶你系統吃透圖標設計。

在 UI 設計和圖標開發中，我們常常遇到一個讓人困惑的問題：
明明兩個圖標尺寸一樣，為什么看起來一個大一個小？
這就是「視覺大小」和「實際大小」不一致所引發的經典設計挑戰。
 這篇文章將帶你了解其中的原理，并分享一些實操方法，幫你設計出視覺協調、統一專業的圖標。

---
一、為什么視覺大小 ≠ 實際大??？
在設計中，「實際大小」是指圖標在畫布上的像素尺寸，而「視覺大小」是指人眼感知到的圖形體積或重量感。這兩者之所以不一致，主要有以下幾個原因：
1. 圖形形狀對視覺感知的影響
不同形狀對人眼的“占據感”不同：
- 圓形、橢圓形：邊界柔和，看起來比實際尺寸??；
- 尖角圖形：具有延伸感，看起來更“張揚”；
- 封閉 vs. 開放圖形：封閉圖形更“緊湊”，視覺重心靠內；開放圖形更“輕”，容易被忽視。
舉例說明：一個 24x24 的正方形圖標和一個 24x24 的圓形圖標放在一起，圓形常常顯得更小。
2. 視覺重心偏移
圖標的視覺重心不是幾何中心：
- 有些圖標上方留白較多，若嚴格居中，整體會顯得“偏下”；
- 有些圖標線條向一側偏移，也會影響視覺穩定性。
3. 顏色、線條粗細的錯覺
- 顏色明亮的圖標通?？雌饋砀?；
- 線條較細的圖標會顯得“輕”或“空”；
- 相同尺寸下，深色圖標比淺色圖標更具“存在感”。

---
二、如何實現圖標的視覺統一？
4. 關注“視覺等值”而非“尺寸一致”
優秀的圖標設計不會追求數值上完全一致，而是讓圖標“看起來”一樣大。這就需要設計師具備一定的視覺判斷力和對比經驗。
5. 使用統一的對齊原則
- 每個圖標放在相同的畫布尺寸（如 24×24、48×48）中；
- 保證主圖形部分在視覺上居中，而非僅僅坐標居中；
- 調整視覺重心，讓圖標看起來平衡、不傾斜。
6. 使用光學微調
所謂「光學對齊」，就是打破機械對齊規則，讓視覺更舒服：
暫時無法在飛書文檔外展示此內容
7. 放在真實場景中預覽
設計圖標時，建議不要孤立操作，而是：
- 放入實際使用場景（如按鈕、導航欄）；
- 對比多個圖標在一組中是否協調；
- 測試在不同設備分辨率下的適配情況。

---
三、圖標設計實操建議
以下是一些日常圖標設計中實用的技巧和判斷標準：
暫時無法在飛書文檔外展示此內容

視覺大小與實際大小的偏差，是每一位圖標設計師都會經歷的學習過程。
 真正優秀的設計不是追求數值一致，而是注重 用戶感受的和諧統一。
圖標設計的細節感，往往藏在你“感覺不舒服但又說不出哪里不對”的那一刻。
理解視覺感知，訓練視覺判斷力，才是做出專業、協調圖標系統的關鍵。

蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan

UI 界面圖標設計的 10 個關鍵細節：使用光柵框架確保圖標視覺重量一致，設計時注意像素網格重要性、優先 2 像素邊框，從最復雜圖標開始設計以保持細節層次統一，控制相鄰元素最小間隙、避免輪廓 “粘滯”，去除重復圖形元素以簡化設計，保持圖標風格（如角度、線性 / 填充）一致，基于 8 像素網格等二倍數度量系統設計，確保輪廓節點對齊、尺寸為整數，清理 SVG 代碼中的冗余圖層，同時強調這些建議需靈活應用而非刻板遵循。

按鈕組(ButtonGroup)是一個將多個按鈕以可視化的方式組合在在一起的組件,幫助用戶快速識別并操
作相關操作。在M3Expressive中,按鈕組通過增強按鈕間的交互、布局適配以及層級表現力,提升
了界面的靈活性。

為什么要分組按鈕?
現有的按鈕只是簡單地并排放置,缺乏任何鏈接交互或按鈕之間的視覺統一。
拼中人。簡單
Co
在Material3中,我們將按鈕組定義為獨立的組件,以實現更豐富的表現力和自適應的布局,并提出
了一種名為Connected Button Group的新形式來取代Segmentted Button的作用。
本文我們將了解新增按鈕組的功能和使用方法。如果您想了解更多關于Expressive新增的Split Button

配置按鈕組

容器
按鈕組可以包含各種元素,例如圖標、文本按鈕等,但其核心概念是"容器",它是一種更高級的結構,
包裹著這些元素并控制其布局和交互。因此,將按鈕組理解為一個充當按鈕容器的容器,而不是按鈕的
集合,似乎更準確。

按鈕組的類型
按鈕組分為標準按鈕組和聯動按鈕組。

標準按鈕組
使用標準按鈕組將獨立的操作按鈕并排放置。
每個按鈕都保持圓潤的形狀,并且按鈕之間有一定的間距。在此組中,選定的按鈕可以改變寬度或形
狀,并且這種變化通常會影響相鄰的按鈕。整個按鈕組被設計:為一個有機的整體。
一般適合展現保存、取消、刪除等主要操作,并且按鈕的大小和樣式根據上下文靈活調整。

鏈接按鈕組
連接按鈕組是一種主要用于允許選擇多個選項的組件?，F有的分段按鈕將被連接按鈕組取代。
按鈕之間物理連接、共享邊框或以一致的高度和寬度對齊。用戶可以選擇一個或多個按鈕,并且只有選中的按鈕會在視覺上突出顯示。這種設計可以有效地傳過達清晰的選擇狀態,而不會影響其他按鈕。

它主要用于替代分段按鈕的作用,例如過濾、視圖切換和排序選項。

如何使用按鈕組

按鈕組使您的產品更具表現力。
標準按鈕組增加了相鄰按鈕之間的交互,使它們相互響應。選擇標準組內的按鈕時,會發生以下變化:
所選按鈕的形狀和寬度將會改變。
選定的切換按鈕也會改變顏色。
相鄰的按鈕移動并暫時改變寬度。

僅在重要的交互時使用形狀變化。
您可以使用不同的按鈕類型、寬度和顏色組合來強調重要元素,并在視覺上對相關按鈕進行分組。默認
情況下,標準按鈕組中的所有按鈕應具有相同的尺寸(XS到XL)和形狀(圓形或方形)。
·只有在英雄時刻,您才應該在群體中使用不同尺寸。
?混合尺寸并不常用。
僅當選擇按鈕或需要添加含義或對比時才應使用不同的形狀。
區當選擇這邊以而安添加古文現對比的才應使用個問的形狀。

可以使用一組鏈接的按鈕在類似的操作之間切換。
鏈接按鈕組可幫助用戶選擇選項、切換視圖或對齊頁面上的元素。它們的行為與標準按鈕組類似,但不
會影響相鄰的按鈕。鏈接按鈕組應取代已棄用的分段按鈕。

如果按鈕內容彼此關聯且可選,請使用鏈接按鈕組。在購物應用中,鏈接按鈕組用于選擇商品的容量,
因此,密切相關的操作在鏈接按鈕組中效果更佳。

使用一組鏈接按鈕來實現單選或多選模式。
對于使用切換按鈕的單選或多選模式,應使用鏈接按鈕組。如果所有按鈕均不可切換,則不應使用鏈接
按鈕組。

一組鏈接按鈕被配置為填充其所在頁面或區域的寬度,這會導致內部按鈕的寬度也隨之增加。在寬屏
上,建議設置最大寬度,以防止按鈕組過寬。

可以根據窗口大小手動調整按鈕的寬度、大小和填充。
按鈕組應在布局中移動到一行,并且不應換行。您可以垂直堆疊多個按鈕組,以使項目保持緊密排列,
但按鈕組之間不能進行垂直交互。

手動調整圖標按鈕的寬度時,避免將其拉伸得太寬。

您還可以根據窗口大小手動調整一組按鈕的大小、形狀和填充。
在小窗口中,最好使用較小、較窄的按鈕來容納按鈕組中的所有按鈕,而在較大的屏幕上,最好使用較
大、較寬的按鈕來有效地填充可用空間。
靈活按鈕或按鈕組會根據窗口大小自動調整其寬度。

必須在布局和設備之間保持一致的層次結構。
當窗口變大時,您應該利用顏色和大小等屬性來確保每個按鈕保持其視覺層次。例如,主要操作按鈕在
所有窗口尺寸下都應保持最大、最寬且視覺上最突出。

根據屏幕的大小,按鈕應該在榮單中隱藏或重新顯示。
在小窗口中,您可以將按鈕組末尾的按鈕設置為折疊成榮單,然后在窗口大小增加時重新顯示。建議將
榮單放置在按鈕組的末尾。按鈕組外部的按鈕不受按鈕組行為的影響。

在標準組中,當您按下一個按鈕時,相鄰的按鈕也會改變寬度...
按下按鈕時,其寬度和形狀會發生變化。在標準按鈕組中,按皮下按鈕也會影響相鄰按鈕的寬度。相比之
下,在鏈接按鈕組中,只有按下的按鈕會改變形狀,其他按鈕丑不受影響。

所選按鈕應改變形狀以實現視覺區分。
選定的按鈕應從圓形變為方形,或從方形變為圓形。

鏈接按鈕組和分段按鈕之間有什么區別?
雖然兩者的功能相同,但可以說它們被納入了一個按鈕組,以實現富有表現力的交互。

鏈接到現有分段按鈕的一組按鈕。
分段按鈕也允許單選或多選,但其配置相對固定,并且視覺呈現受到限制。
鏈接按鈕組在調整按鈕的大小、顏色和形狀方面提供了更大的靈活性,其視覺交互也得到了增強,例如
根據選擇狀態改變形狀。按鈕以連接形式排列,并且只有選中的按鈕才會在視覺上突出顯示,從而提供
清晰的反饋。
Expressive在這種靈活性和表現力的基礎上,逐漸減少分段按鈕的的使用,轉而采用鏈接按鈕組作為替
代。

綜上所述

按鈕組是實用的組件,能夠直觀地將相關操作分組,并為用戶提供清晰的上下文。它們旨在直觀地展示
按鈕之間的關系,并根據屏幕尺寸或具體情況靈活操作,從而在不同界面上提供一致的體驗。標準按鈕
組有利于實現交互和層級結構,而鏈接按鈕組則有利于清晰的選擇結構。然而,形狀、尺寸設置以及響
應式設計需要精細的設計。
Material3取代了現有的分段按鈕,并提出將一組按鈕作為獨立組件,以實現富有表現力的UI組合。
這種設計超越了簡單的按鈕排列,全面考慮了交互、布局和層級,指明了提升整個產品一致性和可用性
的方向。

?“三維圖標設計寶典” 方法論，強調從前期構思（分析競品如馬蜂窩與本品飛豬的圖標類型、配色、風格及核心辨識點，通過關鍵詞腦暴鎖定 “品質、活力、青春” 方向并產出情緒版）、繪制圖標（具象功能、簡化結構、確定基本形，融入飛豬品牌超級符號，添加毛玻璃質感等細節）到走查圖標（從辨識度、統一性、美感度、差異化四方面檢查，如類型、風格、體量感統一，融入品牌符號增強差異化）的完整流程，助設計師提升過稿率。

你只需要做三件事情，就可以讓你做出足夠優秀的作品

第一：找到合適的圖標素材

第二：增強設計素材的統一性

第三：給設計素材加入自己的想法

我們這次做的圖標分別為：通知、商城、發現、我的。

第一：找到合適的圖標素材

我就拿最常用的阿里巴巴圖標庫，打開網址，找通知圖標，直接下載第一頁，第 1 排第 2 個：

接下來是商城圖標，繼續搜索商城，我們選用第一頁，第 2 排第 2 個：

相同的方式，我們找到以下四個圖標的原始素材：

這里面我們需要注意，在找素材的時候，你至少需要找到一兩個不太一樣的圖標，否則整體就會比較普通，我們現在這樣看上去，第四個“我的”圖標，相對來說不一樣一點，至少沒那么常見：

第二：增強設計素材的統一性

有了素材之后，我們首先要讓他們看起來是一套的，所以在統一性上需要優化，先優化大小和線條粗細：

大小和粗細優化完之后，我們再優化下圓角統一性，現在很明顯，只有第二個圖標是圓潤的，其他的都是有點硬朗的，可以進行統一下：

直角圓角統一了之后，還有一個統一性就是斷線，只有第二個沒有斷開的設計，所以我們再把商城進行斷線處理：

第三：給設計素材加入自己的想法

大家要明白，雖然我們可以直接下載圖標素材，而且可以通過審美讓他們變得相對精致統一，但素材畢竟還是通用的，我們還是需要融入自己的想法和設計，不能完全依賴素材，舉一個最簡單的例子，“我的”這個圖標，他的腦袋是圓形的，那我們是不是可以把他改成矩形的？

比如一些細節的調整，像通知圖標，感覺有點禿，是不是可以讓中間伸出一點寬度來：

細微調整之后，如果覺得還不夠，我們還可以繼續添加新的設計語言，比如增加配色點綴：

就這樣，這幾個圖標，漸漸的就成為了你自己的作品！

我們在放適當的包裝一下：

我們再對比一下原始的素材：

效果還是提升很大的！

所以，做任何事情，一定要講究方法，不能死腦筋，否則進步就很慢。

歡迎關注作者的微信公眾號：「菜心設計鋪」