在 UI 设计的视觉体系中，图标是传递信息的视觉语言，更是彰显产品个性的关键元素。一枚富有设计感的图标，既能降低用户认知成本，又能让产品在同类竞品中脱颖而出。今天，我们就结合实用设计技巧与行业趋势，带大家走进 UI 图标的创作世界，同时聊聊 UI 设计师的职业发展路径。

游戏 UI 设计的核心不是 “画面精致”，而是 “信息传递高效”。设计师在交付前可自查三个问题：是否考虑了信息的所有变量？复杂内容是否足够易懂？设计能否适配所有使用情景？只有兼顾美观与实用性，才能让 UI 真正服务于游戏体验。

从 1973 年第一代图形用户界面诞生至今，图标已从简单的功能符号，演变为 UI 设计中 “无声的交互语言”。它既是用户快速识别功能的 “导航标”，也是提升产品质感的 “视觉名片”。想要掌握图标设计的精髓，无需复杂理论，只需理清其发展逻辑、设计原则与落地方法 —— 以下 8 大核心模块，带你系统吃透图标设计。

在 UI 设计和图标开发中，我们常常遇到一个让人困惑的问题：
明明两个图标尺寸一样，为什么看起来一个大一个小？
这就是「视觉大小」和「实际大小」不一致所引发的经典设计挑战。
 这篇文章将带你了解其中的原理，并分享一些实操方法，帮你设计出视觉协调、统一专业的图标。

---
一、为什么视觉大小 ≠ 实际大小？
在设计中，「实际大小」是指图标在画布上的像素尺寸，而「视觉大小」是指人眼感知到的图形体积或重量感。这两者之所以不一致，主要有以下几个原因：
1. 图形形状对视觉感知的影响
不同形状对人眼的“占据感”不同：
- 圆形、椭圆形：边界柔和，看起来比实际尺寸小；
- 尖角图形：具有延伸感，看起来更“张扬”；
- 封闭 vs. 开放图形：封闭图形更“紧凑”，视觉重心靠内；开放图形更“轻”，容易被忽视。
举例说明：一个 24x24 的正方形图标和一个 24x24 的圆形图标放在一起，圆形常常显得更小。
2. 视觉重心偏移
图标的视觉重心不是几何中心：
- 有些图标上方留白较多，若严格居中，整体会显得“偏下”；
- 有些图标线条向一侧偏移，也会影响视觉稳定性。
3. 颜色、线条粗细的错觉
- 颜色明亮的图标通常看起来更大；
- 线条较细的图标会显得“轻”或“空”；
- 相同尺寸下，深色图标比浅色图标更具“存在感”。

---
二、如何实现图标的视觉统一？
4. 关注“视觉等值”而非“尺寸一致”
优秀的图标设计不会追求数值上完全一致，而是让图标“看起来”一样大。这就需要设计师具备一定的视觉判断力和对比经验。
5. 使用统一的对齐原则
- 每个图标放在相同的画布尺寸（如 24×24、48×48）中；
- 保证主图形部分在视觉上居中，而非仅仅坐标居中；
- 调整视觉重心，让图标看起来平衡、不倾斜。
6. 使用光学微调
所谓「光学对齐」，就是打破机械对齐规则，让视觉更舒服：
暂时无法在飞书文档外展示此内容
7. 放在真实场景中预览
设计图标时，建议不要孤立操作，而是：
- 放入实际使用场景（如按钮、导航栏）；
- 对比多个图标在一组中是否协调；
- 测试在不同设备分辨率下的适配情况。

---
三、图标设计实操建议
以下是一些日常图标设计中实用的技巧和判断标准：
暂时无法在飞书文档外展示此内容

视觉大小与实际大小的偏差，是每一位图标设计师都会经历的学习过程。
 真正优秀的设计不是追求数值一致，而是注重 用户感受的和谐统一。
图标设计的细节感，往往藏在你“感觉不舒服但又说不出哪里不对”的那一刻。
理解视觉感知，训练视觉判断力，才是做出专业、协调图标系统的关键。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan

UI 界面图标设计的 10 个关键细节：使用光栅框架确保图标视觉重量一致，设计时注意像素网格重要性、优先 2 像素边框，从最复杂图标开始设计以保持细节层次统一，控制相邻元素最小间隙、避免轮廓 “粘滞”，去除重复图形元素以简化设计，保持图标风格（如角度、线性 / 填充）一致，基于 8 像素网格等二倍数度量系统设计，确保轮廓节点对齐、尺寸为整数，清理 SVG 代码中的冗余图层，同时强调这些建议需灵活应用而非刻板遵循。

