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

设计方法论是能够不断复用、贴近真理的视觉设计师何一般性规律 ，帮助分析和解决问题即从经验中总结出科学的用好规律，然后把这个规律用在该条件的格式具体事项上的过程，学习和应用设计方法论可以提升团队设计效率和专业性
、塔心以及团队影响力，理学全系列一共 12 篇，超多欢迎持续关注
。案例

什么是视觉设计师何设计心理学
？—— “设计心理学分为设计与心理学两大要素”

什么是设计 ？—— “设计是设想
、运筹 、用好计划与预算，格式它是塔心人类为实现某种特定目的而进创造性活动。”

根据设计目的理学可以划分为视觉传达设计、产品设计与环境设计三大类。超多

其中与我们息息相关的视觉传达设计正是体现了人和社会的关系
，视觉传达涉及很多领域如包装设计、版式设计、广告设计、 展示设计、影视设计等等 ，在视觉传达设计领域自然就必须将社会中的人的心理考虑进去。

设计心理学就是建立在心理学基础上，把人们心理状态，尤其是人们对于需求的心理
，通过意识作用于设计的一门学问。它同时研究人们在设计创造过程中的心态以及设计对社会
、对社会个体所产生的心理反应 ，反过来再作用于设计 ，起到使设计更能够反映和满足人们心理的作用 。

一、为什么设计师要懂心理学？

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

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

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

二
、感知与现实存在一定的偏差

视觉是一切感觉之首。人的大脑有一半的资源都用于接受和解析眼睛所见 。但眼睛所见并非全部，因为视觉信息还要经过大脑转换和解析。真正用来“观察”的其实是大脑  。我们所看到的并不是真相 ，我们的大脑在影响我们的感知；很大程度上是我们“期望”感知到的。

感知至少受到以下 3 个因素影响 ，与现实存在偏差：

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

人常根据以往的经验来对事物进行理解和判断；先入为主的经验会给用户不一样的感知和理解；你看到什么取决于经验/别人告诉你什么？

心理学上有个概念叫熟悉度偏见（Familiarity bias），就是说大家倾向于更相信自己熟悉的东西。比如
，面对一道不会的选择题，人们更倾向于选择自己熟悉的那个答案 ，而不是正确答案。人们自然而然会偏向他们熟悉的东西 ，人们喜欢信任他们所知道的，害怕变化而产生的不舒服，这就是为什么最好的新产品都是用最熟悉的模式。久而久之这些熟悉的环境会在我们心智中建立框架。专家管这个叫“感知模式/感知框架”。

不同场合的感知框架影响我们在不同场合下对期待见到的事物感知；使用电脑、手机的人对桌面和文件
、网站和各种类型的 APP 都会有相对应的感知框架；用户经常不认真看屏幕就点击按钮或链接
，他们更多是靠以往经验来引导他们对界面的感知，所以知道这个原理我可以更好的了解那些设计原则

① 和用户预期保持一致性

熟悉的瞬间能够建立信任，而不熟悉的模式则可能产生混乱（至少在最初）。 如果不符合人熟悉的心智模型及框架，就很容易让人觉得烦躁；经常炒股的朋友
，会对红色绿色很敏感 ，绿色代表下跌红色代表涨；很多用惯安卓的用户，突然用 iOS 会很不习惯。

小案例

1. 电子书保留了模拟现实翻书的效果，这样大大降低用户理解左右滑控制翻书上下页的理解成本。
2. 朋友圈广告的样式也是符合用户心智模型，呈现形式与好友发的朋友圈保持一致 。以明星作为好友  ，插入大图 ，底部还可以看到好友的评论和互动 ，这样给人的感觉就像好友发了一个状态，而非一条赤裸裸的广告。
3. 红包设计形式就很像现实中的红包 ，所以很多人也一下子就理解这是红包 ，而且点开就是拆红包了。

举例
：vivo 电子书 、vivo 钱包

要点：熟悉度偏见是很有效的 ，所以要用用户所熟悉的东西来帮助他们更快地使用你的产品。

② 和平台规范保持一致性

产品的设计要和平台的规范保持一致；也需要与竞品保持一致，比如同类型的 app 基本是大同小异的  。

③ 产品内部规范一致性

其中包括迭代版本保持一致性，同一层级图标颜色字体保持一致性 ，品牌一致性，交互行为一致性；不同的品牌有自己的调性，可以直接通过设计语言传达给用户 ，而且能够达到一个良好的品牌辨识度 ，成熟的产品有自己的设计标准。

举例
：vivo 钱包-首页
、贷款、卡包、我的

④ 遵循用户的操作习惯

在找某件东西的时候，如果它不在老地方或者看起来和以前不一样，就算在我们眼前，我们也找半天，这也是因为我们受以往的经验影响感知；因此相同或相似产品的用户习惯保持一致，即意味着用户需要更少的时间去学习甚至不需要学习。

举例 ：Figma、sketch

我们常用的设计软件 figma 和 sketch，他们在界面结构、功能位置、操作方式包括快捷键 ，基本都是一致的。

