超多案例!视觉设计师如何用好格式塔心理学?

Date 2026-07-02 21:26:44

超多案例!视觉设计师如何用好格式塔心理学?

设计方法论是一般规律,可以不断重用,接近真理,帮助分析和解决问题,即从经验中总结科学规律,然后将规律应用于具体事项的过程中,学习和应用设计方法论可以提高团队设计效率和专业性,以及团队影响力,整个系列 12 欢迎继续关注。

往期干货:

什么是设计心理学?—— “设计心理学分为设计和心理学两大要素”

什么是设计?—— “设计是想法、运筹、计划和预算,它是人类为了达到一定的目的而进入的创造性活动。”

根据设计目的,可分为视觉传达设计、产品设计和环境设计三类。

与我们密切相关的视觉传达设计反映了人与社会的关系。视觉传达涉及包装设计、布局设计、广告设计等多个领域 在视觉传达设计领域,展示设计、影视设计等,自然要考虑社会中人的心理。

设计心理学是一门以心理学为基础,通过意识将人们的心理状态,特别是人们对需求的心理作用于设计的知识。同时,它研究了人们在设计和创造过程中的心态,以及设计对社会和个人的心理反应。反过来,它将作用于设计,使设计更能反映和满足人们的心理。

为什么设计师要懂心理学?

作为设计中最重要的理论学科,设计心理学对设计的发展、设计活动的指导和设计创新活动具有重要的指导意义。通过理解设计心理学的概念和研究方法,设计师可以认识到设计心理学在当代多元化情感消费社会中的重要作用,使设计师能够更好地学习和掌握设计心理学,完善设计知识结构,创造更多符合人类需求的优秀设计。

一个不懂人类心理学的设计师不会比一个不懂物理学的建筑更好。—Joe Leech

我们首先需要观察用户的心理行为和反应。幸运的是,自我 19 自本世纪初以来,心理学家一直在各种控制良好的环境中进行大量的实验。许多常见的心理现象已经得到了广泛的认证,我们只需要了解它们,并找出如何将它们应用到设计中。

感知与现实之间存在一定的偏差

视觉是所有感觉中的第一种。大脑中一半的资源被用来接受和分析眼睛所看到的东西。但并不是所有的眼睛都看到了,因为视觉信息必须通过大脑进行转换和分析。真正用来“观察”的是大脑。我们所看到的不是真相,我们的大脑影响着我们的感知;在很大程度上,我们“期望”感知到了它。

至少感知如下 3 与现实有偏差的因素影响:

1. 先入为主的经验影响我们的感知

人们经常根据以往的经验来理解和判断事物;先入为主的经验会给用户不同的感知和理解;你看到什么取决于经验/别人告诉你什么?

心理学中有一个概念是熟悉度偏见(Familiarity bias),也就是说,人们倾向于相信自己熟悉的东西。例如,面对一个无法解决的多项选择题,人们更倾向于选择他们熟悉的答案,而不是正确的答案。人们自然会倾向于他们熟悉的东西。人们喜欢相信他们所知道的,害怕改变造成的不适。这就是为什么最好的新产品使用最熟悉的模式。随着时间的推移,这些熟悉的环境将在我们的脑海中建立一个框架。专家称之为“感知模式/感知框架”。

超多案例!视觉设计师如何用好格式塔心理学?

不同场合的感知框架影响我们对不同场合期望看到的东西的感知;使用电脑和手机的人对桌面和文件、网站和各种类型的感知 APP 会有相应的感知框架;用户经常点击按钮或链接而不仔细观看屏幕,他们更依赖以往的经验来指导他们对界面的感知,所以我可以更好地理解这些设计原则

① 与用户预期保持一致性

熟悉的时刻可以建立信任,而不熟悉的模式可能会产生混乱(至少在最初)。 如果不符合熟悉的心理模型和框架,很容易让人感到烦躁;经常炒股的朋友会对红色和绿色非常敏感。绿色代表下降,红色代表上升;许多习惯于安卓的用户突然使用它 iOS 会很不习惯。

小案例

