设计中的重与轻

503 阅读2分钟

由于眼睛不具备精确测量的功能,我们只能通过眼睛传达给大脑的信息自行脑补,所以现实中眼睛经常欺骗我们,导致一些视觉上的偏差。

一、物理尺寸与视觉尺寸

下面的方块和圆形大小一样么?



我们看到其实他们的物理尺寸是一致的,但是眼睛欺骗了我们,认为正方形大于圆形,那么下面的这一组呢?


我们把圆形放大一些使得多出来的面积与缺失的面积基本达到一致,这样在视觉上达到大小一致的感觉。



这种方法经常用于icon设计以及表单中不同形状图形同时出现的时候,例如输入框+按钮这种形式


增大圆形面积来让视觉达到尺寸一致,有时候我们需要考虑到按钮与输入框不同样式时候的另外一种情况


这种情况下按钮在视觉上占比超过输入框,所以我们只需保证物理尺寸一致,即可在视觉上达成一致。


二、物理对齐与视觉对齐


根据刚才的内容我们来看一下对齐的情况,



实际上一样长的两个图形,在视觉上会觉得方形更长一点



延长一部分之后,在视觉上达到一致,这种方式在文字排版需要加底色时同样试用


添加浅色背景,视觉会自动根据色彩接近性,识别文字内容对齐,所以我们直接添加背景即可


添加深色背景时,由于文字要做反白处理,所以视觉自动识别背景边框与上下文文字对齐,我们需要将背景与文字对齐,背景上的文字需要缩进。


例如:登录框这种方式是正确的


三、物理居中与视觉居中


同样物理居中的两个按钮,右边的明显不居中


我们扩大了右侧按钮尺寸后,能看到视觉上已经居中了



这个三角在物理上居中了,视觉上没有居中,为什么呢?我们来找一下它的重心



我们看到导致视觉上不居中的原因是因为重心没有居中,普通的物理居中只是图形最边缘的点到边的距离保持一致,而不是图形中心,这就是为什么采用圆形作为车轱辘的原因,因为三角形旋转过程中重心不固定。

我们把它的重心居中后,在视觉上才能形成居中