【UI设计技巧】详解｜图标设计，精致的体力活儿！

对于一套图标来说图标有蓝色阴影 ，能让用户记得住，源于图标的与众不同；而能让用户觉得有

专业感图标有蓝色阴影 ，其实是源于图标的

整齐划一图标有蓝色阴影 。图标设计本身也有自己一套规范，在设计图标的过程中遵循一定规范去工作，不仅可以使图标看起来更美观，而且还可以体现出设计师的专业和价值。在本文中以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 倍来进行推敲的。