data-forms

data-forms

这是一套形式，而非一种风格。它提炼自 Lenny's Newsletter 的数据图表 （2025-2026 年调查专题）——这些图表之所以有效，靠的不是配色，而是 形式选择和编码规范。这两者都可以应用于任何视觉语言。

对于视觉层，使用目标平台已有的内容：产品内界面使用品牌设计令牌，使用内置的 dataviz skill 构建调色板并确保无障碍性，个人网站则使用自己的风格。本 skill 决定的是数据呈现为什么形状——也就是颜色之上的那一层。

从这里开始：选择器

数据的特点	选择	形式 #
一个问题，3-6 个有序答案	有序柱形图 · 华夫图 · 嵌套带状图	1 · 6 · 7
一个问题，多个多选答案	排名条形图 · 正负向条形图	3 · 4
同一指标，两个时间点	成对柱形图 · 斜率图	2 · 9
同一指标，3 个及以上时间点	时间序列面积图 · 排名变化图	13 · 18
一个指标，横跨 7-10 个有序区间	阶梯柱形图	14
一个指标，横跨多个无序细分项	小多图 · 点图	8 · 17
有正负方向的分数（-100…+100、净值、变化量）	发散条形图	5
两组数据，跨多个行进行比较	哑铃图	16
多条陈述的认同度 / 李克特量表	居中堆叠条形图	19
多个细分项 × 多个指标	胶囊矩阵	10
开放文本答案	词云 · 编码主题条形图	11 · 3
数字无法表达的关系	隐喻示意图 · 双列流程图	12 · 20
聚类得到的命名细分群体	人物画像卡片	15
两个维度、少量带标签的数据点	命名象限散点图	21

包含示意图和常见失误的完整目录：references/forms.md。

六个比图表形式更重要的决定

1. 选择形式之前，先写出要点。 完成这句话：“这张图表要表达的重点是___。”如果写不出来，那你需要的是 表格，不是图表，任何形式都救不了它。这句话会成为标题。标题有两种合适的形式：

• 论断，用于比较和分析——“倦怠正在加剧，乐观情绪却在消退”
• 原样提问，用于图表展示答案分布时——“你对裁员有多担忧？”

不要用字段名。“按公司规模划分的倦怠程度”只是电子表格标签。

**2. 打印每个数值。**读者不应该根据坐标轴估算。数值要紧挨着对应的图形标记。 这才有理由执行第 3 条。

**3. 删除坐标轴。**只保留基线——不要 y 轴、网格线或刻度。例外情况： 时间序列图和斜率图中，形状就是要传达的信息，因此需要参考网格。 其他情况下，坐标轴都只是忘记删掉的脚手架。

**4. 能直接标注，就不要用图例。**类别名称直接放在标记上或旁边。只有在一个图例 供多个面板共用（小多图），或用于编码与位置相互独立的维度（正负向、群体归属）时， 图例才有必要。

**5. 突出两个，其余弱化。**在包含九个类别的比较中，只有标题中提到的一两个对象 需要强调；其他对象都应退居次要位置。图表应该为标题提供依据，而不是摆出一张表格。 如果突出显示的对象其实并非异常值，那图表就是在反驳你的标题——应该改标题，而不是改数据。

**6. 在图表中展示限制条件。**样本量小、误差范围、未作答，以及“由于多选，百分比 合计超过 100%”——都应放在图表中，而不是脚注里。对未达统计显著性的柱形使用虚线 轮廓，并用括号标注“差异在误差范围内”，这比放一张干净的图表再加上没人会读的免责声明更可信。

还有一点克制：**注释最多一个。**指出读者可能忽略的内容即可。没有注释也没问题； 两个就显得杂乱。

编码规则要点

• 颜色要有意义，否则就不要用颜色。 不要给标签已能区分的条形着色。将高饱和度留给标题所强调的对象。
• 顺序渐变 = 数值大小或排名。发散渐变 = 正负值。分类色 = 身份。 混用这些编码是图表最常见的误导方式。
• 矩阵中每列使用各自的刻度。 在形式 10 中，每项指标都使用自己的渐变色和方向，否则“颜色越深 = 数值越高”就会与“颜色越深 = 越差”相冲突。
• 中性状态用未填充的轮廓表示，而不是灰色。 灰色会让人觉得数据缺失。
• 没有坐标轴时，冗余编码没问题 ——词云可以同时用大小和颜色表示频率；这样并没有浪费编码。
• 顺序承载含义。 除非类别本身有序（时间、分桶、Likert 量表），否则按数值排序。小多图的每个面板都保持相同顺序。
• 条形始终从零开始。 如果零对该指标没有意义，你需要的是点图（形式 17），而不是条形图。
• 只有主题是人时才拟人化。 人物华夫格图、表情符号锚点、人物形象插图——用于情绪和人数统计时很合适，用于延迟和收入时则显得廉价。

工作流

1. 用一句话说明要点。
2. 判断数据的类型（分布 / 排名 / 比较 / 趋势 / 相关性 / 构成 / 定性），并从选择表中挑选图表。
3. 阅读该图表形式在 references/forms.md 中的条目，尤其要留意其失效情形。如果你的数据触发了失效情形，就采用其中列出的替代方案。
4. 应用六项决策和编码规则。
5. 使用目标环境支持的任意方式制作图表。
6. **渲染图表并查看图像。**不要只看 DOM 或规范，要看像素。运行检查清单，修复发现的问题，然后重新渲染。

发布前检查清单

查看渲染后的图像，并逐项作答。回答“否”意味着需要修复，而不是仅作记录。

• 标题陈述发现或提出具体问题，而不是字段名称
• 每个标记都能表达其数值，且在 50% 缩放时清晰可读
• 没有可用直接标签替代的图例
• 重点落在标题所强调的对象上；其他内容都弱化处理
• 最长的标签不会与标记重叠、换行到标记下方或溢出
• 条形从零开始；没有截断刻度
• 标注不超过 1 条
• 眯眼测试：缩放到 25% 时，答案的形状依然清晰可辨
• 限制说明（n、误差范围、多选）在图像中可见
• references/forms.md 中该图表形式自身的失效情形不适用

参考资料

references/forms.md — 21 种形式，每种都包含 ASCII 示意图、适用场景，以及失效条件。