格式塔：大脑自动把零散元素读成『整体』——邻近与相似
格式塔（Gestalt）心理学（Wertheimer 1923 等，20 世纪上半叶）发现：人看画面不是逐个看像素，而是潜意识地把各部分组织成有结构的整体——『整体的感知不等于部分之和』。
这套『分组原理』直接决定界面里『什么看起来是一组、什么看起来分开』。最初一组包括邻近（proximity）、相似（similarity）、闭合（closure）；20 世纪末又补了共同区域（common region）、连续（continuation）等。
给设计师的意义：你不用写字说明『这几个是一组』——用格式塔线索摆位置、定样式，用户自然就读成一组。
邻近（proximity）：靠得近 = 一组。这是最有效、最该先用的分组线索。 彼此靠近的元素被感知为属于同一组，离得远的被当作不同角色。
它有多强？常常一个『调间距』就胜过加分隔线或加框。
实战：把相关的表单标签与输入框靠紧、把每组之间留更大空隙，用户立刻读出结构；反例是标签离上一个输入框比离自己的更近——用户就会填错行。先用间距分组，不够再上其它手段。
反过来，相似也是一种隐性承诺：两个东西长得一样，用户就预期它们行为一样。让一个『看起来像按钮但其实不可点』的元素出现在界面里，就违背了相似带来的预期（呼应可用性的一致性原则）。
一个框就是一组、大脑会补全：共同区域与闭合、连续
共同区域（common region）：处在同一个边界 / 容器内的元素，被感知为一组、并被认为共享某种功能或属性（Palmer 1992 提出）。
卡片（card）就是这个原理的产物——一个带背景或描边的容器，把图片 + 标题 + 按钮圈成『一个东西』。
关键点：共同区域很强，强到能压过邻近——哪怕两个元素离得近，只要被画进不同的框里，用户就当它们是两组。要强分组时，给个容器。
两条与『引导视线』有关的格式塔律：
- 闭合（closure）：大脑会自动补全缺口，把不完整的形状看成完整的整体——很多极简 logo 靠这个，用几段弧线就让你看出一只熊猫、一个圆。闭合让你能用更少的笔画、用留白暗示边界，而不必处处描实线。
- 连续（continuation）：眼睛会自然顺着线条与曲线延伸下去。设计应用：用对齐形成的隐形『线』来引导阅读顺序、把一列元素串成一条视觉动线。
视觉层级：先看哪、后看哪——尺度、对比与留白
视觉层级（visual hierarchy）= 引导视线在页面上按重要性顺序依次注意各元素，它回答『用户第一眼看哪』。靠这些维度建立：大小 / 尺度、明度与颜色、对比、间距、位置。
做法：先确定页面上『最重要的那一个』元素，给它最大的视觉权重，其余按重要性递减。 NN/g 指出：层级清晰的页面通常只用 2–3 种字号就能表达主次。
反面教材：别让所有东西都喊『看我』——当一切都被强调，等于什么都没被强调。
两件建立层级的主力工具：
- 尺度（scale）：用相对大小表达重要性与等级，大的先被注意。一个版面别超过约 3 种尺寸，否则层级反而糊。
- 对比（contrast）：把视觉上不同的元素并置（颜色 / 大小 / 字重差），以表明它们不同、并吸引注意。
重要警告：别为了『弱化』把正文文字对比调得太低——这会损害可读性与无障碍（对比不足是最常见的可访问性问题之一，见 WCAG 2.1 的文本对比度要求 1.4.3）。要弱化，用留白、缩小、降权重，而不是把字调到看不清。
把版面塞满反而摧毁层级——所有东西挤在一起、争抢注意力，用户就不知道先看哪、扫读更慢。留白不是『没设计』，恰恰是用『空』来表达结构与重点。
自测 · 学完检查一下
想真正动手做题、记进度、攒连胜？到互动课里练。
格式塔（Gestalt）心理学（Wertheimer 1923 等）的核心发现是什么？
答案：人看画面不是逐个看像素，而是潜意识地把各部分组织成有结构的整体——『整体的感知不等于部分之和』
格式塔心理学（Wertheimer 1923 等，20 世纪上半叶）发现：人潜意识地把画面各部分组织成有结构的整体，『整体的感知不等于部分之和』。这套分组原理直接决定界面里『什么看起来是一组、什么看起来分开』——最初一组包括邻近、相似、闭合，20 世纪末又补了共同区域、连续等。它不是 21 世纪的发明，更不是『整体=部分之和』。（出处：NN/g 'The Gestalt Principles for User Interface Design'；Wertheimer M. 1923；Koffka K. 1935）
一张注册表单里，『手机号』的标签离上一个输入框比离自己的输入框更近，用户频频填错行。按邻近原理，最该先做的修复是什么？
答案：调间距——把每个标签与自己的输入框靠紧，组与组之间留更大空隙
邻近（proximity）是最有效、最该先用的分组手段：彼此靠近的元素被感知为一组，常常一个『调间距』就胜过加分隔线或加框。实战正解就是把相关的标签与输入框靠紧、组间留更大空隙，用户立刻读出结构；题干里的反例（标签离上一个输入框更近）正是 NN/g 点名的填错行场景。格式塔的意义也在于不用写字说明——所以加说明文字、全部标红都不是对症的第一步。（出处：NN/g 'Proximity Principle in Visual Design'；Wertheimer 1923 格式塔分组律）
判断：按相似原理，『长得像 = 功能像』是一种对用户的隐性承诺——把一个『看起来像按钮但其实不可点』的元素放进界面，就违背了这种预期。
答案：正确
正确。相似（similarity）原理：共享颜色 / 形状 / 大小 / 样式的元素被看成同类、有相似功能，所以同一类操作要长得一致（所有主按钮同色同形、所有链接同一种蓝 + 下划线）。反过来它就是隐性承诺：两个东西长得一样，用户就预期它们行为一样——『看起来像按钮但不可点』违背了相似带来的预期，也呼应可用性的一致性原则。（出处：NN/g 'Similarity: Gestalt Principle for UI Design'；Wertheimer 1923）
列表页里两张卡片挨得很近：A 卡片底部的按钮，离 B 卡片的标题反而比离 A 自己的标题更近。用户会把这个按钮归给哪张卡片？为什么？
答案：归给 A——共同区域（同一容器 / 边界）很强，强到能压过邻近，元素被画进哪个框里就属于哪一组
共同区域（common region，Palmer 1992 提出）：处在同一边界 / 容器内的元素被感知为一组、并被认为共享功能或属性——卡片正是这个原理的产物。关键在于共同区域强到能压过邻近：哪怕两个元素离得近，只要被画进不同的框里，用户就当它们是两组。所以按钮画在 A 卡片的容器内就归 A。但也别滥用边框——太多框会割裂界面、增加视觉噪音，留白往往比描边更轻盈。（出处：NN/g 'The Principle of Common Region'；Palmer S.E. 1992）
很多极简 logo 只用几段弧线就能让你看出一只熊猫；界面里一列对齐的元素会被读成一条视觉动线。这两个现象分别对应哪组格式塔原理？
答案：闭合（大脑自动补全缺口，把不完整形状看成整体）与连续（眼睛顺着线条与曲线延伸下去）
这是两条与『引导视线』有关的格式塔律：① 闭合（closure）——大脑自动补全缺口，把不完整的形状看成完整整体，极简 logo 用几段弧线就让你看出一只熊猫 / 一个圆，它让你能用更少笔画、用留白暗示边界；② 连续（continuation）——眼睛自然顺着线条与曲线延伸，设计上用对齐形成的隐形『线』引导阅读顺序、把一列元素串成视觉动线。两者是不同的原理，不能混为一谈。（出处：NN/g 'Continuation / Closure: Gestalt Principles for UI Design'；Wertheimer 1923 格式塔分组律）
UX 里的视觉层级（visual hierarchy）指什么？建立它的第一步是什么？
答案：引导视线在页面上按重要性顺序依次注意各元素——先确定页面上『最重要的那一个』，给它最大的视觉权重，其余按重要性递减
视觉层级 = 『引导视线在页面上按重要性顺序依次注意各元素』，是回答『用户第一眼看哪』的核心工具，靠大小 / 尺度、明度与颜色、对比、间距、位置等维度建立。做法是先定『最重要的那一个』元素给最大视觉权重，其余按重要性递减；层级清晰的页面通常只用 2–3 种字号就能表达主次。『每一个都强调』恰是反面教材——当一切都被强调，等于什么都没被强调。（出处：NN/g '5 Principles of Visual Design in UX'；NN/g Visual Hierarchy / Scanning Patterns）
判断：版面里用的字号 / 尺寸种类越多，视觉层级就越丰富越清晰，所以一个页面用七八种尺寸更好。
答案：错误
错误。尺度（scale）是用相对大小表达重要性与等级，大的先被注意——但 NN/g 建议一个版面别超过约 3 种尺寸，否则层级反而糊；层级清晰的页面通常只用 2–3 种字号就能表达主次。尺寸种类堆得越多，主次关系越混乱，不是越清晰。（出处：NN/g '5 Principles of Visual Design in UX'）
判断：要弱化一段次要的说明文字，最好的办法是把它的文字对比度调得非常低（比如浅灰字贴浅色底），越淡越显得次要。
答案：错误
错误。这是 NN/g 点名的重要警告：别为了『弱化』把正文文字对比调得太低——这会损害可读性与无障碍，对比不足是最常见的可访问性问题之一（见 W3C WCAG 2.1 文本对比度要求 1.4.3）。要弱化次要内容，正确手段是留白、缩小、降字重，而不是把字调到看不清。（出处：NN/g '5 Principles of Visual Design in UX'；W3C WCAG 2.1, 1.4.3 contrast minimum）
判断：留白就是浪费版面，好设计应该把每个像素都填满内容才『值』。
答案：错误
错误。这是常见误区。留白（负空间）是主动的设计材料：它通过邻近原理分组（组内紧、组间松）、给重点元素『呼吸空间』从而抬升其视觉权重、降低认知负荷、提升可读性——NN/g 把留白与平衡、分组直接挂钩。把版面塞满反而摧毁层级：所有东西挤在一起争抢注意力，用户不知道先看哪、扫读更慢。留白不是『没设计』，恰恰是用『空』来表达结构与重点。（出处：NN/g '5 Principles of Visual Design in UX'；NN/g 'Proximity Principle in Visual Design'）
运营要求把落地页上的主 CTA、促销横幅、弹窗提示和每个小标题全部加大、加粗、标红——『让用户什么都能看到』。按视觉层级原理，这样做的结果是什么？
答案：当一切都被强调，等于什么都没被强调——层级被摧毁，用户反而不知道先看哪
视觉层级的要义是『先看哪、后看哪』：先确定页面上最重要的那一个元素给最大视觉权重，其余按重要性递减，别让所有东西都喊『看我』——当一切都被强调，等于什么都没被强调。把版面处处加大加粗标红，等于把所有元素推到同一权重上互相争抢注意力，层级糊掉、用户扫读更慢。层级是引导视线的功能性工具，不是审美偏好，用户也不会按 DOM 顺序或运营意愿自动排队阅读。（出处：NN/g '5 Principles of Visual Design in UX'；NN/g Visual Hierarchy / Scanning Patterns）