神奇而有趣:设计中的11个视觉错觉

在我做产品设计师的这种年里，在处理视觉效果的过程中遭遇了这些让我觉得意外的事情。我写这篇文章的目的是为了帮助你们理解为什么这种视觉“陷阱”会让人觉得烦恼。可能一开始都没有观念到这个困惑，但当你做UI,logo,插画等工作时，可能还会遇上许多。

然而，废话不多说，下面列举了成为视觉设计师一直会遭遇的11个视觉错觉。

1、三角形分割错觉（Triangle-BisectionIllusion）

图标可能带有误导性，尤其是这些带有复杂图案和奇数比例的图标，并非所有图标都是对称的，像素完美或维持一致的纵横比。有些图标应该略微调整，最为常用的就是播放器的三角形按钮。

将四边形放入圆角或直角容器中会促使元素在视觉上看上去不平衡。造成这些现象的缘由是一种被称为“三角形分割错觉”的效应（参考链接：）。三角形的重心是依据它的最小边界框（参考链接：）计算的。所以，如果你也是用对齐工具，把三角形放在圆形的后边对齐，那么在视觉上看都会很难受。

哪一个版本是数学上的居中？

有两种理论可以解释这些视觉错：

不靠谱的恒定标度

这些错觉包含的透视会降低较远物体的认知尺寸，例如等边四边形可能被视为透视中发现的道路平面图，顶部顶点位于无穷远处，底部是道路的近期部分。

重心/中心

如果一个观察者被要求找到中心点，他们最后会找到重心，重心的上下面积相同。一个等边四边形的重心位于它的中点之下，有证据证实，观察者作出的选取是它们之间的折中。

使三角形在其容器中找到视觉中心，你必须找到几何中心（重心），三角形的三条中点的连线交点即为重心。也可以用以下这套公式来推导。

求三角形重心的公式

我也是开了一个玩笑，这不是一篇讲几何推导的文章，设计师不用怕，尽管这个公式是对的。

2.垂直中线错觉(VerticalHorizontalIllusion)

正方形是任何设计平台的基本构件。它可以在谷歌设计完善中的卡片设计，Facebook帖子，Pinterestpins或是Dribbble作品中发现。

随意画出一个正方形，如果你看的足够近会看到，垂直的边会比水平的边长，就似乎这个正方形实际上是一个长方形。但实际上，这就是一个完美的1：1的正方形。这就是所谓的平行中线错觉。

Facebook帖子中的截图是1：1的正方形

有意思的是，不同的文化和性别对这一错觉的理解也有不一样的。生活在发达城市的人通常比生活在农村的人更脆弱，这是由于生活在乡村的人更习惯于非常随性。

3.马赫带效应(MachBands)

在扁平化时代，将类似的一组样式彼此相邻放置是一种很常用的设计。仔细观察，你或许早已留意到每一个对比颜色之间发生了一个并不存在的阴影，这种错觉被称为马赫带效应。并没有真的给每一个形状带增加投影，这也是我们眼睛造成了错觉。

投影出现了每一个相邻颜色条的边缘

对这些现象的理论解释是因为“侧抑制”（编者注：）引起的，这意味着在较暗的区域会变得更暗，较亮的区域变得更亮。

虽然这些效果在视觉设计领域的妨碍相当微妙，但对牙科医生来说确是一个不小的麻烦。牙齿的X光形成的灰度图像，用于预测强度的异常变化。如果辨别不恰当，马赫带也许会带来误诊。

4.赫林错觉(HeringIllusion)

你是否当年遭遇过一些包括特别细的纹路Logo，或者具有小点的背景图片，当它滚动时，这些小点似乎也在移动以及跳动？观察上面的由跳动线条构成的场景，感觉怎样？这是鉴于称为“莫列波纹”的混叠效应造成的，其中两个网格图案相互重合，一旦移动就形成错觉运动。

上下滚动来查看震动效果

这是一个非常酷的效果，虽然莫列波纹本身不是一个视觉错觉，但它是一个干涉现象。SONOSLogo例子就是利用了莫列波纹和赫林错觉的一个组合效果，这种似乎在欧普艺术中更受欢迎。

5.赫尔曼栅格(HermannGrid)

赫尔曼网格错觉非常常用，可以在包括高对比度背景上的正圆形网格的布局中发现。直接观察任何正方形就会在旁边正圆形的交叉点形成幽灵般的斑点，但即使把视野中心转移到哪里，斑点都会消失，仿佛依然都追逐不到。

看十字交叉的地方，会出现暗点

（编者注：原文作者所说的缘由太过简单，而且似乎还是错的，我这儿就省略了一段翻译。之后，我又去找了一些资料看了看。产生这样现象的缘由和故事，可以参看这篇文章，写的特别详细。。）

