360图书馆文章备份

← 返回首页

必读的设计理论(一)之格式塔原理

2022-07-19

本文大纲主要分为

1.格式塔的介绍(或者说什么是格式塔)

2.格式塔的原则

3.格式塔在设计中的应用

4.总结

1.格式塔的介绍(或者说什么是格式塔)

格式塔由三位德国心理学家在研究 似动现象 的基础上创立,格式塔源自德语“Gestalt”意思为“整体、完形”格式塔理论也被称为完形理论。核心理论:我们习惯于以规则,有序,对称和简单的方式把不同的元素加以简单的组织,一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体。

我们的眼睛和大脑在观察事物,接收影像刺激的时候,会有一些特别的倾向。这些倾向常常可以帮助我们快速的辨别事物,有时候也会产生一些「视错觉」。完形心理学重要的概念便是「整体不等于个体的总合」,举例来说:当我们在观察另一个人的时候,并不是先看到他的手,脚,头,眼睛,耳朵,鼻子,然后把这些视觉特征组合成一个称为「人」的组合。我们是直接的观察到人这个「整体」,而不是其他器官的「个体的总合」。

二 . 格式塔原则

1.相似性

人们习惯将所看到的东西,按照形状、大小、颜色、方向等外观明显且有某些相似之处的元素自动的整合或集合为一组

如上图,看了这个后也来看看在具体实际设计中是怎么运用的相似原则的吧

支付宝中每个图标都用统一大小的图标盒子来规范图标的视觉大小平衡,其中类型相同的功能点采用了不同的颜色来与不同类型的功能进行区分,以此来告知用户它们的功能类型差异

美团中金刚区通过大小的方式来区分主金刚区和副金刚区。且副金刚区同样通过统一大小的图标盒子来统一图标的视觉大小平衡,通过颜色来区分业务的不同属性。

微博底部操作栏“加号”图标添加了一个圆角矩形来告知用户这个功能与其他四个功能的差异以及突显这个功能

2.接近性

这里的接近性和我们所说亲密原则类似,当我们看到各种各样的物体时,通常会将彼此靠近的元素组织为一个组。也就是元素与元素之间的距离会影响我们是否将这个(这些)元素组织在一起以及怎样组织在一起,元素与元素之间距离越近的会被组织在一起,而那些距离相对较远的则自动划分在组外。看下图

再上图(a)中横向距离小于纵向距离的时候我们的潜意识会将15个圆分为三列每列五个,图(b)中横向距离大于纵向距离的时候我们的潜意识会将15个圆分为五行每行三个圆的形式来划分,而在图(c)中按照相似原则我们的潜意识会将圆分为一组、三角形分为一组、正方形分为一组,但是通过加大了它们之中横向的距离后,这个时候我们的感知就会发生变化,进而将图形分为五列每一列为一组如图(d).还是一样我们来看看在实际设计中是怎么运用的吧

上图微信中将列表与列表之间距离来区分功能各个功能相关联的强度,使用户能更快的找到对应的功能同时界面清晰明了。

而上图爱彼迎中运用接近原则来区分模块与模块之间的分割,在这个界面中我们能很快知道“显示全部”按钮是属于上面最受好评房源模块而不是属于最具性比的房源这个模块。再来看看Uber也是同样的用法就不一一列举了(留下一个小思考呀)

3.封闭性

当我们在观看时,并不是一开始就区分某个单一的组成部分,而是将这些单一的组成元素组合起来使其成为一个易于理解的统一体。当看到某个部分是不完整的时候,我们的大脑会将不完整的信息按照已有的信息填补,并将其视为一个整体。

上图运用封闭性原则即使部分没有了依然不会影响我们对整体的图形的识别。来看看在界面设计中是如何运用封闭原则的吧

上图爱彼迎中(图中)红框框出来的部分图片和文字组合居左对齐且右边间距比较小,我们的大脑很容易这个小的整体补齐为一个矩形。

图中猫眼红框框出来的部分,右侧留出一个整体(影片图片、片名、日期)的一部分出来让我们知道右边还有内容可以继续浏览,内容显示出一部分,我们的眼睛会自然填补失去的信息,意识到右边还有没看完的内容,所以才会有产生右滑的动机可能性。这也正是利用了封闭性的原理