电子书保留了模拟现实翻书的效果,大大降低了用户理解左右滑动控制翻书上下页的理解成本。朋友圈广告的风格也符合用户的心理模式,呈现形式与朋友发送的朋友圈一致。以明星为朋友,插入大图片,也可以看到朋友的评论和互动,给人一种朋友发送状态的感觉,而不是赤裸裸的广告。红包的设计形式与现实中的红包非常相似,所以很多人突然明白这是一个红包,点击就是拆除红包。

超多案例!视觉设计师如何用好格式塔心理学?

举例:vivo 电子书、vivo 钱包

要点:熟悉度偏见非常有效,所以用户熟悉的东西来帮助他们更快地使用你的产品。

② 与平台规范保持一致性

产品设计应与平台规范一致;也需要与竞争产品保持一致,如同类型 app 基本上是一样的。

超多案例!视觉设计师如何用好格式塔心理学?

③ 产品内部规范的一致性

包括迭代版本的一致性、相同层次的图标颜色字体、品牌一致性和交互行为一致性;不同的品牌有自己的基调,可以通过设计语言直接传达给用户,可以达到良好的品牌知名度。成熟的产品有自己的设计标准。

超多案例!视觉设计师如何用好格式塔心理学?

举例:vivo 钱包-首页,贷款,卡包,我

④ 遵循用户的操作习惯

在寻找东西时,如果它不在旧地方或看起来不同,即使在我们面前,我们也会寻找很长一段时间,因为我们受到以往经验的影响;因此,相同或类似产品的用户习惯是一致的,这意味着用户需要更少的时间学习,甚至不需要学习。

超多案例!视觉设计师如何用好格式塔心理学?

举例:Figma、sketch

我们常用的设计软件 figma 和 sketch,包括快捷键在内的界面结构、功能位置和操作模式基本相同。

2. 环境影响我们的感知

周围环境对感知的影响也存在于不同的感官之间。任何五种感官中的任何一种都可能同时影响其他感官。

比如我们听到的会影响我们看到的,反之亦然;我们听到、看到或闻到的会影响我们的触觉。

识别字母、单词、面部或任何物体的神经活动都包含了环境刺激产生的神经信号的输入。这种环境包括感知到的其他相关对象和事件,甚至是环境激活的对过去感知到的对象和事件的记忆。

人们经常根据周围的情况来理解事物,视觉感知也是如此。上下文会影响我们对某个词的理解;环境有时会产生歧义。在不同的句子中放置相同的段落会有不同的理解。视觉上也是如此:

超多案例!视觉设计师如何用好格式塔心理学?

缪勒-莱尔的错觉,咖啡墙的错觉,蓬佐的错觉,贾斯特罗的错觉

小贴士

我们需要注意图形和实际图形之间的偏差,以调整设计。环境影响我们的感知,因此需要通过测试确认所有用户对产品信息的理解是一致的,以避免歧义。

3. 目标影响我们的感知

除视觉外,目标还会过滤其它感官的感知。

例如,有一次,在一节课上,老师要求学生观看几分钟的视频,并要求他们注意视频中有几个穿白色衣服的人。学生们专心观看视频后,每个人都可以准确地告诉老师,有几个穿白色衣服的人出现在钱之后。

这时老师笑着问大家:有没有人看到黑猩猩?什么?除了黑衣人,白衣人,还有一只黑猩猩?全班没人发现。

当用户使用某个型号时 app 通常是有目的的的操作,在这个过程中会过滤和实现目标当用户在软件中寻找信息或功能时,他们不会仔细阅读标准操作无关的东西,而是快速而粗略地扫描屏幕上与目标相关的东西。

目标会影响我们所注意的——感知是积极的,我们使用感官来找到与目标相关的东西。目标使我们的感知系统对某些特征敏感——例如,在下图中找到红点,大脑对红色特别敏感,即使我们“看到”它们,其他颜色也很少被注意到。

超多案例!视觉设计师如何用好格式塔心理学?

当用户充分调动感知来寻找目标时,这是一种糟糕的用户体验,因为用户的注意力处于高度紧张的状态。我们需要做的是让用户在没有高度紧张和搜索的情况下轻松完成目标任务。