按钮组(ButtonGroup)是一个将多个按钮以可视化的方式组合在在一起的组件,帮助用户快速识别并操
作相关操作。在M3Expressive中,按钮组通过增强按钮间的交互、布局适配以及层级表现力,提升
了界面的灵活性。

为什么要分组按钮?
现有的按钮只是简单地并排放置,缺乏任何链接交互或按钮之间的视觉统一。
拼中人。简单
Co
在Material3中,我们将按钮组定义为独立的组件,以实现更丰富的表现力和自适应的布局,并提出
了一种名为Connected Button Group的新形式来取代Segmentted Button的作用。
本文我们将了解新增按钮组的功能和使用方法。如果您想了解更多关于Expressive新增的Split Button

配置按钮组

容器
按钮组可以包含各种元素,例如图标、文本按钮等,但其核心概念是"容器",它是一种更高级的结构,
包裹着这些元素并控制其布局和交互。因此,将按钮组理解为一个充当按钮容器的容器,而不是按钮的
集合,似乎更准确。

按钮组的类型
按钮组分为标准按钮组和联动按钮组。

标准按钮组
使用标准按钮组将独立的操作按钮并排放置。
每个按钮都保持圆润的形状,并且按钮之间有一定的间距。在此组中,选定的按钮可以改变宽度或形
状,并且这种变化通常会影响相邻的按钮。整个按钮组被设计:为一个有机的整体。
一般适合展现保存、取消、删除等主要操作,并且按钮的大小和样式根据上下文灵活调整。

链接按钮组
连接按钮组是一种主要用于允许选择多个选项的组件。现有的分段按钮将被连接按钮组取代。
按钮之间物理连接、共享边框或以一致的高度和宽度对齐。用户可以选择一个或多个按钮,并且只有选中的按钮会在视觉上突出显示。这种设计可以有效地传过达清晰的选择状态,而不会影响其他按钮。

它主要用于替代分段按钮的作用,例如过滤、视图切换和排序选项。

如何使用按钮组

按钮组使您的产品更具表现力。
标准按钮组增加了相邻按钮之间的交互,使它们相互响应。选择标准组内的按钮时,会发生以下变化:
所选按钮的形状和宽度将会改变。
选定的切换按钮也会改变颜色。
相邻的按钮移动并暂时改变宽度。

仅在重要的交互时使用形状变化。
您可以使用不同的按钮类型、宽度和颜色组合来强调重要元素,并在视觉上对相关按钮进行分组。默认
情况下,标准按钮组中的所有按钮应具有相同的尺寸(XS到XL)和形状(圆形或方形)。
·只有在英雄时刻,您才应该在群体中使用不同尺寸。
?混合尺寸并不常用。
仅当选择按钮或需要添加含义或对比时才应使用不同的形状。
区当选择这边以而安添加古文现对比的才应使用个问的形状。

可以使用一组链接的按钮在类似的操作之间切换。
链接按钮组可帮助用户选择选项、切换视图或对齐页面上的元素。它们的行为与标准按钮组类似,但不
会影响相邻的按钮。链接按钮组应取代已弃用的分段按钮。

如果按钮内容彼此关联且可选,请使用链接按钮组。在购物应用中,链接按钮组用于选择商品的容量,
因此,密切相关的操作在链接按钮组中效果更佳。

使用一组链接按钮来实现单选或多选模式。
对于使用切换按钮的单选或多选模式,应使用链接按钮组。如果所有按钮均不可切换,则不应使用链接
按钮组。

一组链接按钮被配置为填充其所在页面或区域的宽度,这会导致内部按钮的宽度也随之增加。在宽屏
上,建议设置最大宽度,以防止按钮组过宽。

可以根据窗口大小手动调整按钮的宽度、大小和填充。
按钮组应在布局中移动到一行,并且不应换行。您可以垂直堆叠多个按钮组,以使项目保持紧密排列,
但按钮组之间不能进行垂直交互。

手动调整图标按钮的宽度时,避免将其拉伸得太宽。

您还可以根据窗口大小手动调整一组按钮的大小、形状和填充。
在小窗口中,最好使用较小、较窄的按钮来容纳按钮组中的所有按钮,而在较大的屏幕上,最好使用较
大、较宽的按钮来有效地填充可用空间。
灵活按钮或按钮组会根据窗口大小自动调整其宽度。

必须在布局和设备之间保持一致的层次结构。
当窗口变大时,您应该利用颜色和大小等属性来确保每个按钮保持其视觉层次。例如,主要操作按钮在
所有窗口尺寸下都应保持最大、最宽且视觉上最突出。

