beam-ai-team/numbers

Numbers That Count, Numbers That Show

整合自 Stephen Few《Show Me the Numbers》与 Chip Heath & Karla Starr《Make Numbers Count》。 两本书的角色互补：

• Heath & Starr 管 意义层 — 怎样让一个数字被人脑「抓住」。
• Few 管 视觉层 — 怎样把数字以图表/表格的方式正确呈现。

把它们合在一张工作台上，得到一条完整的链路： 受众 → 意义 → 形式 → 干净呈现 → 收尾解读。

---

0. 一个总框架（开干前先问这三句）

在写任何含数字的内容前，先回答：

1. 谁读？他读完后要做什么决定或动作？ （读者不是抽象的「公司」「团队」，是一个具体的人。）
2. 整段内容的 ONE takeaway 是什么？ （能压缩成一句话的那个结论。如果压不出来，先回去想，别先画图。）
3. 这个 takeaway 是定性的还是定量的？
   • 定性的（例如「我们达成目标了」），数字只是支撑 → 用散文 + 1–2 个被锚定的数字。
   • 定量的（例如「不同渠道的转化差异」），数字是主体 → 用表格或图表。

这一步是产出质量的最大杠杆。形式选错（图改成表，或反之），后面再多努力也救不回来。

---

Part I — 让数字落地（Heath & Starr 的核心）

人脑没进化出处理大数字的能力。我们天然处理的是 1、2、3、很多。任何"亿、百分、毫秒、纳米"都需要翻译。

Rule 1. 默认动作：能不写数字，就别写

数字看起来严谨，但常常掩盖意义。读者看到 23% YoY，不知道这是好是坏，要费脑力跨级比较。

• ❌ "我们的留存率是 87.3%。"
• ✅ "在我们这一类产品里，留存表现是头部的。"

判断标准：把数字删掉，意思还在吗？还在，就删。 保留数字的合法理由通常只有：精确决策、合规留痕、对比要算账。

Rule 2. 必须保留时，激进地简化

人能"抓住"的精度比人愿意呈现的精度低得多。

| 原数字 | 抓得住的版本 | |---|---| | 89.7% | 9 in 10 / 接近九成 | | 1,247,856 | 约 125 万 / "破百万" | | 2.7× | 接近 3 倍 / "翻三倍" | | 33.4% | 1/3 | | 49.6% | 「一半」 |

默认偏好：

• 整数 > 小数；分母 ≤ 10 的分数 > 百分比；
• "1 in N" 比 "X%" 在 1–2 位数时更好抓（"1 in 4 children" > "25% of children"）；
• 概率 → 频率（"20% chance" → "every 1 in 5 patients"）。

例外：财务、合规、医学剂量等场合，精度本身就是信息，不能简化。

Rule 3. 给数字一个「锚」（Translation by anchoring）

漂在空中的数字没有重量。要把它系在读者熟悉的物体、时间、空间上。

经典锚的库（背下来当肌肉记忆）：

| 维度 | 锚 | |---|---| | 时间 | 1 百万秒 ≈ 12 天；1 十亿秒 ≈ 32 年 | | 钱 | 一杯咖啡 $5/天 ≈ $1,825/年 ≈ 22 年买一辆 Tesla | | 距离 | 地球周长 ≈ 4 万公里；LA → NY ≈ 4,000 公里 | | 人口 | 大型体育场 ≈ 8 万人；小城市 ≈ 10 万；旧金山 ≈ 80 万 | | 数据 | 一张照片 ≈ 3MB；一部 HD 电影 ≈ 4GB；国会图书馆全部文本 ≈ 15TB | | 体积/重量 | 一支黄油 ≈ 113g；一个篮球场 ≈ 420㎡ |

核心规则：

• 用 读者 的世界，不是 你 的世界。给会计的锚不是给程序员的锚。
• 同一组数据，给不同受众，用不同的锚。
• 锚要让人 看一眼就抓住，要解释才用的就不是锚。

Rule 4. 切换维度（Dimensional shifts）

同一个事实，从不同维度讲，给人的感受完全不同。

