图标分类

• 工具图标

• 装饰图标

• 启动图标

装饰图标

扁平风格
拟物风格
2.5d风格
炫彩渐变
实物贴图

启动图标

文字形式
图标样式
图形样式
插画形式
拟物形式

工具图标

应用内有明确功能、提示含义的标识。

工具图标分类

线性

线性图标
多种粗细结合
描边缺口
多色描边
渐变描边
描边叠加

面性

面性图标
扁平插画
渐变色彩
透明叠加

混合图标

线面结合(单色)
混合色彩
色块偏移(mbe)
暗部表现

ai

需要掌握的特殊功能
• 形状生成器

• 轮廓化描边

• 路径查找器

图标设计规范

1. 表意的准确性
   图标的主要作用之一就是作为文字的替代品，具有明确的寓意,最基本要求

2 图标的一致性
类型一致(线还是面?)
风格一致
a 如果有缺口大小要统一
b 圆角统一
c 填充色彩一致,色块偏移保持固定规律
d 透视统一(视角的统一)
e 粗细统一(描边的粗细和镂空的粗细)
f 大小一致(整体视觉上)

方法

1 绘制图标盒子,作为参考

image.png

应用图标的栅格系统对于图标的设计来说，是一个用来应对几何图形视觉差的“参照物”。

需要以图标盒子参照物，原因在于，一套图标，不会只存在这几种图形的样式，还有很多千奇百怪的形状，但大体上我们可以识别出来它的类似轮廓或者重心方向，于是就可以通过参照图形来判断我们设计出来的图形尺寸是否符合标准

2. 像素对齐
   要满足像素对齐的要求，就要符合
   a. 元素本身的尺寸为整数、
   b. 描边为整数、
   c. XY 轴坐标为整数的特性

AI 中的像素对齐设置
在 AI 中，我们可以通过两个设定来查看和保证像素对齐，即网格的设置显示，以及对齐到点的设置

在线性图标中，类似对于 1pt 或者 2pt 描边的应用，觉得不是太细就是太粗，可以用 1.5pt 的数值（1.5 pt 在 2x 中就是 3px），但切记不要出现类似 1.23、2.16、3.46 这种小数。

• 知识点1：在 UI 的界面中，图标的主要作用是用来高效的传递信息，以及起到美化界面的作用。

• 知识点2：UI 会涉及的图标类型主要有三种，工具图标、装饰图标、应用图标。

• 知识点3：工具图标，是界面中用来传递信息的图形符号，主要包含线性、面性、混合三种设计风格。

• 知识点4：装饰图标，是界面中用来提升视觉体验的图形，主要包含扁平、拟物、2.5D、炫彩渐变等风格。

• 知识点5：应用图标，是用来启动应用的图标，主要包含文字、图标、图形、插画、拟物等设计形式。

• 知识点6：学习绘制图标，优先学习 PS、AI 的路径相关功能，而不是 Sketch 和 XD。

• 知识点7：图标首先要表意准确，能被用户识别并契合想要表达的寓意。

• 知识点8：设计整套图标的时候要符合一致性原则，包含类型、风格、粗细、透视、大小等特征。

• 知识点9：不同的几何图形会打给我们不同的大小视感，不能只看元素的参数。

• 知识点10：我们根据视觉差的方式定义出栅格系统，作为图标尺寸设定的重要参考。

• 知识点11：图标的绘制要保证横竖的直线对齐到像素，线性图标尽量采用整数粗细，如果一定要用小数的话就使用 0.5 递进的。