设计师必知的格式塔原则

你信任的每一个界面,都建立在格式塔之上。Linear、Stripe、Vercel、Figma、Notion、Apple,没有一个发明了新的感知规则。它们只是服从了人类视觉系统在屏幕出现之前就一直在运行的那些规则。这种服从,正是“自己会说话的界面”与“用户必须费力解码的界面”之间的差别。

格式塔原则是大脑在意识介入之前,把原始像素组装成意义的方式。懂它们的设计师,交付的界面让人感觉平静。不懂的设计师,交付的界面让人感觉杂乱,哪怕视觉密度完全相同。像素是一样的,变的是分组。

这篇就是经典合集。八条原则,每条一个规则,每条都有真实产品案例,外加一套可在任何界面上线前运行的审查清单。收藏它。

八条原则,每条一条定律

格式塔的意思是“整体大于部分之和”。一堆点变成一张脸。一排卡片变成一个列表。大脑先做分组,再处理内容。如果你的设计无视这一点,用户就得手动替大脑干活,而他们不会干。

每个在岗设计师都需要掌握的八条原则。记住规则,剩下的都是应用。

1. 邻近。 靠得近的东西被视为一组。

2. 相似。 看起来像的东西被视为一组。

3. 连续。 视线会沿着布局中最平滑的路径移动。

4. 闭合。 大脑会把不完整的形状补成完整的。

5. 图形与背景。 视线会把布局分成前景和背景。

6. 共同命运。 一起运动的东西被视为一组。

7. 对称与秩序。 对称、规整的布局在内容到来之前就让人觉得已经完成。

8. 焦点。 唯一一处打破模式的地方,会赢得整个屏幕的注意力。

你尊敬的每个产品的每个界面,都会同时用到其中几条。大多数会用全八条。这些原则相互组合,而不是相互竞争。

邻近:间距就是分组

间距传达的意义比边框、分隔线或标签更多。 两个元素靠得近,视线就认为它们相关。第三个元素离得远一倍,视线就读出一次断开。不需要标签。留白已经把活干完了。

Linear 的侧边栏是目前最干净的邻近原则示范。Inbox、My Issues 和 Active 紧凑地归为一组。Projects、Views 和 Teams 是另一组。Settings 独自待在底部。组与组之间没有分隔线,只有间距,而分类一眼就能读懂。

Stripe Dashboard 在指标行上也是如此。收入、付款和客户聚成一个模块,余额和打款聚成另一个。同一块画布,不同的节奏,三个一目了然的区域。

反面模式是整个屏幕使用统一间距。每个元素与其他元素的距离都一样,用户只能读完每个标签才能找到结构。解决办法从来不是加更多边框。

解决办法是拉开组与组之间的间隙,收紧组内的间隙。留白不是设计的缺席,留白就是设计。更深入的内容见留白词条。

应用规则: 组内,间距紧。组间,间距宽。除非你想让两个元素合为一体,否则不要让相邻的两处间距取同一个值。

相似:形状一致,意义一致

重复的视觉处理意味着重复的功能。 两个元素看起来一样,用户就假定它们作用一样。如果不一样,那就是设计在撒谎。

Notion 建立在相似之上。同类型的每个块渲染方式完全一致。标题看起来像标题,提示框看起来像提示框,代码块看起来像代码块。用户五分钟就能学会这套视觉语汇,之后扫一遍上千个块的文档也不用逐字阅读。

Figma 的左侧面板遵循同样的逻辑。Frame 看起来像 Frame,组件看起来像组件,实例继承主组件的外观,但带着一圈紫色边框,表示“这是一份副本”。形状在教用户规则。

Apple 的 iOS 主屏幕网格是消费级规模的版本。每个 App 图标大小相同,圆角相同,网格间距相同。视线把“App”读作一个单一类别,只有在意图出现时才切换到挑选模式。打破相似,就打破了阅读。只要一个图标跑出网格,整个网格作为一个整体就会崩掉。

Cursor 的 diff 视图在更小的尺度上运用同样的逻辑。新增行是同一种绿色,删除行是同一种红色,未改动的行是同一种中性色。三个类别,三种处理,不需要标签。