超多案例!视觉设计师如何用好格式塔心理学?

举例:vivo 钱包-贷款信息验证部分流程

vivo 在验证用户信息时,钱包-贷款清楚地告知用户整个过程状态,提高用户对整个过程的控制感和安全感。

如何进行设计?

避免显示模棱两可的信息,并通过测试确认所有用户对信息的理解是一致的。当歧义无法消除时,要么依靠设计标准或用户习惯,要么告诉用户以你期望的方式理解歧义。将信息和控件放置在一致的位置。不同页面提供的相同功能的控件和数据显示器应放置在每页相同的位置,并应具有相同的颜色、字体和阴影。用户可以快速找到并识别这种一致性。对于用户来说,一致性的设计原则可以使信息传递和用户体验更好;对于产品研发团队来说,设计的研发成本也会降低。了解用户的目标,了解用户想要感知什么,从而确保提供必要的信息清楚地对应用户的感知。用户使用系统是有目标的。设计师应该理解这些目标,认识到不同用户可能有不同的目标,他们可以感知到什么。确保用户所需的信息在每个交互点都得到提供,并且与可能的用户目标非常清晰地对应,以便用户能够注意到并使用这些信息。

三、视觉设计中的格式塔

让我们先给你一个栗子。购物时你能记得哪些广告? 虽然我们每天都看到这么多信息,但我们真正记得的并不多。当我们看到复杂的事情时,我们会感到不舒服和奇怪的感觉,有时这种感觉无法用语言来描述。那么,为什么会有这样的感觉呢?

事实上,事实很简单。我们所做的是给人们的。人们的认知和记忆能力有限。视觉设计和心理是相互联系和影响的。格式塔原则可以帮助我们理解和控制这些联系。

1. 格式塔是什么?

1910 2000年,韦德海默在德国的一列火车上俯瞰窗外的风景。虽然电线杆、房屋和山顶静止不动,但它们似乎在与火车一起奔跑。为什么?韦德海默对这种错觉的怀疑开启了一种新的心理学——格式塔心理学。可以说,视觉错觉导致了格式塔的兴起。

超多案例!视觉设计师如何用好格式塔心理学?

创始人德国心理学家马科斯·韦德海默提出了格式塔 Gestalt 音译,又称「完形心理学」。

他的视觉研究受到当时新发现的物理定律的影响,他认为这与物理世界有关「电场、磁场、重力场」同样,在人类的知觉世界里也应该有一个非常相似的“场”。人类视觉世界被称为「视觉场」;与人类生活、学习等场景有关「知觉场」。人们意识到这一点,并利用它来把握整体,直到形状结束。因此「完形」心理学被称为“场论”(fieid theory)。(“完形”是格式塔,格式塔是完形的中文音译)

格式塔在「视觉场」定义是:“视觉场”中的各种力量组合成一个自我完美和平衡的整体。在格式塔中,任何元素的变化都会影响整体和各部分的原始特征。

格式塔将心理现象视为一个有机的整体。虽然整个任务由各个部分组成,但它不等于部分之和,而是大于部分之和。并认为整体先于部分,决定了部分的性质。格式塔理论的重点是“民族”

超多案例!视觉设计师如何用好格式塔心理学?

格式塔反对构造主义元素理论(简单地将人类的复杂感知视为各种分散的感觉元素,并通过联想将这些感觉元素结合起来)。就像看一棵树一样,元素主义认为人们对树的感知只是由各种感觉、颜色、形状、亮度和其他元素组成的。也就是说,所谓的“统一感觉”。格式塔心理学认为,人们第一眼就把树感知成一个完整的整体,而不是单个感觉元素的集合和总体组成。

2. 格式塔实验研究

实验研究主要包括以下三个方面:

① 似动现象

似动现象是形成格式塔心理学的基础。如果呈现的时间间隔在两个相距不远的视觉刺激物之间 1/10 秒到 1/30 在秒之间,我们看到的不是两个物体,而是一个物体在移动。

例如,我们看到灯从一个地方移动到另一个地方。事实上,灯熄灭了,灯同时亮了。这种现象是无法将整体分解为部分的证据。这种现象的组成部分是一些独立的灯在一开一关,但在形成一个整体后,它会给人一种这些灯在移动的错觉。

