Part 07
设计的
数学基础
MATH & LOGIC
原则回答"为什么"，令牌回答"用什么值"。
这一章是令牌背后的数学逻辑——
不绑定具体数值，只定义推导方法。
01 间距
间距
基数统治一切
选定一个基数（推荐 4px 或 8px），所有间距都是它的整数倍。
4px96px
当你犹豫 20px 还是 24px——答案永远是 24px，因为它在网格上。
间距的语义
间距不是"空出来的地方"，间距传达的是元素之间的关系：
间距小 → 关系密切（标题和副标题）
间距大 → 不同信息组（两个板块之间）
黄金法则
组间距 ≥ 2 × 元素间距
否则用户无法分辨"这两个东西是一组"还是"两组"。
02 字号
字号
数学推导
选定一个比例因子，从基准字号出发向上递乘，梯度是推导出来的，不是感觉挑的。
DisplayH1H2H3
Ratio: 1.25 (Major Third) | Base: 16px
| Body | 16px (16 × 1.25⁰) |
| Body Large | 20px (16 × 1.25¹) |
| H3 | 25px (16 × 1.25²) |
| H2 | 31px (16 × 1.25³) |
| H1 | 39px (16 × 1.25⁴) |
| Display | 49px (16 × 1.25⁵) |
排版三条铁律
01 每个项目只用两种字体，最多三种（标题 + 正文 + 可选等宽）
02 行宽控制在 45–75 个英文字符（中文 22–38 个汉字）
03 行高 = 字号 × 比例因子（标题 1.0–1.2，正文 1.5–1.8）
03 色彩
色彩
克制即丰富
一个设计系统需要的色彩远比想象中少：11–14 个值足矣。
前景色
主文字、次要文字
背景色
主背景、卡片
强调色
交互、聚焦
语义色
成功、警告、错误、信息
语义化命名
使用 --color-accent 而不是 --color-red。
换主题时，改令牌定义即可，组件代码零改动。
04 网格
网格
看不见的纪律
网格不是为了"好看"。网格解决的是认知负荷问题。
格式塔心理学核心
接近法则
距离近的元素被感知为一组
对齐法则
对齐的元素被感知为有关联
不变的规则
- — 所有元素贴在网格线上——"差不多对齐"等于没对齐
- — 槽宽在整个项目中保持统一
- — 打破网格只允许刻意为之，不允许无意识偏移
05 视觉层级
视觉层级
最多四级
建立层级的六种手段（按冲击力排列）：
尺寸对比 Impact: High
色彩对比 Impact: High
字重对比 Impact: Medium
空间隔离 Medium
位置优先 Low
动态引导 Low
同时使用不超过三种。如果需要六种手段才能让一个元素显眼——问题不在这个元素，在于周围的东西太多。
四个层级
Level 1 — 核心信息(一个页面只有一个)
Level 2 — 支撑信息 (2–4 个)
Level 3 — 细节信息
Level 4 — 辅助信息
06 动效
动效
去留测试
动效存在的唯一理由是帮助用户理解界面状态的变化。如果一个动效去掉之后用户不会困惑——它不需要存在。
100-200ms微交互
200-350ms展开/收起
300-500ms页面过渡
500-1000ms叙事动画
超过 1000ms 的动效让用户觉得"在等待"而不是"在体验"。