gestalt-ui-organisation

Gestalt UI 组织原则

UI 的组织方式应让视觉结构传达元素之间的关系——哪些命令、控件和元素属于同一组——而无需用户阅读标签或文档。

UI 布局的核心 Gestalt 原则

1. 接近性

彼此靠近的元素会被视为一组。

• 将相关控件（例如 Bold / Italic / Underline）紧挨着放置，尽量缩小它们之间的间距
• 用更大的留白分隔不相关的组
• 不要把线条或边框作为主要的分组手段——仅靠接近性就应能传达关系

示例： 工具栏中将 [Cut] [Copy] [Paste] 紧密分组，并在它们与 [Undo] [Redo] 之间留出更大的间距，即可传达两个不同的命令组，无需任何视觉分隔线。

优先使用留白，而非分隔线

默认使用留白，而非分隔线进行分组。大多数分隔线能实现的效果，间距做得更好——分隔线会增加杂乱感和“被框住”的感觉，却没有带来更多信息。移除大部分分隔线，让接近性来划分组别。

注意：线条几乎不占空间，移除后会让各组靠得太近。移除分隔线通常意味着要增加间距——合理规划留白（偶尔也可使用淡色背景或标题），而不是只删除线条，让布局变得拥挤。

距离越远，越需要分隔

紧密排列的元素会自然分开；距离较远的元素则需要辅助。行距较短的紧凑型表格即使没有任何线条也很易读，因为每一行都紧挨着与之相关的内容。相同的表格如果占满整个宽度，或行高较大，就需要行线或斑马纹，否则视线横跨表格时容易迷失位置。

因此，问题不在于“要不要线条”，而在于元素之间相距多远。选择能弥合间隔的最轻量手段，优先级如下：间距、淡色填充或条纹、细线、边框区域。按尺寸分别设置：宽表格可以保留行线，而侧边栏中的紧凑版本则可以去掉行线。

让起因和结果保持接近

接近性也适用于时间：点击所产生的内容应出现在点击位置附近。若左侧菜单打开的内容从最右侧开始显示，用户每次选择都要让视线横跨整个屏幕，并重新定位。

• 将内容对齐到窗格左边缘，而不是居中。内容应从菜单结束的位置开始。
• 将页面标题和主要操作放在窗格左上角，与选中的菜单行对齐。这样，用户点击后只需短距离移动视线即可看到落点。
• 在宽屏上优先采用三个窄列（菜单、列表、详情），而非一个窄菜单加一个宽内容区。每一步只需将视线移到相邻列，而不必横跨整个屏幕。
• 高亮选中的行，并让内容从左侧轻微滑入，以引导视线。
• 在每个视图中都采用相同的方式。如果一个屏幕在点击位置附近显示响应结果，另一个却在远处显示，用户就无法学到可复用的规律。

2. 相似性

外观相似的元素会被视为相关。

• 在同一功能组中使用一致的颜色、形状、尺寸和图标
• 通过视觉对比（形状、填充、尺寸）区分不同组，而不只是依靠位置
• 主要操作和次要操作的视觉样式应有所区别

示例： 删除类操作（Delete、Remove）使用与创建类操作（Save、Add）不同的颜色，以表明它们属于不同的意图组。

3. 共同区域

被共同区域包围的元素会被视为一个组。

• 使用卡片、面板或背景填充来包围逻辑相关的内容
• 避免将无关元素放入同一个容器
• 嵌套区域应体现嵌套的逻辑层级

区域不需要边框——但没有边框就需要留白。 包围效果可以来自边框／填充，也可以仅靠留白。卡片没有边框或背景时，充足的内部边距以及与相邻卡片之间明确的间隔，才能让它看起来像一个区域；没有边框发挥作用，就必须留足空隙，否则分开的卡片会混成一片。没有边框没问题——但没有边框又拥挤就不行。

示例： 将表单分区放在带边框的卡片中，可以表明每张卡片内的字段构成一个逻辑单元。

4. 连通性

由线条或视觉链接连接的元素会被视为彼此相关。

• 仅在确实存在关联时使用连接符、线条或流程箭头
• 在导航树或基于节点的编辑器中，可见连接应与数据关系完全一致

5. 图形／背景

用户会区分前景中的可交互元素与背景上下文。

• 交互控件与背景之间应有足够的对比度
• 禁用状态或上下文信息应在视觉上弱化（降低对比度、减小字重）
• 模态框和叠加层必须与下方内容层清晰区分

6. 连续性

视线会沿着平滑的路径和线条移动。

• 将相关控件沿一致的轴线对齐（左边缘、基线或中心线）
• 避免破坏逻辑分组内部的对齐
• 与网格对齐的布局可通过共用轴线的连续性强化分组

审查清单

审查 UI 布局是否符合格式塔原则时：

• 新用户能否在不阅读标签的情况下识别哪些控件属于同一组？
• 是否主要通过邻近性传递分组信号（而非只依赖边框／线条）？
• 视觉上相似的元素是否具有相同的功能用途？
• 无关的分组之间是否以有意义的留白隔开？
• 点击后出现的结果是否靠近点击位置，并且在每个视图中的位置都一致？
• 是否已移除不必要的分隔线并改用留白（同时增加间距作为补偿）？
• 视觉层级是否与交互层级一致（主要 > 次要 > 第三级）？
• 破坏性或不可逆操作是否与建设性操作在视觉上有所区别？
• 所有交互元素的图形／背景对比度是否足够？

常见反模式

反模式	问题	修正方法
所有按钮无论功能如何，尺寸和颜色都相同	违背相似性原则——暗示所有操作都同等重要	通过视觉差异区分主要、次要和破坏性操作
相关控件分散在屏幕上相距甚远的区域	违背邻近性原则——用户无法感知它们之间的关系	将相关控件放在一起
菜单位于左侧，内容却从很远的右侧开始	每次选择时，视线都要横跨整个屏幕	将内容锚定在左侧，标题与选中行对齐；宽屏上增加一列中间栏
过度使用分隔线来分组元素	依赖装饰，而非空间逻辑	改用留白和邻近性
所有元素之间的留白都相同	没有分组信号——所有内容看起来都像一张平铺的列表	采用 8pt／4pt 间距尺度：组内紧凑，组间宽松
同一工具栏中混用不同风格的图标	相似性被破坏——暗示它们属于不同的功能类别	每个工具栏使用一套风格和字重一致的图标