图中知识星球的底部操作栏icon采用了断性的风格,即使每个图标都有缺口我们的大脑会将形状区于完整的闭合形来解读,即使图标具有独特的风格又对识别性没有多大的影响。(当然断线风格的图标也是有一定的规律的,这里就不列出来啦下回分解呀(奸笑))

4.连续性

我们的大脑会倾向于将事物看成连续的形体,连续性帮助我们通过构图来解释方向和运动。它在对齐元素时发生,它可以帮助我们的眼睛顺利地穿过页面,有助于提高易读性。连续性原则加强了对分组信息的感知,创建了秩序并引导用户通过不同的内容细分。——Interaction Design Foundation

如上图左我们更倾向于将其看成两条相交的曲线,而不是两个相交的半圆。然而中间的我们会我们更倾向于将其看成两条相交的直线,而不是两个相交的菱形的两条边。右边图三我们往往倾向于使实现流跟随相同颜色的轨迹和方向。我们能够感知到这是两条弧线而不是多个圆点。还是一样来看看在界面中运用吧。

上图中红色框选中的滑动器灰色部分表示滑动条蓝色表示进度,我们可感知到圆球可沿着灰色条可以继续滑动,尽管整个滑动器被圆球覆盖了小部分。右图中(绿框中)一排小圆点形成按照一定的规律排列,形成一条视觉流,我们感知到一共有五个banner 且按照左右滑动的方式浏览。这就是连续性的运用我们会将这些灰点和白点视为一个整体,而非单个的灰点和白点。

5.主体与背景的关系

也称为图/地法则,该法则指出我们在感知事物的时候,总是自动的将视觉区域分为主体和背景。一旦图像中的某个部分符合作为背景特征的话,我们的视觉感知就不会把它们作为主体焦点。根据这样的原理在用户界面设计当中,我们就可以通过一些处理将图像中的某些部分变成背景,这样可以显示更多的信息或者将用户的焦点转移。——Interaction Design Foundation

也就是在整体的视觉条件下,某一个元素相比于其他元素更为凸显(大小、颜色、形态、纹理….)我们大脑会将其判断为主题而其他以外的元素则视为背景,并且习惯于把小的那个看作为背景之上的主体。这里来看看在设计中是怎么运用的吧

上图(左)在原有的界面上天界了一个黑色透明遮罩层(蒙版),使用户的视觉焦点转移到新的主体(白色高亮区域)被蒙版遮罩的页面视觉层级被减弱了,我们的注意力集中在了主体区域

上图中(微博)才用了全局毛玻璃效果来帮助用户了解当前所在页面的环境,同时达到了传递信息的目的,用户也横容易区分主体与背景之间的关系。

6.对称原则

对称的原则指出,当我们感知物体时,我们倾向于将他们视为围绕这个物体形成的对称形状。大多数物体可以被分为两个或者两个以上对称的部分。当我们看到两个对称的未连接元素时,我们无意识地将它们整合成一个连贯的对象(或感知)。对象越相似,它们就越倾向于分组。

如上图(左)CSC芬兰的标志,尽管图形的方向和颜色都不同,但是我们还是会将它视为一个整体。

右图中出现的图形我们会感知他为三组括号符号或者是一组花括号加上一个中括号的一部风来感知,而不是把它们看为六个独立的图形来感知。尽管有些地方按照了亲密原则进行了排列但是我们任然会这么感知。

7.共同命运

这一原则运用在动效上居多,共同命运原则指出在整体的视觉条件下,某些物体,或是同时、同速、同方向往一个地方移动,这些个别物体会被视为一组,如下图中带有灰色箭头的

总结 我们一共讲解了格式塔的7大原则:

1.相似性

2.接近性

3.封闭性

4.连续性

5.主体与背景的关系

6.对称原则

7.共同命运

这些原则在我们设计过程中不是当一存在的,他们可以互相影响并且存在一个界面中。这些原则也不仅仅局限在界面设计、包括平面设计…

如有错误之处还望多多指教,我会及时纠正,在此谢谢大家啦。

如要了解更多可查看:

http://www.clevelandconsultinggroup.com/articles/emergence-gestalt-approach-to-change.php

https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/gestalt-principles-of-form-perception