网格与间距
看不见的骨架。所有间距落在 8pt 网格上,所有布局对齐同一套列。留白是结构,不是浪费。本规范把网格、间距、断点做到可计算、可验证。
8PT BASELINE10-STEP LADDER3 断点68ch MEASUREmm 换算
№ 01 — Philosophy
看不见,但一切都对齐它
Whitespace is structure, not waste. 留白即结构。
— VS-03 Grid & Spacing
网格是 WCN 视觉系统里唯一"看不见的子系统"——读者感觉不到它,但每一处对齐、每一段间距都源于它。规则只有一句:所有尺寸都是 8 的倍数(半步 4px 例外)。这让任意两个元素都能精确对齐,消灭"差几像素"的脏边。
№ 02 — 8pt Baseline
8pt 基线网格
基本单位 = 8px。屏幕用 8pt 网格,纸张用 mm 页边(见 § 08)。下面是 8pt 网格的可视化,框线全部落在交点上:
为什么是 8 不是 5 或 10
8 能被 2/4 整除,适配主流屏幕密度(@1x/@2x/@3x 都得整数),且 8 的倍数(8/16/24/32…)足够细又不琐碎。这是 Material、Carbon、Polaris 的共同选择。
№ 03 — Spacing Ladder
十级间距阶梯
space-0 · 0px
space-1 · 4px (½×8)
space-2 · 8px (1×8)
space-3 · 12px (1.5×8)
space-4 · 16px (2×8)
space-5 · 24px (3×8)
space-6 · 32px (4×8)
space-7 · 48px (6×8)
space-8 · 64px (8×8)
space-9 · 96px (12×8)
语义间距(组件消费这个,不直接用数字)
| 语义 | 值 | 用途 |
|---|---|---|
| space.inset-sm | 12px (s3) | 徽章 / 紧凑卡片内边距 |
| space.inset | 24px (s5) | 卡片内边距 |
| space.inset-lg | 48px (s7) | section 内边距 |
| space.stack | 16px (s4) | 段落 / 元素竖向堆叠 |
| space.section | 96px (s9) | 大区块之间 |
№ 04 — Column Grid
列网格 · 三断点
列宽、外边距、列间距全部实算,均落在 8pt 网格上:
| 断点 | 列数 | 外边距 | 列间距 | 列宽(实算) |
|---|---|---|---|---|
| Desktop ≥1200 | 12 | 96px | 24px | ~62px |
| Tablet 768–1199 | 8 | 48px | 20px | ~83px |
| Mobile <768 | 4 | 24px | 16px | ~70px |
12 列(Desktop)
1
2
3
4
5
6
7
8
9
10
11
12
8 列(Tablet)
1
2
3
4
5
6
7
8
4 列(Mobile)
1
2
3
4
№ 05 — Container & Measure
容器宽度与行长
| 容器 | 最大宽 | 用途 |
|---|---|---|
| 正文阅读容器 | 68ch (~700px) | 长文正文(锁行长,见 VS-02) |
| 标准内容栏 | 900–920px | 规范页 / 表格 / 仪表盘 |
| 全宽 | 100% | Hero / 数据大图 / 封面 |
Critical · 行长与网格的协作
VS-02 发现默认 920px 栏宽下正文行长超标(EN 94 字)。VS-03 给出解法:正文段落容器套 68ch 约束,但它仍对齐列网格——即"窄正文 + 宽结构"。两个子系统在此咬合:VS-02 管字、VS-03 管框,共同保证可读行长。
№ 06 — Whitespace Rhythm
留白节奏
| 场景 | 间距 |
|---|---|
| 段落之间 | space.stack 16px |
| 标题与正文 | 8–12px(标题距下文近,距上文远) |
| section 之间 | space.section 96px(屏幕)/ 48px(纸张) |
| 卡片内边距 | space.inset 24px |
| 文字密度 | L0 ≤55% · L4 ≤80% · L5 ≤85%(按等级) |
亲密性原则
相关元素靠近,无关元素拉开。标题离它管辖的正文要近,离上一段要远——读者靠间距判断从属关系,不靠线框。
№ 07 — Alignment
对齐规则
- 左对齐为默认:正文、标题、表格一律左对齐(中英混排下居中易乱)。
- 居中仅用于:封面、引言 Pull Quote、单一证据图。
- 右对齐仅用于:表格中的数字列(配 tabular-nums 竖向对齐)。
- 基线对齐:同一行内不同字号的文字按基线对齐,不按顶/中。
- 光学对齐:大字母/标点可微调超出网格,求视觉对齐而非数学对齐。
№ 08 — Print mm
跨载体 · 屏幕 px ↔ 纸张 mm
屏幕用 px(8pt 网格),纸张用 mm(页边)。换算(1pt = 0.3528mm):
| 间距 | 屏幕 | 纸张 |
|---|---|---|
| space-2 | 8px | ~2.8mm |
| space-4 | 16px | ~5.6mm |
| space-6 | 32px | ~11.3mm |
| space-8 | 64px | ~22.6mm |
A4 页边(文档系统)
| 页边 | 左 30 · 右 30 · 上 25 · 下 30 mm |
| A4 内容宽 | 210 − 30 − 30 = 150mm |
| 栏间(双栏) | 8mm |
№ 09 — Lint & Checklist
网格的机器可执行
| Token | 规则 | 可检查 |
|---|---|---|
| grid.8pt | 所有 margin/padding/gap 是 8 的倍数(或 4 半步) | ✓ 扫描 |
| grid.ladder | 只用 10 级阶梯值,不出现表外间距 | ✓ 匹配 |
| grid.measure | 正文容器 ≤ 68ch | ✓ CSS |
| grid.breakpoint | 断点只用 768 / 1200 | ✓ media |
| grid.touch | 交互目标 ≥ 44px(= 5.5×8) | ✓ DOM |
$ grid-lint
off-grid spacing values .... 0 found
spacing in ladder .......... 100%
body measure ............... 68ch ✓
breakpoints ................ 768, 1200 only
touch targets ≥44px ........ pass
发布前自检
- ☐ 所有间距是 8 的倍数(半步 4px 仅特例)
- ☐ 间距全部来自 10 级阶梯
- ☐ 布局对齐当前断点的列网格
- ☐ 正文行长 ≤ 68ch
- ☐ 交互目标 ≥ 44px
- ☐ 纸张载体用 mm 页边,不混用 px
VS-03 完成度
本规范使 VS-03 从 80% → 100%:哲学 + 8pt 基线 + 十级阶梯 + 三断点列网格(实算列宽)+ 容器行长(与 VS-02 咬合)+ 留白节奏 + 对齐规则 + mm 换算 + Lint 九项齐全。VS-03 ✓ 完成(3/12)。