工具图标的设计规范

第一部分  工具图标的介绍和种类

这是我们在日常讨论中提及最频繁的图标类型

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

我们设计的某一次图标，你可以说大半年或者一两年不改它，只有逢年过节或者大版本调整的时候，需要修改下，符合气氛感

平时说的一般都是工具类图标

优秀的图标可以丰富页面的视觉效果和层次

界面包含的基本4要素，图形、文字、图片、图标

这4项中只有图标是需要UI设计师老老实实从0到1创作的

图标设计样式，分三大类

线性、面性、视觉

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

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

视觉图标：主要用来渲染活动气氛或者突出页面视觉特性的，没有特别多限制，根据需求可以任意发挥

它看上去和下面这些普通的小图标差距已经特别大了，看上去花里胡哨，为什么花里胡哨，它需要支撑整个页面的复杂的功能特点，帮助我们丰富页面视觉效果，

视觉效果带动起来以后，也会发现我们的设计并没有被局限住

用户能看懂或者大概能看懂，而且跟整个页面也搭的起来

整个部分是最难的一点，因为它没有边界，

它纯粹考验设计师在设计图标时的创意能力、平面设计能力、软件操作能力，

甚至现在很多图标通过轻拟物或3D的设计，还有插画式的设计

UI设计中从0到1，真正自己绘制的东西，最关键的就在这里，其他部分其实真正自己完整创作的并不多

学习图标，就要掌握如何正确、规范的将不同类型的图标应用在界面的正确的位置上

第二部分  工具图标的规范

评价工具图标的标准，主要有3个

表意合理

像素对齐

一致性

表意合理：表达的寓意清晰，是工具图标最基本的要求，图形运用不当，会造成用户的困惑，降低使用体验

圆角没有办法，横平竖直一定要对齐，不要出现子像素

一致性是最难的

栅格并不是有一个固定的比例或模板进行套用，在不同的尺寸中，图标的栅格系统有一定的变化

在UI界面中，图标主要适用以4的倍数为边长的矩形定义尺寸

常见的大小有12-16-24-32-48-64；（3-4-6-8-12-16）的4倍

在界面的使用中，会为图标添加一个隐形的背景，支撑它的选中区域和对齐标准

对齐是整个区域对齐，而不是内部图标对齐