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

设计经验 ·  互联网  · 0 评论  ·  收藏文章

我们都知道,如果按照图标的实际尺寸设计图标的话,会出现图标视觉大小不统一的问题

那么我们应当如何解决这个问题呢?这个问题就是我们要制定系统图标栅格系统的原因。


举个例子

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

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


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

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


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

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

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


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

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


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

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


实际运用


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

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


最终得出:

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


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


腾讯视频ICON:

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

知乎ICON:

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