# 反模式 — 什么会出错

对照此列表检查每个图表。如果你的输出匹配一个条目，它就是错误的 — 在发布之前修复它。这些是真实的失败模式，每一个都在已发布的仪表盘中被捕获到。

## 颜色和编码

**❌ 双轴图表（一个绘图上的两个 y 轴刻度）。**
为什么具有误导性：两个刻度的对齐是任意的，因此图表编造了数据中并不存在的相关性。真实案例：一个"采用"图表绘制了用户（0–30k）对比会话（0–800k） — 审查者将其标记为看起来像"幻觉"。
✅ 改为：两个图表、小倍数，或在**一个**轴上将两个系列索引到共同基值（t0 时为 =100）。

**❌ 筛选时重新着色。** 按当前排名分配颜色，所以过滤掉一个系列会重新绘制幸存者。
为什么：读者已学会"Acme 是蓝色"的现在被误导。
✅ 颜色跟随实体，不是其行号。幸存者保持其色调。

**❌ 在超过 8 之后循环/生成色调。** 一个生成或重用的第 9 分类颜色。
为什么：在 CVD 下与现有槽位无法区分；破坏顺序检查。
✅ 将尾部折叠为"其他"，分面为小倍数，或使用复合编码。

**❌ 凭眼力判断色盲安全。** "这些看起来足够不同。"
✅ 运行 `scripts/validate_palette.js`。相邻 ΔE ≥ 12，或 8–12 配合第二编码。

**❌ 在标称类别上使用值标尺。** 当类别没有自然顺序（产品、团队、端点）时，将每个条着色得更深即更大。
为什么：它将条长双重编码为色调，将唯一空闲的通道用在图表已经显示的信息上，并且按设计破坏了分类检查（标尺跨越亮度带并降到色度下限以下）。
✅ 一个系列 → 对每个条使用一种颜色（槽位 1）。有序类别（漏斗、层级、年龄段）→ 有序标尺，使用 `--ordinal` 验证。

**❌ 彩虹色/非相邻顺序。** 用于大小的多色调标尺。
✅ 一个色调，浅→深。（类比邻居或语义热是唯一的多色调顺序例外，始终带有标尺图例。）

**❌ 发散中点上有一个色调，或两个冷色调作为两个极。**
为什么：中点必须读作"空"；极必须读作相反。蓝↔浅绿 失败了（都是冷色调）；蓝↔红 或 蓝↔橙 成功（暖/冷）。
✅ 两个读起来相反的色调 + 一个中性灰中点。

**❌ 状态颜色用于非状态系列**（或系列颜色用于状态）。
✅ 状态令牌仅在颜色*意味着*好/坏时使用；是身份时使用分类。

## 形式

**❌ 八个分类色调当故事只是一个数字时。** 图表错失其观点的最常见方式。
✅ 强调（高亮一个，其余灰色），或一个统计瓦片/主数字。

**❌ 一个条的单条图，或两片的饼图。**
✅ 一个统计瓦片。数字本身就是图表。

**❌ 用环形/饼图比较接近的值。**
✅ 一条，或数字。仅在一瞥下部分到整体，≤ 6 个段。

**❌ 超过 ~7 个携带含义的颜色类。**
✅ 一个表格，或表格 + 图表。超过 ~7 个分箱，相邻类别变得模糊。

## 标记和装饰

**❌ 厚饱和块、重网格线、无呼吸空间。** 读起来响亮，甚至幼稚，在大规模下。
✅ 细标记、退隐的细线网格/坐标轴、慷慨的内边距。饱和填充用于小标记和强调，永不是大块。

**❌ 虚线网格线或坐标轴规则。** 虚线添加视觉噪音，并在只是网格时读作"投影"或"阈值"。
✅ 网格线和坐标轴是实线细线，比表面低一色阶。

**❌ 每个数据点上一个数字。** 每个点或段旁边放一个值是混乱并且不会被阅读。
✅ 对于 ≥ 2 个系列，图例始终存在；*有选择地*直接标记（终点、极值、重要的一个系列），让坐标轴 + 工具提示承载其余。

**❌ 围绕标记画边框来分隔它们。**
✅ 填充之间的 2px 表面间隙（堆叠段和相邻条均如此）和 2px 表面环（在重叠标记上）。

**❌ 标签被太小条或堆叠段裁剪或溢出** — 包括 `overflow: hidden` 裁剪段内标签的首/尾字符。
✅ 仅当带有内边距的文本能容纳时才在标记内部渲染标签；否则将其移到条端之外，或放到工具提示/图例中（值仍在表格视图中）。

**❌ 图表容器的固定高度不包括 x 轴带** — 绘图适合了，轴标签不适合，因此卡片得到一个微小的嵌套垂直滚动。
✅ 将容器尺寸设为包括轴标签（绘图高度 + x 轴带），或让容器随其内容增长而不是固定高度。

**❌ 展示或衬线字体用于主数字。** 它读起来像非品牌的装饰。
✅ 主数字使用与所有其他内容相同的 sans。

**❌ `tabular-nums` 用于大的独立数字。** 等宽数字使 `121` 在展示大小下看起来松散。
✅ 比例数字用于主数字和统计瓦片值；`tabular-nums` 仅用于数字必须垂直对齐的地方（表格行，坐标轴刻度）。

**❌ 默认打开纹理，或作为装饰。** 密集的斜线场有前庭风险，在值标尺上读作噪音。
✅ 纹理是选择加入的（无障碍设置、打印、forced-colors），仅 45°/135°，在值标尺上是有序的。

## 交互和无障碍

**❌ 工具提示作为读取值的唯一方式。**
✅ 工具提示增强，但从不设限 — 每个值也可以通过直接标签或表格视图触达；键盘焦点显示与悬停相同的内容。

**❌ 针点悬停目标 — 你必须正中其上的 8px 散点。**
✅ 命中区域包括 2px 间隙，并满足 ~24px 的最小值；密集散点使用最近点 / Voronoi 层。

**❌ 每图表筛选器，或筛选器在图表卡片内。**
✅ 一个筛选行在其作用的所有内容之上；所有图表针对相同切片重新渲染。

**❌ 重新获取时骨架闪屏。**
✅ 以降低的不透明度保持先前渲染 — 没有布局跳动。

**❌ 连续标尺上没有表格视图 / 仅颜色编码。**
✅ 每个图表都有一个表格视图孪生（WCAG-clean 等价物）。