• 0.1% 缺陷率，听起来"很低"。
• 但产量是 100 万件 → "1,000 件坏货" → "一整个挤满人的演唱会"，瞬间炸。

切换的常见组合：

• per-day → per-year → per-lifetime
• 百分比 → 绝对人数
• 总量 → 人均
• 累计 → 即时

用法：先写出几个维度，挑那个 最贴你想让对方感受到的情绪 的。

Rule 5. 让读者「数」（Process numbers）

大数字一次报出来麻木；让读者自己 数 出来，记忆和情绪都翻倍。

"想象一个房间里有 100 个人。其中 32 个……"

把"32%"改成上面这种 100 人剧场，读者会脑补画面。这是 Heath & Starr 反复强调的把抽象量"演出来"。

适用场景：演讲、长文开篇、产品故事页。

Rule 6. 渐强（Crescendo），不要一上来就放峰值

按规模递增地排列数字，对比触发"哇"。

"蛇每年杀 10 万人。狗 2.5 万。鲨鱼 6 个。蚊子？72.5 万。"

经典结构：从一个普通锚 → 类似量级 → 一个反直觉的更大量。

Rule 7. 数据 + 故事，必须配对

• 单纯的统计：脑信，心不动。
• 单纯的故事：心动，但不知道是个例还是普遍。
• 同事+：1 个具体的人，配上 1 in 4 的统计。这是慈善捐款、政策叙事、市场叙事的黄金组合。

Rule 8. 拒绝统计学黑话

• ❌ "中位数家庭收入是 $75K。"

• ✅ "一半的家庭年收入在 $75K 以上，一半在以下。"

• ❌ "p < 0.05"

• ✅ 给非专家读者：直接说"这个差异不太可能是偶然"或省略。

---

Part II — 把数字摆好（Few 的核心）

让数字在视网膜到大脑这条管道里损耗最小。

Rule 9. 选对形式：散文 vs 表格 vs 图表

| 形式 | 适用 | 信号 | |---|---|---| | 散文 | 1–3 个数字嵌在叙事里 | "增长翻倍（47 → 94 单）" | | 表格 | 精确查值；4+ 个值；多个单位/指标并列 | 读者要读出具体值 | | 图表 | 模式、趋势、对比、分布、相关性 | 读者要 看出形状 |

判断题：你想让读者「读」一个数字，还是「看出」一个形状？读 → 表格；看 → 图表。

Rule 10. 七种定量信息（Few 的图表选择基底）

每张图都在表达 其中一种 信息。先确定信息类型，再选图。不要从图样先选起。

| 信息类型 | 想说什么 | 推荐图 | 不要用 | |---|---|---|---| | 时间序列 Time-series | 一个量随时间变化 | 折线图（连续）/ 柱状（离散周期） | 饼图、雷达图 | | 排序 Ranking | 谁多谁少（已排序） | 横向条形图（按值排序） | 饼图、3D 柱状 | | 部分占总体 Part-to-whole | 一份占整体多少 | 条形图、堆叠条 | 饼图 ≥5 片；环图嵌套环图 | | 偏离 Deviation | 实际 vs 目标/基准 | 子弹图（bullet graph）、带参考线的条形 | 仅展示绝对值的图 | | 分布 Distribution | 值如何在区间分布 | 直方图、密度图、箱线图 | 折线连接频次 | | 相关性 Correlation | X 与 Y 的关系 | 散点图（必要时加趋势线） | 双 Y 轴折线图 | | 名义对比 Nominal comparison | 多类无序对比 | 条形图（大→小排序） | 饼图、词云 | | （地理）Geospatial | 地理分布 | choropleth / 点地图 | 3D 地球仪 |

核心 mantra：信息类型 → 图类型。不要反过来。

Rule 11. 预注意属性（Pre-attentive attributes）

人脑在 200ms 内并行处理这些视觉特征：位置、长度、宽度、大小、方向、形状、闭合、颜色色相、颜色明度、运动。

实操规则：