2. 环境影响我们的感知

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

例如 ：我们听到的能影响我们看到的 ，反之亦然；我们听到 、看到或者闻到的能影响我们的触觉。

对于识别一个字母、一个单词、一张脸或者任何物体的神经活动 ，都包含了环境刺激产生的神经信号的输入
 。这个环境包括感知到的其他临近对象和事件，甚至由环境激活的对以往感知到的对象和事件的记忆。

人们经常根据周围的情景去理解事物，视觉感知也是一样的，上下文会影响我们对某一个词的理解；环境有时候会产生歧义。同样的一段话放在不同的语句当中，会有不同的理解。视觉上也是如此  ：

分别是缪勒-莱尔错觉、咖啡墙错觉、蓬佐错觉
、贾斯特罗错觉

小贴士

我们需要留意所看到的图形与实际之间的偏差 ，从而对设计进行调整。环境影响我们的感知，所以需要确认好避免歧义
，并通过测试确认所有用户对产品信息的理解是一致的 。

3. 目标影响我们的感知

除了视觉，目标会过滤其他感官的感知。

例如
 ：曾经在一趟课上，老师请学生看一段几分钟的录像，并请他们注意录像中一共有几个白衣人出现 。学生们聚精会神看完录像，所有人都能准确无误的告诉老师钱后共有几个白衣人出现  。

这时老师微笑着问大家 ：有没有人看见黑猩猩？什么 ？除了黑衣人、白衣人
、还有一只黑猩猩？全班竟然没有一个人发现 。

当用户使用某款 app 时通常都是带有目的性的去操作
，这个过程中会过滤与其达成目标操作无关的东西 ，当用户在软件寻找信息或某个功能时 ，他们并不会认真的阅读 ，只是快速而粗略的扫描屏幕上与目标相关的东西。

目标会影响我们注意什么--感知是主动的，我们动用感官去找到和目标相关的东西。目标使我们的感知系统对某些特性敏感--例如在下图找红色的圆点
 ，大脑对红色就会特别敏感，而其它颜色就几乎不会被注意到，即使我们的确“看到”了它们 。

当用户充分的调动感知来寻找目标的时候，由于用户的注意力处于一种高度的紧张状态，这是一种不好的用户体验 ，我们要做的是让用户能够轻松的完成目标任务，而不需要有高度的紧张和寻找 
。

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

vivo 钱包-贷款在用户信息验证时候 ，清晰告知用户整体流程状态 ，提高用户对整体流程的把控感，安全感。

在设计中应怎么做

1. 避免显示有歧义的信息，并通过测试确认所有用户对信息的理解是一致的。当无法消除歧义时，要么依靠设计标准或用户习惯
   ，要么告知用户用你期望的方式去理解歧义之处  。
2. 在一致的位置摆放信息和控件
    。不同页面上提供的相同功能的控件和数据显示应该摆放在每一页上相同的位置，而且它们还应该有相同的颜色 、字体和阴影等。这样的一致性能让用户很快找到和识别它们。一致性的设计原则对用户而言可以让信息传达和用户使用体验更好；对产品研发团队来说，也会减少设计的研发成本。
3. 理解用户目标，知道用户要感知什么，从而确保提供必要的信息清晰的对应用户的感知。用户去用一个系统是有目标的
   ，设计者应该了解这些目标，要认识到不同用户的目标可能不同
    ，而且他们的目标强烈左右他们能感知到什么  。在有所交互的每个点 ，确保提供了用户需要的信息，并非常清晰地对应到一个可能的用户目标 ，使用户能够注意到并使用这些信息 。

三、视觉设计中的格式塔

先给大家举一个栗子，大家平时逛街的时候能记住哪些广告呢？ 我们虽然每天看到那么多的信息，但是真正记住的却不多。还有当我们看到复杂的事物的时候，心里会涌现不舒服的奇怪感受 ，有时候这种感受没有办法用语言来描述。那么为什么会有这些感受呢？

其实道理很简单，我们做的东西是给人用的 。人的认知和记忆能力是有限的。视觉设计和心理是相互联系，并且相互影响的
。格式塔原则可以帮助我们理解和控制这些联系。

1. 什么是格式塔

1910 年，德国飞驰的一列火车上 ，韦德海默眺望窗外的风景。电线杆、房舍和山顶尽管是静止不动的，可看起来却好像在与火车一起飞奔，这是为什么呢
？韦德海默对这个错觉的疑问，开启了一门新的心理学派--格式塔心理学。可以说是视错觉导致了格式塔的崛起。

格式塔由创始人德国心理学家马科斯·韦德海默提出 ，是德文 Gestalt 的音译，也称「完形心理学」。

他的视觉研究受到当时新发现的物理学定律影响 ，他认为和物理世界的「电场、磁场、重力场」一样，在人类的知觉世界里应该也有一个极为类似的“场”存在。人类视觉世界称为「视觉场」；和人类生活 、学习等情景相关的是「知觉场」 
。人们知觉到此场，并加以利用在把握这个整体，而至完形。因此「完形」心理学被称为“场论”（fieid theory）。（“完形”就是格式塔 ，格式塔是完形的中文音译）

