Date 2026-05-11 10:23:49
视觉错觉是指视觉感知与客观物理不一致的现象。人脑在接受视觉系统传递的信息后，经过综合比较分析，会尽可能做出正确的判断。然而，当信息不足或受到错误干扰时，视觉形式与客观物理形式不一致，会产生视觉错觉。
△ 波根多夫（Poggendorff）错觉
直线穿过矩形后，在矩形两侧，线段感觉上下错开。
△ 缪勒-莱依尔（Müller-Lyer）错觉
上面的水平线和下面中间的水平线是等长的，但是下面的水平线看起来比上面的水平线长。
△ 菲克（Fick）错觉
垂直线与水平线相等，但实际上看起来垂直线比水平线长。
△ 艾宾浩斯（Ebbinghaus）错觉
中间的两个圆面积相等，但左中间的圆似乎大于右中间的圆。
△ 托兰斯肯弯曲错觉
这三个弧的弯曲度似乎有很大的不同，但实际上它们的弯曲度完全相同，但长度不一致。
通过这些经典的视觉错觉，我们发现在某些特殊情况下，相同的长度、宽度和面积与客观实际不同。这是因为人类的视觉系统是一个基于经验和感觉的系统，而不是一个准确的物理记录和反馈系统，所以在某些情况下，视觉观察会偏离实际情况。
在设计中，也有视觉错觉。当视觉错觉出现时，需要根据视觉调整设计，以达到视觉完美。请跟随作者从文本、图形、颜色三个方面了解具体的例子。
汉字与数字的组合场景
在金融和电子商务领域的设计中，数字和汉字经常共存，但汉字和数字的设计原则是不同的。汉字是根据田字格设计的，数字是根据英文设计规则设计的。同一个字号的汉字和数字排列在一起，数字会显得更小。此时，需要手动调整数字或汉字之一的大小，以实现视觉大小平衡。
调整后，由于数字尺寸较大，数字笔划将比汉字笔划更厚，但没关系，这可以平衡汉字和数字的重量。由于数字笔划结构简单，汉字笔划相对复杂，字重较重。
△ 可能适用的场景调整方法
然而，这种调整方法也需要考虑使用场景。调整字体大小的方法更适合海报、横幅等内容的固定显示设计，也可用于活动 h5 在内容相对固定的设计中， app 如果是数字和汉字在网页上的固定搭配，也可以使用，但需要根据具体情况灵活运用。
字体设计
△ 在字体设计中，横粗纵细错觉的体现
视觉错觉也存在于字体设计中。由于以下几点需要注意，因此需要注意「横粗竖细」错觉的存在，所以当需要设计相同厚度的字体时，需要调整水平或垂直的厚度。如上图所示，黑体「王」水平笔划细于垂直笔划。
△ 融360品牌形象
不同汉字、汉字和数字英语之间的字体笔划数量和复杂性差异很大。解决办法是使笔划更复杂，字体笔划更薄，笔划更简单，字体笔划更厚，以平衡字体重量。看看上面的例子，公司的品牌形象，视觉感受「融」和「360」笔划的厚度是平衡的，但事实上，品牌设计的学生已经调整了汉字和数字笔划的厚度。
倾斜交错笔划时，要注意调整笔划，防止波根多夫错觉。
纯英语标题设计或 logo 设计需要注意视觉调整，因为同样大小的圆形和方形会显得更大，所以需要微调，缩小靠近方形的字母，或者扩大靠近圆形的字母。
icon 物理尺寸和视觉调整
△ android 和 iOS 图标规范
尽管谷歌和苹果都为设计师提供了参考 icon 绘制辅助图形，但由于辅助图形只提供圆形、正方形和长方形等常见类型 icon 形状，但设计中难免会有一些异形 icon，此时，辅助图形提供的帮助非常有限。所以有很多形状 icon 并存时如何保证视觉大小相同？
事实上，几乎一切 icon 可分为常规图形，如矩形、圆形、菱形、三角形等。平衡这些图形的视觉大小可以平衡各种异形 icon 视觉大小。
icon 整体图形轮廓大致可以分为以上几种。上图中的图形物理尺寸相同，但在视觉上大小差异很大。
如何调整它们的大小，让它们在视觉上接近它们？有一个规律，图标越接近方形，视觉感觉就越大，如上图所示。
调整后，直接观察似乎无法直观地发现尺寸差异，那么如何检查它们是否在视觉上达到平衡呢？在这里，您可以通过整体观察（眯眼法）感受图形的整体面积，而不会受到图形边缘的影响。或者直接模糊这些图形也可以达到相同的效果。
例如，检验整体观察方法的有效性。如上图所示 icon，从刚才的调整规则来看，就像一个圆形的论坛 icon 不符合我们所说的圆在视觉上显得小而应该放大的规律。
但在模糊之后，我们发现他实际上是视觉平衡的，这可能是因为论坛 icon 内部的双引号比其他的要粗 icon 内部笔划。这告诉我们，根据图形轮廓调整尺寸也需要综合考虑 icon 内部元素的复杂性、面积等因素，必须经过视觉平衡的检验，不能死板地应用。
物理曲线和自然曲线
上图左边是 superllipse 图形，常说 Lamé curve，是法国数据家 Gabriel Lamé 发现的。它看起来比右边直接用PS绘制的圆角矩形更光滑、更自然。右边的圆角矩形看起来像直线和曲线的界面「突角」，而且四边的直线中间会有凹陷的感觉。
那么，我们如何在设计软件中手动调整圆角，获得更自然的圆角矩形呢？原理是调整直线和曲线的过渡，手动调整上图所示的曲线，调整后的圆角更圆。sketch 最新版本增加了直接绘制平滑圆角的功能。
这种方法也适用于圆形按钮。
物理对齐和视觉对齐
软件对齐也有局限性，典型的例子是播放按钮。当该中心类似于三角形或不规则图形时，软件对齐会非常奇怪。这是因为软件将两个图形放在两个矩形中，对齐两个矩形，结果是视觉上没有对齐。解决方案是将三角形放在一个圆框中，用圆和矩形对齐，使三角形在视觉上对齐。不规则图形需要手动调整，以实现视觉对齐。
在上图中，两条线和两个矩形之间的距离是相同的，但在比较的作用下，线之间的距离大于矩形之间的距离，这是因为矩形之间的距离在厚度比较的作用下较小。输入框按钮共存和信息图表设计中经常出现这种错觉。
上图左侧输入框与按钮高度相同，但圆形按钮高度似乎小于输入框（视觉上方大于圆）。此时，您可以调整按钮的大小，扩展圆形按钮，或在允许的情况下用固体取代按钮。
对比下的色差
同样的颜色值，大面积和小面积的应用，给人一种完全不同的视觉感觉。当颜色被大面积使用时，会有明度变高的错觉，而在小面积的应用环境中，明度变低。为了使颜色在大面积和小面积上给人一致的印象，我们需要调整其中一个的亮度，以平衡不同面积应用时颜色带来的错觉。
在红色背景的对比下，上图左侧的纯白文字呈蓝色，在文字中加入一点蓝色对比色黄色，整体感觉更白，如右图所示。
同一颜色在不同的颜色背景下，视觉感觉像不同的颜色，左边两个前景是相同的黄色，但在不同颜色的背景下，在粉色背景黄绿色，所以在这种情况下需要调整前景颜色，调整后如右边，两个黄色在视觉感觉是相同的黄色。
同样厚度的线条，黑色背景中的白色线条会比实际线条更厚，而白色上的黑色线条会比实际线条更细，因为黑色有收缩感。
所以在 logo 在反对白色或制作墨水手稿时，需要手动调整笔画的厚度，以达到与原稿相同的视觉感受。上图最左边是原稿，中间图是直接反对白色的效果。logo 视觉上变得比实际更粗糙，视觉调整后的右图在视觉上接近原稿。
物理面积和视觉面积的颜色
视觉上有颜色「收缩」和「扩张」它的特点使我们觉得某些颜色的视觉感觉区域不同于真实的物理区域。这是由颜色的色调和亮度引起的。暖色的黄色在视觉上有一种扩张感，冷色的蓝色有一种收缩感。在同一颜色系统下，高亮度的颜色有一种扩张感，而低亮度的颜色则有一种收缩感。
正因为如此，上图中浅黄色面积的视觉感受最大，深蓝色面积的视觉感受最小。
例如，当法国国旗最初设计时，国旗上的三条色带宽度完全相等。然而，当国旗升到空中时，人们总是觉得这三种颜色在国旗上的重量不相等。看来白色面积最大，蓝色面积最小。为此，设计师专门招募颜色专家进行分析，发现这与颜色的视觉感受有关。当将这三种颜色的真实面积比调整为蓝色时：白色：红色=30：33：37点，看起来是平等的。(但1853年5月17日法国革命后，拿破仑下令将旗帜改为同等宽度，但海军旗帜没有改变，继续使用 30:33:37 三色旗的比例)。
色重
不同颜色在视觉感觉上有不同的重量。典型的例子是奥运五环的象征。看似简单的奥运五环实际上经历了大量的视觉调整，其中黑色太黑，被削弱。其次，由于视觉重量太轻，黄色变粗了。
由于人眼在特殊情况下会产生视觉错觉，设计工具也有局限性，因此在设计中经常会出现一些视觉误差。当出现这种视觉误差时，需要根据视觉感受手动调整设计，以实现设计的视觉平衡和完美。然而，在调整过程中，我们需要注意实际情况，灵活地实现调整。
欢迎关注作者微信微信官方账号:「融360RUX」
图片素材作者：Doeun shin
「如何解决高手的视觉错觉」
“高级学习！视觉设计中的11种经典视觉错觉现象”和“注意细节！如何将视觉错觉应用于UI设计界面？”“睁开眼睛！视觉误差对UI设计的影响和解决方案（附件）================推荐明星栏目================
优秀教程网: UiiiUiii.com 它是一个优质的中文教程网站，共享了大量的PS、AE、AI、C4D和其他中文教程也为零基础设计爱好者准备了亲密的知识树专栏。打开免费自学的新篇章，根据我们的专栏一步一步地学习，你可以快速开始并产生酷的视觉效果。
设计导航：中国最受欢迎的设计网站导航，设计师必须： http://hao.uisdc.com