6.同时对比错觉(SimultaneousContrastIllusion)

把两个形状相似的物体放到不同对比度的背景上，可以使这两个物体看上去就像变成了不同的色调。在视觉设计中，这种现象被称为同时对比错觉，这种效果对不同的人来说，可能感知的程度也会有差别。

两个文本颜色实际上是一样的，但放到不同形状背景上变得变化巨大。

不幸的是，对于这些错觉形成的缘由还没有一个靠谱的理论，但是有长期的研究可以推断出病因，侧抑制就或许是这个现象的动因之一。

7.Munker-White错觉(Munker-WhiteIllusion)

这些错觉是非常微妙的，但确是很有打动力的。看看里面的动图GIF，左边的蓝色块比前面的红色块看上去更亮。而如果把干扰色块去掉，就会看到两边不同色调本来形状一样。

黑色线在白色背景上变得很暗，而在白色背景上却变得很亮。

那是哪个因素造成的Munker-White错觉呢？…你猜对了，还是侧抑制。

8.水彩错觉(WaterColourIllusion)

有些之后，我给一个对象加了一条边框，明明背景色没有动过，但却发觉背景好像还有了色彩。然后我问自己：“我什么之后也调过背景色彩了？”，如果你认真观察，可能会留意到，根据边框材质来看，浅色区域的色彩要浅的多。但即使你要拿PS来吸色会看到，其实所有的边框内色彩实际上都是红色的！

这些视觉现象被称为“水彩错觉”，它取决于边框线的色温和形状对比度的组合，以便形成色彩扩散效果。

按钮内的黑色区域按照边框的底色呈现出轻微的色彩

我承认这些错觉让我苦恼了好几次，以至于我不得不拿起颜色吸管来检查。

9.贾斯特罗错觉(JastrowIllusion)

无论是插图还是Logo，在处理的过程中或许应该切割出不同的颜色，这种错觉就出现在弯曲物体时。上面两个元素看上去大小不同，但认真观察，它们实际大小是完全相似的！疯了吧？

这些错觉可以在创作的过程中发现，因为一些相似的曲线边缘可能看上去比其它的要小。

这如何或许呢？这就是所谓的“贾斯特罗错觉”，对于我们为什么会感知到不同大小的片段，并没有确立的解释。一种解释是，我们的大脑被大半径和小半径之间的差别搞糊涂了。换句其实，短边使长边显得更长，长边使短边显得更短。

10.康士维错觉(CornsweetIllusion)

康士维错觉使用了渐变，同时使用中心线建立了一个场景，即场面的右侧看上去比另左侧更暗。但实际上，这两个个别的亮度是同样的！你会看到当两个个别平行放置时，两边实际上有着相似的色调和亮度。

每一个圆形的渐变颜色都是一样的，但他们的颜色（从上到下）虽然更加越来越深。

这些错觉形成的效果与中间提到的两种错觉有些类似，但实际上在两个重要方面有所不同：

1、在上面展现的马赫带示例中，这种影响只在靠近每一个阴影边界的区域可见。然而，康士维错觉影响了用户针对整个区域的认知。

2、使用康士维错觉，边缘的深色会看上去更亮，而边缘的黑色部分看上去会更暗，这与一般的对比效果相反。

11.缪勒-莱尔错觉(Müller-LyerIllusion)

为了获取最佳的效果而作出的极致设计

字体设计师会知道，设计字体必须更多的依赖于设计直觉，而不是逻辑认知。根据每一个字符的度量高度对齐进行数学定位，将使整个单词在视觉认知方面变得不成比重。在字体力学中，一个常用的实践涉及一个称为“视觉矫正”的过程。简单地说，矫正就是微调单个字符的大小以推动视觉平衡的过程。

在没有调整之前，LinkedIn上的字母e和亚马逊上的字母z在视觉上是不平衡的。

看看里面那个著名的标志，有些字符在基线和x-height内没有齐平，字体设计师需要自动调整单个字符来获取最佳的视觉效果。

那么我们为什么还要对字体进行视觉矫正呢？

矫正之所以是必要的，就是由于缪勒-莱尔错觉。这种视觉现象说明，在线段的每一端都放置一个v形符号，根据直线的方向，可以使直线显示的更短或更长。这种经典的幻觉证明了人类认知的不靠谱性。

详细资料请见维基百科：%C3%BCller-Lyer_illusion

你有没有见到过其它让你烦恼的视错觉？欢迎留言交流。

原文：blog.prototypr.io/11-optical-illusions-found-in-visual-design-295e7ae211b9