Back to Details

apply-consistent-spacing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Skill: Apply Consistent Spacing

Skill：应用统一间距规范

Purpose

目的

Use a systematic spacing scale to create rhythm, group related elements, and separate distinct sections while starting with generous whitespace and removing as needed.
采用系统化间距尺度来营造视觉韵律，对相关元素进行分组，区分不同区域，同时从预留充足的空白空间开始，按需逐步缩减。

Type

类型

Generative + Evaluative
生成型 + 评估型

Input

输入项

  • UI layout or component structure
  • Content grouping (what belongs together)
  • Desired density (compact vs. airy)
  • Base unit (default: 16px)
  • UI布局或组件结构
  • 内容分组（哪些元素属于同一组）
  • 期望的密度（紧凑 vs 宽松）
  • 基础单位（默认值：16px）

Output

输出项

  • Spacing scale specification
  • Margin/padding values for each element
  • Pass/Fail assessment of existing spacing
  • 间距尺度规范
  • 各元素的外边距/内边距数值
  • 现有间距的通过/不通过评估结果

Transformation Performed

执行的转换操作

Maps spatial relationships to a systematic spacing scale with minimum 25% differences between values, ensuring clear grouping and breathing room.
将空间关系映射到最小差值为25%的系统化间距尺度，确保清晰的元素分组和呼吸空间。

Decision Criteria

判定标准

PASS (Good Spacing)

