谷歌这套图标设计标准，零基础也能快速掌握 ！
一 、标设全文速览图
哈喽 ，快速这里是谷歌Clip设计夹 ，今天分享的套图是「图标设计准则」 。
图标是标设界面设计里的 “刚需元素” ，一个小图标能快速传递很多信息 。计标基础好的准零掌握图标需要兼顾简洁 、现代 、快速友好。谷歌但图标的套图尺寸很小 ，设计时既要严格遵守设计规则 ，标设又得清晰表达信息，这样才能保证整套图标的风格统一 、辨识度高 。
今天就来聊聊大厂在用的图标设计原则和设计规范 ，配合案例进行设计分析~
二 、图标设计的3个核心原则
1. 形式够简洁
给大家举个例子，就说下面的小船图标 ，想让图标清晰好认，就得做减法 ，那么用正面的简约船身造型最合适 。
如果图标设计得过于细致 ，例如图标中添加了船帆 、桅杆或者旗帜等细节 ，太写实的图标不仅会降低识别速度，还会破坏整套图标的视觉统一性 。
设计总结 ：
✅ 简化图标造型 ，提升清晰度和辨识度
❌ 拒绝过度写实 ，避开复杂繁琐的设计
2. 多用几何形状打底
使用几何图形和统一的基础形状来设计图标 ，能打造出清晰醒目的视觉感受 。哪怕结构简单 ，也能保持清晰的形态 ，缩小到小尺寸时也照样容易分辨。
反过来讲 ，尽量少用那些纤细 、松散的不规则形状，它们会破坏线条的连贯性 ，让整套图标看起来乱糟糟的，没个统一的调性 。
设计总结 ：
✅ 靠几何图形和统一的造型，打造醒目视觉效果
❌ 少用纤细、不规则的形状
3. 整套风格保持一致
这里给大家看一组风格统一的图标示例 。对品牌识别和系统适配来说 ，保持图标集的视觉一致性太重要了 。
要是把不同风格的图标混在一起用 ，用户根本没法把它们当成“一家人” 。所以同一套图标里 ，不管是形状 、线条粗细，还是比例 、边角处理 ，都得按同一个标准来 。
设计总结：
✅ 单套图标集里视觉风格要保持统一
❌ 千万别混搭不同风格的图标
三 、图标尺寸怎么选？
在谷歌的Material Design 3 设计规范中 ，标准 (基线) 图标尺寸是24dp×24dp ，设计时建议按100%的比例来做，这样能保证像素级的精准度 。
除了这个标准尺寸 ，还有20dp 、40dp 、48dp这几种常用尺寸可以选 ：
20dp ：适合用在桌面端 、紧凑布局 ，或者那些小尺寸的视觉元素
40dp/48dp ：针对显示器 、大屏幕 ，还有标题栏这类特殊场景
四 、标准图标布局
设计图标时，内容需要放在有效区域内 。有效区域是指页面滚动或适配不同设备时图标不会被遮挡的“安全可视区域” 。
如果想让图标的视觉冲击力更强，可以让内容延伸到有效区域和裁剪区域之间的留白处 ，但不能超出裁剪区域 ，不然图标很容易被裁剪显示不全。
具体要怎么布局呢 ？看下面这两点就够了 ：
- 有效区域 ：图标内容要放在20dp×20dp的范围内 ，四周各留2dp的边距
- 边距 ：给有效区域留出2dp边距，既能让图标和周围元素拉开视觉距离，又能让整体看起来更平衡
接下来通过一个图标案例来简单总结一下 ：
上图从左到右分别代表了在有效区域 、在有效区域和裁剪区域、在裁剪区域之外创建的图标案例。
设计总结：
✅ 图标内容保持在20dp×20dp的有效区域里 ，记得留2dp边距
⚠️ 想加视觉冲击力 ？内容可以延伸到边距区域
❌ 任何情况下 ，图标都不能超出裁剪区域
1. 网格和辅助线
一套图标中可能有的是圆形，有的是方形 ，那怎么才能保证形状不同的图标保持视觉大小的一致性呢 ？
这种情况大家在设计图标时应该都碰到过 ，解决方法可能大多是通过眼睛对比查看 ，把看着小的图标调大一些或者把看着大的图标调小一点 。这种方法效率不高 ，而且设计出来的图标大小不容易保持一致性。
这里提供一个更科学和高效的辅助图标设计方法——使用网格和辅助线 ，照着这些辅助线来设计图标 ，能轻松保持比例一致 。
例如常用的24dp×24dp图标网格 ，由正方形 、圆形 、竖矩形 、横矩形这四种基础辅助线构成。它们就像图标的“骨架” ，能帮所有图标保持统一的比例和对齐效果 ，哪怕放大10倍看 ，结构也照样清晰 。
给大家拆解一下这四种辅助线 ：
方形辅助线 ：边长18dp ，是图标的基础平衡基准 。比如图表类图标就可以照着这个方形来画，保证比例稳定 。
圆形辅助线 ：直径20dp ，用来设计圆润平衡的图标 。像地球图标用这个圆形打底 ，就能和其他图标和谐搭配 。
垂直矩形辅助线 ：高20dp 、宽16dp ，适合强调纵向比例的图标 。比如文档图标围着这个竖矩形设计 ，比例会特别清晰 。
水平矩形辅助线 ：高16dp 、宽20dp ，适合横向比例的图标 。像邮件图标用这个横矩形当基础 ，形状会很均衡 。
五 、图标结构解析
一个完整的图标，由圆角 、起始/结束点 、内部形状 、外部轮廓等组成。
1. 图标圆角
这里重点说下大家容易踩坑的“圆角”的设计 ：例如下图的银行卡图标 ，采用外角2dp圆角 、内角尖角的设计，这样既柔和又利落。
如果把圆角做得太大 ，如下图左侧文档图标，图标的辨识度就会下降；如果一个图标中混用不同半径的圆角，如下图右侧的图标 ，整个图标看着就会很杂乱。
设计总结：
✅ 按规则设置圆角 ，统一圆角半径
❌ 避免圆角半径过大/半径混用的情况
2. 描边粗细
推荐的图标描边粗细是2dp或常规 (400) ，也可以根据需求灵活调整 ，例如在MD3设计规范中就提供了100 (细)到700 (粗)的多种选择 。
这里有两个小技巧 ：
设计直角线性图标时 ，描边的末端尽量做成直角，例如下图左侧的箭头图标 ，45度切割的直角就很清晰；在下图右侧的添加图标中 ，内部的加号也采用了2dp的描边粗细 ，与外轮廓保持一致 。
另外要注意一套图标需要保持相同的描边粗细 。如果描边粗细不一致 ，不仅会模糊图标形状 ，还会破坏视觉一致性 。
设计总结：
✅ 描边粗细保持统一 ，直角图标末端也用直角
六 、复杂图标怎么处理 ？
如果图标需要一些精细的细节 ，可以通过一些灵活的调整来提升辨识度 ，但不能扭曲基础的几何形状或破坏整体比例 。
比如回形针图标 ，为了在24dp的空间里放下多个曲线 ，可以把 2dp的标准描边粗细微调成1.5dp；再比如拉面图标 ，下面的碗作为托底采用2dp的粗描边 ，上面的筷子拉面等元素细节更多 ，则采用1.5dp的细描边 ，让细节更清晰 。
还有一个小原则：设计复杂图标时 ，尽量保持正面视角，别做倾斜 、旋转的等距或者3D效果——多余的深度感会增加识别难度 。
设计总结
✅ 正面视角设计，细节微调不跑偏
❌ 少用倾斜、旋转的等距/3D呈现方式
最后
图标是一种高效的视觉语言 ，能打破语言壁垒，快速传递信息 。但它的优势 ，必须建立在清晰的结构和统一的规则之上 。
设计时基于标准的辅助网格走 ，保持比例均衡 、视觉重量一致 ，设计出的图标才不会喧宾夺主 ，反而能提升整个产品的用户体验 。
作者 ：Clip设计夹
一 、标设全文速览图
哈喽 ，快速这里是谷歌Clip设计夹 ，今天分享的套图是「图标设计准则」 。
图标是标设界面设计里的 “刚需元素” ，一个小图标能快速传递很多信息 。计标基础好的准零掌握图标需要兼顾简洁 、现代 、快速友好。谷歌但图标的套图尺寸很小 ，设计时既要严格遵守设计规则 ，标设又得清晰表达信息，这样才能保证整套图标的风格统一 、辨识度高 。
今天就来聊聊大厂在用的图标设计原则和设计规范 ，配合案例进行设计分析~
二 、图标设计的3个核心原则
1. 形式够简洁
给大家举个例子，就说下面的小船图标 ，想让图标清晰好认，就得做减法 ，那么用正面的简约船身造型最合适 。
如果图标设计得过于细致 ，例如图标中添加了船帆 、桅杆或者旗帜等细节 ，太写实的图标不仅会降低识别速度，还会破坏整套图标的视觉统一性 。
设计总结 ：
✅ 简化图标造型 ，提升清晰度和辨识度
❌ 拒绝过度写实 ，避开复杂繁琐的设计
2. 多用几何形状打底
使用几何图形和统一的基础形状来设计图标 ，能打造出清晰醒目的视觉感受 。哪怕结构简单 ，也能保持清晰的形态 ，缩小到小尺寸时也照样容易分辨。
反过来讲 ，尽量少用那些纤细 、松散的不规则形状，它们会破坏线条的连贯性 ，让整套图标看起来乱糟糟的，没个统一的调性 。
设计总结 ：
✅ 靠几何图形和统一的造型，打造醒目视觉效果
❌ 少用纤细、不规则的形状
3. 整套风格保持一致
这里给大家看一组风格统一的图标示例 。对品牌识别和系统适配来说 ，保持图标集的视觉一致性太重要了 。
要是把不同风格的图标混在一起用 ，用户根本没法把它们当成“一家人” 。所以同一套图标里 ，不管是形状 、线条粗细，还是比例 、边角处理 ，都得按同一个标准来 。
设计总结：
✅ 单套图标集里视觉风格要保持统一
❌ 千万别混搭不同风格的图标
三 、图标尺寸怎么选？
在谷歌的Material Design 3 设计规范中 ，标准 (基线) 图标尺寸是24dp×24dp ，设计时建议按100%的比例来做，这样能保证像素级的精准度 。
除了这个标准尺寸 ，还有20dp 、40dp 、48dp这几种常用尺寸可以选 ：
20dp ：适合用在桌面端 、紧凑布局 ，或者那些小尺寸的视觉元素
40dp/48dp ：针对显示器 、大屏幕 ，还有标题栏这类特殊场景
四 、标准图标布局
设计图标时，内容需要放在有效区域内 。有效区域是指页面滚动或适配不同设备时图标不会被遮挡的“安全可视区域” 。
如果想让图标的视觉冲击力更强，可以让内容延伸到有效区域和裁剪区域之间的留白处 ，但不能超出裁剪区域 ，不然图标很容易被裁剪显示不全。
具体要怎么布局呢 ？看下面这两点就够了 ：
- 有效区域 ：图标内容要放在20dp×20dp的范围内 ，四周各留2dp的边距
- 边距 ：给有效区域留出2dp边距，既能让图标和周围元素拉开视觉距离，又能让整体看起来更平衡
接下来通过一个图标案例来简单总结一下 ：
上图从左到右分别代表了在有效区域 、在有效区域和裁剪区域、在裁剪区域之外创建的图标案例。
设计总结：
✅ 图标内容保持在20dp×20dp的有效区域里 ，记得留2dp边距
⚠️ 想加视觉冲击力 ？内容可以延伸到边距区域
❌ 任何情况下 ，图标都不能超出裁剪区域
1. 网格和辅助线
一套图标中可能有的是圆形，有的是方形 ，那怎么才能保证形状不同的图标保持视觉大小的一致性呢 ？
这种情况大家在设计图标时应该都碰到过 ，解决方法可能大多是通过眼睛对比查看 ，把看着小的图标调大一些或者把看着大的图标调小一点 。这种方法效率不高 ，而且设计出来的图标大小不容易保持一致性。
这里提供一个更科学和高效的辅助图标设计方法——使用网格和辅助线 ，照着这些辅助线来设计图标 ，能轻松保持比例一致 。
例如常用的24dp×24dp图标网格 ，由正方形 、圆形 、竖矩形 、横矩形这四种基础辅助线构成。它们就像图标的“骨架” ，能帮所有图标保持统一的比例和对齐效果 ，哪怕放大10倍看 ，结构也照样清晰 。
给大家拆解一下这四种辅助线 ：
方形辅助线 ：边长18dp ，是图标的基础平衡基准 。比如图表类图标就可以照着这个方形来画，保证比例稳定 。
圆形辅助线 ：直径20dp ，用来设计圆润平衡的图标 。像地球图标用这个圆形打底 ，就能和其他图标和谐搭配 。
垂直矩形辅助线 ：高20dp 、宽16dp ，适合强调纵向比例的图标 。比如文档图标围着这个竖矩形设计 ，比例会特别清晰 。
水平矩形辅助线 ：高16dp 、宽20dp ，适合横向比例的图标 。像邮件图标用这个横矩形当基础 ，形状会很均衡 。
五 、图标结构解析
一个完整的图标，由圆角 、起始/结束点 、内部形状 、外部轮廓等组成。
1. 图标圆角
这里重点说下大家容易踩坑的“圆角”的设计 ：例如下图的银行卡图标 ，采用外角2dp圆角 、内角尖角的设计，这样既柔和又利落。
如果把圆角做得太大 ，如下图左侧文档图标，图标的辨识度就会下降；如果一个图标中混用不同半径的圆角，如下图右侧的图标 ，整个图标看着就会很杂乱。
设计总结：
✅ 按规则设置圆角 ，统一圆角半径
❌ 避免圆角半径过大/半径混用的情况
2. 描边粗细
推荐的图标描边粗细是2dp或常规 (400) ，也可以根据需求灵活调整 ，例如在MD3设计规范中就提供了100 (细)到700 (粗)的多种选择 。
这里有两个小技巧 ：
设计直角线性图标时 ，描边的末端尽量做成直角，例如下图左侧的箭头图标 ，45度切割的直角就很清晰；在下图右侧的添加图标中 ，内部的加号也采用了2dp的描边粗细 ，与外轮廓保持一致 。
另外要注意一套图标需要保持相同的描边粗细 。如果描边粗细不一致 ，不仅会模糊图标形状 ，还会破坏视觉一致性 。
设计总结：
✅ 描边粗细保持统一 ，直角图标末端也用直角
六 、复杂图标怎么处理 ？
如果图标需要一些精细的细节 ，可以通过一些灵活的调整来提升辨识度 ，但不能扭曲基础的几何形状或破坏整体比例 。
比如回形针图标 ，为了在24dp的空间里放下多个曲线 ，可以把 2dp的标准描边粗细微调成1.5dp；再比如拉面图标 ，下面的碗作为托底采用2dp的粗描边 ，上面的筷子拉面等元素细节更多 ，则采用1.5dp的细描边 ，让细节更清晰 。
还有一个小原则：设计复杂图标时 ，尽量保持正面视角，别做倾斜 、旋转的等距或者3D效果——多余的深度感会增加识别难度 。
设计总结
✅ 正面视角设计，细节微调不跑偏
❌ 少用倾斜、旋转的等距/3D呈现方式
最后
图标是一种高效的视觉语言 ，能打破语言壁垒，快速传递信息 。但它的优势 ，必须建立在清晰的结构和统一的规则之上 。
设计时基于标准的辅助网格走 ，保持比例均衡 、视觉重量一致 ，设计出的图标才不会喧宾夺主 ，反而能提升整个产品的用户体验 。
作者 ：Clip设计夹
