新手科普文，图标栅格系统基础知识+案例演示

我们都知道，如果按照图标的实际尺寸设计图标的话，会出现图标视觉大小不统一的问题那么我们应当如何解决这个问题呢？这个问题就是我们要制定系统图标栅格系统的原因。

举个例子

同样尺寸都是140*140px，正方形看起来要比圆形大

下图给出了辅助线和数值。

为了让他们呢看起来一样大小，将正方形适当缩小50px，缩小后视觉大小基本一致了。

我们把两个图形进行了重叠

左图正方形超过了圆形4个a区域，正是造成视觉误差的原因。

右图正方形超过了圆形4个a区域，而圆形也超过了正方形4个b区域，两个区域相互抵消。所以圆形和正方形在视觉上达到了平衡。

实际运用

参考iOS图标栅格系统，尺寸规格分析

最终得出：

运用栅格系统，的实际案例效果

腾讯视频ICON：

知乎ICON：