通过（良好间距）

  • Uses systematic scale with minimum 25% jumps between values (12px → 16px → 24px → 32px)
  • Related elements have smaller gaps (4-16px within groups)
  • Unrelated sections have larger gaps (24-64px between groups)
  • More space around groups than within groups (ambiguous spacing avoided)
  • Consistent internal padding (cards, buttons, inputs)
  • White space creates breathing room (doesn't fill entire screen width)
  • Uses whitespace instead of borders for separation
  • 采用系统化尺度，各数值间最小间隔为25%（如12px → 16px → 24px → 32px）
  • 相关元素间的间距更小（组内间距为4-16px）
  • 不相关区域间的间距更大（组间间距为24-64px）
  • 组外间距大于组内间距（避免模糊的间距关系）
  • 内边距保持一致（卡片、按钮、输入框）
  • 空白空间营造出呼吸感（不填满整个屏幕宽度）
  • 使用空白而非边框进行区域分隔

FAIL (Poor Spacing)

不通过（糟糕间距）

  • Arbitrary values without system (13px, 27px, 41px)
  • Values too similar (<25% difference - can't distinguish)
  • Related elements too far apart (weakens grouping)
  • Unrelated elements too close together (ambiguous relationships)
  • Equal spacing everywhere (within groups = between groups)
  • Content stretched to fill wide canvas unnecessarily
  • Using borders when whitespace would suffice
  • 使用无规律的任意数值（如13px、27px、41px）
  • 数值差异过小（小于25% - 无法区分层级）
  • 相关元素间距过大（削弱分组关联性）
  • 不相关元素间距过近（关系模糊）
  • 所有区域间距均等（组内间距 = 组间间距）
  • 内容不必要地拉伸以填满宽画布
  • 可用空白分隔却使用边框

The Spacing Scale

间距尺度

Systematic Scale (25% minimum jumps)

系统化尺度（最小间隔25%）

Base: 16px (browser default)
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
Why these values:
  • 4px → 8px = 100% jump (small end needs bigger jumps)
  • 8px → 12px = 50% jump
  • 12px → 16px = 33% jump
  • 16px → 24px = 50% jump
  • 24px → 32px = 33% jump
  • 32px → 48px = 50% jump
  • 48px → 64px = 33% jump
  • 64px → 96px = 50% jump
基础值：16px（浏览器默认值）
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
选择这些数值的原因：
  • 4px → 8px = 100%增幅（小数值端需要更大的间隔）
  • 8px → 12px = 50%增幅
  • 12px → 16px = 33%增幅
  • 16px → 24px = 50%增幅
  • 24px → 32px = 33%增幅
  • 32px → 48px = 50%增幅
  • 48px → 64px = 33%增幅
  • 64px → 96px = 50%增幅

Common Usage Patterns

常见使用场景

SpacingUsage
4pxIcon gaps, tight internal padding
8pxSmall component gaps, tight button padding
12pxInput padding, component internal spacing
16pxStandard gap, card padding
24pxSection internal padding, larger gaps
32pxMajor section separation
48-64pxPage section breaks
96pxHero sections, major page divisions
间距使用场景
4px图标间隙、紧凑内边距
8px小组件间隙、紧凑按钮内边距
12px输入框内边距、组件内部间距
16px标准间隙、卡片内边距
24px区域内边距、较大间隙
32px主要区域分隔
48-64px页面区域分段
96pxHero区域、页面主要分区

The Proximity Principle

邻近原则

  • Elements closer together appear related
  • Elements farther apart appear unrelated
  • More space around groups than within groups
  • Use spacing to show relationships without borders
  • 间距较近的元素看起来关联性更强
  • 间距较远的元素看起来关联性更弱
  • 组外间距大于组内间距
  • 使用间距来展示元素关系，而非依赖边框

Key Principles

核心原则

1. Start With Too Much Whitespace

1. 从过多空白开始

Instead of adding space until something looks okay, start with way too much space and remove until it's right.
Why: Elements given minimum breathing room look "not actively bad" but not great. Starting with excess ensures adequate whitespace in the final design.
不要逐步添加空间直到看起来合适，而是从预留大量空白开始，逐步缩减至合适状态。
**原因：**仅给元素预留最小呼吸空间的设计看起来"不算差"但不够出色。从过多空白开始能确保最终设计拥有充足的空白空间。

2. Avoid Ambiguous Spacing

2. 避免模糊间距

Ensure there is more space around the entire group than within the group.
Example - Form Labels:
  • ❌ Label margin-bottom: 12px, Input margin-bottom: 12px (equal = ambiguous)
  • ✅ Label margin-bottom: 4px, Input margin-bottom: 24px (within < around = clear)
确保整个组的外部间距大于组内间距。
示例 - 表单标签：
  • ❌ 标签底部外边距：12px，输入框底部外边距：12px（间距均等 = 关系模糊）
  • ✅ 标签底部外边距：4px，输入框底部外边距：24px（组内 < 组外 = 关系清晰）

3. Don't Fill The Whole Screen

3. 不要填满整个屏幕

Just because you have 1200-1400px of canvas doesn't mean content should stretch to fill it.
  • Give elements exactly the space they need
  • If you have extra room, leave it as whitespace
  • Paragraph max-width: 600px is fine even if nav is 1200px
  • Shrink the canvas if designing small interfaces
即使画布宽度有1200-1400px，也不意味着内容要拉伸填满整个宽度。
  • 给元素分配恰好所需的空间
  • 如有额外空间，保留为空白
  • 段落最大宽度设为600px即可，即使导航栏宽度为1200px
  • 设计小型界面时缩小画布尺寸

4. Whitespace > Borders

4. 空白优先于边框

Instead of using borders to separate elements:
  • Add extra spacing between groups
  • Use different background colors
  • Use subtle box shadows (less distracting than borders)
不要用边框分隔元素：
  • 增加组间间距
  • 使用不同背景色
  • 使用柔和的阴影（比边框更不分散注意力）

Visual/UX Signals Used

视觉/UX信号

  1. Proximity: Closer elements = related
  2. Ambiguity gap: More space around groups than within
  3. Breathing room: Generous space = cleaner, more polished
  4. Canvas utilization: Don't stretch to fill; use what you need
  1. 邻近性：间距越近的元素 = 关联性越强
  2. 模糊间隙：组外间距大于组内间距
  3. 呼吸空间：充足的空白 = 更简洁、更精致的设计
  4. 画布利用率：不要拉伸填满画布；仅使用所需空间

Common Failure Modes

常见错误模式

FailureDescriptionFix
Arbitrary Values15px here, 17px thereUse systematic scale exclusively
Weak GroupingEqual spacing within and between groupsMake between-group spacing significantly larger
Ambiguous SpacingLabel and input have same marginReduce within-group, increase between-groups
Border-DependenceUsing borders instead of spaceIncrease gap, remove border
Canvas FillingContent stretched to 1200px unnecessarilyUse only the space needed; let whitespace fill rest
Minimal Breathing RoomAdding just enough space to not look badStart with excess, remove until right
Inconsistent PaddingSome buttons 8px, others 12pxPick one scale value, apply everywhere
错误类型描述修复方案
任意数值这里用15px，那里用17px完全采用系统化尺度
分组关联性弱组内和组间间距均等大幅增加组间间距
模糊间距标签和输入框外边距相同减小组内间距，增大组间间距
依赖边框使用边框而非空白分隔增大间隙，移除边框
填满画布内容不必要地拉伸至1200px仅使用所需空间；剩余空间留作空白
呼吸空间不足仅添加刚好不会显得糟糕的空间从过多空白开始，逐步缩减至合适状态
内边距不一致部分按钮内边距为8px，其他为12px选择一个尺度数值，统一应用到所有场景

Prerequisites

前置条件

  • Content grouped by relationship
  • Visual hierarchy established
  • 内容已按关联性分组
  • 已建立视觉层级

Dependencies

依赖项

  • establish-visual-hierarchy
    (spacing reinforces hierarchy)
  • group-related-elements
    (proximity shows relationships)
  • establish-visual-hierarchy
    （间距强化层级关系）
  • group-related-elements
    （邻近性展示元素关系）

Refactoring UI References

《Refactoring UI》参考要点

  • "Start with too much white space"
  • "Establish a spacing and sizing system" (25% minimum jumps)
  • "Avoid ambiguous spacing"
  • "Don't fill the whole screen"
  • "Use fewer borders"
  • "White space should be removed, not added"
  • "从过多空白开始"
  • "建立间距与尺寸系统"（最小间隔25%）
  • "避免模糊间距"
  • "不要填满整个屏幕"
  • "减少边框使用"
  • "空白应逐步缩减，而非逐步添加"

Example Assessment

示例评估

Input: Form with: Title (margin-bottom: 16px), Label (margin-bottom: 12px), Input (margin-bottom: 12px), next Label (margin-top: 12px)
Evaluation: FAIL - Ambiguous spacing
  • Label to Input: 12px
  • Input to next Label: 12px
  • No clear grouping - user can't tell which label belongs to which input
Recommendation:
  • Title margin-bottom: 24px (separate section)
  • Label margin-bottom: 4px (tight coupling to input)
  • Input margin-bottom: 24px (clear separation to next group)
  • Result: Within-group (4px) << Between-groups (24px) = Clear relationship
Before:
Label A
[Input A]
Label B    <- Ambiguous: belongs to A or B?
[Input B]
After:
Label A
[Input A]

Label B    <- Clearly belongs to B
[Input B]
输入： 表单包含：标题（底部外边距：16px）、标签（底部外边距：12px）、输入框（底部外边距：12px）、下一个标签（顶部外边距：12px）
评估结果： 不通过 - 间距模糊
  • 标签到输入框：12px
  • 输入框到下一个标签：12px
  • 分组不清晰 - 用户无法分辨哪个标签对应哪个输入框
建议方案：
  • 标题底部外边距：24px（分隔区域）
  • 标签底部外边距：4px（与输入框紧密关联）
  • 输入框底部外边距：24px（与下一组清晰分隔）
  • 结果：组内间距（4px）<< 组间间距（24px）= 关系清晰
调整前：
Label A
[Input A]
Label B    <- 模糊：属于A还是B？
[Input B]
调整后：
Label A
[Input A]

Label B    <- 明确属于B
[Input B]