图标的主要作用之一就是作为文字的替代品，具有明确的寓意
图标下载参考网址：
https://www.iconfont.cn/（阿里巴巴矢量图标库）
https://remixicon.com/（开源图标库）
https://feathericons.com/（羽毛 漂亮的开源图标库）
https://www.flighticon.co/（飞行图标库）
图标分类
线性风格
面性风格
混合风格
导航栏图标常用尺寸
保持图标的一致性；
前面说过，工具图标有线性的、填充的类型，在正常的情况中，同一套图标应该在类型中保持相同，如果使用了线性图标那么后续就不要设计填充以及混合的类型。
风格一致
每一套图标都有自己的设计风格，不同风格在细节中都有不同的表现，需要让这些风格特征保持高度的统一，看看下面这些案例。
第一，为图标添加缺口的设计风格，我们要保证这个缺口的大小是一致的，并且每一个图标中有且只有一个缺口，而不是靠感觉随意添加。
第二，在设计一套偏圆润可爱的设计风格中，外轮廓使用了较大的圆角，那么我们尽可能保证圆角的大小是一致的，而不是有的用 4pt，有的用 2pt 或者直接使用直角。
第三，采用了填充色偏移的设计风格中，首先要保证填充色的一致，并且偏移的距离和方向也要保持固定的规律，不能随喜好任意制定。
透视一致
透视关系是在平面中对物体空间性质的表现方式，当我们应用了透视时，物体就有了一定的 “立体感”。
透视的表现不是绘制图标时必须使用的风格，但是如果我们在图标中应用了透视，就要确保我们使用的视角是一致的。要极力避免同一套图标中既用了正视图又包含了斜视图。
粗细一致
在图标中我们会应用到矩形线段或是描边，我们要尽可能保证它们的粗细是一致的。
比如，在线性的设计中，路径的描边尺寸要保持一致，不能这个图标用 2pt，那个图标用 1pt。
大小一致
大小一致，就是让图标的视觉大小保持一致，而不是它们字面上的长宽属性保持一致。
因为这是一个比较复杂的知识点，需要我们对几何图形的视觉差有比较完整的认识，我会在下一节做出完整的介绍。
这些和一致性有关的特征，是一套图标看起来专业、有整体感的必要条件。但是，在真实的设计场景中需要灵活变通。
如果有一些特定的图标，在保证了一致性的所有要求后却极难被人理解，且找不到更好的设计方式，就可以差别对待。
比如在一套线性的图标中，播放、快进等图标往往都是填充类型的，这并不会造成视觉或是使用上的困扰。
如何做到视觉大小一致？
怎么让不同的图形看上去一样大？
如果一个图形其中一部分面积远大于另一部分，那么就会让这个图形的重心产生偏移，必须要往较小的部分的方向移动才能产生平衡。
所以，在设计一整套的应用中，如果没有对这个理论的理解，只定义一个矩形出来，把所有图形的尺寸于矩形对齐，那么最终看到的图标效果一定是极度不平衡的。
什么是图标栅格
我们先简单看看，常见的工具图标栅格是什么样的。
里面包含了正方形、长方形、圆形对不对，那我们把它们分别罗列出来看看。是不是就发现这些图形的视觉尺寸是非常接近的？然后再通过这样的尺寸设计对应的图形，也就看起来都一样大。
所以，应用图标的栅格系统对于图标的设计来说，是一个用来应对几何图形视觉差的**“参照物”**。
如何绘制图标栅格系统？
如果我们定义一套 28pt（如果看不懂可以当成 28px） 的图标，那么我们首先要画一个 28pt 的正方形，然后确定一个 2-4pt 的内边距，四边留一线，
然后就要开始绘制其中正方形和圆形，正方形通常在整个图标尺寸 1/2 的比例，可以使用 14 或 16 的偶数 （为了可以居中）。然后再确定圆形的尺寸，圆肯定比正方形大 2-4 pt，于是就得到下方的图形。
之后，我们再确定横竖长方形的尺寸，可以直接顶到内边距的边缘。它的尺寸不是通过数值计算的，而是要我们先画出来，把它们和前面的圆、正方形置于一条水平线上，调整出一个平衡的视觉尺寸，再和并进栅格系统中，就完成了栅格系统的绘制，如下图的案例。
这一步也旨在检查我们的参考线系统是否在基础结构上经得起考验，是非常关键的一步。因为不同尺寸的图标中，参考线系统都是有区别的，我们不能直接按一个固定的比例来设置，要根据实际场景做判断。
对齐像素的设置
因为工具的图标太小了，而且 UI 的元素对精细和准确度的要求都不低，如果我们没有尽可能满足像素对齐的要求，那么就可能导致元素边缘的模糊。
所以要满足像素对齐的要求，就要符合元素本身的尺寸为整数、描边为整数、XY 轴坐标为整数的特性。
AI 中的像素对齐设置
在 AI 中，我们可以通过两个设定来查看和保证像素对齐，即网格的设置显示，以及对齐到点的设置。
像素的对齐主要表现在横线和竖线上，虽然现在手机显示精度越来越高，但并不意味着我们可以无视像素对齐的规律！在线性图标中，类似对于 1pt 或者 2pt 描边的应用，觉得不是太细就是太粗，可以用 1.5pt 的数值（1.5 pt 在 2x 中就是 3px），但切记不要出现类似 1.23、2.16、3.46 这种小数。
绘制流程：
1.我们可以先把这个词写到纸上，把和这个抽象信息相关的所有实体物写下来。
2.然后，我们可以挑选出某个合适的实物，以它作为原型开始绘制。如果对挑选出来的实物要以什么图形表现还没概念，那么就可以借助网上的图标素材网站，比如 iconfont、iconfinder 等，在搜索框中输入这些词语，通过别人的设计获取灵感。
如果本身拥有比较好的手绘基础或是平面基础，也可以直接通过对照片进行提炼的方式，设计出图形内容。
绘制流程
.信息联想，实物参考
.风格参考，设计样式参考。
.线上产品参考通过线上产品总结规律。
.规范的绘制
.输出尺寸
知识点1：图标首先要表意准确，能被用户识别并契合想要表达的寓意。
知识点2：设计整套图标的时候要符合一致性原则，包含类型、风格、粗细、透视、大小等特征。
知识点3：不同的几何图形会打给我们不同的大小视感，不能只看元素的参数。
知识点4：我们根据视觉差的方式定义出栅格系统，作为图标尺寸设定的重要参考。
知识点5：图标的绘制要保证横竖的直线对齐到像素，线性图标尽量采用整数粗细，如果一定要用小数的话就使用 0.5 递进的。
参考资料
苹果开发者中心网址：https://developer.apple.com/
苹果人机交互规范：https://developer.apple.com/design/human-interface-guidelines/
iOS设计资源下载：https://developer.apple.com/design/resources/
