对于图标的尺寸曾经觉得是玄学。物理尺寸一致，视觉上感觉不一样，追求视觉一致玄之又玄。直到看到一些大神的文章，哦〜〜〜原来如此，有规范，那我就放心了。

但是图标的不同又是怎么来的呢？？？一定要找到他们的规律，不然做起来纠结呀（原谅我的强迫症）。

首先，了解图标的设计规则。图标分为圆形、正方形、横向矩形、纵向矩形的形状。保证他们面积一样时视觉上看起来会一致。

我们以常用的48px图标举例，IOS和Material design规范有些微的差别：

先按照规范临募一组图标，我选择在iconfont首页选择“淘票票官方图标库”。结果如下图(线条为3像素)：

可以看出IOS图标更饱满，Material design形状变化大一些，自有其美感，自成一体。果然，设计时有所依据，心里踏实多了。

但是呢？也有很多图标不是按这个规范来的，它们是按照什么规律呢？在网络课程中找到另一种方法：

如图是以3像素为单位时的辅助框的使用方法，以下分别是单位3、2、1时的图标对比。

结论

 - 单位越小，图标更饱满。这样我们就可以根据想要的风格调整自己的图标。个人觉得这种方法比较好用。

 - Material design采用的是以3像素为单位。

那IOS规范是采用的是几像素为单位呢？显然都不是。

那有3*2,就可以3*1、3*4了？

也是可以的，结论是数值越大变化越大，数值越小看起来更饱满。一般更饱满，视觉更舒服哦。看来一套图标采用一个规则，视觉上都是一致的。

但是？？？我用“淘票票官方图标库”的图标套用以上规范都套不上！！！我太难了。。。。。难道？这是传说中的最高境界无招胜有招？大神们可以用眼睛衡量面积？求解惑。。。。

Powered by Froala Editor