在开发过程中，难免少不了各种图标，赏心悦目的UI界面需要优秀的图标设计。不过老是找设计师画图也不好，一次两次可以，次数多了人也是会烦的。所以自力更生吧，做一个全能全栈的程序员。
选择图标绘制软件
在ui/ux设计中，常用的软件的有PhotoShop，illustrator，XD，Sketch。Sketch和XD主要是用于ui/ux设计中的排版，其中Sketch是mac系统独有的，其他三个软件都是Adobe公司的，有windows/mac的版本。主要的图标绘制用的是PhotoShop和illastrator，以前的图标设计经常用的是PhotoShop，但是现在流行扁平，拟物，5D等风格，PhotoShop逐渐被淘汰，主流的图标设计现在全用的illastrator。
不过这并不代表不需要学习PhotoShop，因为这两款软件是相辅相成的，作为同一个公司开发出来的软件，二者不光在界面上高度一致，甚至在快捷键上也有不少相同的。并且一个针对位图处理，一个针对矢量图，专精的领域不同，各有所长。学好了其中的一个，另一个也不难。
位图与矢量图
PhotoShop/PS的大名可能人人都听过，这是世界上最流行的位图处理软件，illastrator则是第二流行的矢量图处理软件（在矢量图领域最一名应该是cdr）。关于位图和矢量图的区别，简单得来说，就是位图可以表现色彩的变化和颜色的细微过渡，产生逼真的效果，缺点是图片放大会失真；而矢量图放大后图像不会失真，适用于图形设计、文字设计和一些标志设计、版式设计等。目前在图标的设计中，常见的步骤是先用AI绘制好矢量图标，再导出位图的png文件，如果有尺寸等其他方面的调整，可以导出到PhotoShop中再做后续修缮。
图标的设计规范
表意准确
图标的主要作用之一就是替代文字，因为文字在很大程度上并不具备美观性，并且文字会涉及到不同的语言问题。而图标，则完美得解决了这一问题，图标具有明确的寓意。所以表意准确是图标的第一要素，比如下面这些电商图标，每一个指代的功能和寓意都是非常直白、清晰的。
一致性
一套图标中，应该保持一致的细节，大小，粗心等细节就不用说了，这里主要说的是图标风格，每一套图标都有自己的设计风格，不同风格在细节中都有不同的表现，需要让这些风格特征保持高度的统一。下图即为图标不统一的体现：
因此在绘制一套图标之前，就应该确定该套图标的设计风格，线性或者非线性，白色还是黑色，拟物还是抽象，确保整体风格保持高度一致。如果图标需要背景，可以先做一个只有背景的模板，再往上面依次绘制主体图标，如下图所示：
背景模板：
一套风格一致的图标 ：
几何图形的视觉差
由于视觉差，同样尺寸的图形可能看上去不是一样大的。400px的圆形和400px的正方形哪一个更大？在几何学中，他们的宽度和高度都是相等的，但是在下图中，我们视觉上看起来正方形比圆形大：
下面是设置了参考线的：
针对这个情况，我们可以将视觉体量小的图标可以超出图标区域（为保持图标统一自定义的方形或圆形区域），将视觉体量大的图标与图标区域边框尽量有更多的留白，这样不同形状图标的视觉体量可以得到互补。这只是一个简单的例子，在实际操作的过程种我们会遇到比这个复杂很多倍的图形，这时候怎样去调整到适当的大小就要结合自己的感官认知了。
本篇只是对图标设计的简单介绍，没有涉及到具体的操作，在实际操作过程中，需要用到illustrator，简称AI，有可能的尽量支持一下正版吧，不过个人使用adobe公司也不会去管你，公司使用的话尽量买入正版，小心被告。
