恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计原则(第一部分):视知觉和格式塔原则
0.0°
2015-07-29 自译外文 经验/观点 原作者: Steven Bradley 举报 38023 121 43 4

这是关于设计法则一系列的文章,纯干活;小编在后续的时间里会都翻译出来,供大家学习。其实好的设计都是符合美学原理的,了解学习这些理论知识你才能在其精髓上创新。

设计原则(第一部分):视知觉和格式塔原则

原文作者:Steven Bradley   2014/3/28

编译作者:章鱼学院——Halona

原文链接:

http://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/

大家在看这篇文章的时候,我们现了解一个概念——格式塔学派。

格式塔学派(德语:Gestalt theorie)是心理学重要流派之一,兴起于20世纪初的德国,由马科斯·韦特墨(Max.Wetheimer,1880~1943)、苛勒(W.kohler,1887~1967)和考夫卡(K.Koffka,1886~1941)三位德国心理学家在研究似动现象的基础上创立。格式塔是德文Gestalt的译音,意即"模式、形状、形式"。Configuration(配置;结构;外形)”等,意思是指“能动的整体(dynamic wholes)”又称为“完形心理学”。

好了,我们进入文章正题。

1910年,心理学家马科斯·韦特墨(Max Wertheimer,他是格式塔心理学创始人)很有洞察力,他观察发现一系列的灯光在铁路道口上不断地闪烁。这是类似于使用灯光围绕着影院选框不断地闪烁。

小编在这里找了张图以便大家更好理解:

通过观察,看起来就好像是一个光绕着选框,从一个灯泡到另一个灯泡的移动,在现实中,一系列的灯泡不断闪烁并且灯光不能移动。

这个观察报告说明一组原理——我们如何在视觉上直观的感知对象。我们作为设计师,而这些原则几乎是我们所做的一切图形设计的核心。

这是一系列关于设计原则的帖子。为什么我们要从格式塔原则开始呢,因为我们遵从的许多设计原则都出自格式塔理论。在这篇文章中,我会给你们讲述一点理论和提供一些格式塔原则的基本定义。 

在本系列后续的文章中将考虑设计其他方面,例如空间,平衡性,和视觉层次。在接下来的帖子中,我会指出那些格式塔原则会影响设计这一方面,并且我会提供更多的实际应用和例子关于格式塔原则在网页设计中是如何使用的。

格式塔理论背后的关键思想

“整体是不同于部分之和的—— Kurt Koffka”

上面引用的话是对格式塔心理学简单的概括。当人们看到一组对象时,在我们看到单个物体之前,我们先察觉到它们的整体性。我们看到的整体比部分的总和还多,即使是部分被彻底分成独立的尸体,我们也会把他们作为一个整体看成一个组。

有几个格式塔理论背后的关键思想:

1出现(Emergence),在部分之前整体是先被看出的。

出现(Emergence)的过程中形成了从简单的规则到复杂的图案过程。当试图识别一个对象时候,我们先去确定它的轮廓。然后我们知道去找形状和物体来和这个轮廓图案相匹配。只有通过这个大纲模式匹配整个出现之后,我们开始识别部分构成整体。

在设计时,请记住,首先人们会通过他们的一般认知形式来确定元素。一个简单明确的对象比将一个详细的对象,更迅速地传达了很难辨认的轮廓。

一个简单明确的对象比将一个详细充满细节的对象,更迅速地传达出很难辨认的轮廓。

2具象化/物化(Reification)(我们的脑海会填补这些空缺)

物化是知觉得一个方面,其中感知的对象包含比什么是实际存在的更多的空间信息。当我们试图匹配我们看到的已经存储在脑海中的熟悉的模式,我们会发现总是没有完美的匹配模式。相反,我们会找一个近似匹配,然后填补空白,而这个空白则是我们认为我们应该看到内容。

具象化表明我们不需要呈现一个完整的轮廓,以便观众看到它。我们可以省去部分的轮廓,只要我们提供它足以让一个足够接近的模式来匹配。你可以看封闭原则下一些例子。

3多稳态现象(Multi-stability)(大脑力图避免不确定性)

多稳态现象是在模糊不清的感性经验倾向之间不稳定反复移动的另类解读。一些对象可以被感知的方法不止一种。在下面文章图像/背景这一块有一个例子,也许你之前见过这个例子。这张图片可以看作是两个人脸的侧面,也可以看作是一个花瓶。