根据屏幕的大小,按钮应该在荣单中隐藏或重新显示。
在小窗口中,您可以将按钮组末尾的按钮设置为折叠成荣单,然后在窗口大小增加时重新显示。建议将
荣单放置在按钮组的末尾。按钮组外部的按钮不受按钮组行为的影响。

在标准组中,当您按下一个按钮时,相邻的按钮也会改变宽度...
按下按钮时,其宽度和形状会发生变化。在标准按钮组中,按皮下按钮也会影响相邻按钮的宽度。相比之
下,在链接按钮组中,只有按下的按钮会改变形状,其他按钮丑不受影响。

所选按钮应改变形状以实现视觉区分。
选定的按钮应从圆形变为方形,或从方形变为圆形。

链接按钮组和分段按钮之间有什么区别?
虽然两者的功能相同,但可以说它们被纳入了一个按钮组,以实现富有表现力的交互。

链接到现有分段按钮的一组按钮。
分段按钮也允许单选或多选,但其配置相对固定,并且视觉呈现受到限制。
链接按钮组在调整按钮的大小、颜色和形状方面提供了更大的灵活性,其视觉交互也得到了增强,例如
根据选择状态改变形状。按钮以连接形式排列,并且只有选中的按钮才会在视觉上突出显示,从而提供
清晰的反馈。
Expressive在这种灵活性和表现力的基础上,逐渐减少分段按钮的的使用,转而采用链接按钮组作为替
代。

综上所述

按钮组是实用的组件,能够直观地将相关操作分组,并为用户提供清晰的上下文。它们旨在直观地展示
按钮之间的关系,并根据屏幕尺寸或具体情况灵活操作,从而在不同界面上提供一致的体验。标准按钮
组有利于实现交互和层级结构,而链接按钮组则有利于清晰的选择结构。然而,形状、尺寸设置以及响
应式设计需要精细的设计。
Material3取代了现有的分段按钮,并提出将一组按钮作为独立组件,以实现富有表现力的UI组合。
这种设计超越了简单的按钮排列,全面考虑了交互、布局和层级,指明了提升整个产品一致性和可用性
的方向。

 “三维图标设计宝典” 方法论，强调从前期构思（分析竞品如马蜂窝与本品飞猪的图标类型、配色、风格及核心辨识点，通过关键词脑暴锁定 “品质、活力、青春” 方向并产出情绪版）、绘制图标（具象功能、简化结构、确定基本形，融入飞猪品牌超级符号，添加毛玻璃质感等细节）到走查图标（从辨识度、统一性、美感度、差异化四方面检查，如类型、风格、体量感统一，融入品牌符号增强差异化）的完整流程，助设计师提升过稿率。

你只需要做三件事情，就可以让你做出足够优秀的作品

第一：找到合适的图标素材

第二：增强设计素材的统一性

第三：给设计素材加入自己的想法

我们这次做的图标分别为：通知、商城、发现、我的。

第一：找到合适的图标素材

我就拿最常用的阿里巴巴图标库，打开网址，找通知图标，直接下载第一页，第 1 排第 2 个：

接下来是商城图标，继续搜索商城，我们选用第一页，第 2 排第 2 个：

相同的方式，我们找到以下四个图标的原始素材：

这里面我们需要注意，在找素材的时候，你至少需要找到一两个不太一样的图标，否则整体就会比较普通，我们现在这样看上去，第四个“我的”图标，相对来说不一样一点，至少没那么常见：

第二：增强设计素材的统一性

有了素材之后，我们首先要让他们看起来是一套的，所以在统一性上需要优化，先优化大小和线条粗细：

大小和粗细优化完之后，我们再优化下圆角统一性，现在很明显，只有第二个图标是圆润的，其他的都是有点硬朗的，可以进行统一下：

直角圆角统一了之后，还有一个统一性就是断线，只有第二个没有断开的设计，所以我们再把商城进行断线处理：

第三：给设计素材加入自己的想法

大家要明白，虽然我们可以直接下载图标素材，而且可以通过审美让他们变得相对精致统一，但素材毕竟还是通用的，我们还是需要融入自己的想法和设计，不能完全依赖素材，举一个最简单的例子，“我的”这个图标，他的脑袋是圆形的，那我们是不是可以把他改成矩形的？

比如一些细节的调整，像通知图标，感觉有点秃，是不是可以让中间伸出一点宽度来：

细微调整之后，如果觉得还不够，我们还可以继续添加新的设计语言，比如增加配色点缀：

就这样，这几个图标，渐渐的就成为了你自己的作品！

我们在放适当的包装一下：

我们再对比一下原始的素材：

效果还是提升很大的！

所以，做任何事情，一定要讲究方法，不能死脑筋，否则进步就很慢。

欢迎关注作者的微信公众号：「菜心设计铺」