• 用 ONE 个属性来 编码 数据（条形长度、点的位置）；
• 用 ONE 个属性来 强调 焦点（一个亮色 / 一个加粗）。
• 不要叠加冗余属性"求保险"，会让眼睛不知道看哪。
• 永远不要只靠色相：8% 男性是色盲，加粗/位置/形状必须能独立传达信息。

精度排序（从高到低）：位置 > 长度 > 角度 > 面积 > 颜色明度 > 颜色色相。所以长度（条形）几乎永远胜过角度（饼图）。

Rule 12. 颜色纪律（Color discipline）

颜色不是装饰，是一种带宽极窄的信道。乱用颜色 = 把高优先级带宽浪费在背景上。

• 默认全灰，留色给那个唯一焦点。
• 高饱和 = 强调；低饱和 = 上下文。
• 背景永远不要纯白纯黑：朝品牌色调一点点（OKLCH 里 chroma 0.005–0.015）。
• 别条件反射用蓝色（h≈250）或暖橙（h≈60），那是 AI/SaaS 默认陷阱。

颜色按用途分三种语义：

| 用途 | 配色规则 | |---|---| | 序列型（如收入档位） | 单一色相，明度从浅到深 | | 分歧型（如盈亏，正负偏离） | 两个色相从中点分开（蓝↔红、青↔橙） | | 类别型（如不同地区） | 最多 6 个色相；超过用位置/直接标签替代 |

自检：把图截图转灰度还能读出来吗？读不出来就重做。

Rule 13. 删非数据墨水（Non-data ink）

不承载信息的元素：删，或淡。

• 3D、阴影、渐变填柱：全删。
• 网格线：删；保留时降到 5–10% 不透明度。
• 背景色块：删。
• 图表外框：删。
• 图例：能直接在线/柱旁标，就不要图例。
• 坐标刻度：1,234,567 → "1.2M"。

Tufte 的 data-ink ratio 原则：每一滴墨水都该承载信息。

Rule 14. 条形图的硬规则

• Y 轴必须从 0 起（条形长度直接编码量级，截断 = 撒谎）。
• 按值排序（除非类别天然有序：周一到周日、年龄段）。
• 类别标签长 → 横向条形图。
• 条间距 ≈ 条宽的 20–30%。
• 焦点条用品牌色，其余灰色。

Rule 15. 折线图的硬规则

• Y 轴 可以 不从 0 起（编码的是相对位置/趋势）。
• 最多 5 条线；超过会变意大利面。
• 直接在线尾标名字，不要图例。
• 焦点线高饱和 + 加粗，其余线灰色。
• X 轴时间间隔均匀。

Rule 16. 饼图的硬规则

• 默认：不要用饼图。
• 仅当：① 切片 ≤ 4，② "占比"是核心信息，③ 切片差距大到一眼能看出。
• 必须满足：从 12 点钟开始，最大切片在右侧顺时针放置；按大小排序。
• 环图（donut）可以接受 — 中心放焦点数字。

Rule 17. 表格设计

• 数字右对齐，小数点对齐。
• 同列同小数位数。
• 等宽数字（CSS：font-variant-numeric: tabular-nums; font-feature-settings: "tnum"）。
• 行分组用 空白 或 淡底色，不要同时用。
• 重网格线杀可读性 — 用空白 + 极淡分隔。
• 焦点行/列用淡底色或加粗，不要用红绿条纹（colorblind + 像 Excel）。
• 总览先放，细节后放。最多可见 7 行；其余折叠。

Rule 18. Dashboard 设计

Few 的核心主张：dashboard 是"重要信息一屏可见"，不是数据百货。

• 单屏，不滚动。
• 优先级排版：左上 = 最重要（F-pattern）。
• 每个 dashboard ONE 个主行动点（"应该让人做什么"）。
• 用 bullet graph 替代仪表盘 gauge（见 Appendix B）。
• sparkline（行内迷你折线）让趋势一眼可见，不占空间。
• 没有 logo 水印、没有装饰图标；图标只能承担"分类"职能。

---

Part III — 决策流（拿来即用）

Decision Tree A：要不要加数字

