一套间距 | 设计界面 | 做产品

一套间距

页面上所有的间距只从一组固定数值里取。定好之后，间距就不再是每次要做的决定。

你会遇到的现象

• 页面说不上哪里不对，就是有点乱

• 两个模块的内边距差 2px，看着别扭但找不到原因

• 让 AI 改一处间距，它顺手把别处也改了，值还都不一样

随手定的间距会产生一堆相近但不相等的值：11、13、14、15。这些差别小到看不出是故意的，大到能被感觉到，结果就是「有点乱」但说不清哪里乱。

用固定的一组值之后，间距的差别变成了有意义的信号：8 表示紧密相关，24 表示这是两个不同的组。这就是亲密法则在数值上的落地。

怎么定这组数

值用在哪典型场景 4元素内部图标和它的文字之间、标签的内边距 8紧密相关的两项标题和它的正文、表单标签和输入框 16同一组内的条目列表项之间、卡片的内边距 24组与组之间两个区块之间、卡片之间 40 / 64大区块和页面边距页面顶部留白、章节之间

基数取 4 或 8 都行，关键是全站只有一套。取 4 的倍数更灵活，取 8 的倍数更整齐；移动端因为屏幕小，通常用 4 起步。

五到六个值就够用。多了等于没定，因为总能找到一个「差不多合适」的；少了会不够用，被迫破例。

同样五个元素，间距取值不同，读出来的关系就不同

随手定的

↕ 13

↕ 11

↕ 15

↕ 14

差别小到看不出是故意的，大到能被感觉到 结果就是「有点乱」，但说不清哪里乱

一套固定值

↕ 8

↕ 8

↕ 24

↕ 8

8 表示紧密相关，24 表示这是两个不同的组 间距的差别变成了有意义的信号

相邻两级至少差 1.5 倍：8 和 24 一眼能看出来，8 和 12 就模糊了。竖向间距比横向更要紧，人是纵向扫页面的。

这就是亲密法则在数值上的落地：间距不只是好看，它在表达从属关系。五到六个值就够用——多了等于没定，因为总能找到一个「差不多合适」的。

怎么用

• **间距差要能表达关系。**相邻两级之间至少差 1.5 倍，8 和 24 的差别一眼能看出来，8 和 12 就模糊了。

• **竖向间距比横向更重要。**人是纵向扫页面的，纵向的节奏乱了最容易被感知。

• **写成变量，不要写死。**定义成 CSS 变量或设计令牌，改一次全站生效。

• **破例要有理由。**确实需要一个不在表里的值时，先想想是不是层级关系没理清。

给 AI 的话

复制 CLAUDE.md · 间距规范

## 间距

全站间距只能取这组值，不允许出现其他数字：
4 / 8 / 16 / 24 / 40 / 64（单位 px）

用法：
- 4　元素内部，比如图标和文字之间
- 8　紧密相关的两项，比如标题和它的正文
- 16　同组条目之间、卡片内边距
- 24　组与组之间、卡片之间
- 40 / 64　大区块之间、页面上下边距

要求：
- 定义成 CSS 变量（--sp-1 到 --sp-6），
 组件里引用变量，不要写具体数值。
- 如果某处你认为需要表里没有的值，先告诉我原因，
 不要自己取一个中间值。
- 已有代码里出现表外的间距值时，主动指出来。

最后一条挺有用。让 AI 顺手做体检，比你自己逐个查快得多。

接着看

视觉层级从哪来 间距是亲密法则的具体数值。相关的靠近、不相关的拉开，靠的就是这组数。

建一份最小设计系统 间距是四组变量之一。颜色、间距、字号、圆角，定完就能管住整个项目。

留白优先 有了这组数，删掉分割线之后才知道该用多大的空间去替代它。