反面模式是“让这个按钮看起来不一样,吸引一下注意”。这会在其他所有地方破坏相似性契约。用户得重新读每个按钮,才能搞清哪些规则还成立。如果你想突出某个操作,请用下面的焦点原则,而不是违反相似性。

连续:视线沿线而行

视线更喜欢平滑的路径,而不是被打断的路径。 一旦它开始沿着某条对齐线、曲线或轴线移动,就想一直走下去。尊重这一点的设计师,交付的布局一口气就能扫完。不尊重的,交付的布局处处卡顿。

Vercel 的部署视图是生产环境中的连续性。流水线以垂直的阶段线呈现,每个阶段都落在同一条轴上,缩进一致。视线从顶部的构建 commit 一路扫到底部的部署,即使日志很长也是一气呵成。关于这个界面为什么拥有这么长的注视时间,见加载状态就是产品。Cursor 的 diff 边栏在更小的轴上做了同样的事,变更标记紧贴一条干净的垂直线,视线逐行追踪。

反面模式是为了视觉多样性而打破对齐。错开缩进,变换行高,在中途塞一个居中的元素,视线就会丢失路径。用户读的不再是布局,而是在破解谜题。

解决办法是选定一条轴,让内容坐在上面,即使单个元素各不相同。Stripe 的发票列表、Linear 的 issue 列表、Anthropic 的文档导航。全都扁平、对齐,一眼扫完就能读懂。

应用规则: 拿不准时,就对齐。强制对齐比艺术化的不对称读起来更快。

闭合:大脑补完形状

不完整的形状会被自动补全。 缺了 40 度的圆仍然读作圆。带有刻意缺口的 logo 仍然读作那个品牌。大脑会填补空缺,因为它宁愿看到完整,也不愿看到中断。

Anthropic 的标志图形是教科书级例子。两个倾斜的形状从未闭合,视线却把它们缝合成一个统一的标志。Loops 在它的循环 logo 上运用了闭合,那道弯暗示了一个完整的回路,尽管形状是开放的。

Figma 在选中状态上使用闭合。四个角上的蓝色手柄暗示了一个完整的边界矩形,即使只画了四个角。用户看到的是一个 frame,而不是四个漂浮的点。

闭合也是 hero 区块无需边框就能成立的原因。一个仅由间距和标题界定的 hero 区块,依然读作一个独立单元,因为视线会闭合那个隐含的矩形。同样的逻辑也支配着极简卡片、引语和幽灵式 CTA 按钮。只要内容暗示了边界,边界就不必画出来。要做到这一点,取决于尊重对比度,让隐含的边界依然可读。

反面模式是把每个容器都画得过头。厚重的边框、粗大的分隔线、每个面板都有完整描边。屏幕最终杂乱不堪,每个形状都在争夺闭合的注意力。削减描边。信任视线。

图形与背景:没有边框的纵深

视线会把每个场景分成前景和背景。 注意力就是这样运作的。你推到后面的变成语境,你提到前面的变成主体。

Apple 的模态框模式是经典示范。背景模糊并变暗,模态框带着柔和的阴影浮到前面,用户的注意力在读文案之前就已经移动了。Stripe 的浮层遵循同样的模式,稍微没那么夸张,但逻辑完全一致。支付按钮的微光浮在一张微微退后的卡片之上。Resend 的确认对话框用了几乎相同的图形与背景手法,整个应用退后一层,对话框走上前来。

反面模式是没有纵深变化的扁平浮层。模态框与其余 UI 处于同一高度坐在画布上,用户感觉不到焦点的转换。解决办法是叠加真正表示前景的感知线索。

阴影、模糊、变暗、缩放。至少选两个。关于仪表盘在每个面板都处于同一高度时如何丢失图形与背景,见反仪表盘。

应用规则: 如果每个元素都在同一平面上,就没有前景。选出重要的,把它提上来。

共同命运:运动就是分组

一起运动的东西被读作同一个东西。 拖动三个元素,看它们同步移动,视线就把它们读作一个整体,即使形状各不相同。运动一停,整体感就破了。

Figma 的多选就是共同命运在起作用。抓住三个图层移动,它们作为一个协调的整体一起移动。用户在编辑一个成组对象,尽管 Figma 从未要求你建组。

