视觉设计中发现的11种光学错觉

原文：11 Optical Illusions Found in Visual Design 
作者：Balraj Chana 
翻译：Vincent

译者注：相信你在平时的生活或者工作中遇到过一些神奇的场景，这些场景会让人产生一些视觉上的错觉，那么这究竟是怎么做到的呢？作者在本文介绍了11种场景，让我们一起看一下吧！以下为译文。

在我担任一名产品设计师的职业生涯里，我遇到过很多神奇的东西。

我写这篇文章的目的是为了帮助读者理解这些日常的错觉是如何迷惑我们的。可能一开始你还没意识到，但如果工作中遇到了某些界面、logo或者插画时，这些技术实际上都是视觉错觉!

所以不用多说，接下来让我们介绍一下视觉设计师们平时工作会经常遇到的11种视觉错觉。

1.三角形分割错觉

基于中心点对齐的三角形 

图标会欺骗你的眼睛，尤其是那些具有复杂几何以及比例比较特殊的图标。图标不一定都是对称的，某些图标的像素甚至还有问题，而且也不是所有图标都会保持一致的宽高比。

将三角形放置在弯曲或笔直的容器内可以使元件看起来好像发生偏移。会出现这种现象的原因是由于三角形分割错觉的影响。 三角形的质心是根据最小边框计算的。 所以如果你把一个点正好放置在等边三角形高的一半，它看起来就好像远远超过一半！

哪个是以数学为中心的？ 

关于这种错觉有两个理论：

• 不当恒常定标理论

错觉包含所谓的透视线索，这种透视线索可以增加远距离物体的感知尺寸，例如一个等边三角形通过这种视图就可能看成是道路的平面图，顶点好像是位于无穷远处，底边看着就像是最接近道路的部分。

• 重心/区域中心理论

如果要求观察者找到中点，结果一般都是会找到质心，质心的上面和下面都是相等区域。等边三角形的中心点远低于中点，有证据表明，观察者做出的选择是两者之间的妥协。

为了使其容器内的三角形以光学为中心，你需要通过计算连接每个顶点与另一侧的中点相交的点的点来找到一个三角形的质心。你可以使用下面这个公式：

求取三角形质心公式 

我只是在开玩笑，本文并不是介绍几何公式的文章（但上面这个公式还是正确的）。

重心可以位于从每一侧到相对顶点的距离的1/3。 此方法也可应用于许多其他形状。

2.水平—垂直错觉

水平—垂直错觉 

正方形是所有设计系统的基本组成元件。你可以在材料设计卡、Facebook帖子、Pinterest pins以及Dribbble照片中看到正方形的身影。

在Sketch中把正方形画出来后，你可能要花两倍的时间来看看两边的比例是否相等。如果看得足够近，垂直的两条线看起来会比水平的线长。看上去好像是个方块，实际上却是一个长方形!但事实却是一个完美的1:1的正方形。这被称为水平—垂直错觉。

Facebook上的图片是1:1的正方形 

真正让人着迷的是具有不同文化和性别的人对这种错觉的看法也各不相同。生活在发达城市的人往往比生活在农村地区的人更容易受到影响。这是因为农村地区的人更习惯于住在圆形的房子里。

3.马赫带

马赫带 

在平面设计领域，把相同颜色放在相邻位置是一种很常见的做法。仔细观察，你可能会注意到每个反差阴影的边缘都会有一个伪阴影。这种错觉被称为马赫带。实际上图像中根本没有添加任何阴影，这只是我们眼睛感知它的方式!

每一行的边之间有阴影 

从技术角度来解释这种现象的发生，就是由于侧向抑制，这意味着较暗的区域甚至会显得更加黑暗，而较亮的区域则错误地显得更明亮。

虽然这种效果在视觉设计领域相当微妙，但要证明它的影响，我们可以以牙科医生为例。牙齿x射线可以产生灰度图像，用于分析异常的强度变化。如果不能正确识别，马赫带可以提供假阳性诊断。

4.赫林错觉

你有没有遇到过一个logo，里面有很细的线条，或者是一副带有很多圆点的背景图像，在你滚动的时候，圆点会移动或跳动?如果在一个都是扭动着曲线的背景墙上前面播放一段时间那又是什么感觉?这是由于一种称为“莫尔模式”的别名效应，即两个网格模式相互叠加，产生的错误动作一旦移动。这种情况下的两个网格模式是图像和监视器不断刷新来创建错觉。

上下滚动查看震动效果 

