【原创投稿】 原创发布于 https://figma-file.store/blog/4533.html
你是否曾经打开某个 App，瞬间就觉得它"直觉般"好用？或者浏览网页时，视线自然流转，无需刻意思考该看向哪里、点击何处？
这不是玄学。你在那一瞬间经历的，是一个运行了超过一百年的设计逻辑------格式塔心理学。
我曾在 Airbnb 和高露洁负责产品设计。经手过信息密度极高的仪表盘后，我越来越确信一件事：格式塔原则不是教科书里的装饰品，它是界面能不能用的分水岭。用接近性和相似性组织信息，能让原本一团糟的页面变得清爽。读不下去的界面，往往不是内容的问题，是分组的问题。
格式塔到底是什么
Gestalt 是德语词，意思是"形态"或"整体模式"。格式塔心理学研究的是：大脑怎么把看到的东西自动拼成有意义的整体。
它解释了几件日常小事：
- 看到云朵像人脸、石头像动物------大脑在补全它想看到的形状
- 一群鸟飞过天空，你不会去数有多少只，你看到的是一个整体在移动
- 一堆散乱的圆点，只要排列得够近，你自动把它们读成一条线
这些现象背后是同一个原理：我们对场景的感知，不是把每个元素拆开来看，而是由它们之间的组织关系决定的。"整体大于部分之和"，说的就是这个。
百年老理论，为什么今天还在用
格式塔分组原则是 UX 和 UI 设计的基础工具。我们日常感知世界的习惯，跟用户面对界面时的反应是同一套机制。
大多数用户不会分析间距、对齐或对比度。他们只是"感觉"某个界面好用，某个不好用。这种"感觉"就是格式塔在工作。理解这一点的设计师，能做出第一眼就顺手的界面------因为它和大脑处理视觉信息的本能对上了路。
格式塔用对了，界面的清晰度、美观度和友好度会同时提高。
本文覆盖 12 项核心格式塔原则，从相似性、接近性到图形/背景和对称性。它们依然是现代 UI/UX 设计的底层逻辑。
格式塔是怎么来的
格式塔心理学由三位德国心理学家------马克斯·韦特海默、库尔特·考夫卡和沃尔夫冈·苛勒------在 20 世纪初创立。
那个年代，心理学的主流是研究人对感官刺激的反应：听到声音有多快、看到光线怎么反应、对不同颜色和纹理的感觉。研究者给被试者看各种刺激，测量他们的反应速度和强度。
这些实验帮助人们理解了单一感官怎么工作，但漏掉了一个更大的问题：大脑是怎么把一堆感官信号拼成一个完整的体验的？
韦特海默他们不满足于这个答案。他们觉得大脑会主动把感官信息组织成连贯的、熟悉的视觉形态。为了证明这一点，韦特海默做了一个经典实验：让被试者看两盏快速交替闪烁的灯。灯本身没动，但所有人都说看到了一盏灯在来回移动。
这个现象后来被叫做 phi 现象。它说明了一件事：运动不是被眼睛"看到"的，是被大脑"构建"出来的。两盏灯在极短时间内交替亮起，大脑把它们解读为同一个持续性事件。大脑这么做，是为了维持视觉连贯性------在没有运动的地方，创造出运动。
Phi 现象之后：从实验室到产品界面
Phi 现象后来成了格式塔理论的基石。格式塔的核心思想------人在关注细节之前，先寻找秩序和关联------至今是以人为本设计的底层逻辑。
韦特海默那代人的工作，为今天从界面设计到数据可视化的一切铺了路。在 UX 里，格式塔原则解释的是用户怎么理解视觉系统：怎么把相关信息分到一组、怎么感知层级、怎么跟随那些感觉"顺"的模式。
2025-2026 年的进展：格式塔正在被重新测量
有意思的是，格式塔原则在学术领域正经历一波复苏。
2025 年维也纳的 NeuroIS Retreat 上，研究者提出了一项新议程------用神经科学工具（脑电图、自主神经系统测量）来验证格式塔原则对用户体验的影响。他们的核心观点是：格式塔背后的知觉过程大量牵涉无意识和情绪反应，过去只靠问卷和访谈来研究是不够的。直接用脑科学数据来检验格式塔在界面设计中的作用，会带来更扎实的设计决策。
同年，南京林业大学的马嘉阳在《Applied Sciences》发表了一项量化研究。他系统控制了图形尺寸（1:1、3:4、1:2）和间距（6 个梯度），用 3×6 双因素方差分析来测量"接近性"和"相似性"如何交互影响用户的层级感知。结论很直接：重叠结构对层级感知的引导力远强于相切和分离结构。当图形尺寸相同时，相切和分离结构在层级感知上没有显著差异------但一旦引入尺寸差异，分离结构也能产生明显的层级感。
中国电信 APP 的 2025 年案例研究也验证了这一点。研究团队用眼动仪对比改版前后的界面，发现格式塔原则优化后的设计能更有效地引导视线落点，用户的首次注视时间（TTFF）缩短了，核心功能的定位更准确。
2026 年 3 月，马来西亚理工大学在《Journal of Creative Arts》上发表了一项实证研究：他们让设计师在格式塔一致性布局下完成识别任务，结果发现参与者对格式塔一致性元素的注视时间显著更长------这意味着更深层次的认知投入。而且，格式塔编排得当的布局让设计师的反应速度更快、判断准确率更高。
换句话说，格式塔正在从"设计经验"变成"可测量的设计科学"。
12 项核心原则速览
| 原则 | 一句话 |
|---|---|
| 1. 相似性 | 看起来像的，被认为是一家的 |
| 2. 接近性 | 离得近的，被认为有关系 |
| 3. 连续性 | 眼睛会顺着平滑的路径走 |
| 4. 闭合性 | 不完整的东西，大脑会自己补全 |
| 5. 图形/背景 | 主体和背景自动分离 |
| 6. 共同命运 | 一起动的，属于同一组 |
| 7. 对称性 | 对称的东西让人感觉稳定 |
| 8. 共同区域 | 在同一个框里的，就是一组 |
| 9. 平行性 | 平行的比不平行的看起来更相关 |
| 10. 焦点 | 总有一个东西会先抓住你的眼睛 |
| 11. 元素连接性 | 被线连起来的，就有关系 |
| 12. 过去经验 | 之前见过的模式，会影响现在的判断 |
下面逐条展开。
1. 相似性
外观相似的元素，大脑自动归为一组。
怎么用：
- 功能相同的按钮用一样的颜色、形状、大小
- 标题层级用字体大小来区分，别靠用户猜
- 图标风格保持统一------一套线性图标里别塞一个面性的
电商网站里，所有"加入购物车"按钮用同一种绿色和圆角。用户不用读字就知道那是操作按钮。反过来，如果有的绿有的橙有的方的有的圆的，用户就得每条都看一遍。认知成本上去了，转化率就下来了。
2. 接近性
离得近的东西，大脑默认它们有关系。
怎么用：
- 表单里姓和名放一起，地址字段另成一组
- 标签紧挨对应的输入框，别让用户猜谁是谁
- 用间距而不是分割线来做视觉分组，页面清爽得多
用户不需要说明就知道哪些是一组的。要是所有字段间距一样，用户得逐行读完才知道在填什么------慢，且烦躁。
3. 连续性
眼睛喜欢顺着平滑的路径走下去。
怎么用：
- 布局要有自然的视线引导，别让用户的眼球跳跃
- 多步骤流程用线条或箭头标出方向
- 仪表盘里用折线图展示趋势------连续线条让变化一目了然
折线图上的线条断了，用户本能地觉得那里有问题。这是连续性原则在帮你传递信息，不需要任何文字。
4. 闭合性
大脑会自动补全不完整的形状。
怎么用：
- 图标不需要画出所有细节，留一点空间让用户的大脑去完成
- 加载动画用未闭合的圆环，比"Loading..."文字优雅得多
- Logo 设计中，负空间和局部轮廓比完整图形更有记忆点
WWF 的熊猫 Logo 就几块黑白形状的拼接，细节几乎没有。但你的大脑在看到那些黑色斑块的瞬间，已经把剩下部分填好了。
5. 图形/背景
场景会自动被拆成"主体"和"背景"两层。
怎么用：
- 主要内容和背景要有足够的对比度
- 模态弹窗用阴影或遮罩让它从页面中浮出来
- 登录页面的表单卡片用白色底加微阴影，跟灰色背景划清界限------用户的注意力自然落在表单上
6. 共同命运
一起动的东西，是一组的。
怎么用：
- 动画里同步移动的元素被视为相关联
- 轮播图里一起滑的卡片属于同一批
- 下拉菜单里一起出现的选项，用户知道它们是一类
邮件应用里，勾选多封邮件时它们同时高亮，然后你可以批量操作。这个同步反馈让你的选择和操作之间建立了关联。
7. 对称性
对称的布局给人稳定感。
怎么用：
- 企业官网的 Hero 区域，左边文案右边产品图，平衡又专业
- 登录/注册表单居中对称，降低视觉压力
- 不对称也可以，但要有意为之------不小心做出来的不对称，用户能感觉到
对称不等于无聊。这是一种快速建立信任的方式。
8. 共同区域
在一个框里的东西，都是相关的。
怎么用：
- 卡片式设计是共同区域最直接的应用------标题、内容、操作按钮封在一张卡里
- 后台仪表盘用不同背景色块区分功能模块
- 项目管理工具里，每个任务卡用统一的白底和边框
9. 平行性
平行的比不平行的看起来更相关。
怎么用：
- 数据表格里列对齐是底线
- KPI 卡片用一样的尺寸平行排列，用户可以快速横向扫描
- 网格系统的作用本质上就是制造平行关系
金融仪表盘里，多个核心指标卡片采用同一尺寸和间距平行排列。对比三个数字，用户一眼扫完。如果卡片大小不一、角度各异，对比就变成了阅读任务。
10. 焦点
总有一个元素先抓住用户的注意力。
怎么用：
- 主要行动按钮用大小和颜色突出，别让它跟次要按钮长一样
- 落地页主标题用大字号和强对比色
- 别在一个页面塞多个焦点------如果你有五个"最重要的按钮"，那就等于没有重要的按钮
11. 元素连接性
被线连起来的元素，有逻辑关系。
怎么用：
- 流程图里用连接线标步骤关系
- 购物结算的进度条------购物车→配送→支付→确认------让用户知道自己在哪
- 时间轴用连接线串起事件，比列表更符合大脑的叙事本能
12. 过去经验
你之前见过的模式，会影响你现在怎么看一个新东西。
怎么用：
- 购物车图标用户已经认识了，别创新------新图形可能很酷，但大多数用户需要停下来想"这是什么"
- 放大镜代表搜索、信封代表消息------这些是用户的肌肉记忆
- 目标用户的文化背景不一样，图标的选择也要不一样
三条综合应用策略
策略一：信息层次化
把接近性、相似性和焦点结合起来用。接近性分组相关内容，相似性区分功能类型，焦点突出关键行动。三者叠加的时候，界面层次一下子就清楚了。
策略二：视觉动线
连续性和闭合性配合使用。设计 Z 型或 F 型阅读路径。不完整的视觉元素反而更能引发用户往下探索的冲动。
策略三：认知负荷管理
共同区域和图形/背景是减负工具。把复杂信息装进卡片，用留白替代分割线。界面里东西太多的时候，用户的第一反应不是"内容丰富"，而是"好累"。
几个常见坑
坑一：相似性过头了
所有按钮长一样，用户不知道哪个是最重要的操作。颜色分级、大小差异------做出来用户不一定会察觉，但默认会用对。
坑二：间距没有逻辑
分散的布局让人不知道什么是相关的。建立一套间距系统：组内间距小，组间间距大。不需要解释，大脑自动分类。
坑三：中间插入干扰
用户顺着流程走，突然跳出一个完全不相关的东西。打断心流等于丢掉用户。多步骤流程别中途塞广告。
写在最后
格式塔原则诞生超过一百年了，但它比以往任何时候都更活跃。
2025-2026 年的研究趋势很明确：格式塔正在从一套设计直觉变成可测量的科学方法。神经科学实验、眼动追踪验证、方差分析------都在给这个百年理论装上新的"测量仪器"。2026 年 3 月的新研究甚至证明，格式塔一致性布局直接提升设计师的识别速度和准确率。
数字产品越来越复杂，用户注意力越来越短。格式塔的价值不是在增加，而是在被重新发现------只是这次，我们不再仅仅依靠"感觉好用"来判断，而是可以用数据说话。
掌握它，做出好用的界面就不是玄学。