有结论可讲？
├─ 是 → 数字能让结论更可信/可决策吗？
│   ├─ 能 → 保留 1–3 个，按 Rule 2 简化、Rule 3 锚定
│   └─ 不能 → 删
└─ 否 → 先想结论，再回来

Decision Tree B：用什么形式呈现

读者要做的动作：
├─ 读出具体值 → 表格
├─ 看出形状/趋势/对比 → 图表（按 Rule 10 选）
├─ 记住一个结论 → 散文 + 1 个被锚定的数字
└─ 既要看形状又要查值 → 图表为主 + 可展开的表格

Decision Tree C：图选哪种（七问法）

| 问题 | 答 yes 用 | |---|---| | 是不是随时间变化？ | 折线图 | | 是不是分类间排序对比？ | 横向条形图 | | 是不是部分占整体？(≤4 类) | 条形 / 环图 | | 是不是「实际 vs 目标」？ | bullet graph | | 是不是值的分布？ | 直方图 / 箱线图 | | 是不是 X-Y 关系？ | 散点图 | | 都不是，纯类别比较？ | 条形图 |

Smell test（出货前 30 秒自检）

如果以下任意为真，返工：

• 图表看上去像 Excel 默认（蓝色柱、灰背景、3D）。
• 用了饼图但切片 ≥ 5。
• 条形图 Y 轴不从 0 起。
• 颜色超过 3 种且没有语义。
• 有图例但能用直接标签。
• 数字精度超过决策需要（e.g. 87.34% 用在沟通里）。
• 截图缩到 30% 还能读出焦点吗？读不出 → 重做。
• 截图转灰度还能读吗？读不出 → 重做。

---

Part IV — 按场景应用

A. 日常更新（Slack、邮件）

• 数字 ≤ 3 个；其余讲故事。
• 结论先行，数字括号化：
  • ❌ "WoW 变化：+100%"
  • ✅ "销售翻倍（47 → 94 单）"
• 等宽字体频道里，用 ▁▃▅▇█ 做 sparkline。
• 数字 ≥ 4 → 截图小表，不要在正文堆。

B. 汇报 / Deck

• 每页 ONE 个 headline 数字，醒目居中。
• headline 必须配锚或对比基准：

  "Q1 营收 $4.2M（vs Q4 的 $3.1M，行业平均 +5% 我们 +35%）"

• 实际 vs 目标 → bullet graph，不要 gauge。
• 表格：可见 ≤ 7 行；其余折叠到附录。
• 绝对不要：3D、渐变、Logo 水印盖图、阴影投射。

C. 网站 / Landing Page

• Hero 数字：ONE 个超大数字 + 一行锚（"≈ 12 次往返月球"）。
• 数字滚动动画：仅在首次进入视口时；遵守 prefers-reduced-motion。
• KPI 信任栏（3–4 个数字）：用 字重 + 字号差异，不要每个套盒子（盒子里套盒子是 CLAUDE.md 明令禁止的）。
• SVG 图表 + 系统字体 + OKLCH 品牌色，移动端用 viewport 单位响应式。
• 不要把图表渲成 PNG 嵌网页，糊。

D. Dashboard / 产品 UI

• 单屏优先；详细数据放二级页。
• bullet graph > gauge。
• 直接标签 > 图例。
• 表格条件着色：用淡品牌色调，不要红绿斑马纹。
• Tooltip 给精度，主视图给约值。
• 实时变更别用 闪烁；用 淡入 200ms + aria-live 通知。

E. 公开演讲

• 渐强（crescendo）3 个数字，规模递增。
• 每个数字独占一页，配锚。
• 说出锚后停顿 2 秒，让它落地。
• 故事 + 统计配对。
• 不要在台上读 5 位小数。

F. 学术 / 报告写作

• 这是少数 不能 简化的场合（精度即信息）。
• 但摘要 / Executive Summary 仍要按 Heath & Starr 简化。
• 表格：APA 风格，数字右对齐，单位写在表头。
• 每张图配文字解读（"这张图说明 X"），不要让读者自己推。

---