超多案例!视觉设计师如何用好格式塔心理学?

后来,格式塔心理学专注于整个系统。在这个系统中,每个部分都以一种活跃的方式相互联系,也就是说,这个整体不能仅仅根据分离的部分来推断。因此,人们称之为“格式塔或完形心理学”。

超多案例!视觉设计师如何用好格式塔心理学?

② 整体与部分

格式塔心理学似乎专注于整体,但这并不意味着他们不承认分离。事实上,格式塔也可以是一个分离的整体。

研究认为,一个人的感知领域总是分为两部分:图形和背景。“图形”是一座格式塔,一个突出的实体,一个我们感知到的东西;“背景”是一个尚未分化和衬托图形的东西。感知帮助我们将图形与背景分开。图形和背景之间的对比越大,图形的轮廓就越明显,图形就越容易被发现。

③ 顿悟实验

在一次实验中,苛勒用绳子把香蕉挂在笼子的天花板上。笼子里只有一个木箱可以用。6 当黑猩猩看到香蕉时,他跳起来试图抓住香蕉,但这是徒劳的。一只名叫苏尔坦的黑猩猩立即停止了这些徒劳的努力,开始从各个方向看盒子。突然,它停在盒子前面,抓住它,直接朝着目标走去。它迅速把木箱放在地上,爬上盒子,从木箱上跳起来,最后抓住了香蕉。

苛勒还用其他工具观察了这组黑猩猩,比如用棍子在笼子外面买水果。这些黑猩猩甚至可以把两根短棍连接起来,做成长棍。同样,他们也可以把两三个盒子叠在一起,爬到盒子顶部,用棍子买香蕉。

苛勒通过对黑猩猩的许多实验提出了顿悟理论。他认为解决问题不是因为尝试错误,而是因为顿悟。所谓顿悟,就是把握情境的内在关系,相应地改变整个情境。也许正如一些批评家所指出的,顿悟不是一种独立的学习过程或形式,而是学习的表现或结果。一定的经验积累是顿悟的前提。

小总结

他们认为思维是一种整体而有意义的感知,而不是一种简单的外观集合;提倡学习是构成一个完整的形状,是将一个完整的形状改为另一个完整的形状。我们的视觉系统自动构建视觉输入的结构,并在神经系统层面上感知形状、图形和物体,而不仅仅是看到相互连接的边缘、线和区域。他们认为学习的过程不是尝试错误的过程,而是一个顿悟的过程,即结合当前的情况突然解决问题。另一个流行的观点是人们如何认识和记住他们看到的东西。

2. 格式塔原理在设计中的应用

考夫卡在他的书中认为,我们自然观察到的经验都具有格式塔的特点。他以心物场和同型理论(心理功能完整性和心理无力学同型理论)为格式塔大纲,从而产生了一些亚洲原则,称为组织率。 常被称为“格式塔组织率”或“格式塔原则”。

① 接近性原则 law of proximity

物体之间的相对距离会影响我们对它们是否以及如何组织在一起的感知。相互靠近的物体似乎属于一组,而那些距离较远的物体则不是。 利用这一原则,调整距离或使用分割线来分离不同设计模式的构建。使设计界面有序,视觉清晰,降低视觉噪音。

超多案例!视觉设计师如何用好格式塔心理学?

相互关联的控件和内容之间的距离越近,用户就越能感知到它们的相关性。相反,如果距离太远,用户很难感知到它们是相关的,那么产品在体验中就更难使用。

“案例太多了!视觉设计师如何充分利用格式塔心理学?”

小贴士

属性相同、场景相似的信息应放在一起,降低阅读成本,提高用户感知效率;尽量区分不相关信息,不要模糊,造成不必要的误解。

② 相似性原则 law of similarity

具有共同视觉元素的物体看起来更相关。我们倾向于将看似相似的对象视为一组或一种模式,并将其与特定的含义或功能联系起来。

超多案例!视觉设计师如何用好格式塔心理学?

