group-related-elements

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Group Related Elements

Skill: 分组关联元素

Purpose

目的

Use proximity and spacing to visually group related elements together and separate unrelated groups.

利用邻近性与间距将相关元素进行视觉分组，并区分无关的元素组。

Type

类型

Generative + Evaluative

生成式 + 评估式

Input

输入

Element inventory
Relationship mapping (what belongs together)
Current spacing between elements

元素清单
关联映射（哪些元素属于同一组）
元素当前的间距设置

Output

输出

Spacing recommendations to show relationships
Pass/Fail assessment of current grouping

用于展示关联关系的间距建议
对当前分组情况的通过/不通过评估

Transformation Performed

执行的转换

Adjusts spacing so elements within a group are closer together than elements in different groups, using the Gestalt principle of proximity.

运用Gestalt邻近性原则，调整间距使同一组内的元素比不同组的元素更靠近。

Decision Criteria

判断标准

PASS (Good Grouping)

通过（良好分组）

Related elements have small gap (8-16px)
Unrelated groups have larger gap (24-48px)
Form labels close to their inputs (4-8px)
Sections clearly separated
Hierarchy of space: tightest within component, looser between components, loosest between sections

关联元素间距小（8-16px）
无关组间距更大（24-48px）
表单标签与其输入框间距近（4-8px）
区块清晰分隔
间距层级：组件内部最紧凑，组件之间较宽松，区块之间最宽松

FAIL (Poor Grouping)

不通过（糟糕分组）

Uniform spacing everywhere
Labels far from inputs
Related elements visually disconnected
Unrelated elements too close
Using borders instead of space to group

所有地方间距统一
标签与输入框距离过远
关联元素视觉上脱节
无关元素距离过近
使用边框而非间距进行分组

The Proximity Principle

邻近性原则

Elements that are close together are perceived as more related than elements that are farther apart.

距离较近的元素会被感知为比距离较远的元素更相关。

Spacing Hierarchy

间距层级

Within component (label + input): 4-8px
Between related components: 16-24px
Between sections: 32-64px
Between major page areas: 64-96px

Within component (label + input): 4-8px
Between related components: 16-24px
Between sections: 32-64px
Between major page areas: 64-96px

Common Grouping Patterns

常见分组模式

Pattern	Structure	Spacing
Form field	Label → Input	4-8px between, 16-24px after
Card	Header → Content → Footer	16-24px internal padding
List items	Item 1 / Item 2 / Item 3	8-12px between items
Button group	Primary + Secondary	8-12px between
Sections	Section A (gap) Section B	48-64px between

模式	结构	间距
表单字段	标签 → 输入框	之间4-8px，之后16-24px
卡片	标题 → 内容 → 页脚	内部内边距16-24px
列表项	项1 / 项2 / 项3	项之间8-12px
按钮组	主按钮 + 次要按钮	之间8-12px
区块	区块A（间距）区块B	之间48-64px

Common Failure Modes

常见错误模式

Failure	Description	Fix
The Great Divide	Equal spacing everywhere	Tighten within groups, expand between groups
Label Drift	Labels 20px+ from inputs	Reduce to 4-8px
Section Smush	Sections barely separated	Add 48px+ between major sections
Border Dependency	Boxes around everything	Use space instead of borders
Card Clump	Cards touching each other	Add 16-24px gap between cards

错误	描述	修复方案
统一间距误区	所有地方间距相等	缩小组内间距，扩大组间间距
标签偏移	标签与输入框间距20px以上	缩小至4-8px
区块拥挤	区块几乎没有分隔	在主要区块之间添加48px以上的间距
依赖边框	所有元素都加边框	用间距替代边框
卡片扎堆	卡片相互紧贴	在卡片之间添加16-24px的间距

Prerequisites

前置条件

Spacing system defined
Content grouped logically

已定义间距系统
内容已按逻辑分组

Dependencies

依赖项

```
apply-consistent-spacing
```
(uses spacing scale)

```
apply-consistent-spacing
```
（使用间距刻度）

Refactoring UI References

《重构UI》参考内容

"Group related information"
"Use whitespace to create relationships"
"Proximity beats similarity"

"分组相关信息"
"利用留白建立关联"
"邻近性优于相似性"

Example Assessment

评估示例

Input: Form with: Title (24px margin), Label (8px margin), Input, Label (8px), Input, Section header (16px margin), Label (8px), Input

Evaluation: PARTIAL

Label to input spacing not specified
Section header too close to previous section
Consistent 8px but not creating hierarchy

Recommendation:

Label to input: 4px (tight coupling)
After input group: 24px
Section header margin-top: 48px (clear break)
Within section: 16px between fields

输入： 表单包含：标题（24px外边距）、标签（8px外边距）、输入框、标签（8px）、输入框、区块标题（16px外边距）、标签（8px）、输入框

评估结果： 部分通过

未指定标签到输入框的间距
区块标题与前一个区块距离过近
统一使用8px间距但未构建层级

建议：

标签到输入框：4px（紧密关联）
输入组之后：24px
区块标题上边距：48px（清晰分隔）
区块内部：字段之间16px