Part V — Self-review 十条清单

每次出货前过一遍：

1. ☐ 删掉这个数字会损失意义吗？不会则删。
2. ☐ 数字简化到了"抓得住"的精度（整数 / 半数 / 三分之一 / "1 in N"）？
3. ☐ 给了一个 这位读者熟悉 的锚？
4. ☐ 是按"信息类型 → 图类型"选的，不是按"看起来好看"？
5. ☐ 主视觉编码（位置/长度/颜色）匹配信息类型？
6. ☐ 全图只有 ONE 个焦点元素（颜色 / 大小 / 位置）？
7. ☐ 删干净了非数据墨水（无 3D、网格淡、轴线最少）？
8. ☐ 条形图 Y 从 0；折线图焦点直接标注？
9. ☐ 缩到 30% 大小、转灰度，还能读出焦点吗？
10. ☐ 配文 / 标题点出了 takeaway，不是只重复图里有什么？

---

Appendix A — 锚的速查库

| 维度 | 锚 | |---|---| | 时间 | 1M sec ≈ 12 天；1B sec ≈ 32 年 | | 钱 | 日 $5 ≈ 年 $1,825 ≈ 10 年 $18K | | 距离 | 地球周长 ≈ 40,000 km；马拉松 ≈ 42 km | | 人口 | 体育场 ≈ 8 万；旧金山 ≈ 80 万；新加坡 ≈ 600 万 | | 数据 | 照片 ≈ 3MB；HD 电影 ≈ 4GB；GPT-4 训练数据 ≈ TB 级 | | 速率 | 阅读速度 ≈ 250 词/分钟；正常步行 ≈ 5 km/h | | 概率 | 1 in 1M ≈ 一年内被雷击的概率 | | 体积/重量 | 一支黄油 ≈ 113g；一颗鸡蛋 ≈ 50g；篮球场 ≈ 420㎡ |

---

Appendix B — Bullet graph 规范（Few 的发明）

替代仪表盘 gauge，用更少像素表达更多信息。

poor      satisfactory       good
█▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░
       ━━━━━━━━━━━━━━━━━              ← actual (深色窄条)
                          │            ← target (短竖线)
0          50            100

构成：

• 背景三段灰阶带：差/合格/优（由深到浅或反之，单色明度差）。
• 前景窄条：当前实际值。
• 目标刻度：一根短竖线。
• 量化轴：一行刻度。

数据密度约为 gauge 的 10×。

---

Appendix C — 30 条规则速查（一页打印版）

意义层（Heath & Starr）

1. 默认能删则删。
2. 整数 > 小数；分数 > 百分比（小分母时）。
3. 给读者熟悉的锚。
4. 同一事实，挑感受最强的维度讲。
5. 让读者自己"数"。
6. 渐强排列，不要先放峰值。
7. 故事配统计；统计配人。
8. 拒绝统计学黑话。

视觉层（Few）

9. 散文 / 表格 / 图表 — 按"读者要做什么"选。
10. 信息类型 → 图类型。
11. 一个属性编码数据；一个属性做焦点。
12. 默认全灰，留色给焦点。
13. 删非数据墨水。
14. 条形图 Y 从 0；按值排序。
15. 折线图直接标线尾，不要图例。
16. 默认不要饼图。
17. 表格右对齐 + 等宽数字 + 空白行分组。
18. Dashboard 单屏，bullet graph 替 gauge。

通用纪律

19. 永远不只靠色相（colorblind）。
20. 测灰度 + 测 30% 缩放。
21. 不用 3D / 阴影 / 渐变填柱。
22. 直接标签 > 图例。
23. 数字精度匹配决策需要。
24. 一图一信息（不要双 Y 轴叠加）。
25. 背景不纯白纯黑（OKLCH 微染品牌色）。
26. 标题/配文点 takeaway，不是描述图。
27. Dashboard 一个主行动点。
28. 不要盒中盒、3D 球、词云、雷达图（除非真的有 5+ 维 profile）。
29. prefers-reduced-motion 永远遵守。
30. 出货前过一遍 Part V 十条清单。