视错觉的成因及其在界面设计中的应用

郭云云 张宇红 （江南大学 214122）

视错觉的成因及其在界面设计中的应用

郭云云 张宇红 （江南大学 214122）

界面设计是平面设计中的一个特殊门类，与视错觉有着密不可分的联系。从以视错觉形成的生理原因及心理原因为主要内容的人自身因素和以具有多义性形象及具有强烈感官刺激物为主要内容的外部因素作为切入点分析了视错觉的形成原因。并以光源来自上方、透视、格式塔原理、旋转彩柱错觉这些常见的视错觉原理或现象为基础，结合相关设计案例讲解其在界面设计中的应用，以此验证将视错觉原理或现象引入到界面设计中的可行性。在此基础上，提出设计师可以利用视错觉原理或现象使界面设计更加具有科学性，进而使其愈加符合人类的视觉和认知规律。

视错觉；界面设计；应用；科学性

随着互联网的飞速发展，以及多媒体信息技术、计算机网络技术的日益普及，现在社会已进入“电子阅读时代”。图形也逐渐成为一种超越语言的表达方式，人们可以直接从表面就能迅速读懂意思，而不存在语言障碍1。但事实上，因为视错觉的存在，眼睛告诉人们的不一定是准确的。眼睛会因为某方面的原因，不自觉地“欺骗”人们。在设计学中，这种“欺骗”可被运用而使设计作品更易于让用户接受。

一、视错觉的成因

一般而言，视错觉的成因分为两个方面：人自身的因素和外部的因素。

（一）人自身的因素

正如艺术家贡布里希所说：“观看从一开始就是有选择的，眼睛对样本做出什么样的反应，取决于许多生理与心理因素。”2

1.视错觉形成的生理因素

从生理方面来讲，眼睛观察物体形成图像，后通过视觉神经直接将图像传入大脑，最后大脑会对其进行分析解读，并做出反应。但人类视觉系统不仅输入外界信息，而且会主动解释信息。当其解释与实际不符时，就会产生视错觉。视觉恒常性是指视知觉根据视觉经验纠正了视网膜上成像的变化，从而保持了视觉对象原有的恒常状态3。当外部条件发生变化时，由于视觉恒常性的原因，视觉经验会维持大脑内原有的物象状态，从而与实际物象不符、发生矛盾，形成错觉。另外，盲点的“填充现象”也属于此类。

2.视错觉形成的心理因素

在心理方面，现在也有几种比较成熟的理论，如格式塔心理学的完形心理学、贡布里希在《艺术与错觉》中提出的“等等原则”以及先验假设等。像弗雷泽螺旋线实际上只是同心圆，但看起来却是螺旋线。由于图中的圆并不是由简单的线形构成，而是有黑白两色交替形成；而且其他部分是由黑、白、灰交叉并由粗到细的弧线填充起来的。在人类的经验中，上述两者都是产生螺旋感的因素，于是就造成了对这幅图的错觉。这种心理上的超前预测，就是将先前的经验和印象应用到新看到的相似事物上去，由此产生视错觉。

（二）外部的因素

一般来讲，产生视错觉的外部因素包括两个部分：多义性形象和强烈感官刺激物。

1.具有多义性形象

多义性形象，在一个整体中提供给观者多层含义，在投射物像的各个含义的变形过渡中，观者将一种理解转换为另一种理解4。这种来自外界物象的多义性，使人们在解读同一个物象时会有几个合适的答案，从而使其在观察事物时产生视错觉。

2.具有强烈感官刺激物

这种刺激体现在形体和色彩的排列、对比中5。人的眼睛在观看这类事物时，会产生较明显的动感闪烁效果。著名的赫尔曼栅格错觉就是利用黑白两色在视网膜上引起的强烈刺激，从而使人在视觉上感觉捉摸不定。外部因素作为一种外界刺激为视错觉的产生提供了客观条件，大脑才有机会给出错误的视觉信息。见图1，计算机界面设计左侧的黑按钮之间，就出现了赫尔曼栅格视错觉现象，使得用户在使用计算机的过程中容易感到视觉疲劳。

二、视错觉在界面设计中的应用

外界物体反射的光线投射到视网膜上留下的只是二维图像，大脑将二维图像转化成三维解释，而这种解释往往是单一的。很大原因是大脑对二维图像的环境参数存在“先验假设”。这些先验假设是人们在长期生活中无意识积攒下来的，或是在漫长的进化过程筛选出来的。

（一）“光照来自上方”——界面设计中按钮设计的应用

在人类的生存环境中始终有一个巨大的光源——太阳。因为其始终存在于人类上方，所以在进化的过程中形成了“光源来自上方”的假说。在这个假说中，凸起的物体会使下部产生阴影，凹陷的物体会在上部产生阴影。所以在图1和图2中就会出现按钮的下半部分出现阴影就意味着按钮是凸的，上半部分出现阴影则代表按钮是凹的的现象。世界在人们眼中只是一张二维图片，由于引入了“光源来自上方”这个先验假设，从而大脑将图片中的元素解释成了具有凹凸感的三维图片。

