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）
声明：
图片和素材来自网络，侵删
网友评论