外观
间距体系：8pt 标尺
干净的界面不是运气，是不靠感觉定间距。新手界面要么"挤在一起"、要么"散得没规矩"，因为每个间距都是随手选的一个数——这里 13px、那里 17px、下面又 22px。专业做法是定一把尺子：所有间距都取 8 的倍数，8 / 16 / 24 / 32……整个界面才有统一的节奏。
问题：间距凭感觉，界面就乱
新手界面为什么看一眼就觉得别扭，却说不出哪里不对？因为每个间距都是随手选的数——这里和那里 13px，下面又 17px、22px。元素之间忽远忽近，没有规律，看起来就乱。间距不是"想留多少留多少"，它是结构的一部分：决定内容字段怎么分组、可不可读、好不好点。专业设计不靠手感，尺寸有依据、可复现、可维护。
间距凭感觉是核心误区：专业设计的尺寸有据可依、可复现、可维护，不是手感。
一把尺子：间距 = 8 × n
专业做法是定一把 8pt 标尺（8-point grid）：所有间距都从尺子上取，而不是各自独立选数。公式只有一条：
间距 = 8 × n n 是 1、2、3、4…尺子上的常用刻度，就是这条公式的 n 取不同值：
| n | 间距 | 用途 |
|---|---|---|
| 1 | 8 | 元素内部小间隔（图标与文字之间） |
| 2 | 16 | 列表项内、卡片内容与边 |
| 3 | 24 | 区块之间、卡片之间 |
| 4 | 32 | 大分组之间、屏幕边缘留白 |
间距 = 8 × n，n 取 1、2、3、4：8 / 16 / 24 / 32。
把刻度命名成 Token
打开微信首页（消息列表），每条消息项的间距都落在同一把尺子上：
- 每条消息内部的上下间距约 16px（
--space-md） - 消息文字与屏幕左右边缘的边距约 16px（
--space-md） - 两条消息之间的分隔靠 1px 细线 + 上下留白，整体节奏一致
因为整页都取自同一把 8pt 尺子，列表才看起来均匀、整齐、节奏统一。
只记住"8 的倍数"还不够，还要把尺子上的刻度命名成 Token，而不是散落一堆数值。这样你记住的是名字，改一处全局生效。这个体系就是后面样式系统与 Design Tokens 的地基。
css
--space-xs: 4px; /* 极小 */
--space-sm: 8px; /* 小 */
--space-md: 16px; /* 中 */
--space-lg: 24px; /* 大 */
--space-xl: 32px; /* 特大 */注意 4 也进来了——4 是 8 的因子，属于同一把尺子的细分刻度（什么时候用 4，见节拍「边界：什么时候用 4 / 2」）。
--space-sm:8px · --space-md:16px · --space-lg:24px · --space-xl:32px，4 是 8 的因子同属一尺。
为什么是 8 的倍数
为什么偏偏是 8，而不是 10 或 12？三个原因：
- 像素密度对齐：绝大多数屏幕物理像素是 2x / 3x（iPhone 是 3x，安卓普遍 2x）。8 的倍数在 2x/3x 屏上永远能落成整数像素（8×2=16、8×3=24），避免半像素模糊。
- 数学上够整数：8、16、24、32 都是整数，且能被 4、2 再细分，自动布局计算时不会出现小数进位。
- 自动布局友好：组件用 8 的倍数布局，缩放、拉伸、成列时间距始终能保持对齐，不会错位。
8 的倍数在 2x/3x 屏上恒为整数像素：8×2=16、8×3=24，避免半像素模糊。
边界：什么时候用 4 / 2
"8pt 是唯一"是个误区。8 不是最小单位，它是基准；4 和 2 是 8 的因子，属于同一把尺子的细分刻度：
| 刻度 | 用在哪 |
|---|---|
| 2 | 图标内的小空隙、1px 边距的补充 |
| 4 | 文字与文字之间的贴身间距、小图标边距 |
| 8 | 标准基准：多数控件外的间距 |
| 16+ | 大留白、区块分组 |
规则一句话：绝大多数用 8 的倍数；需要更细的微调时，用 4 或 2，而不用 13、17 这种 8 除不尽的杂数。 关键不是"只用 8"，而是"所有间距都落在一把统一的尺子上、能整除"。
8 是基准，4 / 2 是它的因子：关键在"统一能整除"，不是"只用 8"。
深度
实例：微信首页（375 宽）间距完整拆解。
以 375 宽（iPhone 标准）的微信首页为例，把整页间距对号到 8pt 体系：
- 屏幕左右边距：约 16px（
--space-md）——文字不贴边，有留白 - 顶部导航栏高度：约 44px，内部标题与边 16px
- 消息列表项：每个列表项上下内边距约 12px（列表头像高约 44，文字垂直居中），两条消息之间靠 1px 分隔线 + 上下留白形成节奏
- 头像与消息文字之间：约 12px（8+4，贴合 8 体系）水平间距
- 时间/未读数字与文字：头像区与右侧信息之间用 16px 分组
说明：微信 iOS 版实际细节可能随版本微调，这里给出的是以 8pt 体系推断的合理值，用于学习"如何拆解"，而非精确工匠数据。你可以在 Penpot 里导入微信截图，用标尺工具核对。
再想一层：间距要跟信息层级匹配。 "间距越大越好看"是误区——留白过大会松散、难以扫读。间距是给内容分组、让层级说话的，不是越大越好（见 09 对齐与亲密性）。
误区
| 误解 | 正解 |
|---|---|
| 间距凭感觉调 | 专业设计用固定标尺，尺寸有依据、可复现、可维护 |
| 8pt 是唯一真理 | 4 和 2 是 8 的因子，属同一标尺；关键是"统一能整除"，不是"只用 8" |
| 间距越大越好 | 留白过大会松散难读，要与信息层级匹配 |
| 每个间距自己定一个数 | 13/17/22 这种杂数破坏统一感，应落回尺子刻度 |
| 间距只是视觉细节，不影响可用性 | 间距决定可读性、可点性、信息分组，是结构的一部分 |
练习
即时题 一个新手把微信首页每条消息之间的间距设成 12px，头像和文字之间设成 9px，边距设成 15px。他用 8pt 标尺的思路，这些值应该改成多少才合理？
答案
12px 接近 8 体系（8+4，可接受或微调）；9px 和 15px 都是 8 除不尽的杂数：9px 建议改为 8px（`--space-sm`），15px 建议改为 16px（`--space-md`）。关键是落回尺子刻度、能整除。模块题 用 8pt 标尺设计一张"联系人名片卡片"：里面有一行头像、两行文字（姓名 + 签名）、一个右侧按钮。列出你选用的间距值（8×n）和各自用途，并说明为什么这个布局会显得"整齐且有节奏"。
参考思路
头像与文字之间 12px（8+4，或用 16px）；文字两行之间 4px（贴身小间距）；文字与卡片边缘 16px（`--space-md`）；卡片与卡片之间 24px（`--space-lg`）；右按钮与内容 8px。全部落回同一把尺子、能整除，元素之间等距或有规律地递增，所以整体节奏统一。迷你案例：重建微信首页（消息列表）的间距。 在 Penpot 新建一个 375×812 的画板，用尺子重建首页列表：
- 画一个消息列表项：头像（44×44）+ 两行文字（昵称 / 最新消息）。
- 头像与文字之间留 12px（8+4，贴合 8 体系）。
- 每项上下内边距约 12px。
- 屏幕左右边距 16px。
- 连续复制 5 个列表项，让它们用同一套间距。
- 对比：把其中一项改成 13px 间距，看它是不是"长歪了"。
做完后你会理解：统一标尺让整个列表看起来是一个整体。
素材
- 👉 打开交互演示：间距标尺 — 拖滑块 n=1..4，间距按 8×n 实时更新，对比随机杂数有多乱
- Material Design 3 Spacing：Material 官方文档的 8dp 网格与间距系统。
- Apple HIG：Spacing 与 Layout 章节（苹果官方，阐述留白与间距）。
- 8pt Grid：搜索 "8pt grid UI"（EightShapes 网格规范文章）或 "8 point grid explained"（YouTube 视频）。
- 后续衔接：本知识点（间距 Token）→ 07 布局网格、09 对齐与亲密性、13 Auto Layout 会复用这套间距，形成完整结构体系。