用格式塔原则组织 UI 布局与控件分组…

在设计或评审组件布局、导航、工具栏、表单、仪表盘等需要靠视觉分组传达关系的界面时使用。

适用场景

解决思路

1. 邻近性：把相关控件（如 Bold / Italic / Underline）紧挨着放，间距最小；用更大的留白分隔不相关的组。
2. 邻近性：不要用线条或边框作为主要分组手段，仅靠邻近就应传达关系。
3. 邻近性：优先用留白而非分隔线来分组；大多数分隔线做的事留白能做得更好，它们只增加噪音和「被框住」的感觉，删掉大部分，让邻近性承担分组。
4. 邻近性：注意删除分隔线通常意味着要增加间距——因为线条几乎不占空间，删掉后组会挨得太近；要预留留白（偶尔用微妙的背景或标题）而不是只删线让布局变挤。
5. 相似性：在同一功能组内使用一致的颜色、形状、尺寸和图标风格。
6. 相似性：通过视觉对比（形状、填充、尺寸）区分不同组，而不只是靠位置。
7. 相似性：主要操作和次要操作在视觉上要明显区分。
8. 相似性：破坏性操作（Delete、Remove）用与建设性操作（Save、Add）不同的颜色，以标示不同的意图组。
9. 共同区域：用卡片、面板或背景填充把逻辑相关的内容围起来。
10. 共同区域：避免把不相关的元素包进同一个容器。
11. 共同区域：嵌套区域应反映嵌套的逻辑层级。
12. 共同区域：区域不一定需要边框，但无边框的区域需要留白——围合可以来自边框/填充，也可以仅来自留白；当卡片没有边框或背景时，靠充足的内边距和与邻居的清晰间隔让它读起来像一个区域，否则会糊成一片；无边框可以，但拥挤且无边框不行。
13. 连通性：仅当存在真实关系时才使用连接线、连线或流程箭头。
14. 连通性：在导航树或节点编辑器中，可见连接必须与数据关系完全一致。
15. 图底关系：交互控件相对背景要有足够对比度。
16. 图底关系：禁用或上下文信息应在视觉上后退（更低对比度、更小字重）。
17. 图底关系：模态框和浮层必须与底层内容层清晰分离。
18. 连续性：把相关控件沿一致轴线对齐（左边缘、基线或中心线）。
19. 连续性：避免在逻辑组内打断对齐。
20. 连续性：网格对齐的布局通过共享轴线连续性强化分组。
21. 评审时逐项检查：新用户能否不读标签就识别出哪些控件属于一组？
22. 评审时逐项检查：是否以邻近性作为主要分组信号（而非仅靠边框/线条）？
23. 评审时逐项检查：视觉相似的元素是否共享同一功能目的？
24. 评审时逐项检查：不相关的组之间是否用有意义的留白分隔？
25. 评审时逐项检查：是否已删除不必要的分隔线改用留白（并补充间距作为补偿）？
26. 评审时逐项检查：视觉层级是否匹配交互层级（主要 > 次要 > 三级）？
27. 评审时逐项检查：破坏性或不可逆操作是否在视觉上区别于建设性操作？
28. 评审时逐项检查：所有交互元素的图底对比度是否足够？
29. 修复反模式「所有按钮无论功能都同样大小和颜色」：违反相似性，暗示所有操作等价——按主要、次要、破坏性在视觉上区分。
30. 修复反模式「相关控件散布在屏幕各处」：违反邻近性，用户无法感知关系——把相关控件放在一起。
31. 修复反模式「过度使用分隔线分组」：依赖装饰而非空间逻辑——改用留白和邻近性。
32. 修复反模式「所有元素间距相同」：没有分组信号，一切读起来像扁平列表——应用 8pt/4pt 间距刻度：组内紧、组间松。
33. 修复反模式「同一工具栏内混用图标风格」：破坏相似性，暗示不同功能族——每个工具栏使用单一一致的图标集和字重。

适用边界 · 注意事项

• 界面本身不需要靠视觉分组传达关系时（如单一独立控件）
• 需要严格遵循既有设计系统或品牌规范、不允许调整间距与视觉区分时