Linear 的拖拽排序在 issue 列表上用了同样的招数。拿起一个 issue,周围的行协调地移开,新位置一目了然。Notion 的块拖拽完全一样,周围的块同步动画分开,腾出空位。

共同命运的另一端是移除。让三个元素以同样的速度和方向动画移出屏幕,用户会读作“整组被删除”。让它们以不同速度移出,用户会怀疑是不是有些失败了。引导流程借用了这一点:幻灯片以单一的运动向量前进,用户把整个旅程读作一条路径。关于把运动当作结构的更深入探讨,见没有引导的引导。

反面模式是对逻辑上成组的元素使用异步运动。三张属于同一选择的卡片,却以不同时机、不同缓动、略有差异的向量做动画。尽管数据说它们是一体的,用户却把它们读作分开的。锁定运动。组在哪里行动,组就在哪里被读出。

对称与秩序:平衡带来已完成感

对称的布局在加载完之前就让人觉得已经完成。 大脑把规整读作专业。不对称的布局可以很有力,但它让用户付出一笔感知税,必须靠别的手段挣回来。

Stripe 的定价页是教科书级例子。三列,卡片结构一致,垂直节奏完美对齐,中间的方案略微抬高以标示推荐。用户在读价格之前,就先读到了“这是一支真正的产品团队”。

Apple 的产品网格在营销站点上也是如此。Vercel 的仪表盘面板运行在严格的网格上,即使面板重排也保持不变。这种构图传递出稳定感。关于这类定价结构的更深入探讨,见定价页难题以及更宏观的2026 营销站点技术栈拆解。

反面模式是“让它看起来有创意”。宽度不规则的卡片、对不齐的列、毫无功能理由而高度各异的行。用户读到的是混乱。

不对称设计有它的位置,但那是一种刻意的构图选择,需要强烈的焦点和清晰的层级。它不是 SaaS 仪表盘的默认选项。每个打破网格的仪表盘,都要用扫描时间来买单。

应用规则: 从对称开始,有意识地打破它。永远不要因为屏幕看起来无聊而打破它。

焦点:一处打破,赢下整屏

视线会把全部注意力给予那个打破模式的唯一元素。 这就是为什么在一屏暗淡的灰色次级操作中,一个珊瑚色主按钮能赢。也是为什么一个屏幕上有五个“主要”操作,就等于一个主要操作都没有。

Linear 的命令面板是焦点的教学现场。UI 的其余部分变暗退后,面板作为单一的高对比表面浮到前面,恰好只有一个默认操作被高亮。用户不用想就知道该看哪里。

Stripe 的支付按钮是电商版本。按钮用品牌色、轻柔的动效和略大的尺寸来打破模式。Anthropic 的落地页锚定在一个珊瑚色 CTA 上,背景是其余中性的页面,视线在标题读完之前就落在了它上面。Cursor 在 AI 建议上的“Apply”按钮也遵循同样的逻辑。

反面模式是一个屏幕上有三个“主要”按钮,外加一片权重相同的导航项。每个焦点都抵消了其他焦点。用户的视线停滞,因为没有任何东西打破模式的力度足以获胜。

解决办法是残酷降级。选一个主要操作,把其余的全部降为次级或三级处理。尽管你去掉了分量,屏幕却显得更有力,因为幸存下来的那一个现在真正抓住了视线。更深入的内容见设计中的视觉层级,以及为什么 2026 年每个 SaaS 看起来都一样对整个行业焦点通胀的拆解。

格式塔原则 vs UI 模式

最快的速查表。每条原则一行,一个规则,一个现代案例,一个产品。这一行终身受用,存起来。

如果你只想内化一个可保存的素材,就内化这个。每个在岗设计师都应该能在第一次设计评审前背出这一行。

如何用格式塔审查一个界面

界面上线前,先用这八个问题过一遍。只要有一个答案是“否”,这个界面就在漏掉感知,哪怕表面上看起来没问题。

1. 邻近。 相关的元素是否比不相关的元素靠得更近?如果整个屏幕的间距都一样,就没有发生任何邻近分组。