这是一种很酷的效果，虽然波纹本身并不是一种视觉错觉，但它是一种干扰模式。Sonos的标志示例使用了莫尔模式、Hering幻觉和动视错觉的组合。这种感觉技术在Op艺术社区非常流行。

5.Hermann grid错觉

Hermann grid错觉 

Hermann grid错觉相当流行，可以在很多布局中看到，它包含了一个高对比度背景的方格网格。直视正方形以后，会在周围方块的交叉处产生像幽灵般的斑点，但直视十字路口会让斑点消失。

当看到十字路口时，灰色的圆点出现了 

造成这种效应的原因是侧抑制。简单地说，它是一个兴奋的神经元在后一个方向上减少邻近神经元的能力。

6.同时对比错觉

同时对比错觉 

将两个相同颜色的物体放在不同的对比背景下，结果却是看起来这两个物体的颜色不一样了。这种现象被称为同时对比错觉。在视觉设计的世界里，同时对比错觉就像是国王一般，而且这种错觉对于某些人来说可能还不一样。

文字的颜色在两边都是一样的，但看起来并不是这样 

不幸的是，没有一个可靠的理论解释为什么会出现这种错觉，但有很多研究都在推测原因。大部分的推测结果是横向抑制，这也是Hermann网格和Mach带的原因之一。

7.Munker-White错觉

 

这种错觉非常微妙，而且令人着迷!看看上面的GIF，左边的紫色方块看起来比右边的紫色方块颜色要浅一点。但是实际上这两边的方块反射的光量却是完全相同的。

Munker-White错觉的原因是由于…你猜对了,侧抑制。

8.水彩错觉

水彩错觉 

有时，我会给某个对象添加一条边框，然后却发现背景颜色也随之变了。如果仔细观察，你可能会注意到，这个苍白的区域会根据周围的边界颜色呈现出更亮的颜色。但是结果更令你感到惊讶的是其实这片区域实际上是白色的!

这种视觉现象被称为水彩错觉，依赖于轮廓线的亮度和颜色对比，以使色彩传播效果发生。

按钮上的白色区域似乎根据边框的颜色进行了轻微的着色 

我承认这个错觉让我困惑了几次，以至于我不得不拿出彩色的picker进行检查!

9.Jastrow错觉

Jastrow错觉 

做个插图或标志，无论是标记还是类型都需要切割和切割不同的形状。当使用弯曲的物体时，这种错觉就发生了。这两个元素的大小不同，但经过仔细检查，它们实际上是完全相同的尺寸!这简直会让人变疯了啊?

这种错觉是在创作过程中看到的，因为一些相同的曲线边缘可能比其他的更小 

这怎么可能?但这就是Jastrow错觉，没有明确解释为什么会感知不同大小的片段。有一种解释是由于大脑被更大的半径和更小的半径之间的差异所迷惑。换句话说，短边使长边显得更长，而长边使短边显得更短。

10.Cornsweet错觉

除了同时对比和马赫带错觉外，Cornsweet 错觉使用一个梯度，同时使用一个中心线来创造一个印象，图像的一边实际上比另一边更暗。但实际上，这两个部分都是一样的!当各部分并行放置时，可以发现两边实际上是相同的。

每一颗钻石都有相同的梯度，但它们看起来越来越暗(从上到下) 

这种错觉对上述两种错觉产生了类似的效果，但实际上有两种不同的方式:

• 在前面显示的马赫带示例中，只有在靠近每个阴影边界的区域才能看到效果。然而，Cornsweet错觉影响了他们对整个区域的感知。
• 在Cornsweet错觉中，边缘的光部分看起来更轻，边缘的暗部看起来更暗。这与通常的对比效果相反。

11.缪勒一莱尔错觉

overshooting的最佳视觉感知 

排版设计师会理解，制作字体需要更多地依赖设计直觉，而不是逻辑思维。根据度量高度在数学上定位每个字符，将使整个单词在视觉感知方面显得不成比例。在类型力学中，一种常见的做法是一个称为overshooting的过程。简单地说，overshooting是一个调整单个角色以达到光学平衡的过程。

在没有overshooting的情况下，LinkedIn上的字母“e”和亚马逊的字母“z”都没有平衡 

看看上面那些著名的标识，有些字符在基线和x高度的范围内并不会被刷新。排版员必须手动调整每个字符对的最佳效果。

但是为什么排版上会需要overshoot呢?

之所以需要overshoot，是因为世界上最流行的光学幻象之一——穆勒-莱纳错觉。这种视觉现象表明，在线段的两端分别放置一个人字形图记，根据标记的方向，可能会导致线段出现更短或更长的时间。这种经典的错觉证明了人类感知的错误性。有没有觉得很酷?