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

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

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

举个例子

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

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

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

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

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

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

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

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

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

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

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

实际运用

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

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

最终得出：

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

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

腾讯视频ICON：

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

知乎ICON：

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

上一篇：Adobe XD CC 2018 Mac版汉化教程下一篇：Archive Extractor 在线解压工具，支持超过70种格式！