ICON设计是UI设计中非常重要的一个环节，它能够帮助我们美化画面，传递情绪，快速导航，而且不受语言限制，那今天就来给大家分享下ICON的设计干货。
首先图标可以分为3大类：功能性图标 , 应用图标 , 创意图标。
功能性图标
应用图标
创意图标
今天主要分享最常用的功能性图标，功能性图标强调: 功能表达 , 工整 , 有序 , 规范。我把它分为了三部分来展开。
1. 结构准确
作为设计专业的你，这一点应该不用多说，首先比例，透视，不能出问题。
2. 造型简练
我们做ICON的时候最好按尺寸来做，或者做完以后缩到最小形式，看一下是否清晰， 千万不要画的太复杂，因为大部分功能图标的大小在20到40像素左右，如果很复杂，看起来就像个线团，会降低识别度。
3. 有辨识度
这个非常重要，首先得让用户能看得懂，其次不能让阅读产生歧义。教大家几个方法，我们可以通过查找资料来寻找辨识度高的ICON，来参考它形状和轮廓。
参考实物，通过布尔运算来简化，抓住物体的特点来设计，表达最基本的物体特征。
ICON画完以后，做下可用性测试 ，脱离页面，脱离文字，看能否看出它代表的是什么意思，是否有对下个界面的预见性。
大家看一下上面这两个播放ICON。是不是第二个播放ICON，看起来更舒服一些？但其实第一个才是中心点对齐的，如果是这种情况，我们一定要保证视觉看上去要稳才行。
再来看下 下面的这个组合的图标。组合图标，主次图形比例最好保证，2比1左右的比例。
5. 精致饱满
我们可以在图标下面画一个方块，来看一下隐形区域，看一下留白是否过多，留白多了，不饱满，太饱满了就不透气，导致紧张，运用好留白，需要长期的积累经验，多看多练，时间久了找到那个微妙的平衡点。
再来看下，下面这两个心形，你们觉得哪个更好看？
第一个看起来更舒服吧，第一个是用布尔运算绘制的，第二个是用钢笔工具绘制的，使用 “规则图形”进行加减组合，ICON看起来更精致更专业。
1. 布局
我们基于24*24的画板举例，我们做ICON的时候尽量在20*20的区域里做，有些ICON看起来小，就适当给它放大处理下，留出来的4像素区域，就是给特殊ICON准备的，但是绝对不能超出画板范围。
2. 清晰度
清晰度这个事情，在分辨率高的屏幕上还好，但是在分辨率低的屏幕上，看起来就会虚的不行，所以为了我们的设计，无论在什么样的屏幕上都清晰可见，我们必须要对齐像素，确保X轴和Y轴坐标为整数，千万不能带小数点。
一般我们在做圆角ICON的时候，有明显的图形交界处不需要做圆角，图形内部也尽量不要做圆角，不然会导致ICON看起来不简练。
如果是线形ICON，首先，线的粗细要统一，其次，线的端点是直的，就要都统一成直的，端点是圆的就要都统一成圆的。
当我们做一整套ICON的时候，会发现，方形的ICON比圆形ICON，视觉上看起来更大些，所以如果我们做18像素方形ICON的时候，圆形ICON就要做到20像素，视觉上看起来才统一。
图中的4个图，就是我们做ICON时候用的安全网格。用这个网格做出的一整套ICON，看起来大小会比较统一。
切图时要注意的是，有些可点击的ICON是需要留热区的，不然触摸区域太小了，会导致体验很差。
切图的名称也需要注意下，命名一般都用英文，或者是拼音，功能+名称+状态，比如视频号中的喜欢，心形ICON，我们可以写成shipinhao_like_normal，注意横杠要用下划线。
最后还有个最重要的事情，如果ICON切的不是矢量图( PDF或者是SVG )，验收的时候一定要注意有没有虚边，尤其是安卓手机，开发们用的控件不同，会导致你的切图发生变化。一但有虚边，品质瞬间下降。验收一定要仔细。
ICON的风格要根据产品风格定义，我们可以通过形状和颜色来定义ICON的风格，形状上从圆角大小，线条的粗细，造型轮廓，表达ICON的性格。颜色上，是否需要颜色辅助，用什么颜色符合产品风格。
举个例子，比如我们做一个针对儿童的产品，那我们的ICON就要设计的可爱些，友好些，我们可以把ICON做的更圆融，运用圆角和圆形端点，突出的部分尽量做的短小，颜色丰富，在做一些小动效，赋予ICON情绪。
到这里功能性图标的基础知识就分享完了，接下来，简单的带过下应用图标和创意图标设计。
首先， 应用图标更偏向logo设计，风格有线性图标 ，文字设计图标， 局部提取图标，图形图标， 折叠图形图标 ，渐变图标等等。
创意图标大部分用于404，占位符，引导等，更注重设计内涵， 故事性 ，和原创精神。
风格也有很多种，2.5D风，MAB风，炫酷的，拟物的等，更注重视觉表现，光影，质感，氛围等。
最后，不管做什么设计，多看，多练，对设计有了一定的敏感度，就不需要去记那些死板的的理论了。当你还是初级的时候你需要学习别人的方法论，当你有经验了，你就有属于自己的一套方法论了。
