使用图标盒子使图标视觉大小一致

在我们日常的图标设计中,经常会遇到,明明上下对齐,但是图标却看起来不一致的情况,这是为什么呢?


                                                         (高度一致,视觉上却不协调)

如下图,在同样的宽高下,方形的面积会比圆形的面积视觉效果要大,因为方形比圆形状的面积多出来了“a”区域


所以,如果要让方和圆的视觉大小是一样的,我们就需要让圆的面积大一些,如下图,宽高尽管不等,但是方和圆的视觉大小是保持平衡的。


图标盒子

在日常的设计中,我们引入了图标盒子这一工具,来让我们保持不同形状的图标在视觉上进行统一。使用图标盒子可以很好的避免反复调试以及减少试错的成本。在画图标前,我们要先学会定制图标盒子。图标盒子尺寸如下图:屏幕快照 2021-06-06 下午11.56.56.png

设计好图标后把图标放入图标盒子进行大小微调,不要因为图标盒子而破坏图标的结构,图标主要结构需在盒子内,非主要结构可以在盒子外。

屏幕快照 2021-06-06 下午11.57.26.png

案例如下图,使用图标盒子修改后总体视觉平衡


如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容