眼见不一定为实!全面总结设计中的障眼法

视错觉是指在视觉感知上与客观物理不一致的现象。人的大脑在接受视觉系统传递而来的信息后,经过综合地进行对比和分析,会尽可能地做出正确的判断,但是,当信息不够充足或者受到错误干扰时,就会出现视觉上的形态与客观物理上的形态不一致的现象,也就会产生视错觉。

一、常见的视错觉

眼见不一定为实!全面总结设计中的障眼法

△ 波根多夫(Poggendorff)错觉

一条直线穿过一个矩形后,在矩形的两侧,线段感觉上下错开了。

眼见不一定为实!全面总结设计中的障眼法

△ 缪勒—莱依尔(Müller-Lyer)错觉

上面的横线与下面中间的横线是等长的,但看起来下面的横线比上面的要长。

眼见不一定为实!全面总结设计中的障眼法

△ 菲克(Fick)错觉

垂直线与水平线是等长的,但实际看起来垂直线比水平线长。

眼见不一定为实!全面总结设计中的障眼法

△ 艾宾浩斯(Ebbinghaus)错觉

中间的两个圆面积相等,但看起来左边中间的圆大于右边中间的圆。

眼见不一定为实!全面总结设计中的障眼法

△ 托兰斯肯弯曲错觉

这三个圆弧看起来弯曲度差别很大,但实际它们的弯曲度完全一样,只是长度不一致而已。

通过这些经典的视错觉我们发现,原本一样的长度、一样的宽度、一样的面积在有些特殊情况下视觉看到的和客观实际是不一样的。这是因为人类的视觉系统是一个基于经验和感觉的系统,不是精准的物理纪录和反馈的系统,所以在一定的情况下视觉观察到的和实际会有所偏差。

二、设计中的视错觉与解决方法

在设计当中,也存在视错觉,当出现视错觉的时候就需要以看到的实际效果就是以视觉为基准,去调整设计,以达到在视觉上的完美。请跟随笔者从文字、图形、颜色这个三个大的方面去了解有哪些具体的实例。

1. 文字

汉字和数字的组合场景

眼见不一定为实!全面总结设计中的障眼法

在金融和电商领域的设计中,经常会出现数字和汉字共存的情况,但是汉字和数字的设计原理是不一样的,汉字是按照田字格来设计的,数字是按照英文的设计规则来设计的,相同字号的汉字和数字排列在一起,数字会显得小一些。这时候就需要手动去调整数字或者汉字其中之一的字号大小,以达到视觉上的大小平衡。

调整之后由于数字字号更大,所以数字的笔划会粗于汉字笔划,但是没关系,这样正好能平衡汉字和数字的字重。因为数字笔划结构较简洁,汉字笔划相对复杂,字重较重。

△ 调整方法可能适用的场景

但是这种调整方法也需要考虑使用场景,调整字号的方法比较适合用在海报、banner等内容是固定展示的设计中,也可以用在活动 h5 等内容相对固定的设计中,在 app 和网页中如果是数字和汉字的固定搭配也可以应用,但是需要根据具体的情况来灵活应用。