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