emengweb
对于一套图标来说，能让用户记得住，源于图标的与众不同；而能让用户觉得有专业感，其实是源于图标的整齐划一。图标设计本身也有自己一套规范，在设计图标的过程中遵循一定规范去工作，不仅可以使图标看起来更美观，而且还可以体现出设计师的专业和价值。作者在本文中以1024px下的设计规范给出详细的说明和解释，欢迎大家讨论。
很多设计平台都推荐设计师在 1024 X 1024px 的网格中绘制组件，且圆角的大小保持 8 的倍数关系。例如 Ant Design 给出的图标绘制网格规定：
关于图标设计，你大概也有思考过这样的问题：
- 为什么图标要使用 1024 X 1024px 的网格进行绘制？
- 设计页面的时候，如果需要的图标大小是 16 X 16px，为什么不推荐直接使用 16 X 16px 的网格绘制图标呢？
对于这类问题，本文解答如下 ——
1 . 可以「精确」绘制细节
下面这张图你可以很清楚的看到网格的用法：图中放大的圆圈中的一个蓝色的小方格是 32 X 32 px，也就是说，这个蓝色小方格里面还是一个 32 X 32 的格子盘：
你可以想象，当你在绘制一个图标时，其实是在一个布满了小格子的纸上进行绘制，这样做我们在绘制图标的时候可以很精确，每一个圆角的大小、每一根线条的粗细、每一个斜线的角度等等，都有严格的数量规范，以确保图标造型的统一和精确。
关于图标的精确规范，我们以 Ant Design 的图标系统中的部分细节规范为例：
（1）圆角：
圆角的规格采取 8 的倍数原则，最常用的尺寸是 3 种，分别是 8px、16px、32px，它们之间是两倍数的关系。而图标内部空间的圆角则保持直角（0px）的处理方式。
（2）点的直径：
点是非常常用的元素。Ant Design 对于点的尺寸选择上会保持 16 的倍数这一原则。在点的选择中常用四种尺寸，分别为 80px、96px、112px、128px。当出现特殊尺寸的需求时，会按照 16 的倍数进行延展。
（3）线宽：
Ant Design 的线条宽度之间的关系采用 8 倍数原则，从小到大以 8 的规律递增。常用的规格也是 4 种，分别为 56px、64px、72px、80px。
你会发现，在 16 X 16px 的画板中肯定是可以画出来图标的，只是图标的形状并不是单一的圆形或是方形，一旦出现多种样式的线和点，你是无法精确控制绘制的规律的。
当然，1024px 也并不是绝对的数值，你也可以在 800 X 800px 或是 960 X 960px 的网格中进行绘制，网格数量越多，你的绘制就会越精确。
2 . 图标造型「灵活性」更高
使用 1024 X 1024px 的网格时，可以预留有效的“出血”位置。比如，Ant Design 在 1024 x 1024px 的画板边缘预留了 64px 的出血位，也就是说，真正用来画图标的常用画板尺寸是：1024-64-64 = 896，即：896 x 896px。
在图标的设计过程中预留出血位，可以预防某些造型的图标在具体应用时出现边缘被切掉的风险；同时在设计过程中，也为设计师把握图标间平衡留下了进退的余地，为图标赋予更多灵活性。
而如果你使用的是 16 X 16px 大小的网格绘制图标，则很难设置出有效的出血位。
3 . 「缩放」游刃有余
按照上文所述，当你在 1024 X 1024px 的网格中画好图标后，再将图标等比例缩小，就变成了我们通常看到的界面上的图标。通常情况下，界面上使用的图标的大小不会超过 1024 X 1024px，因此基本上都是对图标进行缩小变换，在缩小图像时可以保持锐利的边缘和正确的对齐方式。
而如果你使用的是 16 X 16px 大小的网格画出来的图标，如果需要放大的场景，在图标放大之后会有很多细节无法处理和补充。
4 . iOS 平台标准
以苹果公司为例， iOS 7 及之后版本 iOS 的图标网格均采用 1024 X 1024px 的网格作为基准。向 App Store 应用商店提交的 iOS 应用图标必须使用 1024 X 1024 分辨率的高清图标。Retina 视网膜屏幕也为高清图标带来极佳的显示效果，更好的考虑到用户的体验感受。
本文讲解的问题看上去很基础，但很多同学其实都是“揣着糊涂装明白”。绘制图标其实是一个“精致的体力活”，一套真正优秀的图标，在细节上是值得放大 10 倍来进行推敲的。