看到好的图标我们会习惯性地截图保存,但随着收集的图标越来越多,会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题!
图标是基本但重要的表达元素,在 UI 设计中有着不可替代的作用。
常见的分类是简单的线性分类,缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。
图片定义图标类型
对图标进行分类时,普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标,样式很简单,但可以划分到多个类别中。
面对这样的问题,推荐使用系统性的结构来划分图标类别:
- 首先将图标按尺寸大小分为两类;
- 继续细分对应的面性、线性、线面结合、扁平、拟物化等类型;
- 最后选择标准、容器、渐变、3D、手绘、阴影等风格。
利用这种结构层级,可以明确定义图标类别。
图标尺寸
图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷,但把它缩小到 16px,这些酷炫的效果都无法呈现出来。
在对图标归类时,首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类:
- 大尺寸图标通常指标志性图标,例如 App 启动图标或代表品牌形象;
- 小尺寸图标用作 UI 控件,起到引导功能或装饰目的。
图标类型
确定图标尺寸后,进一步细分图标类型:
- 面性图标
- 线性图标
- 线面结合图标
- 扁平化图标
- 拟物化图标
每个类型对应的图标绘制方法看 → https://www.uisdc.com/zt/icon-drawing-guide
利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中,所以在小图标分类中没有展示。
图标组成
图标尺寸越小,展示的细节越有限。相比于大图标,小图标的尺寸有一定局限性,图标组成包括标准和容器两种。
大图标利用尺寸上的优势能展示更多内容,分为多种组成形式。
小尺寸图标样式
简单的图像可以更具包容性。图标的尺寸越小,越考验设计师传达信息的能力。
1. 面性图标
标准面性图标
面性图标易识别,适合应用在小尺寸图标中。
关键点:
- 确保图标有清晰的边缘,避免羽化;
- 图标复杂程度随着尺寸变小而灵活调整。
带有背景色的面性图标
彩色背景为简约设计带来了更多可能。通过这个技巧使面性图标更友好,更具吸引力。
关键点:
- 为背景选择 4-12 种颜色。
- 考虑图标是浅色还是深色,是否适用于所有背景色。
- 在彩色背景上使用白色图标比黑色效果更好。
2. 线性图标
标准线性图标
线性图标因为简洁性和现代性而受到用户的欢迎。随着屏显越来越清晰,我们可以更加大胆地使用线性图标。
关键点:
- 确保轮廓像素清晰。
- 越简单越好。
- 追求更简单的细节。
双色线性图标
设计小尺寸图标时,必须放弃细节并强调简单的形状。但当使用一种颜色效果不太理想时,可以考虑添加一些颜色。
关键点:
- 使用两种搭配和谐的颜色。
- 考虑将一种颜色用于主要形状,另一种颜色用于细节。
- 少即是多。
- 使用粗线条。
3. 线面结合图标
线面结合拥有更多细节,提升用户的愉悦感。
关键点:
- 最好使用深色而不是纯黑色描边。
- 限制图标的颜色种类。
- 避免过多细节。
4. 扁平化图标
扁平化图标既简单又巧妙,表达品牌形象的同时具有丰富的内涵。
关键点:
- 避免在