你不能立刻同时看到两个。反而你会快速在两个可供选择的物体之间来回反复的穿梭。一个往往会成为你的主导观念,并且时间越长你越不能够看到另一面,并且想要看到其他的看法会更困难。

从设计的角度来看,如果你想改变别人的看法,不要试图立刻改变它。找到一个办法让他们看到一个选择(二中选一),然后努力加强他们已选定的观点,从而削弱原有观念。

不变性(Invariance )(我们擅长辨别异同)

不变性是知觉的一个属性,其中简单的对象是公认的独立旋转(rotation),平移(translation)和尺寸(scale)。由于我们常会从不同的角度遇到物体,所以我们已经具备了一种认知它们的能力,尽管它们的外观不同。

想象一下,如果你认识的某人,如他们直接站在你面前,面对着你,你可以认出来;如果他们转到侧面,你便不能立刻认出他们侧脸。尽管是不同的视觉角度,但我们仍然可以识别认出人们。

你可以看到这些想法在下面的原则中是怎样运用的。主要的思想是格式塔原则是关于感知的和视觉传达的对象是什么。原则和视觉语言是我们的工作核心。

格式塔原则

多数原则是相对容易理解。因为有一个共同的主题贯穿在其中。

“其他所有条件都相同,相关的元素X往往是视觉感知分组成高阶单元。”——斯蒂芬·帕尔默

下面的许多原则将遵循这一模式。原则可以定义为X或者高阶的感知。

PRÄGNANZ 定律(好图, 简单法则)

小编在这里给大家解说一下 :

(格式塔学派最基本的规则是蕴涵律(prägnanz),闭合律Law of Closure;相似律Law of Similarity;

接近律Law of Proximity;对称律Law of Symmetry;连续律Law of Continuity)

“人们会用一种最为简单的形式来感知和解释含糊不清或复杂的图像。

这是格式塔的基本原则。我们更喜欢简单,干净和有秩序的东西。直觉上这些东西更安全。了解这些原则会让我们在处理一些复杂或者危险的突发状况时花费的时间更少。

当面对复杂的形状,我们倾向于把它们重组成简单的组件或变成一个简单的整体。你看到上图左边由简单的圆,正方形和三角形组成,就像你看到的右边图形,而不是作为复杂和模糊的整体形状。

  在这种情况下,看到三个独特的物体比看到一个复杂的对象要简单。在其它情况下,看到单个对象是简单的,因此给我们带来了…(也就是下面的原则)

闭合性原则(CLOSURE)

“当我们看到一些复杂排列的元素时,我们趋向于寻找一个更为单一可辨识的图案模式。”

正如PRÄGNANZ 定律和闭合性原则一样,都在寻求简单纯粹。闭合性恰巧与我们看到上面PRÄGNANZ 图片总结的定律(三个简单独特的图形比一个图形更简单)是相反的。在闭合原则中,我们用部分形成一个简单的正题。我嗯的眼睛填补这些丢失的信息从而形成一个完整的图像。

在左上图中,你应该看到一个白色的三角形,即使这个图像实际上是由三个黑色的像吃豆人一样的图形组成。在右边的图片中,你看一只大熊猫,即使它是由一些随意的图形组成的。我们看到的三角形和大熊猫实际上要比我们看单个部分要简单的多。

闭合原则被认为是维持元素的粘合剂。这是关于人类倾向于寻求和发现的模式。

闭包的关键是提供足够的信息,让眼睛可以填写其余。如果丢失的信息元素太多,元素将被视为独立的部分,而不是一个整体。如果提供太多的信息,闭合原则就没有必要存在。

对称和秩序

“人们往往倾向于感知围绕匀称物体的中心对称的形状。”

对称性给了我们坚固和秩序的感觉,这一点正是我们倾向于寻找的。这是我们的本性强加给混乱秩序。这一原则导致我们在组合物中想要一种平衡,虽然我们的组合物不需要是完全对称的,以保持平衡。

在上面的图片中,您应该看到三对双括号,三个左括号,三个右括号。接近的原则,稍后我们会在这篇文章中,可能会建议我们应该看到别的东西。这表明对称优先于接近。

由于我们的眼睛会很快发现对称和秩序,这些原则可以用来迅速有效地传达信息。

