1 图标的定义

图标是具有高度概括性的、用于视觉信息传达的一种图形化符号，最早可以追溯到洞穴壁画。

图标可以分为广义和狭义两种，广义值得是所有现实中有明确指代含义的图形符号，狭义主要是指在计算机设备界面中的图像符号，有非常大的覆盖范围

2 图标的种类与设计风格

图标大致可划分为四大种类

• 导航图标

• 装饰图标

• 启动图标

• 活动运营图标

2.1 导航图标

一般是指有明确功能、提示含义的图标，用与导航，分流等，但是不同页面的导航图标出于信息层级和运营的需 要，对于视觉风格的要求也不一样。

导航图标又可分为tabbar图标、金刚区图标、个人中心等功能性图标

Tab Bar图标常规表现为，线性、面性、线面结合等，但是也会有注重品牌、个性化或者运营活动 的，风格会与品牌贴近，或者与近期时事活动相关

常规tabbar图标.png

金刚区图标的风格会比较多样化，通常来说视觉层级会更重，设计感更强，通常以多色渐变风格为主，音乐类APP会以单色线性风格强调品牌调性，部分电商也会直接以实物展示。

image.png

image.png

image.png

image.png

个人中心等页面的图标主要以装饰性和解释性为主，去掉图标也不会影响整体导航，图标设计风格通常也不会过于复杂，多以线性风格展示

image.png

image.png

2.2 装饰图标

以装饰和解释性说明为主，主要作用是让视觉整齐，观赏性更强，品牌、氛围感更强，一般用在说明性和解释性的界面，如运营活动、VIP权限等界面,视觉风格跟随页面的调性来

image.png

2.3 启动图标

启动图标担任着品牌标识的功能，相当于产品的logo设计，需要融入品牌调性，并且由于使用场景的限制，也要求启动图标遵循设计规范，保证最小尺寸小的识别状态,大多数图标均以以下形式展示。

image.png

大部分的启动图标不会设计得过于复杂，也是由于过于复杂的图标会增加用户的认知成本，尤其是在互联网信息爆炸的时代，使用扁平化图标可以有效地减少用户的认知成本，并通过加强色彩感知等方式来占领用户心智。

2.4 活动运营图标

活动运营图标是有时效性的，设计主题跟风格多与节日相关，主要是用来增加节日氛围，提升点击率等

品牌化、个性化、运营活动等.png

3 常见图标的设计风格

设计风格并不是一成不变的，需要根据不同的场景以及用户人群使用不同风格的图标，如有运营活动，也需要根据运营做相关调性的风格

图标的设计风格大致可以分为以下几类

• 线性风格

• 面性风格

• 插画风格

• 微拟物风格

• 2.5D

• 3D

3.1线性风格

此处只列举了常见的设计形式，具体使用以及是否需要创新要看具体的使用场景

image.png

image.png

3.2 面性风格

面性图标也可以分为无彩色、单色、多色、渐变色等，具体看使用场景

image.png

3.3 微拟物风格

在一些小游戏或者H5活动中会常见这种设计风格

image.png

3.4 2.5D风格

image.png

3.5 3D扁平风格

3d扁平风格进来也逐渐步入视线，随着运营需求提升和设计师技能进步，相信不久之后会越来越多的看到这种风格

image.png

4 图标的设计规范

在图标开始设计之前，要先对图标的规范有一个清晰的认识

图标的设计规范大致要遵循的几个规则

• 表意明确

• 保持一致性

• 像素对齐

• 切图规范

• 借助栅格系统（视觉平衡、像素对齐、切图规范、切图出血等）

• 品牌融合

4.1表意明确

图标大部分情况下是作为导航和解释说明用的，所以表意明确是图标的基本功能，对于一些非常见类型的图标，在制作时要通过脑暴合理筛选关键词，然后开始设计，设计完成后还要进行一些简单测试，可以向同事征询意见，询问这个图标是不是可以表达相关意思，如果答案是否，应该问明原因，多设计几种方案，或者和同事们一起进行脑暴。

image.png

image.png

4.2 图标的一致性

图标的一致性可以分为多种情况

• 设计风格一致

• 视觉感受一致

