发布时间：2020-8-9 分类： 电商动态
撰写本文的目的是帮助您理解这些令人抓狂的影响背后的基本原理。您可能没有意识到界面，徽标或插图设计中使用的许多技术都来自“视觉错觉”。
八卦少了，这里有11个常见的视错觉案例。
1.三角分割错觉
选择一个，选择一点，来或不？
△基于质心对齐的三角形
图标可能会产生误导，尤其是由复杂的几何图形或奇怪的形状组成。在一组图标中，并非每个图标都是对称的，像素级别是完美的或保持固定的宽高比。某些图标需要手动调整，尤其是魔术播放按钮。
在圆角/直角矩形中放置三角形可能会使其看起来不正确居中。造成这种现象的原因被称为“三角错觉”。三角形质心基于最小的外接矩形。所以，如果你要将一个点放在等边三角形的一半高度上，你会发现它看起来超过一半。
△哪个是数学中心？
这种神奇的错觉基于两种理论：
固定缩放不正确
这种错觉意味着透视关系增加了远处物体（例如三角形）的可观察尺寸，就像在平面透视中观察道路一样，顶点是无限远，而底部边缘就像最近的道路部分。
重心/中心
如果要求观察者找到中点，他将最终找到质心，因为质心的上部和下部区域相等。等边三角形的质心低于其中点，有证据表明观察者将在两者之间妥协。
为了在矩形中以三角形为视觉中心，您可能需要通过计算等边三角形腰部的中点与对角顶点的交点来找到三角形的点。这是公式：
△计算三角质量点的公式
颗粒可以位于每个边缘的1/3处并连接到相对边缘的顶点。此方法也适用于许多其他形状。
2.垂直水平错觉
这是一个矩形吗？还是一个矩形？不，是一个广场吗？
△垂直水平错觉
正方形是任何设计系统的基石。你可以在Google，Facebook，Pinterest和Dribbble上看到它们。
按住Sketch中的Shift键绘制正方形，有时您需要查看以确保每一面都相等。如果足够小心，垂直边似乎比水平边长，更像是一个矩形。但实际上，它确实是1: 1的平方。这就是所谓的“纵向幻觉”。
△Facebook图片信息为1: 1平方。
令人着迷的是，不同的文化和性别对这种视觉错觉有不同的看法。城市中的人比这个国家更容易察觉到这个问题。 （翻译：什么幽灵……）。这是因为乡下人更习惯于住在圆形房间里。
3.马赫带效应
是否存在投射到物体表面的“不存在的”阴影，这是一种幻觉吗？
△马赫带
将相同颜色的渐变放置在彼此相邻的位置是常见的平面设计方法。仔细观察，您可能会注意到两个对比色块的边缘出现“不存在”的阴影。这种视觉错觉被称为“马赫乐队”。图像不会增加阴影，但我们的眼睛有幻觉。
△阴影出现在每行的边缘
从技术层面解释这种现象的原因是生物学侧抑制。在流行的方式，黑暗的一面显得更暗，明亮的一面显得更亮。
虽然马赫带效果在视觉设计上非常微妙，但即使牙医在其效果方面也会感到头疼。将X射线施加到牙齿上以产生灰度图像，该图像用于解决牙齿中异常变化的强度。如果不仔细辨别，马赫带效应可能会产生假阳性诊断。
4.鲱鱼幻觉
看起来像活着！
△鲱鱼幻觉
你有没有见过这个标志：背景图片有很多细线或小点。当您向上和向下滚动页面时，它看起来像是在移动或像脉冲一样跳动？或者它出现在视频中。电视，电视屏幕中包含的波浪线？如果是这样，那是由于“摩尔模式”的干扰现象 - ——两种网格纹理相互覆盖，移动时产生视错觉。
案例中的两个栅格纹理是图像和连续刷新的显示，从而产生幻觉。
△向上和向下滚动以查看震颤效果。
它太酷了。虽然摩尔本身并不是指光学错觉，而是干涉模式。 Sonos徽标示例使用了摩尔模式，鲱鱼幻象和动作幻象等技术组合。这种感官技术在欧普艺术（也称为视觉艺术）中非常流行。
5.赫尔曼网格
这是一个问题，无论是否出现。
△Herman Grid
Herman网格非常受欢迎，您可以在许多具有高对比度背景的网格布局中找到它。直接盯着任何一个方格都会在周围广场的交叉处产生幽灵般的斑点。但是当你试图转向那个地方时，它会神奇地消失。
△当你盯着十字路口时，会出现灰点
这种效果的原因与之前的——相同。 “边抑制”。简单来说，处于激发状态的神经元可以在周围神经元的方向上衰减视频信号。
6.同时比较幻象
两个独立的正方形是否具有相同的亮度？
△同时造影错觉
在相应的背景颜色上放置两个相同颜色的对象将导致两个对象以不同的颜色显示。这种现象被称为“同时对比错觉”。在视觉设计的世界中，这种现象被称为“对比之王”，这种效果对于不同的人来说可能看起来不同。
△文字颜色完全相同，但看起来不像这样
关于这种现象的原因没有科学的结论，但有许多相关的探索。 “侧面抑制”也被认为是这种现象的原因之一，就像赫尔曼网格和马赫带一样。
7. Munch White Illusion
眼睛闪烁着我？
△Munkebai幻觉
这种错觉非常微妙，但令人着迷。看上面的图片，左边的紫色块看起来比右边的亮度高一点。但是，在合并之后，两侧的补丁完全相同。
Munch White幻觉的原因，猜猜是什么？
嗯，它仍然是“侧面抑制”。
8.水彩幻觉
欺骗性着色……
△水彩错觉
有几次，当我为一个形状添加了一个颜色边框时，我不禁想知道：“我什么时候改变了背景颜色？”。如果仔细观察，您可能会注意到白色区域与边框产生相同但更轻的投影。但是，你实际上知道光投射区域实际上是白色的！
这种现象称为“水彩错觉”，颜色扩散的效果取决于轮廓亮度和对比度的组合。
△按钮内的白色区域看起来像是被边框染了一点
我承认我被这种错觉误导了，所以我拿起颜色选择器来检查它。
9. Gastro Graphics
尺寸真的很重要吗？
△Gastro图
在插图或徽标设计中，您将遇到需要切割成不同形状的标志或字体。当设计对象弯曲时，将出现上述图片的错觉。这两个元素的大小不同，但仔细观察就会发现它们完全相同。
在插图或徽标中，无论是徽标还是字体都需要切割成不同的形状。当工作对象弯曲时会发生这种错觉。这两个元素的大小看起来不同，但仔细观察就会发现它们完全相同。
△在创作过程中，一些应该相同的弧看起来比其他弧小。
事实上，这是众所周知的“Gastro图”，并没有明确的科学解释。为什么我们看到每个部分的大小？一个可能的原因是我们的大脑被大小和半径的差异弄糊涂了。换句话说，短边设置使长边显得更长，而长边设置使短边显得更短。
10.康世伟幻觉
蜻蜓的斜面。
△康世伟错觉
Constance幻象使用渐变，同时还添加中心线以创建一侧比另一侧更暗的图像。但事实是，双方是一样的。当您平行排出每个部件时，您会发现两侧实际上是相同的。
△每颗钻石都具有相同的渐变，但它们整体看起来更暗更暗（从上到下）。
这种视觉错觉类似于前面提到的两种，但有两个重要的区别：
在Mach波段效果的示例中，效果仅出现在贴片边缘附近。但康斯坦斯的错觉会影响整个地区。
在Constance错觉中，较亮部分的边缘看起来更亮，而较暗的部分看起来较暗。这与一般的“对比效应”相反。
11. Miller-Lair错觉
文字也很疯狂！
△最直观的“视觉矫正”感知
字体设计者知道创建字体更多地取决于直觉而非逻辑思维。如果你遵循措辞的数学含义，根据其度量高度，整个单词在视觉上是不成比例的。在“字体力学”的示例中，引入了称为“视觉校正”的概念。简而言之，所谓的修正就是重新调整个别字体大小，以达到视觉效果的平衡感。
△如果没有视觉校正，在Linkedin中的字母“e”和亚马逊中的字母“z”无法在视觉上平衡
看看上面这些着名的标识，有些字母不等待基线和X高度。字体设计师必须手动调整每个字母以获得最佳视觉效果。
为什么我们需要在字体设计中应用更正？
因为米勒 - 莱尔的错觉。这种视觉现象表明，在线段的任一端放置V形标记可能会使其看起来比实际上更短或更长（长度和长度），这取决于V形标记的方向。这种经典的幻觉证明人类的感知是错误的。
△Miller-Lair错觉