相似性表达了元素形式和内容的接近,包括形状、颜色、大小、运动状态等。如果一堆元素有一些相同的特征,那么这些元素在我们的认知中就有更强的相关性。在 UI 在设计中,我们经常使用这一原则,主要包括以下几点 3 个方面:

界面中具有相同功能的组件保持风格统一,具有相同功能、含义和层次结构的组件保持风格统一,使用户能够快速理解组件的操作模式,降低学习成本。APP 内部风格保持统一;统一的风格可以让用户清楚地感觉到自己在同一个地方 app/在网站上,这不仅是用户体验的要求,也是视觉的要求。特异性更容易获得视觉焦点;另一方面,当一个完全不同的东西突然从相似的元素中跳出来时,你会立即被它吸引,这实际上是一种逆向应用相似原理的方法。例如,很多 app 的 tab 选择状态会更加突出。

超多案例!视觉设计师如何用好格式塔心理学?

小贴士

它看起来与接近性非常相似,但它们是两个不同的概念。接近性强调金额位置,相似性强调内容。通常将具有明显特征的东西(形状、颜色、大小)结合在一起。主要用于表格和导航。

③ 连续性原则 law of continuity

我们的视觉倾向于感知连续的形式,而不是离散的碎片。通过构图,我们可以感知整个物体的倾向,帮助我们感知事物的形状和运动方向。界面中的设计元素可以引导眼睛在平面上移动,提高界面的可读性。创建顺序并指导用户浏览不同的内容组。

超多案例!视觉设计师如何用好格式塔心理学?

vivo 钱包-连续的线段和进度条将用于贷款,以便在视觉上从左到右跟随线的方向来了解当前的进度。

小贴士

视觉倾向于感知连续的形式,而不是分散的碎片,通过找到一个非常小的共性,将多个不同的信息连接到一个整体,是界面设计和 logo 常用的设计原则之一。

③ 闭合性原则 law of closure

当人们观察熟悉的视觉图像时,他们会把不完整的局部图像作为一个整体图像来感知,这种感知的结束被称为闭合。如果局部图像过于陌生或简单,则不会产生整体闭合联想。

闭合是一种完成某种图形(完形)的行动。即使没有外观的限制,我们也会自动完成图形的大脑。例如,我们不认为半形或有间隙的形状是一条线或各种零碎的图形,而是一个完整的形状。闭合是指完形的认知规律。

这一原则也非常适用于界面设计。使用省略或减法处理图形不仅可以节省空间,还可以让用户产生联想和兴趣。例如 UI 界面中的导航栏、卡模式等。

超多案例!视觉设计师如何用好格式塔心理学?

我们常见的页面滑动组件(隐藏的部分卡片)采用闭合法原则,通常在界面右侧暴露一半(或少数),以提醒用户隐藏更多的内容

⑤ 主体/背景原理 Figure-Ground

大脑将视觉区域分为主体和背景,包括一个场景中占据我们注意力的所有元素,其余的是背景;这一特征有利于我们对重要信息和次要信息的感知。主体和背景之间的区别可以从以下两个方面来控制:

场景大小—— 我们倾向于以大场景中的中小区域为主体,以大场景为背景;

层级关系—— 在同一平面上,我们倾向于将视觉第一层的物体视为主体。

超多案例!视觉设计师如何用好格式塔心理学?

原则可以帮助设计师在设计界面的过程中抓住用户的注意力,让用户优先考虑我们想要看到的东西。

超多案例!视觉设计师如何用好格式塔心理学?

例如,弹出窗口提示的重要信息,作为用户注意力焦点的内容暂时成为弹出窗口的背景,弹出窗口将短暂成为新的主题;这一原则应用于弱化背景,突出内容等界面。许多工具类型 app 例如,滴滴的主页和高德地图视觉都以大半屏地图为主体,操作放在下面。

⑥ 对称原理简单 Simple principle

在观察事物的过程中,我们的第一印象往往是简单对称的图形,这是格式塔的对称原则。

具有对称、规则、光滑的简单图形特征的部分往往形成一个整体。对称的元素通常被认为是属于一起的,无论它们之间的距离如何,它们都给我们一种强烈而有序的感觉。

