当前位置:首页 > 开发 > Web前端 > 前端 > 正文

巧用视错觉-UI更有趣

发表于: 2015-07-16   作者:brotherlamp   来源:转载   浏览:
摘要: 我们每个人在生活中都曾感受过视错觉(optical illusion)的魅力。 视错觉现象是双眼跟我们开的一个玩笑,而我们往往还心甘情愿地接受我们看到的假象。其实不止如此,视觉错现象的背后还有一个重要的科学原理——格式塔原理。 格式塔原理解释了人们如何以视觉方式感觉物体,以及图像的结构,视角,大小等要素是如何影响我们的视觉的。 在下面这篇文章中,我们首先会简单介绍一下格式塔原理中的基本概念,

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

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

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

在下面这篇文章中,我们首先会简单介绍一下格式塔原理中的基本概念,然后再详细探讨一下如何将它们应用于今日的UI设计中。

设计中的格式塔原理

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

格式塔图形举例

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

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

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

1.整体性

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

在网页设计中的应用:轮廓及线条往往比细节更重要(尽管细节有时也很有创意)。如果用户根本就辨认不出哪个图形才是可以点击的按钮,那么这个按钮设计得再华丽也是失败的。这种清晰的“定义”能让用户更了解按钮的功能。

2.具体化

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

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

3.组织性

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

这也是许多“视错觉”图形的理论基础。

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

4.恒常性

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

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

5条最实用的格式塔原则

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

1.相似法则

2.图形-背景关系法则

3.组织法则

4.闭合法则

5.连续法则

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

1.相似法则

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

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

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

2.图形-背景关系法则

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

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

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

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

3.组织法则

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

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

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

4.闭合法则

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

5.连续法则

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

结语

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

免费领取兄弟连IT教育原创UI设计师视频教程,详情咨询官网客服:http://www.lampbrother.net/ui

PHPLinuxHTML5UIAndroid等视频教程(课件+笔记+视频)!联系Q2430675018

 

参加活动领取兄弟连原创视频教程光盘合集:http://www.lampbrother.net/newcd.html

巧用视错觉-UI更有趣

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
***********************************************声明******************************************
在某一个时期的家装风格当中,墙壁上的插座会统统设计到很靠下的地方,36 同学个人对此非常不喜欢,
Web API 变得越来越丰富,其中一个值得注意的是 Web Speech API。传统的网站只能“说”,这个API的
如果你认为可以像二进制代码一样组织物质不合情理,那么你会震惊:这是可以的。一个麻省理工学院的
C语言学习:iOS开发分分钟搞定C语言 OC语言学习:iOS开发核心语言Objective C 无偿分享400G iOS学习
实验室偶尔也带来一些 DIY 介绍,之前无论是“用易拉罐的拉环拼装成台灯”,还是“用硬纸板搭成一个
今天登录了一下支付宝,没想到在12月12日改版之后,支付宝的个人管理页面更亲和了,使用更方便了。
本分享是iOS开发中有趣的UI模块的相关内容技术点分享。如果您是一位已经有C基础了的iOS爱好者,但还
C语言学习: iOS开发分分钟搞定C语言 OC语言学习: iOS开发核心语言Objective C 分享400G iOS学习资
本分享是iOS开发中有趣的UI模块的相关内容技术点分享。如果您是一位已经有C基础了的iOS爱好者,但还
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号