第 5 章 · 02 数据可视化(dataviz)

第 5 章 · 02 数据可视化(dataviz)

本节摘要:dataviz 是 Claude Code 内置的数据可视化技能,它把「把图画好看」变成一套有表单启发式、可运行配色验证器、标记规范的程序化流程——结果是「按构造正确」而非「靠品味」。核心心法是「颜色可计算,所以去计算它」:绝不肉眼判断配色是否色盲安全,跑 validate_palette.js 验证器。流程是「先选型再上色」:数据的工作(量级/身份/极性/单一头条/时序变化)决定图表类型(有时答案根本不是图,而是统计磁贴);颜色按工作分配(分类/顺序/发散/状态各一条规则);验证通过后才上标记规范与悬停层。本节讲透这套设计系统无关的方法:表单启发式、配色公式与六项检查、标记规范、反模式清单。读完本节,你能产出读起来像一个系统、明暗一致、可访问的图表。

内容来源:Anthropic 官方 Claude Code 技能 bundled-skills/dataviz/SKILL.md 及 references/choosing-a-form.md、references/color-formula.md、references/anti-patterns.md(随 Claude Code 分发,从泄露素材库提取),汉化并套用体系化模板。

学习目标

阅读完本节,你应当能够:

1. 按「数据的工作」选择正确图表类型,并能判断「这根本不该是图」(统计磁贴/英雄数字)。
2. 用四条规则把颜色按工作分配:分类(身份)、顺序(量级)、发散(极性)、状态(状态)。
3. 用 validate_palette.js 验证器而非肉眼判断色盲安全,说清六项检查。
4. 列举并避免核心反模式:双轴图、按过滤重涂、超过 8 色循环、彩虹顺序 ramp、名义类目用值 ramp。
5. 应用标记规范:细标记、2px 线、≥8px 标记点、2px 表面间隙、选择性直接标签。

一、核心心法:颜色可计算,所以去计算它

dataviz 技能最关键的习惯:「颜色这部分是可计算的,所以去计算它」。绝不肉眼判断一个配色是否色盲安全——跑 scripts/validate_palette.js 验证器。肉眼在 CVD(色觉缺陷)条件下不可靠,验证器给出客观的 ΔE 数值与 pass/fail。

这套方法是设计系统无关的:流程、表单启发式、六项检查、标记规范都不依赖某个产品。设计系统只提供一组参数(色阶、分类顺序、发散对、状态色板、纹理、表面色、筛选控件);方法原样消费它们。要把方法套到你的品牌,只需替换参数值,结构与规则不动。

二、流程:按顺序做,颜色最后

颜色是最后做的——多数糟糕图表都是先挑颜色。正确顺序是七步:

1. 选型:数据的工作是什么——量级、身份、极性、单一头条、时序变化?工作决定图表类型,有时答案是「不是图」(统计磁贴或英雄数字)。
2. 按工作分配颜色:分类(身份)、顺序(量级)、发散(极性)、状态(状态)——各一条规则。分类色相按固定顺序,绝不循环。
3. 验证色板:跑脚本,别推理 ΔE。node scripts/validate_palette.js "<hex,hex,…>" --mode light,在浅色与深色表面各跑一次。
4. 应用标记规范与间隔:细标记、4px 圆角数据端锚定基线、2px 线、≥8px 标记点、填充间 2px 表面间隙、选择性直接标签。
5. 加悬停层(默认):HTML/SVG 图表本质交互;线/区域加十字准线+工具提示,条/点/单元加每标记工具提示。
6. 无障碍过检:≥2 系列必有图例且 ≤4 个也直接标注;提供表格视图;深色模式单独验证;纹理给 CVD/打印场景。
7. 渲染并眼看:验证器只查颜色不查布局——打开或截图输出,眼看标签碰撞、几何、溢出。

完成后对照反模式清单——它是「什么会出错」的目录,你的图匹配任何一条就是错的。

三、选型:数据的工作决定图表(有时不是图)

选型在颜色之前决定。先问「这该是图吗」:

确认该是图后,按工作选类型:

💡 三条表单规则:(1)顺序是安全默认——单色相、越多越深,清晰一致不易误读,除非工作明确是身份或极性才换;(2)分类用于系列本身就是主题——但它有真实成本,可能埋没真正关键的那个点,如果故事是「这个涨了」,那是强调不是分类;(3)强调是被严重低估的表单——一个系列用强调色,其余用灰,常是「让图更清晰」的诚实答案。

系列数阶梯(分类色)

⚠️ 绝不靠生成更多色相解决「系列太多」:生成的第 9 个色相在 CVD 下与某个现有色相无法区分,且破坏每项检查。

四、配色公式:四项工作与验证

颜色按工作分配,每项一条规则:

• 分类(身份):色相按固定顺序分配,绝不循环。
• 顺序(量级):单色相,浅→深。
• 发散(极性):两个色相 + 中性灰中点;绝不彩虹,中点绝不放色相。
• 状态:good/warning/serious/critical 保留,绝不复用为「系列 4」,必带图标+标签,绝不单靠颜色。

