UI设计如何利用视错觉？_惠州前端培训学校

UI设计如何利用视错觉？这是大家在学习前端的过程都会遇到的问题，那么下面我们一起来看看惠州北大青鸟学术部老师是怎么解答的。

我们每个人在生活中都曾感受过视错觉（optical illusion）的魅力。

视错觉现象是双眼跟我们开的一个玩笑，而我们往往还心甘情愿地接受我们看到的假象。其实不止如此，视觉错现象的背后还有一个重要的科学原理——格式塔原理。

格式塔原理解释了人们如何以视觉方式感觉物体，以及图像的结构，视角，大小等要素是如何影响我们的视觉的。

设计中的格式塔原理

虽然从名字上看来很像，但“格式塔”这个名称并非是一个叫做“格式塔”的人的创意。格式塔（Gestalt）是一个德国词，意思是图像或形式,格式塔学派曾是心理学历史上一个重要的流派。

据说在1910年的某天，心理学家Max Wertheimer看到一个铁路交叉道口的信号灯交替闪烁，产生了这么一个错觉：他觉得这些信号灯是在一个圆周之内运动，事实上，这些信号灯只是按预定 的时间间隔闪烁而已。这个视觉与现实的差异触发了Wertheimer的灵感。

Wertheimer与他的同事们一道发展出一套理论，这套理论在数十年后成为网页设计的基石之一。这个理论实际上是对亚里士多德那句经典名言的 扩展，即在视觉现象中，“整体大于部分之和”。格式塔理论包括一系列基本概念。格式塔原理几乎适用于所有与视觉有关的领域，但它与UI设计的关系尤其密 切。

下面我们就来重点了解一下它的四个特性。

1.整体性

当我们（人类）辨认一样物体时，我们倾向于首先辨别它的轮廓，然后将这个轮廓归类为已知的事物。在此之后，我们才会去注意到这件物体的细节及各个组成部分。

上面的图片在解释格式塔原理时经常被采用。在这张图片中，看图的人首先会辨认出一条达玛尔提亚狗，而不是首先认出它的腿，耳朵，头部，然后把它们在脑中组合成一条狗的样子。

在网页设计中的应用： 轮廓及线条往往比细节更重要（尽管细节有时也很有创意） 。如果用户根本就辨认不出哪个图形才是可以点击的按钮，那么这个按钮设计得再华丽也是失败的。正如我们在最佳交互设计之道这篇文章中说过的，这种清晰的“定义”能让用户更了解按钮的功能。

2.具体化

由于在现实中我们所接受的视觉刺激很多都是支离破碎的，我们的大脑在处理这些信息时会自动把缺失的部分补足。

例如，上面的图形事实上都是含糊而不完整的，但我们的大脑依然能辨认的出它们。在图形A中，我们会得出这样的印象，即三个不完整的黑色圆形是由一个白色三角形连在一起的。

在网页设计中的应用： “闭合性”对网页设计而言非常重要 。这意味着你只需提供某样东西的基本要素，观看者会自动补全确实的部分。因此你应该在设计中积极灵活地运用负空间（white space），而不应只是把它简单视作画面中的留白部分。

我们稍后会再次提及这个特性。

3.组织性

如果在视觉上一件物体有不止一种解释方法，大脑会在不同的解释之间切换，因为它无法同时接受两种解释。一个观看者越是集中注意力于某种解释之上，这种解释就越有支配性。

这也是许多“视错觉”图形的理论基础。例如，在上面的图形中，观看者可以将其解释为一个老妇人，也可以将其解释为一个年轻女人，但不能同时解释它的不同意义。

在网页设计中的应用： 尽量避免在网页设计中使用具有多重意义的图形 。你想要观看者看到什么，就呈现给他们什么。

4.恒常性

这是大脑在辨认和理解图形时采用的另一种策略。这个特性让我们总是能根据物体的轮廓与基本结构去辨认不同视角，大小和灯光下的物体。

这个特性让我们能够辨认出表A中的图形与表B中的图形所存在的差异，尽管它们外型上很相似。同样的，我们也能够理解表A中的图形其实也是表C和表D中的图形，尽管它们外型上有些变化。

在网页设计中的应用：这个特性在网页设计中的体现或许不如其他特性那么明显，但它被广泛应用于验证码中，因为目前在视觉恒常性上，人类依然比机器人更有优势。

5条最实用的格式塔原则

1954年，这时离Wertheimer注视交叉道口的信号灯已经过去了几十年，Rudolf Arnheim 却根据自己对格式塔原理的理解写了一本书《艺术与视知觉》。设计师Carolann Bonner也曾指出 格式塔理论的5条最常用的原则:

1.相似法则

2.图形-背景关系法则

3.组织法则

4.闭合法则

5.连续法则

下面我们就来一个一个探讨这些法则。

1.相似法则

我们倾向于把外观相似的物体归为一类。

这对于极其注重信息传播时效网页设计而言是个非常有用的启示，你可以通过创建一系列外观近似的图形来迅速而直接地传达出它们的功能或目的。 巧用视错觉 UI更有趣

