一直在各种文章中能看到图标的尺寸规范，但是每个人都有自己的规范尺寸，或者说基础尺寸，你可能知道了44px的网格规范，但不知道30px又应该怎么画，而且这些具体这个尺寸到底是怎么来的也不知道，所以花了几天的时间，看了站酷、人人都是产品经理、简书的一些文章，然后总结出来了这些尺寸的算法以及他们的来源，如有错误，欢迎拍砖。

一、为什么要制定图标网格？

图标设计有效的三个属性（样式、美学统一以及可识别性），其中美学统一就是说：线宽是不是一致（2px？4px？）、是圆角还是方角？圆角的大小是不是一致？有没有断点？断点的规律是什么？配色是不是统一？有没有点缀？有没有背影？风格构成什么（面，线，填充线，或者字形）。元素的统一会让你的图标看上去整体风格是统一的。而我们要探讨的就是元素的视觉统一……

       如下图所示，我们画图标的时候，物体会有长有扁，有圆有方，在统一体量感的时候，就需要用到里面的一些参考线。保证正方形、圆形、纵向矩形、水平矩形视觉保持一致大小。

二、定义网格系统

       产品图标网格被用来促进图标的一致性，以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统。使用这些核心形状作为准则，你可以在相关产品图标的设计中保持一致的视觉比例。

       如下图所示，我们用A、B、C、D四个尺寸来表示:

然后看一些我在文章中看到的几种设计网格尺寸：（为方便计算，我把MD网格除以4）

看到这些尺寸的时候，我脑海中有几个问题：

问题1：为什么这些尺寸没有统一？

问题2：A是44×44的时候是这个设计规范，那么A是34×34的时候，B和C又应该怎么设置？

问题3：这几种尺寸中的B和C到底是怎么来的？

三、网格规范算法

带着那3个问题，开始查阅资料、文章，然后就发现这个B和C其实是有章可循的。算法是基于面积。

相信大家都知道，44×44的矩形比44×44的圆从视觉上来说要大一些，这是为什么呢？这里就牵扯出来一个面积算法。可看下图

从视觉上看，矩形要比圆开大，但我们拉根参考线，发现二者其中一样高

把这2个图形放在一起，发现明显矩形的面积要比圆的面积大，算法相当简单了

矩形面积S=边长×边长=44×44=1936

圆的面积S=π×R2=π×（D÷2）2=3.14×（44÷2）2=3.14×22×22=1519.76

很明显1936>1519.76

我们用这套面积算法试一下iOS中的B和C

A是圆形，面积SA=π×R2=π×（A/2）2  R为半径，A是直径，所以R=A/2

B是正方形，面积SB=边长×边长=B×B

C是长方形，面积SC=边长×边长=C×D

要想视觉大小统一，则  SA=SB=SC

对于iOS：已知A=44

所以iOS中的A=D=44，B=38，C=34 对应表2，是不是刚刚好呢

在已经A的情况下，我们用这种方法算一下其它四种网络的B和C：

对比表2和表3中的B和C，我们不难发现，只有MD和尺寸2中的C有很小的区别。你可以根据自己的感觉来微调，稍微大点小点无所谓。

由此得知，无论你的A的尺寸是多少，都可以根据公式计算出B和C。参考线是死的，人眼是活的，画完以后，要靠感觉微调，直至视觉上体量感达到一致。摆脱死记硬背，妈妈再也不用担心我的学习了。

四、小tips

01、icon尺寸

icon的尺寸一般选择4的倍数，这样有利于在成倍缩放的时候，不会造成半像素的情况。例如48x48的icon，缩小2倍的时候是24x24；而34x34的icon，缩小2倍的时候是17x17。在图标中应尽量避免出现单数。

02、安全边界

为避免给开发切图时贴边节，导致图标出现不自然的边界，我们需要上面的规范外添加一个外框，图标不要画超过这个界线。如红色外框为48×48，黄色内框也就是安全边界为：44×44。

03、参数设置与参考线的绘制

我平时是用AI画图标，所以这里仅演示的是用AI画图标的方法。第一步：在首选项-参考线和网格，网格线间隔10px，次分隔线10，勾选显示像素网格；

第二步：画布框内点击鼠标右键，显示网格；

第三步：在视图中打开“对齐网格”“对齐像素”“对齐点”。

04、关于图标不模糊的方法

我们在@2x，icon内部的横向方向和竖向方向的所有元素的像素值必须是偶数，同时他们的间隔也是偶数倍，也就是2px的整数倍。也就是构成图标的所有元素之间关系必须偶数倍（包括正形空间和负型空间）才能避免在导出多倍图的情况下出现虚边。

05、角度

在大多数情况下，保持45度角或其倍数。在45度角上的锯齿步进是均匀分布的（源于像素端对端对齐），因此消除锯齿后结果会很清晰，并且该角度在对角线上，让图案容易识别，这也让人眼看起来非常舒服。这种可识别的模式在一套图标中建立了一致性，并在单个图标中建立了统一性。 如果设计要求您必须违反这个规则，您可以请尝试以一半（22.5度，11.25等）或15度的倍数。 每种情况都不同，因此都试一试。 使用45度的一半的好处是，锯齿的步进仍然分布相当均匀。

06、插件

inkscribe和VectorScribe，具体用法和下载可自行百度。