图/背景(FIGURE/GROUND)

“元素被视为图(聚焦中的元素)还是地面(图像中余下的背景)。”

图/背景指的是正形和负形元素之间的关系。这个理念是眼睛会从它们的背景中区分整个图形为了理解究竟看到了什么。这是人们首先要做的事情之一就是看任何的构成成分。

图和背景的关系是否稳定取决于哪个更容易看出来。左上图中一个经典的例子,图和背景的关系是不稳定。你看到一个花瓶或是两个人的侧脸,取决于你是将看到的黑颜色作为图形,白色作为地面,还是将白色作为图形,黑色作为背景。你可以很容易地两种看法之间来回穿梭,这展示了它们之间不稳定的关系。

更加稳定的关系,我们可以引导观众更好地专注于我们想要看到的。两个相关原则可以帮助我们:

区域面积:两个重叠的对象中较小的被视为图。较大的被视为背景。你可以看右上图。较小的形状是图(聚焦中心),忽视颜色。

凹凸性:人们趋向于认为凸面的模式要比凹面的模式更能聚焦,因此凸面常被看作是图。

统一的连通性

“元素在视觉上连续性被认为是相关的多元素没有连接。”

在下面的图片中,线连接了两对元素。这种联系让我们觉得被连接的元素在某些方面是相关的。

所有原则都暗示了物体是相关的,统一的连贯性这一原则是最能说明的。在上图中,尽管我们看到两个方和两个圆,我们看到两对方-圆组合关联性更强,因为它们的视觉连贯性。需要注意的是线是不需要被感知的连接元素。

共同的领域(COMMON REGIONS)

“如果它们位于同一个封闭的区域,那么元素会被认为是这一组的一部分。”

另一种方式显示元素之间的连接方式是用某种方式包围它们。围场中的一切都被看作是相关的。围场区域外的被看作是独立的一部分。下图中的圆圈都是相同的,然而我们看到两个不同的团体,每个围场中的圆圈在某种方式上都是相关的。

表达一个共同的区域的典型方式是在相关元素周围画一个盒子,就像我上面画的那样。把元素放在不同背景颜色要比它们在直接接触的周围环境中起作用。

接近原则

“更接近一起的对象比进一步分开的对象被认为更相关。”

接近原则和共同领域相似,但使用空间作为围场(外壳)当元素的位置接近另一个时,它们被看作是一个组的一部分,而不是作为单独的元素。当一组中的元素比它们到组外的任何元素更加靠近的时候,这是尤其真实。

为了被认为是有接近的关系,任何其他方式中对象不都需要类似,超过在空间中相近的元素成为一组的范围。

连续定律

“在直线上或者曲线上的元素比不在直线或者曲线上的元素被认为更相关。”

我们会本能的跟随一条河流,是一条小路或者一条警戒线。一旦你在一个特定的方向看或是移动,你在这个方向继续看或者是移动直到你看到一些重要的东西或者你断定没有什么重要的东西要看。

这一原则的另一个解释是,我们将继续我们的感知形状超出了他们的终点。在上面的图片中,我们看到一条线和曲线交叉,而不是四个不同的线和曲线段汇在了一个点上。

共同的命运(同步)COMMON FATE (SYNCHRONY)

到这里小编来总结一下格式塔的组织原则:1图形与背景;2接近性和连续性;3完整和闭合倾向;4相似性;5转换率;6共同方向运动。

“在同一方向上的元素比固定元素或者是朝不同方向移

动的元素更为紧密相关。”

不管相距多远元素放置或他们看起来多么不同,如果他们被视为一起移动或改变,它们会被认为是相关的。

元素不需要为了共同方向运动这一原则的存在而移动。

更重要的是他们有一个共同的目的地。例如,如果四个人他们聚在一起,但其中两个被发现头朝右,他们仍然被视为有共同的命运。即使两个只朝同一个方向看,但他们仍然被看作是有共同命运的。

在上面的图片中,箭头就足以表明元素共享一个共同的命运。而运动或变化是没有必要的,共同命运的迹象比像箭头一样的东西或者是仅暗示朝同一个方向看的动作都要强大。

平行性/类似性(PARALLELISM)

“相互平行的元素比不平行的元素更为密切相关。”

这一原则类似于上面的共同命运的原则。行(lines)通常解释为在某方向指向或移动。平行线被视为指向或朝着同一个方向,因此它们是相关的。