2. 相似。 功能相同的元素是否共享视觉处理?如果两个按钮做同一件事却长得不一样,相似性就被破坏了。

3. 连续。 视线是否有一条从上到下或从左到右的清晰路径?如果布局无缘无故来回折返,连续性就被破坏了。

4. 闭合。 容器是否用了仍然可读的最轻处理来绘制?如果每个面板都有粗边框,闭合就被画过头了。

5. 图形与背景。 屏幕是否有清晰的前景?如果每个元素都处于同一高度,注意力就无处可落。

6. 共同命运。 成组元素上的动画是否同步移动?如果多选的元素以不同时机漂移,这个组就会被读成坏掉了。

7. 对称与秩序。 布局一眼看上去是否有已完成感?如果视线得费力才能找到结构,就是网格在和用户作对。

8. 焦点。 是否恰好只有一个主要操作?如果有两个或更多,焦点就被抵消了。

在任何产品的任何屏幕、任何状态下都可以运行这套检查。通过的屏幕让人感觉平静。不通过的屏幕让人感觉杂乱,哪怕视觉密度完全相同。把这套审查与设置页难题中的纪律结合起来,你会很快揪出最严重的问题。关于以少胜多的理念,包括你不需要设计系统中的案例,与这套审查天然契合。

原则相互组合,从不相互竞争

一个出色的屏幕会同时运行全部八条。邻近负责组织,相似负责确认,连续负责引导,闭合负责清理,图形与背景负责排优先级,共同命运负责动效,对称负责稳定,焦点负责决断。没有一条能单独起作用。只要你尊重顺序,它们也不会互相打架。

Linear 的应用就是一堂现成的大师课。侧边栏按邻近分组,issue 按相似重复,列表按连续滚动,卡片用轻边框闭合,模态框按图形与背景浮起,拖拽用共同命运,网格靠对称稳住,cmd-K 面板凭焦点取胜。整个产品就是压缩进一个标签页里的格式塔服从。

Stripe 是不同尺度上的同一堂课。Vercel、Figma、Notion、Apple、Anthropic、Cursor、Loops、Resend。没有一个发明了新的感知定律。它们只是比竞争对手更用力地服从了现有的定律。

这就是设计质量的全部护城河。没有秘密。只有对感知经典的熟练,以及在每个屏幕、每个流程、每个状态上都去应用它的耐心。关于渐进式披露的更深入背景,在具体流程内部扮演着同样的角色。

FAQ

设计师需要掌握的八条格式塔原则是什么?

邻近、相似、连续、闭合、图形与背景、共同命运、对称与秩序,以及焦点。每一条都是人类视觉系统自动运行的感知定律。尊重它们的设计师,交付的界面会自己说话。不尊重的,交付的界面让人感觉杂乱。

哪条格式塔原则在 UI 设计中最重要?

邻近,而且遥遥领先。间距传递的分组信号比任何其他处理都多,包括边框、颜色和标签。如果你只有时间在一个屏幕上做对一条原则,那就先修间距。

格式塔与视觉层级有什么不同?

视觉层级是策略。格式塔是它底下的感知物理学。层级说“用户应该先看这里”。格式塔解释为什么他们的视线真的会去那里。不服从格式塔就无法建立层级,而只服从格式塔却没有层级规划,会产出平静但没有方向的屏幕。

格式塔原则与 AI 原生界面相关吗?

更相关,而不是更不相关。AI 原生界面比传统应用交付更多动态内容、更多流式输出和更多不确定的布局。格式塔是让这些动态界面保持可读的规则集。当内容实时变化时,共同命运、相似和焦点承担了大部分重量。

如何向设计团队教授格式塔?

一起审查一个屏幕。选一个真实界面,对它运行全部八个问题,看着团队看见以前叫不出名字的失败。格式塔不是抽象地学会的。它是通过在真实产品中发现违规,直到视线开始自动捕捉它们而学会的。

CTA

想要一个每个屏幕都能在用户读文案之前就自己说话的产品吗?Brainy 设计的界面,感知被植入骨架,而不是最后才涂上去。我们在每个流程、每个状态、每个细节上都服从经典。雇用 Brainy,交付 Linear、Stripe 和 Anthropic 默认就具备的那种清晰。