视错觉是指在视觉感知上与客观物理不一致的现象。人的大脑在接受视觉系统传递而来的信息后,经过综合地进行对比和分析,会尽可能地做出正确的判断,但是,当信息不够充足或者受到错误干扰时,就会出现视觉上的形态与客观物理上的形态不一致的现象,也就会产生视错觉。
一、常见的视错觉
△ 波根多夫(Poggendorff)错觉
一条直线穿过一个矩形后,在矩形的两侧,线段感觉上下错开了。
△ 缪勒—莱依尔(Müller-Lyer)错觉
上面的横线与下面中间的横线是等长的,但看起来下面的横线比上面的要长。
△ 菲克(Fick)错觉
垂直线与水平线是等长的,但实际看起来垂直线比水平线长。
△ 艾宾浩斯(Ebbinghaus)错觉
中间的两个圆面积相等,但看起来左边中间的圆大于右边中间的圆。
△ 托兰斯肯弯曲错觉
这三个圆弧看起来弯曲度差别很大,但实际它们的弯曲度完全一样,只是长度不一致而已。
通过这些经典的视错觉我们发现,原本一样的长度、一样的宽度、一样的面积在有些特殊情况下视觉看到的和客观实际是不一样的。这是因为人类的视觉系统是一个基于经验和感觉的系统,不是精准的物理纪录和反馈的系统,所以在一定的情况下视觉观察到的和实际会有所偏差。
二、设计中的视错觉与解决方法
在设计当中,也存在视错觉,当出现视错觉的时候就需要以看到的实际效果就是以视觉为基准,去调整设计,以达到在视觉上的完美。请跟随笔者从文字、图形、颜色这个三个大的方面去了解有哪些具体的实例。
1. 文字
汉字和数字的组合场景
在金融和电商领域的设计中,经常会出现数字和汉字共存的情况,但是汉字和数字的设计原理是不一样的,汉字是按照田字格来设计的,数字是按照英文的设计规则来设计的,相同字号的汉字和数字排列在一起,数字会显得小一些。这时候就需要手动去调整数字或者汉字其中之一的字号大小,以达到视觉上的大小平衡。
调整之后由于数字字号更大,所以数字的笔划会粗于汉字笔划,但是没关系,这样正好能平衡汉字和数字的字重。因为数字笔划结构较简洁,汉字笔划相对复杂,字重较重。
△ 调整方法可能适用的场景
但是这种调整方法也需要考虑使用场景,调整字号的方法比较适合用在海报、banner等内容是固定展示的设计中,也可以用在活动 h5 等内容相对固定的设计中,在 app 和网页中如果是数字和汉字的固定搭配也可以应用,但是需要根据具体的情况来灵活应用。
字体设计
△ 横粗竖细错觉在字体设计中的体现
在字体设计中也会存在视错觉。需要注意以下几点,因为「横粗竖细」错觉的存在,所以在需要设计横和竖笔划粗细相同的字体时,需要调整横或者竖的粗细。如上图中黑体「王」字横的笔划细于竖的笔划。
△ 融360品牌形象
不同汉字之间、汉字和数字英文之间的字体笔划数量和复杂度差别很大,解决方法就是笔划多复杂的字体笔划变细,笔划少简洁的字体笔划加粗,以此来平衡字重。看上图的实例,公司的品牌形象,在视觉感受上「融」和「360」的笔划粗细是平衡的,但其实品牌设计的同学是调整过汉字和数字的笔划粗细的。
在出现倾斜交错笔划时需要注意调整笔划,以防止出现波根多夫错觉。
纯英文的标题设计或 logo 设计需要注意视觉调整,因为同等大小的圆形和方形,方形会显得大一些,所以需要微调,把接近方形的字母缩小一点,或者把接近圆形的字母放大一点。
2. 图形
icon 的物理尺寸和视觉调整
△ android 和 iOS 图标规范
尽管谷歌和苹果都提供了给设计师参考的 icon 绘制辅助图形,但是由于辅助图形仅提供了圆形、正方形和长方形这几类常见的 icon 形状,但是在设计中难免会有一些异形的 icon,这时候辅助图形提供的帮助就非常有限了。那么在有很多形状的 icon 并存时怎么确保它们的视觉大小相同呢?
其实几乎所有的 icon 都可以归类为有规律的图形,比如长方形、圆形、菱形、三角形等等,平衡好这些图形的视觉大小,就可以平衡好各种异形 icon 的视觉大小。
icon 总体的图形轮廓可以大体归类为以上几种。上图中的图形物理尺寸一样,但是在视觉上它们的大小差异很大。
怎么去调整它们的大小,让它们在视觉上大小接近呢?有一个规律就是越接近方形的图标视觉感受越大,按照这个规律调整后如上图。
调整后,直接观察好像不能直观的发现大小差异,那么如何去检验是否在视觉上达到平衡呢,这里可以通过整体观察(眯眼大法)的方法,感受图形的整体面积大小,不要被图形的边缘所影响。或者直接模糊这些图形也可以达到同样的效果。
举个例子,来检验下整体观察方法的有效性。如上图这四个 icon,用刚才的调整规律来看,好像圆形的论坛 icon 不符合我们所说的圆在视觉上显得小应该放大的规律。
但是经过模糊后我们发现其实他在视觉上是平衡的,这其实可能是因为论坛 icon 内的双引号是粗于其他 icon 内的笔划。这告诉我们按照图形外轮廓调整大小也需要综合考虑 icon 的内部元素的复杂度,面积等因素,必须经过视觉平衡的检验,不能死板的套用方法。
物理曲线和自然曲线
上图中左边的是 superllipse 图形,就是常说的 Lamé curve,是法国数据家 Gabriel Lamé 发现的。它相比右边用ps直接绘制的圆角矩形看起来更平滑自然,右边的圆角矩形看起来直线和曲线的接口处会有个小「突角」,并且四个边的直线中间会有凹陷的感觉。
那么我们怎么在设计软件中去手动调整圆角而获得一个更加自然的圆角矩形呢?原理就是调整直线和曲线过渡的地方,按照上图所示的方式手动调整曲线,调整过后的圆角更圆润了。sketch 最新版本现已加入了直接绘制平滑圆角的功能。
这种方法同样也适用于圆形按钮。
物理对齐和视觉对齐
软件的对齐方式也有局限性,典型的例子就是播放按钮。这种中心是一个类似三角形或者不规则图形时,软件对齐会显得很怪异。这是因为软件会把两个图形放在2个矩形内,去对齐这2个矩形,产生的结果就是在视觉上并没有对齐。解决办法就是把三角形放在一个圆形的框内,用圆和矩形去对齐,这样三角形在视觉上才是居中对齐。不规则图形则需要手动调整,以达到在视觉上的对齐。
在上图中两根线条和两个矩形的间距是一样的,但是在对比的作用下产生了线条之间的距离要大于矩形之间的距离的错觉,这是因为在粗细的对比作用下矩形之间的距离更小。这个错觉经常出现在输入框按钮共存和信息图表的的设计中。
上图中左边输入框和按钮高度是