UI图标分类汇总以及设计规范

图标是 UI 视觉体系中最基础的部分，它在 UI 设计师的日常工作中应用非常广泛。一个好图标已经足够让设计师呈现他的价值。了解清楚图标的设计分类，设计应用，正确的设计方法，才能将图标设计稳稳的拿捏，提升自己。

UI图标分类汇总及设计规范

04、图标的设计案例

确定图标设计风格

设计案例

确定风格

案例解析

关键词的语义和延伸

语意明确

语意明确

关键词延伸

关键词 延伸

关键词延伸可以进行划分为主要关键词和间接关键词，主要关键词（如 A1、A2、A3….），主要关键词A1可以再延伸间接关键词（如A1-1、A1-2、A1-3…），如果脑洞够大，还可以进行三级关键词类推。

图标设计自检事项

识别性

语义 识别

语义识别的理解就是当用户看到这个图标之后，很清晰的知道这个是干什么的。

视觉识别

图标颜色：

复杂程度

类型搭配

统一性

圆角大小

圆角大小的细节很容易被忽略，因为他的成形和描边形式的选取也有很大的关联，描边方式有内描边、居中描边、外描边。描边的大小会根据基线来扩展。

描边粗细

图标的粗线也会影响整体图标的一致性如下图所示，对比很强烈

断点类型

断点类型选择也是需要根据场景去使用，平头断点比较生硬，圆头断点比较可爱活泼。如下图所示：

视觉统一

根据 keyline 网格规范设计保证图标的平衡统一

图标角度

角度也是统一性中常见的基本要素，一般根据相应的倍数规范进行角度变化。

图标元素间距

图标中的元素上下、左右之间的距离需统一对称。

图标数据小数点

当图标中的点的位置或者某一部分出现小数点的场景，需要调整至整数，根据四舍五入的计数方式进行精确，描边大小可以存在“X.5”这样的情况。

美感

饱满

饱满度的提升也能体现图标的精致感，这也是考虑图标视觉识别的一个重要因素。根据网格系统，通常也是按照图标元素在固定矩形栅格中的位置比例来看整体效果，再判断是否饱满。如之前做的一个充值的图标，增加面积，增大圆角。

透析感

图标透析感的体现在于图标之间的间距，描边粗细，导致的空间留白是否合适，好的透析感图标设计会让图标更加有灵性，不会让用户看了之后觉得沉闷压抑，如下案例支付宝线性图标描边大小的对比，面性图标为自己项目设计的。

风格

属性

图标设计是会需要先去根据对应图标的基本属性进行的造型绘制，给图标定型，首先语义表达上要精准，其次要根据具体业务和场景确定图标骨骼基调。

表现

图标表现形式在文章第一部分进行过详细的描述和分类。就是通过什么样的表达形式或技法去将造型塑造的更贴合场景。比如这组面型图标通过形式组合、留白、增加透气感、丰富层次感。

品牌关联性

品牌颜色

品牌颜色：颜色是最基础的表现元素，图标设计也会考虑品牌颜色，给品牌传播赋能。如下案例支付宝。

品牌 logo

品牌 logo，不管是文字和图形、ip 形象，都可以在图标设计中进行体现和场景相结合，如下案例：美团、饿了么、盒马、飞猪

03、图标的设计规范

尺寸规范

设计规范

尺寸要求

为了保持图标元素的平衡感，通常需要使用基础的网格尺寸来进行绘制图标，常用的网格绘制尺寸为：16、24、36、48、64、128、512、1024。

设计方法

设计规范

设计方法

明名规范

设计规范

命名规范

个人一般习惯命名顺序为：类型_位置_功能_状态_大小。其中类型和位置可以调整，状态和大小也可以调整，关于图标“大小”属性有时候在特定场景下可以省略。例如 iOS 自带大小的后缀：@1X，@2X，@3X。

输出规范

设计规范

切片工具

画板导出

矢量输出

02、图标的设计应用

业务和设备类型

B、C 端 业务

说明

业务类型常见的主要为 B、C 端业务，设备类型常见为移动端、网页端，其他覆盖的终端设备和业务不做过多赘述。图标的设计应用主要想重点介绍这几年比较主流的 B 端网页类大厂项目，案例如下所示，这三款产品基本都使用了比较流行的几款风格图标：C4D、2.5D、新拟态。这些风格的主要特点就是专业，严谨、科技感、震撼力强。现下 B 端 C 化已经成为了新的趋势，越来越多新的设计风格也会逐步融入到 B 端的业务中。

移动端 网页端

阿里云

腾讯云

应用类型

应用场景

功能图标

应用场景

启动图标

应用场景

导航图标

应用场景

氛围图标

01、图标的设计分类

图标类型

线性图标

单色

多色

透明叠加

渐变色

断点

面性图标

单色

多色

透明叠加

渐变色

线面图标

单色

多色

透明/叠加

渐变色

文字图标

文字图标

图标风格

风格

毛玻璃效果

风格

2.5D

风格

新拟态

风格

轻质感

风格

扁平

风格

卡通

风格

拟物写实

风格

实物贴图

风格

C4D

风格

IP 形象