我们的大脑在某些时候在理解视觉信息时,偶尔会发现偏差,这叫做「错觉」。当然,「错觉」也会出现在界面设计中,此时,你需要打破物理或数字规律,使用微调和优化来达到视觉平衡。

尺寸错觉

当一个正方形与一个圆形相邻时,即使将它们的尺寸设为相同,在视觉上看起来,方形会比圆形稍微大一些。这时候,我们需要稍微放大圆形图案,使得圆形直径比方形直接大一些,才能达到视觉平衡。

颜色

颜色的视觉平衡相对不容易被察觉,但是,当一个实心的颜色图标与文字相邻时,就会产生视觉偏差,那就是文字会显得暗淡一些。出现这种情况是因为,相比起实体图标,文字的线条较细,在视觉上就不如实心图标重。

要解决这个问题,我们需要把文字的颜色加深一些,这样就能达到视觉平衡。

位置

当图标与文字相邻时,将它们中线对齐,在视觉上看起来,图标会比文字位置更靠上。此时我们需要考虑基线的位置,因为两者的基准不同。此时我们需要微调图标,使其稍微靠下一些,就像下图一样。

视觉平衡的问题还有很多,在界面设计时还是要多加注意,否则在细微之处可能就产生大的影响。

本文整理自:https://medium.muz.li/basics-of-optical-balance-in-interface-design-ui-4037c033cca2