[!info] related notes

UI设计中的间距管理

一句话定义

UI 间距管理是一种系统化的设计方法论，通过基准网格（4px/8px）、语义化间距变量和分层间距规则，使界面元素之间的留白具有一致性、可预测性和可维护性。

核心机制 / 工作原理

8 点网格系统 (8-Point Grid)

现代 UI 设计的底层逻辑是 8 点网格系统，以及它的衍生 4 点基数。

所有 Padding、Gap、Margin、Icon 尺寸都必须是 4 或 8 的倍数。

间距 Scale

标准间距阶梯：4 / 8 / 12 / 16 / 24 / 32 / 48 / 64

Token	值	典型用途
space-1	4px	图标与文字间距、极紧凑元素
space-2	8px	紧凑行间距、表单项内部
space-3	12px	按钮内边距（上下）
space-4	16px	卡片内边距、同级元素间距
space-6	24px	区块内小节间距
space-8	32px	区块之间间距
space-12	48px	大段落间距
space-16	64px	页面级 Section 间距

语义化间距变量

不直接写 padding: 16px，而是通过语义变量引用：

--space-section: 48px;
--space-card-gap: 16px;
--space-inline: 8px;

这样改一处就能全局生效，也方便做响应式断点缩放。

亲密性原则 (Gestalt Proximity)

• 极近 (4px / 8px)：绑定关系紧密的元素，如图标与文字、标题与副标题
• 中等 (16px / 24px)：同级独立元素排列，如卡片间距、卡片内部 Padding
• 疏远 (32px / 48px / 64px)：划分不同业务大区块（Section）

非对称内边距

按钮和卡片通常左右 Padding 比上下大（如上下 12、左右 16），因为人类视线横向扫视，横向更宽敞带来更稳固的视觉重心和”呼吸感”。

各大设计体系的间距规范

Apple HIG

• 使用 8pt 基础网格，强调内容与边界的留白
• 列表行高、控件间距均以 4pt 为最小增量

Material Design

• 4dp 基准网格，间距 token 为 4/8/16/24/32/40/48
• 布局列间距和 gutter 随断点变化（手机 16dp，桌面 24dp）

Vercel Design

• 简约风格，偏好 4px 增量
• 常用间距：8/12/16/24/32

实现方案

Tailwind CSS

Tailwind 的 spacing scale 直接映射 4px 基准：

<div class="p-4 gap-6 mt-8">  <!-- 16px / 24px / 32px -->

可自定义 tailwind.config.js 的 theme.extend.spacing 来扩展。

CSS 自定义属性方案

:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
}

最小例子

.card-list {
  display: flex;
  gap: var(--space-4);       /* 卡片间距 16px */
  padding: var(--space-6);   /* 容器内边距 24px */
}

.card {
  padding: var(--space-4);   /* 卡片内边距 16px */
  border-radius: 8px;        /* 圆角也遵循 4 的倍数 */
}

边界与常见误解

• 不要用奇数间距：15px、21px 这种值破坏网格一致性，在高 DPI 屏幕上还可能导致亚像素渲染问题
• 间距不等于留白：间距是系统化的数值规则，留白是视觉效果；间距管理是实现良好留白的手段
• 不要全局统一间距：不同层级（行内、区块、页面）应使用不同尺度的间距
• 阴影性能陷阱：大量 box-shadow 的 Blur 算法昂贵，Hover 动画不要 transition box-shadow，应使用伪元素 + opacity 变换（GPU 硬件加速，零性能损耗）
• 响应式间距：间距 scale 应随断点缩放，移动端间距通常比桌面端小一级

Related notes

• CSS MOC