在图标绘制中，优质的图标需要符合什么样的展现效果呢？我们又需要依照哪些流程进行绘制呢？笔者将结合这些问题展开解答。
借着疫情在家的休假时间，将平时用到的一些零零散散的图标绘制方法与思路进行了一次全面的汇总与沉淀，一起来看看吧！
从实习期间画一组图标的无从下手，每一个图标看起来都像是散装的一样，到后来慢慢学习与练习，到现在变得了解了图标的绘制流程，过程也是比较麻烦，因为很少有全面的图标讲解文章，都是看一篇懂一点，然后在揉到练习当中，本篇文章尽量将图标进行细致一些的流程说明，有不足之处还望指教。
01图标的可用性
图标可用性，顾名思义就是图标绘制出来是否能被用户所看懂并快速识别，是否可以为业务赋能。为此我总结出了四条图标绘制的评判标准。
1.凸显性
用户是否能在某页面上迅速找到该图标，凸显性的目的是可以快速查找，帮助用户做选择。图标在识别的速度上远远大于文字，所以在一些页面中的重要功能使用图标的目的是为了吸引用户的注意力，让重要功能得到凸显，提高重要功能的点击率。
2.可识别性
图标的目的是要让用户猜出他看到的图标所表达的意义，有什么作用，以及点击后会出现什么样的场景，发生什么样的事情。所以一个图标的好与坏最重要的因素就体现在这里：图标的可识别性与可预知性。
影响图标可识别性的三点因素：
视觉复杂性：图标的细节与组合图形的元素熟悉性：图标中图形所表达语义的熟悉程度具体性：图标或者图标中的图形与现实生活中物体的相似程度
3.美观度
图标是否美观，对用户是否有足够的吸引力。在《设计通用法则》一书中有一条设计法则是：美即适用效应，不管任何事物，美丽的外表都会给人带来好感，让人觉得这种事物在任何方面都非常美好。包括谈恋爱也是：始于颜值不是吗？作为设计师，把一件事物美观化是一件终生的必修课，用户对图标或者界面的第一印象就是始于颜值。
4.业务属性
图标是否符合业务属性，是否可以唤起用户的使用情绪，提高点击率，起到为业务赋能的作用。在界面中，我们设计的图标最终目的不只是让用户觉得它美观，而是要为我们的产品赋能，什么是为产品赋能呢？通俗来说就是使图标能够提升点击率从而给公司创造收益。
图标如何为产品赋能呢？
符合产品与业务属性。比如如果是儿童类产品，图标就要圆滑，多彩，看起来萌一点的感觉，如果是金融类的产品就应该使用微圆角，直角，中性色，金色来代表金融的庄严感与高级感。唤起用户的使用情绪。比如在大众点评app中，有关与食品的图标都使用橙色的拟物，因为暖色可以给人们带来食欲感，微拟物配合暖色系就可以唤起用户对食品的情绪感。引导用户点击，提升点击率。想要让用户点击一个内容那必须要有足够的吸引力吸引用户去点击，一般来说美观度越高趣味元素越多的图标可以占据大部分的吸引力，一个图标在页面中所占的比例也会影响对用户的吸引力，合理的文案搭配也会吸引用户去点击，比如优惠信息，新功能提示等。
02图标的类型
1.线性图标
线性图标，顾名思义，即图标是由直线、曲线、点在内等元素组合而成的图标样式。线性图标具有辨识度高，清晰唯美，简约易看等优点，线性图标不会对页面造成太多的视觉干扰。缺点是：线性图标的创作空间较少，太复杂的线性图标看起来会让人感觉到累。
2.面型图标
面性图标，即使用对图形内容进行色彩填充的图标样式。
面型图标是现实生活中物体的缩影，优点非常多，比如表意能力强，细节丰富，色彩丰富，情绪感强，视觉突出，创作空间大等，面型图标可以让用户迅速定位图标位置，快速预知点击后的状态。
但是面型图标在页面中不可过多出现，否则会造成页面臃肿，难分主次，用户视觉疲劳。
3.混合型图标
在设计图标类型的时候，不一定局限于单纯的线性与面型，也可以两者结合，让图标即有线性描边的轮廓，还有色彩填充的区域，混合型图标可以让页面变得更加有活力，同时还可以吸引用户的注意力，美观与创意性强。
但是混合型图标在商业产品中要谨慎使用，因为使用不当会让页面变得杂乱不堪，用户无法识别图标表达的语义。
03图标的色彩
1.色彩情绪
色彩情绪即颜色心理，指不同波长色彩的光信息作用于人的视觉器官，通过视觉神经传入大脑后，经过思维，与以往的记忆及经验产生联想，从而形成一系列的色彩心理反应。在任何场景下合理使用色彩心理可以吊起用户情绪，还可以让用户产生联想进而快速识别。
在设计图标的时候，合理的运用色彩情绪，会使图标更具有科学性，可以让用户在使用的过程中更加自然、舒服，同时也会增加用户的识别速度唤起用户的使用情绪。
色彩情绪表
2.配色方法
在配色时，我们采用更具备科学性、更符合人类感官的HSB系统进行配置。
在根据主色配置渐变色时，我们经常是在主色的基础上加白或者加黑。但是只加入大量的白或者黑就会改变原本色彩的明度与饱和度从而画面显得雾蒙蒙的不够清晰通透，正确的做法是在给主色变亮减暗的同时改变主色的饱和度，在hsb色相条中，最亮的三个颜色分别是，蓝紫色，青绿色与黄色，如果需要加亮主色就在混白的同时将蓝色像青色改变色相，如果需要减暗则是相反，这样在调制渐变色变化的过程中不会出现太脏的颜色。
04图标的配色方案
1.常见的色彩搭配
中性色（黑白）+主色、主色+点缀色、主色+透明度、单渐变、双渐变错层、撞色叠加穿透等效果。一般常用的就是中性色+主色、主色+点缀色。
2.点缀色配色
互补色：互补色就是在色环上距离°的色彩，形成具有视觉冲击力的色彩。近似色：近似色是在色环上距离45°左右的色彩，形成的配色效果风格和谐统一。对比色是在色环上°左右的色彩，可以产生较为强烈鲜明的视觉效果。
05图标的绘制规则
1.像素对齐
我们在绘制图标的时候应该将图标的每个像素尽量对齐于像素点，这样导出图标时像素的边缘不会出现锯齿，不会出现过于模糊的情况。
通常在绘制时我们应该去除绘制软件中x与y轴，宽（w）与高（h）的小数点，这样就可以避免无法对齐像素的情况。
2.图标参考线
在绘制两个或者以上的图标时，为了避免多个图标出现大小不一的情况，我们应该使用由谷歌材料设计语言提供的图标参考线进行绘制，使用图标盒子可以让一整套图标在视觉效果上更加统一和谐，不会出现一大一小一长一短的情况。
使用方法
先绘制一个*px的正方形，一个*px的正圆形，一个宽*px的水平矩形和一个*px的垂直矩形，圆角为4px，然后将这个四个形状进行水平居中对齐，之后得出一个图标的参考线。
在宽度相等的情况下，正方形的面积要大于正圆的面积，所以在绘制圆形图标时应该将圆形的上下左右四个顶点顶齐与图标盒子正方形区域的四条边，在绘制方形图标时应该将方形的四个角点顶齐与圆形参考线的外围边，在绘制横向矩形与纵向矩形图标时，应该将图标的左右边或者是上下边控制在正方形的参考线之内，这样矩形图标绘制出来会更加的圆润，相对于其他的形状图标更加匹配。
3.可访问性
我们绘制的图标必须要保证清晰度，可辨别性。不管是在强光下还是正常光下都需要良好的可读性。
这就需要图标不论是自身元素之间的对比度还是和页面底板背景之间的对比度都需要很好的可读性。
我们检测图标的可读性通常要将图标的背景色底板在黑色和白色之间进行切换对比，不论是黑色还是白色的背景都可以看清图标的全部细节，还需要确保图标中的每一种颜色都是可见的。第二就是将图标拿到强光下进行观察，在强光下是否可以看清图标的主题结构，图标还是否有足够的辨识度。
在绘制图标时，我们可以参考WCAG2.1：图形和用户界面组件的对比度至少为3：1的标准进行相应配色，以达到良好的可视状态。