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

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

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

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

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

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

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

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

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

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

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

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

配置按鈕組

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

按鈕組的類型
按鈕組分為標準按鈕組和聯(lián)動按鈕組。

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

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

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

如何使用按鈕組

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

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

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

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

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

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

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

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

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

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

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

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

所選按鈕應改變形狀以實現(xiàn)視覺區(qū)分。
選定的按鈕應從圓形變?yōu)榉叫?或從方形變?yōu)閳A形。

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

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

綜上所述

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

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

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

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

第二：增強設計素材的統(tǒng)一性

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

我們這次做的圖標分別為：通知、商城、發(fā)現(xiàn)、我的。

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

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

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

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

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

第二：增強設計素材的統(tǒng)一性

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

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

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

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

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

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

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

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

我們在放適當?shù)陌b一下：

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

效果還是提升很大的！

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

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