• 线性图标粗细和倒角一致

• 角度一致

• 透视一致

• 特点一致

• 构图韵律一致

• 空间结构一致（留白）

4.2.1 设计风格一致

在同一功能区的图标，需要保持设计风格的统一性，如果用线性图标，就全部是线性图标，如果是面性图标，就统一使用面性图标

image.png

4.2.2 视觉感受一致

在视觉设计中我们会遇到一些视错觉情况，以下列举常见的几种情况以及解决办法，保持视觉一致的方法并不是让图像的长宽一致，甚至图形的物理尺寸一致时，视觉重量感受也是不一样的。以下左图，矩形的视觉重量明显更大，也没有留白空间，通过模糊化的图形可以看到，三角型的视觉重量明显偏小，以下右图调整之后，可以看到视觉重量接近一致，不过视觉重量的判断需要设计师多观察，多尝试。

image.png

4.2.3 视觉中心一致

程序默认的中心对齐方式很多时候并不能在视觉上平衡，这时我们一般需要通过调整使其在视觉上平衡。此外如果一个图形其中一部分面积远大于另一部分，那么就会让这个图形的中心产生便宜，必须要往较小部分的方向移动才能产生平衡。

image.png

4.2.4 粗细一致

image.png

4.2.5 正负形比例一致

面性图标中，要考虑到正形和负形的比例，如下图，白色面积应在所有图形中保持一致

image.png

4.2.6 透视一致

不统一的透视会造成空间的错乱感，在绘制图标时应考虑到从什么角度去观察图标

image.png

4.2.7 角度一致

image.png

4.2.8 特点一致

一些图标会添加亮点或者特点，在图标设计过程中需要保证图片整体的特点是一致的，如断线风格等

image.png

4.2.8 构图一致

构图时也应该让图标整体保持一致，保证图标在整体的节奏和韵律上时一致的

image.png

4.3 像素对齐

像素对齐算是老生常谈，个人认为目前算是一种匠心精神或者对细节的极致追求，因为在一些项目中也会用到svg格式，或者图片在不同屏幕尺寸适配之后，切图尺寸不一定还能保持像素准确，但至少在设计稿上还是应该保持像素对齐

image.png

4.4 切图规范

跟开发沟通最常沟通的就是标注和切图，为了方便开发使用，通常给出的切图是长宽相等的矩形切图，此外还需要为图标留出一定的出血空间，一方面保证切图的热区设置可以达到有效点击范围，另一方面可以预留出图标的调整空间。

image.png

4.5 使用栅格

使用栅格系统可以有效地解决上述问题，包括视觉重量的平衡，切图的出血等等，借助sketch的symbol功能还可以使排版更方便，使用蓝湖插件则课直接将symbol大小作为切图大小，切图更方便

image.png

image.png

5 品牌一致性

随之越来越多的产品开始同质化，品牌也越来越被重视，通过在图标中融入品牌基因的方法来加强品牌认知

品牌基因提取的方法可以从两个方面进行

• 从logo中提取

• 从品牌气质中提取

从logo中提取

image.png

image.png

从品牌气质中提取，通过提取品牌的气质来改变图标的个性

image.png

如网易严选图标，通过提取品牌气质来设计图标个性

image.png

6 图标自查手册

综上所述整理出图标自查手册

1.功能明确

• 导航图标

• 装饰图标

• 启动图标

• 活动运营图标

2.表意明确

• 非常见图标的含义表达

• 最小场景可识别性

3.一致性

• 设计风格一致

• 视觉感受一致

• 线性图标粗细和倒角一致

• 角度一致

• 透视一致

• 特点一致

• 构图韵律一致

• 空间结构一致（留白）

4.品牌调性

• 从logo中提取颜色和风格

• 提取品牌气质

文章参考：
1.《小身材，大影响！设计师应该知道的图标基础知识》（https://www.uisdc.com/small-icon-big-impact）

2.《ICON设计教学.1 —— 图标设计详解》-超人的电话亭（https://www.ui.cn/detail/436051.html）

3.《菜心·图标自检手册》-菜心（https://www.jianshu.com/p/67239eef3d43）

声明：
图片和素材来自网络，侵删