应该注意,并行性被认为,线条也可以曲线或形状,尽管后者的形状应该有些行式为了他们出现能够平行。

相似原则(SIMILARITY)

“有相似特征元素比没有相似特征的元素被认为更为紧密相关”

任意数量的特征都可以是相似的:颜色、形状、大小、纹理等。当观众看到这些类似的特征,他们认为这些元素被认为是相关的,是由于它们的共同特点。

在下图,红色圆圈与其他红色圆圈和黑色圈与黑色圆圈被认为是相关的,是由于相似的颜色。红色和黑色圆圈被看作是彼此不同的,尽管他们都是圆形。

一个明显的地方在网上找到相似的颜色链接。一般来说,内部链接内容用相同的样式,通常用蓝色和下划线。这让观众知道,不同的部分文本是相关的。一旦一个人发现是一个链接,其它也是链接。

焦点(focal points)

“有一个兴趣点,强调或差异元素都将捕获并吸引观众的注意力。”

这个原则表明,我们的注意力会朝着相反方向,朝向不像其他某种方式的元素。在下面的图片中,你的眼睛应该被方形吸引。这是一个与其它元素不同的形状和颜色。我也给了它一个阴影,以进一步强调它。

焦点原则可能起于我们需要快速识别未知来警告我们潜在的危险。

相似原则和焦点原则是有联系的,其他元素之间没有相似的存在焦点也是看不见的。

过去的经验

“元素往往根据观察者的过去的经验被感知。”

过去的经验也许是最弱的完形原理。与任何的其他原则相结合,其他原则将主导过去经验原则。

过去的经验是独一无二的个体,所以很难做出假设如何感知。然而我们分享共同的经验。例如,很多颜色的意义产生于过去的经验。

看到贯穿于我们生活中的红绿灯,我们希望红色意味着停止和绿色意味着前进。由于这三个常见的颜色,你可能认为上图是作为一个红绿灯放在那。这就是过去的经验在起作用。

  我们的许多共同经验也往往是文化上的。颜色又提供了范例。在一些国家,白色被认为是纯洁和无邪的,黑色则是代表邪恶和死亡。在其他国家,这些解释是相反的。约定时可能出现的经验通常是共有的,但同样重要的是要记住,我们并不都有着相同的经历。

总结

格式塔原则是很重要的理解。他们是我们做为视觉设计师作为一切的基础。它们描述了在视觉上每个人如何感知对象。

上述原则应该是比较容易理解。它们中大多数,定义和图像可能是你需要了解的原则。与此同时,理解这些原则的基本思路和理解它们是如何影响设计是不一样的。

在未来几周内,我们将看到更多的格式塔如何影响设计。我们将看到如何对称性帮助我们平衡的组成以及如何结合联络点和相似性使我们能够在设计中营造视觉层次。

在我们学习那些之前,我们将深入探讨图像和背景的关系,并考虑我们元素的空间关系。这就是我要写这一系列文章的原因。

其他资源

视觉设计原则

组织在感性形式的法律(最大韦特海默)

格式塔原则

格式塔原理与网页设计

格式塔原则

形式知觉完形原则

格式塔原则在设计中的应用

视觉感知的格式塔理论

格式塔心理学,可以提高你的摄影的6原则

格式塔

艺术与设计原理格式塔

我特别推荐由Andy Rutledge写的这五部分的系列文章

1知觉完形原则:图和背景的关系

2知觉完形原理:相似

3知觉完形原则3:接近,统一的连通性,和良好的延续

4知觉完形原则:共同的命运

5知觉完形原则:闭合原则

更新:2015-07-29

收藏

121人已收藏

承辉学院

章鱼GUI群364978584章鱼游戏群473294097

  • 117

    作品

  • 2288

    粉丝

  • 12

    关注

  • icon的绘制及优化
  • 手机端渐变风启动页设计教程
  • 承辉学院UI手游全日班-3期-学生作业
  • 承辉学院UI手游全日班-3期-学生作业
相关标签

    猜你喜欢

      2015-07-29 自译外文 经验/观点 原作者: Steven Bradley 举报 38023 121 43 4

      设计原则(第一部分):视知觉和格式塔原则

      0.0°

      你确定要举报设计原则(第一部分):视知觉和格式塔原则

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年07月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      43
      121
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录