gestalt-ui-organisation
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseGestalt UI Organisation
Gestalt UI布局组织
UI should be organised so that the visual structure communicates relationships — which commands, controls, and elements belong together — without requiring users to read labels or documentation.
UI的组织方式应确保视觉结构能传递元素间的关系——即哪些命令、控件和元素是相关联的——无需用户阅读标签或文档。
Core Gestalt Principles for UI Layout
UI布局核心格式塔原则
1. Proximity
1. 接近原则（Proximity）
Elements that are close together are perceived as a group.
- Place related controls (e.g. Bold / Italic / Underline) close together with minimal gap between them
- Separate unrelated groups with larger whitespace
- Do not use lines or borders as the primary grouping mechanism — proximity alone should convey the relationship
Example: A toolbar with grouped tightly, then a wider gap before , communicates two distinct command groups without any visual divider.
[Cut] [Copy] [Paste][Undo] [Redo]位置相近的元素会被感知为一个组。
- 将相关控件（如粗体/斜体/下划线）紧密排列，彼此间留白最小
- 用较大的空白分隔不相关的组
- 不要将线条或边框作为主要的分组机制——仅通过位置接近就能传递元素间的关系
示例： 工具栏中紧密分组，之后留出较大空白再放置，无需任何视觉分隔符就能传达两组不同的命令。
[剪切] [复制] [粘贴][撤销] [重做]Prefer whitespace over separator lines
优先使用空白而非分隔线
Default to whitespace, not divider lines, for grouping. Most separators do work that spacing does better — they add noise and a "boxed-in" feel without adding information. Remove the majority and let proximity carry the grouping.
Caveat: a line takes almost no space, so removing it leaves groups too close. Removing separators usually means adding spacing — budget the whitespace (occasionally a subtle background or heading) rather than just deleting the line and leaving the layout cramped.
分组时默认使用空白而非分隔线。大多数分隔线的作用都可以通过留白更好地实现——它们会增加视觉噪音和“被框住”的感觉，却无法传递更多信息。应移除大部分分隔线，让位置接近来承担分组的作用。
注意：线条几乎不占空间，所以移除线条后各组可能会过于紧凑。移除分隔线通常意味着要增加留白——要预留足够的空白空间（偶尔可以用微妙的背景或标题辅助），而不是仅仅删除线条导致布局拥挤。
2. Similarity
2. 相似原则（Similarity）
Elements that look alike are perceived as related.
- Use consistent colour, shape, size, and iconography within a functional group
- Differentiate groups through visual contrast (shape, fill, size) — not just position
- Primary actions and secondary actions should look visually distinct from each other
Example: Destructive actions (Delete, Remove) use a different colour than constructive actions (Save, Add), signalling different intent groups.
外观相似的元素会被感知为相关联。
- 在功能组内使用一致的颜色、形状、尺寸和图标样式
- 通过视觉对比（形状、填充、尺寸）区分不同组——而不仅仅是位置
- 主要操作和次要操作在视觉上应区分开来
示例： 破坏性操作（删除、移除）使用与建设性操作（保存、添加）不同的颜色，以此传递不同的意图分组。
3. Common Region
3. 共同区域原则（Common Region）
Elements enclosed in a shared region are perceived as a group.
- Use cards, panels, or background fills to enclose logically related content
- Avoid wrapping unrelated elements in the same container
- Nested regions should reflect nested logical hierarchy
A region needs no border — but a borderless one needs air. Enclosure can come from a border/fill or from whitespace alone. When a card has no border or background, generous internal padding and a clear gap to its neighbours are what make it read as one region; without a border doing that job, cut the air and separate cards collapse into one blur. Borderless is fine — cramped-and-borderless is not.
Example: Form sections grouped in bordered cards signal that fields inside each card form a logical unit.
被同一区域包围的元素会被感知为一个组。
- 使用卡片、面板或背景填充来包裹逻辑上相关的内容
- 避免将不相关元素包裹在同一个容器中
- 嵌套区域应反映嵌套的逻辑层级
区域无需边框——但无边框区域需要足够的留白。 包围可以通过边框/填充实现，也可以仅通过留白实现。当卡片没有边框或背景时，充足的内部内边距与相邻元素间的清晰空白是使其被识别为一个独立区域的关键；如果没有边框来承担这个作用，减少留白会导致卡片融合成一片模糊。无边框设计是可行的——但拥挤的无边框设计不可取。
示例： 表单区域用带边框的卡片分组，表明每张卡片内的字段构成一个逻辑单元。
4. Connectedness
4. 连通性原则（Connectedness）
Elements connected by lines or visual links are perceived as related.
- Use connectors, lines, or flow arrows only when a genuine relationship exists
- In navigation trees or node-based editors, visible connections should match data relationships exactly
通过线条或视觉链接连接的元素会被感知为相关联。
- 仅当存在真实关系时才使用连接线、线条或流程箭头
- 在导航树或基于节点的编辑器中，可见的连接应与数据关系完全匹配
5. Figure / Ground
5. 图底原则（Figure / Ground）
Users distinguish foreground interactive elements from background context.
- Interactive controls should have sufficient contrast against their background
- Disabled or contextual information should visually recede (lower contrast, smaller weight)
- Modals and overlays must clearly separate from the underlying content layer
用户会区分前景交互元素与背景上下文。
- 交互控件应与背景有足够的对比度
- 禁用状态或上下文信息应在视觉上弱化（降低对比度、减小字重）
- 模态框和覆盖层必须与底层内容层清晰区分
6. Continuity
6. 连续性原则（Continuity）
The eye follows smooth paths and lines.
- Align related controls along a consistent axis (left edge, baseline, or centre line)
- Avoid breaking alignment within a logical group
- Grid-aligned layouts reinforce groupings through shared axis continuity
视线会沿着平滑的路径和线条移动。
- 沿一致的轴线（左边缘、基线或中心线）对齐相关控件
- 避免在逻辑组内打破对齐
- 网格对齐的布局通过共享轴线的连续性强化分组效果
Review Checklist
评审检查清单
When reviewing a UI layout for Gestalt compliance:
- Can a new user identify which controls belong together without reading labels?
- Is proximity used as the primary grouping signal (not only borders/lines)?
- Do visually similar elements share a functional purpose?
- Are unrelated groups separated by meaningful whitespace?
- Have unnecessary divider lines been removed in favour of whitespace (with spacing added to compensate)?
- Does visual hierarchy match interaction hierarchy (primary > secondary > tertiary)?
- Are destructive or irreversible actions visually distinct from constructive ones?
- Is the figure/ground contrast sufficient for all interactive elements?
在评审UI布局是否符合格式塔原则时：
- 新用户无需阅读标签就能识别出哪些控件是相关联的吗？
- 是否将位置接近作为主要的分组信号（而非仅依赖边框/线条）？
- 视觉相似的元素是否具有相同的功能用途？
- 不相关的组是否通过有意义的空白分隔开？
- 是否移除了不必要的分隔线，改用空白（并补充足够的留白）？
- 视觉层级是否与交互层级匹配（主要 > 次要 > 三级）？
- 破坏性或不可逆操作是否与建设性操作在视觉上区分开来？
- 所有交互元素的图底对比度是否足够？
Common Anti-Patterns
常见反模式
| Anti-pattern | Problem | Fix |
|---|---|---|
| All buttons same size and colour regardless of function | Similarity principle violated — implies all actions are equivalent | Differentiate primary, secondary, destructive visually |
| Related controls spread across distant areas of the screen | Proximity violated — user cannot perceive the relationship | Co-locate related controls |
| Overuse of divider lines to group elements | Relies on decoration rather than spatial logic | Use whitespace and proximity instead |
| Identical whitespace between all elements | No grouping signal — everything reads as a flat list | Apply 8pt/4pt spacing scale: tight within group, loose between groups |
| Mixed icon styles within one toolbar | Similarity broken — implies different functional families | Use a single consistent icon set and weight per toolbar |
| 反模式 | 问题 | 修复方案 |
|---|---|---|
| 所有按钮无论功能如何都使用相同的尺寸和颜色 | 违反相似原则——暗示所有操作都是等价的 | 在视觉上区分主要、次要和破坏性操作 |
| 相关控件分散在屏幕的不同区域 | 违反接近原则——用户无法感知到它们的关联 | 将相关控件放置在一起 |
| 过度使用分隔线来分组元素 | 依赖装饰而非空间逻辑 | 改用空白和位置接近来分组 |
| 所有元素间的空白完全相同 | 没有分组信号——所有内容看起来都是扁平列表 | 使用8pt/4pt间距比例：组内紧凑，组间宽松 |
| 同一工具栏内混合使用不同风格的图标 | 破坏相似原则——暗示不同的功能类别 | 每个工具栏使用单一、一致的图标集和字重 |