看到好的图标我们会习惯性地截图保存,但随着收集的图标越来越多,会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题!
图标是基本但重要的表达元素,在 UI 设计中有着不可替代的作用。
常见的分类是简单的线性分类,缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。

图片定义图标类型
对图标进行分类时,普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标,样式很简单,但可以划分到多个类别中。

面对这样的问题,推荐使用系统性的结构来划分图标类别:
- 首先将图标按尺寸大小分为两类;
- 继续细分对应的面性、线性、线面结合、扁平、拟物化等类型;
- 最后选择标准、容器、渐变、3D、手绘、阴影等风格。

利用这种结构层级,可以明确定义图标类别。
图标尺寸
图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷,但把它缩小到 16px,这些酷炫的效果都无法呈现出来。

在对图标归类时,首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类:
- 大尺寸图标通常指标志性图标,例如 App 启动图标或代表品牌形象;
- 小尺寸图标用作 UI 控件,起到引导功能或装饰目的。
图标类型
确定图标尺寸后,进一步细分图标类型:
- 面性图标
- 线性图标
- 线面结合图标
- 扁平化图标
- 拟物化图标

每个类型对应的图标绘制方法看 → https://www.uisdc.com/zt/icon-drawing-guide
利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中,所以在小图标分类中没有展示。

图标组成
图标尺寸越小,展示的细节越有限。相比于大图标,小图标的尺寸有一定局限性,图标组成包括标准和容器两种。

大图标利用尺寸上的优势能展示更多内容,分为多种组成形式。

小尺寸图标样式
简单的图像可以更具包容性。图标的尺寸越小,越考验设计师传达信息的能力。