超多案例!视觉设计师如何用好格式塔心理学?

人们的眼睛喜欢在复杂的形状中找到简单有序的对象。当我们在设计中看到复杂的物体时,眼睛更愿意将它们转换为单一统一的形状,并试图从这些形状中删除无关的细节来简化它们。

对称构图令人满意,但它们也会变得有点沉闷。在对称设计中添加不对称元素可以在吸引注意力的同时给人留下深刻印象。

超多案例!视觉设计师如何用好格式塔心理学?

vivo 游戏中心:左右瀑布流是格式塔简化对称性的体现,用户在浏览过程中有效降低了阅读压力。特别适合这种以图片流为主的产品,可以大大提高浏览效率。

⑦ 共同命运的原则 Common destiny

无论元素之间的距离有多远,或者它们看起来有多不同,如果它们一起移动或改变,它们都被认为是相关的。这里的共同命运是针对运动对象的。类似于接近原理和相似原理,它们都与我们的视觉系统有分组对象来感知事物的倾向有关,但一起移动的物体会被感知为属于同一组或相互关联的视觉现象,这是格式塔中的共同命运原则。

超多案例!视觉设计师如何用好格式塔心理学?

在处理过程中,我们默认将向同一方向移动的元素分为一类

超多案例!视觉设计师如何用好格式塔心理学?

vivo 在钱包主页上,“图标”一起滑动,以及 iPhone 删除应用程序时,所有图标都会一起摇晃,要么删除,要么保留,这就是共同命运的原则。

韦德海默和他的同事和学生发现了许多原则,最终被命名 100 多条(如“平行性” Parallelism、异质同形 isomorphism、视觉伪装 visual camouflage、成员特征等。).

小贴士

成员特征原则:

一个整体的个别部分没有固定的特征,个别部分的特征从其与其他部分的关系中显现出来。

假如我们有很多相同的按钮,如何突出一个更重要的按钮,但仍然让用户感知或按钮?这需要使用成员特征法。成员特征法给了集体中某一元素一些特殊的刺激元素来突出它。

超多案例!视觉设计师如何用好格式塔心理学?

独特的外观暗示了它不同于其他元素的功能

3. 总结格式塔的原理

对原理进行分类总结有两个目的:

首先是自我检查。在构思设计的过程中,我们往往更多地关注视觉效果的创造,而忽略了最基本的原则,例如在设计之前进行完整的设计构思;在设计过程中,检查自己的设计作品,避免因信息不对齐、布局混乱等低级错误而反复修改稿件;然后是设计完成后对需求方的合理陈述。

第二,在深入理解的前提下,设计可以举一反三。

用户界面设计并不完全是关于美丽的像素和完美的图形。它主要关注沟通、性能和便利性。格式塔原则总是帮助我们实现这些目标,为用户创造愉快的体验,为企业创造巨大的成功。

这 7 项法则不是独立存在的。它们之间有很高的相关性,是相辅相成的。我们需要跟进不同的需求类型和用户场景,并使用这些基本规则进行组合,使您的设计方案更有基础。

在制作产品或设计时,我们必须考虑人们的认知和记忆因素,这是天生的,人们的审美对简单和和谐有基本的要求。只有更好地利用视觉空间设计作品,降低设计的复杂性,尽可能保持格式塔原则的完整性,用户才能更好、更容易地理解我们产品的使用。

超多案例!视觉设计师如何用好格式塔心理学?

用户界面设计并不完全是关于美丽的像素和完美的图形。它主要是关于沟通、性能和方便性。格式塔的原则总是帮助我们实现这些目标,为用户创造愉快的体验,为企业创造巨大的成功。

学习和研究人们的心理并应用于设计,为产品带来更直观的优化设计,不仅可以提高设计师的设计技能,还可以让每个人在产品设计中加入自己的思维,使设计内容更加深入。同时,灵活运用设计心理学可以大大提高用户的设计体验,引导用户,最大限度地提高产品效率。

欢迎关注作者微信微信官方账号:「VMIC UED」

超多案例!视觉设计师如何用好格式塔心理学?