如何利用视错觉让界面UI设计更有趣!

在做界面UI设计的时候应该巧妙的利用视错觉,有效地控制网页的视觉效果,从而创造出风格更和谐的界面UI设计, 同时也能更有效地将你界面UI设计中的信息传达给用户。 在现实生活里,我们都曾体会到错觉,有时候甚至沉迷其中。而视觉错觉现象就好像双眼和我们开的一个玩笑,而我们还享受其中,其实,在这之中,还有个重要的科学原理——格式塔原理。格式塔原理解释了人们如何以视觉方式感觉物体,以及图像的结构,视角,大小等要素是如何影响我们的视觉的。 今天交互科技分享的这篇关于界面UI设计利用视觉错觉的文章中中,我们首先会简单介绍一下格式塔原理中的基本概念,然后再详细探讨一下如何将它们应用于今日的界面UI设计中。 界面UI设计中的格式塔原理 虽然从名字上看来很像,但“格式塔”这个名称并非是一个叫做“格式塔”的人的创意。格式塔(Gestalt)是一个德国词,意思是图像或形式,格式塔学派曾是心理学历史上一个重要的流派。


据说在1910年的某天,心理学家Max Wertheimer看到一个铁路交叉道口的信号灯交替闪烁,产生了这么一个错觉:他觉得这些信号灯是在一个圆周之内运动,事实上,这些信号灯只是按预定的时间间隔闪烁而已。这个视觉与现实的差异触发了Wertheimer的灵感。 Wertheimer与他的同事们一道发展出一套理论,这套理论在数十年后成为界面UI设计的基石之一。这个理论实际上是对亚里士多德那句经典名言的扩展,即在视觉现象中,“整体大于部分之和”。格式塔理论包括一系列基本概念。格式塔原理几乎适用于所有与视觉有关的领域,但它与界面UI设计的关系尤其密切。 下面我们就来重点了解一下它与界面UI设计有关的四个特性。 1.整体性 当我们(人类)辨认一样物体时,我们倾向于首先辨别它的轮廓,然后将这个轮廓归类为已知的事物。在此之后,我们才会去注意到这件物体的细节及各个组成部分.


上面的图片在解释格式塔原理时经常被采用。在这张图片中,看图的人首先会辨认出一条达玛尔提亚狗,而不是首先认出它的腿,耳朵,头部,然后把它们在脑中组合成一条狗的样子。 在界面UI设计中的应用:轮廓及线条往往比细节更重要(尽管界面UI设计的细节也需要有创意)。如果用户根本就辨认不出哪个图形才是界面UI设计中可以点击的按钮,那么这个按钮设计得再华丽也是失败的。 2.具体化 由于在现实中我们所接受的视觉刺激很多都是支离破碎的,我们的大脑在处理这些信息时会自动把缺失的部分补足。


例如,上面的图形事实上都是含糊而不完整的,但我们的大脑依然能辨认的出它们。在图形A中,我们会得出这样的印象,即三个不完整的黑色圆形是由一个白色三角形连在一起的。在界面UI设计中的应用:“闭合性”对界面UI设计而言非常重要。这意味着你只需提供某样东西的基本要素,观看者会自动补全确实的部分。因此你应该在界面UI设计中积极灵活地运用负空间(white space),而不应只是把它简单视作画面中的留白部分。 3.组织性 如果在视觉上一件物体有不止一种解释方法,大脑会在不同的解释之间切换,因为它无法同时接受两种解释。一个观看者越是集中注意力于某种解释之上,这种解释就越有支配性。


这也是许多“视错觉”图形的理论基础。例如,在上面的图形中,观看者可以将其解释为一个老妇人,也可以将其解释为一个年轻女人,但不能同时解释它的不同意义。 而在界面UI设计中的应用:尽量避免在界面UI设计中使用具有多重意义的图形。你想要观看者看到什么,就在界面UI设计中呈现给他们什么。 4.恒常性 这是大脑在辨认和理解图形时采用的另一种策略。这个特性让我们总是能根据物体的轮廓与基本结构去辨认不同视角,大小和灯光下的物体。


这个特性让我们能够辨认出表A中的图形与表B中的图形所存在的差异,尽管它们外型上很相似。同样的,我们也能够理解表A中的图形其实也是表C和表D中的图形,尽管它们外型上有些变化。 在界面UI设计中的应用:这个特性在界面UI设计中的体现或许不如其他特性那么明显,但它被广泛应用于验证码中,因为目前在视觉恒常性上,人类依然比机器人更有优势。



文/UI戴柄

上一篇: 非科班出生如何成为一名UI设计师

下一篇: 黄金比例分割使用指南

分享到: 更多