刘帼君
青岛工学院 机电工程学院，山东 青岛 266300
摘 要：视错觉作为一种常见的视知觉机能，其分类及表现形式多样，常常根据需要被应用于各不同的设计门类中。鉴于交互界面图标的设计原则，视错觉在图标设计的创新设计应用存在较大拓展空间。在图标设计过程中，根据设计的具体要求和视错觉的基本原理，有针对性地利用视错觉机能特征，对图标进行设计调整，能够实现视错觉的进阶型设计应用，并形成技巧性的设计法则，同时推进图标视觉设计语言的完善和拓展，增加图标的实用性、功能性和审美性，最终达到良好的信息传递效果。
关键词：视错觉；交互界面；图标设计
1 视错觉的定义与分类
视错觉指的是主观主体在观察物体时，基于知觉经验或不当参照等原因形成的与客观事实不一致的错误判断和感知。它从一种比较独特的角度显示出视觉认知功能和机理的特点，而在日常生活中的案例也比比皆是。如图1所示，（a）（b）两图中的中心圆尺寸完全一致，但是由于周边圆的大小尺寸不同，导致人眼观察的时候觉得（a）图中的中心圆尺寸要小于（b）图中的中心圆尺寸。
.png)
图1 圆的对比
视错觉具有多种分类方式，如根据心理因素和生理因素进行划分，可划分为六大类：尺寸错觉、细胞群错觉、轮廓错觉、不可能错觉、扭曲错觉、运动错觉[1]，而在具体表现形式上，主要包括形状视错觉和色彩视错觉两大类。其中形状视错觉包括线面元素的方向、面积、大小、长短、远近、高低等方面的所产生视错觉，而色彩视错觉则包括色彩色相、明度、纯度、冷暖感等方面所产生的视错觉。如著名的马赫带效应 (Mach Bands)，既属于细胞群错觉，亦属于色彩视错觉。
视错觉现象种类繁多，本文囿于篇幅所限，在后文中将选取与界面图标设计应用密切相关的几类典型现象进行解析。
2 视错觉在交互界面图标设计中的应用
图标作为视觉语言的一种，在与人产生交互的过程中必须考虑人的视知觉机能特征。图标设计的本质是通过设计和排列将想要表达的信息准确传达给观众，而视错觉机能则是对图标传递准确信息的阻碍，因此，如何选取视觉元素和恰当排列视觉元素，对视错觉机能特征扬长避短，是交互界面图标设计过程中必须要考虑的问题。
视错觉的表现种类较多，此处仅选取几类典型的视错觉现象做具体的创新设计思考推演。
2.1 马赫带效应 (Mach Bands)的设计应用
马赫带现象是奥地利物理学家 E.马赫发现的一种明度对比现象，是指视觉感受到在明暗交界处出现虚幻的明亮或黑暗的条纹，增强了边缘的对比度。
.png)
（a） （b）
图2 不同明度的色条拼接 图3 分离后的不同明度色条 图4 图标设计案例一
图2中所示的是拼接到一起的不同明度的色条，每两个不同明度的色条相邻边缘线都在视觉上被增强，每个色条像是渐变色，而实际上每个色条都是均匀的颜色（如图3所示），根本不存在色彩的渐变。这种边缘被加强的视错觉效应，在扁平化设计风格中应用最为广泛。在扁平化时代，将类似的一组颜色彼此相邻放置是一种很常见的设计，这种设计风格放弃了图标造型边缘线，而是依靠“马赫带效应”的视错觉营造图标的轮廓感，形成了独特的设计审美语言。
如图4中的（a）图标，虽然造型没有轮廓线，但观者依然能够敏感地捕捉到各面域的边缘界限，与图4中的（b）所示的传统线型图标相对比，既有传承又有发展，体现了简约性设计原则指导下的新设计审美潮流。
2.2 三角形分割错觉（Triangle-Bisection Illusion）的设计应用
视觉平衡是所有艺术品和设计品中非常重要的概念。“尤其是在一件艺术品中，组成它的所有要素的分布必须达到一种平衡状态” [2]，“正如一个物理事物一样，任何意见有一定边界的视觉样式，也都具有一个支撑点或重心” [2]。一般情况下，为了达到视觉平衡，通常是元素的几何中心作为视觉中心，“移动式样周围的框架，直到式样与框架二者达到平衡位置。在二者达到平衡的时候，框架的中心便恰好与式样中心重合了” [2]。
.png)
（a） （b） （c） （a） （b）
图5 图标中式样与框架中心点不同位置对比 图6 三角形作为式样与框架中心点不同位置对比
如图5（a）所示，图标中的花型图案前景中心与带圆角的背景中心点重合时，图标的视觉平衡感最强。而当二元素的中心点错位时，则会产生视觉上的不适感——感觉图标头重脚轻，如图5（b）所示；或者底部显得太拥挤，如图5（c）所示。
但是三角形作为式样元素放置在框架中，其所占面域的几何中心与框架面域几何中心的绝对重合会使得元素在视觉上看起来不平衡。如播放图标常以三角形作为主要的式样元素，当三角形面域中心与框架面域中心重合时，如图6（a）所示，该图标明显失衡，视觉重力感左侧重右侧轻。作为播放图标，图标的视觉失衡对于用户带来的心理指向会影响该图标的正面功能预期：如点击该按钮后是否真的能带来流畅的播放？而调整三角形的位置——将三角形自身的几何中心与框架面域中心重合，该图标才达到视觉平衡，如图6（b）所示，这种视觉平衡在一定程度上能提升用户对于使用该图标的正面心理预期，在符合图标规范性要求之下又满足了表意性的设计要求。
2.3 群组图标的视错觉设计应用
除却单个图标设计过程中需注意视错觉的应用之外，群组化的图标设计过程中亦应将视错觉纳入考量范围之中。
.png)
图7 缪勒-莱尔错觉 图8 垂直中线错觉
图7中所示的为缪勒-莱尔错觉 (Müller-Lyer Illusion)。同样长短的三条水平线，因为V型箭头元素的参与，导致人的眼睛看到这三条线段时觉得它们的长短不一。
图8中所示的为垂直中线错觉 (Vertical Horizontal Illusion)。这个视错觉现象是指两条等长的直线，一条垂直于另一条的中点，那么垂直线看去比水平线要长一些。这种视错觉使得人们在看到一个完美的正方形时，会觉得垂直的边比水平的边更长，像一个长方形，而如果要得到一个看起来更像正方形的方形，需要再在高度方向上进行尺寸压缩。
这两种尺寸视错觉现象对群组化图标的直接影响，就是在群组化图标设计过程中，如果将每一个图标的面域尺寸进行绝对统一的数学定位，则势必带来视知觉方面的比例失调。
如图9所示，五个图标占据的面域为相同尺寸的正方形，但是各个图标按照该统一的尺寸进行群组时，人们感知到的图标视觉效果有大有小。图9中的（b）图标和（d）图标视觉观感明显偏小。而（C）图标轮廓中的水平直线段因为倒圆角的原因，其尺寸短于竖直方向的直线段轮廓，在垂直中线错觉的影响下本应呈现瘦高形体感，但因为底部三角虚形的建立，将缪勒-莱尔错觉的原理应用进来，用三角虚形在视觉上缩短了竖直方向的直线段轮廓尺寸，使得（c）图标的形体呈现横向拉伸形体感。（d）图标虽处于正方形面域，但由于三条垂直线强化了则是垂直中线错觉的应用，使得该图标呈现出高度方向尺寸大于宽度方向尺寸的视觉观感，与（C）图标形成明显对比。
.png)
图10 群组图标调整过程演示图
如图10所示，在调整过程中，为达到视觉上的平衡，对（b）图标和（C）图标进行了较大尺寸幅度的调整，将（b）图标等比例放大1.2倍，将（d）图标在垂直方向的尺寸放大1.1倍，在水平方向的尺寸放大1.3倍，将（e）图标等比例放大1.05倍，之后形成的图标群组视觉平衡感明显优于调整之前（如图11所示）。
.png)
3 结语
随着数字媒体技术的发展，交互界面设计已然成为设计中非常重要的领域，而图标作为界面中的重要组成部分，往往对设计的传播效果起着画龙点睛的作用。图标设计过程中对于视错觉的关注，既可以科学地设计信息传递过程，预设信息传递效果，同时又可形成技巧性的表现手法之一，带来强烈的视觉观感，形成独树一帜的设计审美。
参考文献:
[1] 刘宏，李哲媛，许超.视错觉现象的分类和研究进展[J].智能系统学报，2011(01):5-16.
[2] 鲁道夫?阿恩海姆.艺术与视知觉[M].成都:四川人民出版社,1998.
[3] Balraj Chana.设计中的11个视觉错觉，神奇而有趣[EB/OL].(2019-08-13) [2020-08-31]. https://www.shejidaren.com/11-ge-shi-jue-cuo-jue.html.