验证器六项检查(跑 node scripts/validate_palette.js "<hex,…>" --mode light,深色模式再跑一次):

1. 亮度带(分类色相是否落在允许的亮度区间)
2. 色度下限(颜色够饱和可区分)
3. 相邻对 CVD 分离(ΔE ≥ 8 是目标,6~8 是只在有次要编码时合法的下限)
4. 正常视觉下限(低于 15 是硬 FAIL,全色视觉者也分不开)
5. 对比度(WARN 时必须有可见标签或表格视图,不可忽略)
6. 通过/失败判定(任何 FAIL 必须修好再继续)

⚠️ 不可商量的规则(任何设计系统都成立):分类色相固定顺序绝不循环;绝不双轴图(两个 y 轴,这是头号图表错误——两个不同量纲的度量应拆成两图、小倍数、或索引到共同基线);颜色跟随实体而非其排名(过滤改变系列数时幸存者不变色);顺序=单色相浅→深、发散=两色相+灰中点;**发任何分类色板前跑验证器**。

五、标记规范与悬停层

标记规范:细标记;2px 线;≥8px 标记点;4px 圆角数据端锚定基线;填充之间(堆叠段、相邻条)2px 表面间隙;重叠标记 2px 表面环;选择性直接标签(从不在每个点都标数字);后退式网格/轴线。文字穿文字 token,绝不穿系列色——值、标签、图例保持在主要/次要/柔和墨色,旁边一个彩色标记承载身份。

悬停层(默认加):HTML/SVG 图表本质交互。线/区域加十字准线+工具提示;条/点/单元加每标记工具提示。唯一可跳过的是无绘图的纯统计磁贴。命中目标要比标记大;筛选控件放在图表上方一行。

六、反模式清单:什么会出错

每张图都对照这个清单——匹配任何一条就是错的:

颜色与编码:

• 双轴图(一图两 y 轴):两轴对齐是任意的,图会虚构数据里没有的相关性。改用两图、小倍数、或索引到共同基线单轴。
• 按过滤重涂:按当前排名分配颜色,过滤掉一个就重涂幸存者。读者记住「Acme 是蓝」就被误导了。颜色跟随实体而非行号。
• 超过 8 色循环/生成:第 9 个分类色在 CVD 下与现有槽无法区分。折进「其它」、分面、或复合编码。
• 肉眼判色盲安全:跑验证器,相邻 ΔE ≥ 8。
• 名义类目用值 ramp:类目无自然顺序时按「越大越深」上色,是把柱长双重编码成色相,浪费唯一空闲通道。改单系列一色。
• 彩虹/多色相顺序 ramp:单色相浅→深。
• 发散中点放色相,或两极都是冷色:中点要读作「无」,两极要读作对立。蓝↔红、蓝↔橙成功,蓝↔青(都冷)失败。
• 状态色用于非状态系列(或反之):状态 token 只在颜色意味着好/坏时用。

表单:

• 故事是一个数字却用八个分类色:最常见「图没说到点上」的方式。改强调,或统计磁贴/英雄数字。
• 单条柱状图、两片饼:用统计磁贴,数字本身就是图。
• 甜甜圈/饼比较接近的值:用条,或直接给数字。部分占整体只在 ≤6 段时适合一眼看。
• 超过约 7 个承载含义的色类:用表格,或折尾分面。

本节要点回顾

1. 核心心法:颜色可计算,所以去计算——绝不肉眼判色盲安全,跑 validate_palette.js 验证器看 ΔE。
2. 七步流程(颜色最后):选型→按工作分配颜色→验证→标记规范→悬停层→无障碍过检→渲染眼看→对照反模式。
3. 选型先问「该是图吗」:单个值用统计磁贴、头条数字用 KPI 行、主打数字用英雄数字、>7 类目用表格;是图则按工作(量级/趋势/身份/强调/极性/部分整体)选类型。
4. 三条表单规则:顺序是安全默认、分类有真实成本可能埋没关键点、强调是被低估的「让图更清晰」答案。
5. 配色四项工作:分类固定顺序不循环、顺序单色相浅深、发散两色相+灰中点、状态保留带图标;验证器六项检查,任何 FAIL 必修。
6. 不可商量:绝不双轴图(头号错误)、颜色跟随实体非排名、绝不生成第 9 色、发色板前必跑验证器。
7. 标记规范:细标记、2px 线、≥8px 点、2px 表面间隙、选择性直接标签;文字穿 token 不穿系列色;悬停层默认加。
8. 反模式:双轴、按过滤重涂、超 8 色循环、名义类目用值 ramp、彩虹顺序、发散中点放色相、单值用多色、单条柱/两片饼。

下一节讲技能生成器(run-skill-generator)、Claude Code 文档技能与深度研究技能——如何把重复工作流沉淀成可注入 agent 的技能包,以及官方如何用技能组织领域知识。