格式塔在「视觉场」中的定义是：在“视觉场”中的各种力量组合成一个自我完满而平衡的整体 。在格式塔中，任何元素的改变都将影响整体以及各部分之本来特性 。

格式塔将心理现象视为有机整体，任务整体虽有各个部分组成，但并不等于部分之和而是大于部分之和 。并且认为，整体先于部分并且决定部分的性质。格式塔理论的关注焦点是“族群”

格式塔反对构造主义元素学说（把人的复杂知觉简单看成是各种零碎感觉元素，以及通过联想把这些感觉元素合起来而构成的） 。如同看一棵树 ，元素主义认为人对树的知觉只是各种感觉和颜色、形状 、亮度等元素复合构成的。即所谓“统觉” 。格式塔心理学则认为人的第一眼就将这棵树感知为一个完整的整体 ，而不是单个感觉元素集合加总构成的。

2. 格式塔实验研究

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

① 似动现象

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

例如 ，我们看到灯光从一处向另一处移动，事实上是这只灯熄了 ，那只灯同时亮了。这种现象正是不能把整体分解成部分的证据。这种现象的组成部分是一些独立的灯在一开一关，但组成一个整体后
，给人造成这些灯在动的假象。

后来，格式塔心理学把重点放在整体系统上
 ，在这个系统中，各个部分是以一种能动的方式相互联系在一起的，也就是说，仅根据各分离的部分 ，无法推断出这个整体。所以人们把它称为“格式塔或完形心理学”
。

② 整体与部分

看起来格式塔心理学是把重点放在整体上，但这并不意味着他们不承认分离性。事实上，格式塔也可以是指一个分离的整体。

研究认为，一个人的知觉场始终被分成图形与背景两部分。“图形”是一个格式塔，是突出的实体，是我们知觉到的事物；“背景”则是尚未分化的、衬托图形的东西
。知觉帮助我们把图形从背景中分离出来 。图形与背景的对比越大 ，图形的轮廓越明显，则图形越容易被发觉 。

③ 顿悟实验

苛勒在一次实验中用绳子把一只香蕉悬挂在笼子的顶棚上。笼子里只有惟一的一只木箱可以使用 。6 只黑猩猩看到香蕉时跳跃起来竭力想抓住香蕉 ，但是徒劳
。有一只名叫苏尔坦的黑猩猩马上停止了这些白费力气的努力，开始从各个方向打量箱子。忽然它停在箱子前面，抓起它并径直朝目标走去。它把木箱迅速放到地上
，爬上箱子 ，从木箱上面使劲跳起 
，终于抓住了香蕉 。

苛勒还对这组黑猩猩使用其他工具进行了观察，如利用木棍去获取放在笼子外面的水果 。这些黑猩猩甚至能够将两根短棍连接起来做成一根长棍 。同样
，它们还能把两三个箱子叠放在一起，再爬到放在最上面的箱子顶上 ，借助一根木棍去获取香蕉。

苛勒通过对黑猩猩进行的许多实验，提出了顿悟理论 。他认为问题的解决不是由于尝试错误
，而是由于顿悟。所谓顿悟，就是内在地把握情境的关系性 ，并依此改变整个情境。
或许正如一些批评家所指出的那样，顿悟不是一种独立的学习过程或学习形式
，而是学习达到一定程度的表现或者结果 。一定的经验积累，是产生顿悟的前提。

小总结

他们认为思维是整体的、有意义的知觉 ，而不是联结起来的表象的简单集合；主张学习是在于构成一种完形，是改变一个完形为另一完形。我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体 ，而不是只看到互不相连的边 、线和区域。他们认为学习的过程不是试尝错误的过程，而是顿悟的过程，即结合当前整个情境对问题的突然解决。再通俗一点就是人是怎样认知和记忆所看到的事物。

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

考夫卡在其书中认为，我们自然而然地观察到的经验，都带有格式塔的特点 。他以心物场和同型论（心理功能完整性原则和心理无力学同型性原则）为格式塔总纲 ，从而派生出若干亚原则称作组织率。 我们常称为“格式塔组织率”或“格式塔原则”。

① 接近性原则 law of proximity

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

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

小贴士

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

② 相似性原则 law of similarity

有共同视觉元素的物体看起来更有关联性。我们倾向于将看起来相似的对象视为一组或者一个模式，并且将它们与特定含义或者功能联系在一起。

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

1. 界面内相同功能的组件保持样式统一 ，拥有相同功能、含义 、层次结构的组件保持样式上的统一可以使用户快速理解这个组件的操作方式，降低用户学习成本。
2. APP 内部风格保持统一；统一的风格能够让用户清晰地感知到自己处在同一个 app/网站中，这不仅仅是用户体验的要求 ，也是视觉上的需求。
3. 特异点更易获得视觉焦；反过来思考 ，在相似的元素中，突然蹿出一个截然不同的东西 ，你立马就会被其吸引 ，这其实也是相似性原理的一种逆向应用的方法。比如很多 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