用途
Gestalt UI Organisation 用于在界面布局阶段组织控件，使视觉结构本身就能传达元素之间的关系——哪些命令、控件和元素属于同一组——而不需要用户阅读标签或文档。它适用于组件布局、导航、工具栏、表单或仪表盘的编排。
核心原则
1. 接近性（Proximity）
靠近的元素会被感知为一组。
- 将相关控件（如加粗/斜体/下划线）放在一起，间距最小。
- 用更大的留白分隔不相关的组。
- 不要用线条或边框作为主要分组机制——仅靠接近性就应传达关系。
- 示例：工具栏中 [剪切] [复制] [粘贴] 紧密成组，之后留出较大间隔再放 [撤销] [重做]，无需任何视觉分隔线即可传达两个不同的命令组。
优先用留白而非分隔线
默认使用留白而非分隔线进行分组。大多数分隔线做的是间距能做得更好的事——它们增加噪音和“被框住”的感觉，却不增加信息。移除大部分分隔线，让接近性承担分组职责。
注意：线条几乎不占空间，移除它会让组间距离过近。移除分隔线通常意味着增加间距——要为留白做预算（偶尔可用微妙的背景或标题），而不是只删掉线、让布局变得拥挤。
因果保持靠近
接近性也支配时间：点击产生的结果应出现在点击附近。当左侧菜单打开的内容从最右侧开始，每次选择眼睛都要横跨整个屏幕，用户每次都要重新定位。
- 将内容锚定到窗格左边缘，而非居中。内容从菜单结束处开始。
- 将页面标题和主要操作放在窗格左上角，与选中的菜单行齐平。这样第一落点距离点击只有一小段。
- 在宽屏上优先使用三窄列（菜单、列表、详情），而非一个窄菜单加一个宽区域。每一步眼睛只移动一列，绝不横跨全宽。
- 高亮选中行，并让内容从左侧以小幅动效进入，让运动引导视线。
- 在每个视图中都这样做。如果一个屏幕在点击旁边回应，另一个屏幕在远处回应，用户学不到可复用的规律。
2. 相似性（Similarity）
看起来相似的元素会被感知为相关。
- 在功能组内使用一致的颜色、形状、大小和图标风格。
- 通过视觉对比（形状、填充、大小）区分组——而不仅仅是位置。
- 主要操作和次要操作应在视觉上彼此区分。
- 示例：破坏性操作（删除、移除）使用与建设性操作（保存、添加）不同的颜色，以标示不同的意图组。
3. 共同区域（Common Region）
被包围在共享区域内的元素会被感知为一组。
- 使用卡片、面板或背景填充来包围逻辑相关的内容。
- 避免将不相关的元素包在同一个容器中。
- 嵌套区域应反映嵌套的逻辑层级。
- 区域不需要边框——但无边框的区域需要留白。包围感可以来自边框/填充，也可以仅来自留白。当卡片没有边框或背景时，充足的内边距和与邻居的清晰间隔才能让它读作一个区域；没有边框承担这个职责时，压缩留白会让相邻卡片塌缩成一团模糊。无边框可以——拥挤且无边框不行。
- 示例：表单分区放在带边框的卡片中，表明每张卡片内的字段构成一个逻辑单元。
4. 连接性（Connectedness）
由线条或视觉链接连接的元素会被感知为相关。
- 仅当存在真实关系时才使用连接线、线条或流程箭头。
- 在导航树或节点编辑器中，可见连接应精确匹配数据关系。
5. 图形/背景（Figure / Ground）
用户会区分前景交互元素与背景上下文。
- 交互控件应与其背景有足够对比度。
- 禁用或上下文信息应在视觉上后退（更低对比度、更小字重）。
- 模态框和浮层必须与底层内容层清晰分离。
6. 连续性（Continuity）
眼睛会跟随平滑的路径和线条。
- 将相关控件沿一致轴线对齐（左边缘、基线或中心线）。
- 避免在逻辑组内破坏对齐。
- 网格对齐的布局通过共享轴线连续性强化分组。
审查清单
审查 UI 布局是否符合格式塔原则时：
- 新用户能否在不阅读标签的情况下识别哪些控件属于一组？
- 是否将接近性作为主要分组信号（而不仅是边框/线条）？
- 视觉相似的元素是否共享功能目的？
- 不相关的组是否用有意义的留白分隔？
- 点击的结果是否出现在点击附近，且在每个视图中位置相同？
- 是否移除了不必要的分隔线，改用留白（并增加间距补偿）？
- 视觉层级是否匹配交互层级（主要 > 次要 > 三级）？
- 破坏性或不可逆操作是否在视觉上与建设性操作区分？
- 所有交互元素的图形/背景对比度是否足够？
常见反模式
| 反模式 | 问题 | 修复 |
|---|---|---|
| 所有按钮无论功能都同样大小和颜色 | 违反相似性——暗示所有操作等价 | 在视觉上区分主要、次要、破坏性 |
| 相关控件分散在屏幕远处 | 违反接近性——用户无法感知关系 | 将相关控件放在一起 |
| 菜单在左，内容从很右侧开始 | 每次选择眼睛都要横跨屏幕 | 内容锚定左侧，标题与选中行齐平；宽屏加中间列 |
| 过度使用分隔线分组元素 | 依赖装饰而非空间逻辑 | 改用留白和接近性 |
| 所有元素间距相同 | 没有分组信号——一切读作扁平列表 | 应用 8pt/4pt 间距刻度：组内紧、组间松 |
| 同一工具栏内混用图标风格 | 相似性被破坏——暗示不同功能族 | 每个工具栏使用单一一致的图标集和字重 |
适用场景
- 组件布局与编排
- 导航设计
- 工具栏组织
- 表单分区
- 仪表盘布局
限制
资料未提供该技能的具体安装方式、平台支持、收费模式或效果保证等信息。