图4中的图标，光源来自左上方，另在右下方有一强烈的反光。这些光源代替了前面所讲的视觉先验假设“光源来自上方”的太阳光。为了虚拟图标中球体受到光的影响，设计者为这些球体加上高光和阴影，画面产生深度，使其更加逼真。

图2 按钮简图

图3 按钮简图

图4 iPhone App Icon

（二）透视——界面设计中区域划分的应用

现实中人们通过物体大小的变化来判断远近，这也正是透视法能够在二维平面上创造出三维视觉效果的原理。

透视逐渐被设计师运用到界面设计中去，图5中设计师将手机界面用五条具有透视关系的斜线分割成四部分。界面上部中央有一处光源，在其影响下，每个块面中所填充的颜色也会随之改变。线条透视关系的变化加上由深到浅、由浅到深的颜色变化，所呈现给人们的就是具有深度的立体空间感——一间房子的内部空间。人们会按照平常见到的房间的模样，也就是利用了上文所讲的先验假设，将每个面进行分配：①面会当做房间的地面，②③④面当做立面。这一界面就成功地分成了四部分，形成了一个内部空间，每个部分都是不同功能的载体。每个部分中的图标或是文字等元素也会随其所在部分的透视发生变化。

图5 手机界面设计

（三）格式塔中的接近性原理——界面设计中的元素归类

从认知心理学角度来说，视错觉是格式塔原理的一种表现形态。

格式塔原理中的接近性原理说的是物体之间的相对距离会影响我们感知它们是否以及如何组织在一起6。当视觉元素距离很近时，可以用“贴近”一词来形容这种状态，此时也可以看做是归类。将这一原理运用到界面的设计中，则是相关产品我们可以使用类似的视觉展现，减少用户界面上的视觉凌乱感和代码数量7。

根据接近性原理，可以通过拉近某些对象的距离，同时拉远与其他对象的距离，使它们成为视觉上的一组，从而省略线框，见图7。在进行界面元素排布时，文字与文字、图片与图片、按钮与按钮之间近远关系的运用，也使得界面的整体划分更加规范和易识别，从而形成若干个相关的视觉元素集合。但是相反地，如果元素摆放的位置不合理，比如，元素之间的距离太远，人们就会很难感知到它们是相关的，因此带来的用户体验比较糟糕。

图6 格式塔原理接近性

图7 界面中的接近性原理

（四）旋转彩柱错觉——界面设计中的进度条

理发店门前会放一个360°在横向上转动的转筒，但我们看到的却是在纵向上的移动。

同理，如图8矩形框中的黑白条块其在动时显示的是黑白条块的下移，垂直的边框使得垂直运动主导了视觉方向。而在图9中，透过圆形看到的黑白条块则是往右下方移动，因为圆形在纵向和横向上没有区别，所以眼睛反馈的信息是向右下方，而不是水平或是垂直方向。在界面设计中的进度条就是采用了这一原理，如图10所示。进度条中矩形水平方向上的长度要远远大于其在垂直方向上的长度，水平运动主导了我们的视觉，所以感受到的是进度向右滚动，而不是向上。

如图11，应用茄子快传中，设计师为了表达应用一直在不停的运作这一概念，从常见的进度条中获取灵感，在原有深蓝色圆的基础上添加了浅蓝色圆的设计。其中深蓝色圆是表达当前传输的整体进度，而浅蓝色圆是以一个既快而又舒适的速度一直不停地扩大缩小，以此来表达传输一直在进行。

图8 矩形中的黑白色块

图9 圆形中的黑白色块

图10 进度条

三、结语

目前仍有界面设计人员认为界面设计的艺术性占绝对地位，对界面设计是否有科学依据 持否认态度；仍从直觉出发进行设计，离科学合理的界面设计还有一定的距离。要想设计出符合人的视觉和认知习惯的界面，就要在设计时遵循人类的视觉和认知规律。将视错觉原理引用到界面设计中来，目的是希望界面设计能向着理性的方向发展。如何用视错觉原理来指导界面设计并将其正确地应用到设计中来，是值得我们继续投入精力去研究和探讨的。

注释：

1.刘洋.论视错觉图形在产品设计中的应用[J].包装工程，2012.2：114-117.

2.黄继红.视错觉在平面设计中的运用研究[D].苏州：苏州大学，2009.

3.吴文婷.二维视觉，奇幻空间—错觉图形语言在平面广告中的作用[D].南京：南京林业大学，2011.

4.刘雁.视错觉在现代艺术设计中的应用[J].理论学刊，2005.4：126-127.

5.周东梅.视错觉在环境空间设计中的研究与应用[D].上海：东华大学，2006.

6.R obert J.Sternberg.认知心理学[M].杨炳钧，陈燕，邹枝玲.中国轻工业出版社，2006.

7.Jeff Johnson.认知与设计[M].张一宁.人民邮电出版社，2011.