正如在上图（设计工作室Green Chameleon的页面）中看到的，导航图标看起来虽然各不相同。但由于这些导航图标在颜色，大小，排列上的近似性，用户会将它们默认为同一级别的导航功能。

这一导航模式特别适用于组织竖排的导航图标，因为它可以在不牺牲导航功能的情况下，很直观地把各个导航图标的功能表达清楚。

设计师如果能善用这一法则的话，就可以更有效地传达信息和节约页面空间，从而为用户提供更好的使用体验。

2.图形-背景关系法则

在用户看来，页面中的元素要么是图形，要么是背景。Steven Bradley总结出了三种类型的图形-背景关系, 如下图所示：

稳定型— (左)可以很明显地看出，圆形是图像，而灰色空间是背景。

可逆型— (中间)空间与背景可以相互转换，整个页面显得十分有灵动之感。

模糊型— (模糊型) 图片与背景的界限模糊不清，观看者需要自行解释空间与背景的关系。

Moddeals网站采用是一种较为经典的图形-背景关系。当页面中的广告浮现时，网页的其余部分就变变暗，自动转化为背景。在这种情况下，用户依然可以拖动页面，然而广告还是会作为独立于背景的一部分停留于原处。

而电影宣传网站Tannbach处理图形-背景关系的手法就更为微妙。

为了突出电影中的人物关系，这个页面的设计师采用了模糊背景的方式来强化页面中的两个人物。 通过对色彩和排版的巧妙运用，左上角的“互动区”成为了事实上的“一级图形”，而页面中的那一对男女则成为“次级图形 ”。这样一来，用户既能迅速辨认出页面中的人物，同时也能够理解如何使用网站的导航。

3.组织法则

即便是外观不同的东西，也可以通过一定的安排使它们更为接近。根据格式塔原理，至少有两种方法可以加强事物的相似性：

闭合状态将不同的事物集中置于一定的界限内，也会给观看者造成一种“一致”的印象。

密集状态即便是不同类型的事物，当距离很密集的时候也会具有某种似性。

上面这张Facebook的截图就体现了闭合状态与密集状态的作用。

整个正文部分--标题，照片，说明，评论等等---都是在同一个方框里，与灰色的背景形成对比，这一点既体现了闭合状态，也体现了图形-背景关系。在正文部分中，“赞”“评论”“分享”等功能选项离得很近，更不用说文字大小，颜色等细节的近似度了。

这么做还有一个理由，就是为了点击方便，因为这种方式可以把用户与供用户点击的目标之间的距离拉得更近。

4.闭合法则

前面我们提到过格式塔原理中的“具体化”现象，闭合法则其实就是这种现象的具体体现。我们的大脑能自动通过添加界线来补全不完整的图像。设计师可以利用这条法则去创作貌似残缺不全的图形，在这条法则的指导下，设计师还可以尽情创作出典雅的极简主义作品。

我们以下面Abduzeedo网站的截屏为例来具体分析一下。虽然构成页面的三部分内容之间并没有明确的界线，但图片的排 列方式让观看者在大脑中自动形成了某种“网格”。因此，观看者会把页面内容看成是独立的三列，而不是一个混乱的整体。

闭合法则也适用于交互设计中。

设计师Carolann Bonner解释说，在Urban Outfitters页面中，通过利用闭合法则，他帮助用户省略了一些不必要的步骤，使“添加到购物袋”这一操作变得更为顺利。请点击GIF动画查看用户点击“添加到购物袋”之后的操作步骤：

1.原来“添加到购物袋”按钮中的文字会变成“已添加”。

2.“购物袋”旁边的物品数量会随之更新。

3.同时，购物袋选项下会出现一个小小的方形窗口，以视觉形式再次确认用户已购买的物品。

这样，用户不用再去打开购物车确认已添加的物品。通过省略操作步骤，整个互动过程变得更为顺畅愉快。

5.连续法则

这个法则认为，当用户的目光沿着一系列物体移动时，脑中会形成一个逐渐增强的“定势”。这个法则使设计中线条的地位显得格外重要。

在上面的图中，观看者会看到一条直线和一条曲线而不是一条弯曲的黑线和另一条弯曲的红线。这说明在视觉中，目光的延续性已经超过了颜色造成的差异。 巧用视错觉 UI更有趣

这意味着，在用户看来，处在同一条直线或曲线上的物体是高度近似的。

这一点在导航按钮的设计中体现得再明显不过，用户一般会把同一个水平线上的图标默认为是同一个级别的操作。

下面的截图取自CreativeBloq, 网站，用户可以很直观地理解最上面的一排导航与网页内容的类型有关。而第二行的导航与内容的条目有关。网站不用专门指出它们的不同，因为根据延续法则，用户可以自己辨认得出它们的差异。

结语

理解和掌握格式塔法则能让你更有效地控制网页的设觉效果，从而创造出风格更和谐的网页设计, 同时也能更有效地将你的信息传达给用户。我建议你在自己的设计实践中综合运用上面提到的各种法则，你会发现，不久之后，你的网页设计水准会跃上一个新层次。

更多前端资讯关注网站动态，或者来惠州北大青鸟新方舟校区了解一下。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