去年我带的一个初级设计师做汇报材料，她把公司五条产品线的季度营收做成了饼图，五个扇形各自占着不同的角度，颜色搭配很精心。我看了半天，想确认哪条产品线表现最差，反复在扇形之间比来比去，始终没有把握。我让她换成柱状图，同样的数据，同样的五个数字，结果出来后我一眼就看到了最短的那根柱子。

她问我：为什么换一种图表，感觉就完全不一样了？

这个问题触到了图表设计最底层的东西：不是图表好不好看，而是它用什么方式把数据传达给人眼。同样的数据，不同的传达方式，人能读出来的准确度差异悬殊。把这件事搞清楚，才能真正理解后面所有图表规则背后的原因——而不是记住一堆「饼图不能超过五个分类」这样没有来路的结论。

一. 视觉编码：把数字翻译成人眼能判断的东西

数据本身是抽象的。「3100 万」「2400 万」「1800 万」——这三个数字摆在那里，人知道它们有大小关系，但感知不到「3100 万比 1800 万大多少」这个关系有多显著。把数字直接呈现给读者，读者需要自己在脑子里做计算。

图表的价值在于把这个关系变成人眼能直接感知的东西。柱状图把 3100 万画成一根高柱子，把 1800 万画成一根矮柱子，两根柱子并排放在那里，人不需要计算，眼睛直接感知到「这根明显比那根高很多」。这个过程——把数值映射到某种视觉属性上——就叫做视觉编码。

视觉属性有很多种：长度、位置、角度、面积、颜色深浅、颜色种类、形状、方向……每一种都可以拿来承载数据。柱状图用的是长度，饼图用的是角度，散点图用的是位置，气泡图用的是面积，热力图用的是颜色深浅。图表类型的本质，就是选择了某一种视觉编码方式，把数值翻译成对应的视觉属性。

这个翻译有一个核心问题：不同的视觉属性，人眼判断起来的准确度差距很大。有些属性，人眼天然判断得很准；有些属性，人眼只能给出模糊的估算。用准确度高的属性，读者读图容易；用准确度低的属性，读者读图费力，而且容易读错。

二. 视觉编码的可靠性排序

认知科学家克利夫兰（William Cleveland）和麦克吉尔（Robert McGill）在 1984 年做了一系列实验，让受试者比较图表里两个数据点的大小关系，记录判断误差。这项研究给出了一个视觉编码可靠性的排序，从最精确到最模糊，这个排序在今天仍然是图表设计领域最重要的理论依据之一。

1. 长度和位置

当两条线段从同一条基准线出发，人眼判断它们长度的差距几乎不出错。普通柱状图的精确性来源于此——所有柱子都从同一条底线开始，读者比较的是各自的高度，这个任务对人眼来说非常自然。

用具体数字说明：把「北京 3100 万、上海 2800 万」做成柱状图，两根柱子的高度差在视觉上很清晰，读者不需要计算，眼睛能直接感知到大约 10% 的差距。这个判断是自动发生的，不需要任何思考。

位置的判断同样准确。散点图把每个数据点放在一个 x-y 坐标里，读者感知点的位置，其实是在同时判断两个维度上的精确值。这是散点图之所以能展示两个变量之间关系的原因——位置编码让读者能精确感知每个点在两个维度上各处于哪里。

2. 角度

人眼判断角度的准确度明显低于判断长度。饼图的全部数量信息来自扇形角度，这是饼图读取效率低的根本原因，不是因为饼图难看，而是因为人眼对角度的感知本来就不精确。

还是那两个城市的数据：「北京 3100 万、上海 2800 万」。做成饼图的两个扇形，大多数人根本看不出差距，更别说估算出 10% 的差距。两个扇形角度非常接近——分别是 112 度和 101 度——对人眼来说，这两个角度几乎无法区分。

📊 【对比图待补充】 建议并排展示以下两种图表： 图表A：北京（3100万）和上海（2800万）两个扇形的饼图，两个扇形大小极为接近 图表B：同样两个城市的柱状图，两根柱子高度差可感知 对比重点：饼图里 112 度和 101 度几乎无法区分；柱状图里同样的数据差距（约 10%）清晰可见

如果五个扇形的角度都在 60 度到 80 度之间，读者连哪个扇形最大都可能判断错。这不是读者不认真，而是人眼对这个精度范围的角度判断本来就容易出错。

还有一个让饼图更难读的问题：起始角度和位置会影响视觉判断。同样是 90 度的扇形，放在 0° 到 90° 和放在 45° 到 135°，人眼对它的感知是不一样的。研究显示，接近 0°、90°、180°、270° 这四个方向的扇形，人眼判断角度相对准确；斜角方向的扇形判断误差更大。饼图里的分类通常不会恰好落在这几个方向上，所以读者的判断误差是普遍存在的。

3. 面积

气泡图用圆的面积来表达数量，这是一种面积编码。人眼对面积的感知本来就不精确，而且存在系统性低估——面积比实际看起来更小，尤其是当面积差距很大时，小圆圈看起来比实际占比更不显眼。

一个典型的气泡图误读案例：一张展示全球各国 GDP 的气泡图，美国的气泡比印度大一圈，读者感觉美国 GDP 比印度大 20% 左右，实际差距是 6 倍。面积编码在传达「差了多少」这件事上，系统性地低估了大数值和小数值之间的真实差距。

面积还有一个技术问题：圆的面积是 πr²，半径和面积不是线性关系。如果设计师直觉上把半径做成两倍，圆的面积其实变成了四倍——严重夸大了数据差距。要让一个圆的面积是另一个的两倍，半径只能增加到 √2 倍，大约 1.41 倍。设计师如果按直觉操作而不按照面积计算，气泡图的数据误导几乎是必然的。

4. 颜色深浅

热力图用颜色深浅来表达数值高低。颜色最深的格子和颜色最浅的格子，读者能感知到「高」和「低」，但两个深度接近的颜色之间的差距，几乎不可能估算准确。

比如一张销售区域热力图，某个区域是深蓝，另一个是稍浅的蓝，读者知道深蓝区域更高，但说不出高多少。是 10%？20%？50%？颜色深浅没有内置的精度感。

颜色深浅适合的任务是：让读者感知「哪些区域明显更高，哪些区域明显更低」。如果读者需要知道精确的差距，颜色深浅是错的编码方式，应该在颜色深浅的基础上叠加数字标注，或者换成其他精度更高的图表类型。

5. 颜色种类

红色和蓝色之间没有大小关系。用颜色种类来表达数值高低，是图表设计里一种严重的误用。读者看到一排不同颜色的柱子，会自然尝试从颜色里寻找规律——这个颜色代表高？那个颜色代表低？但颜色种类根本不承载这个信息，读者在白费力气。

颜色种类正确的用途是区分类别：这条折线是 A 产品线，那条是 B 产品线；这组散点是 20 岁以下用户，那组是 20-35 岁用户。颜色告诉读者「这些点属于哪个组」，但不表达任何数量上的差异。

四. 回到那个初级设计师的问题

现在可以回答她了。饼图用角度表达数据，柱状图用长度表达数据。角度的判断精度远低于长度的判断精度。同样的五个数字，饼图让人眼做角度判断，柱状图让人眼做长度判断。人眼在长度判断上更擅长，所以柱状图读起来更准确、更省力。

📊 【对比图待补充】 建议并排展示以下两种图表： 图表A：用同一组数据（五条产品线的季度营收）制作的饼图，五个扇形颜色各异，角度差距细微 图表B：同样数据制作的横向条形图，按数值从大到小排列 对比重点：让读者感受到在饼图里「哪条产品线最差」需要反复比较扇形，而在条形图里最短的那根一眼就能找到

这不是「柱状图更好」的结论，而是「柱状图在这个任务上更合适」。饼图有它适合的场景——那个场景不是「比较五个数值的大小」，而是「展示一个明显占主导的部分在整体中的比例」。如果只有两个分类，一个占 70%，另一个占 30%，饼图能让读者直觉感知到「这个占大多数，那个只占小部分」，这个任务不需要精确判断，角度足够了。

五. 选图表的第一个问题，不是「这组数据适合哪种图」

拿到数据想做图表，很多设计师的第一个问题是「这组数据适合做什么图」。这个问题问得不够准确，正确的第一个问题是：读者看完这张图，需要得出什么结论？这个结论需要多高的判断精度？

需要比较各类别的大小，而且需要看清楚差距有多明显——这个需求要求高精度判断，用长度编码，柱状图或横向条形图。

需要感知某个指标随时间的变化趋势，关注的是增长还是下降，以及变化的速度——这个需求不需要精确读出每个时间点的数值，用折线图的斜率编码更直接。

需要看两个变量之间有没有相关性——散点图用位置编码，让读者感知点的分布方向，有没有随着 x 增大 y 也增大的趋势。这个结论不需要精确读出每个点的坐标，位置的相对分布就够了。

需要看某个指标在地理区域上的分布，哪些省份集中、哪些省份稀疏——这个需求可以接受模糊判断，颜色深浅配合地图，视觉直觉能给出足够的答案。

同一组数据，换一个问题，图表类型可能就要换。一份用户年龄分布数据，如果问「各年龄段的用户数量各自有多少」，用直方图或柱状图；如果问「用户年龄主要集中在什么区间」，用箱线图或密度图；如果只想感知「年轻用户多还是老用户多」，一条简单的平均值线加分布标注也可以解决。

六. 同一组数据可以有多种视觉编码，选择的是让读者关注什么

同样是「五个城市的季度销售额」，可以做成竖向柱状图，可以做成横向条形图，可以做成气泡放在地图上，可以做成有颜色深浅的表格。这些方式传达的侧重点不同。

竖向柱状图：读者的注意力在「五个城市各自是多少、谁高谁低」。

气泡地图：读者的注意力在「哪个地区的销售额集中、地理上的分布格局是什么样的」。

颜色深浅表格：读者的注意力在「哪些城市在哪些季度表现突出，有没有规律」——表格能同时展示城市和季度两个维度，颜色深浅帮助快速定位高值区域。

如果一张图试图回答所有这些问题，通常会变成一张信息过载、读者不知道该看哪里的图。设计师的工作是选择一个最重要的问题，为这个问题选择最合适的视觉编码方式，让读者在看图的前几秒就能得到答案。

七. 颜色的额外陷阱：装饰 vs 信息

设计师拿到一张柱状图，习惯性地给每根柱子配一种颜色，觉得这样「更好看」。但视觉编码理论告诉我们：颜色种类是一种信息通道，它承载的信息是类别区分。当每根柱子都是不同颜色，读者的视觉系统会自动尝试从颜色差异里找规律：这个颜色代表什么特别的含义？为什么绿色的柱子在这里？

如果颜色没有任何含义，只是装饰，读者在无效地消耗认知资源，而且会隐约感到困惑。好的图表不让读者做任何无意义的解读工作。

颜色在图表里正确的用法有两种：一是区分系列（这条折线是 A 产品，那条是 B 产品），二是高亮重点（五根柱子用灰色，需要读者关注的那根用蓝色）。用颜色「装饰」同一系列的多个数据点，是把一个信息通道用于传达「没有信息」，结果是增加噪音。

八. 视觉编码是所有图表规则背后的原因

理解了视觉编码的可靠性排序，后面很多图表规则就有了来处。

「柱状图的 Y 轴必须从零开始」——因为柱状图用长度编码，Y 轴截断会改变柱子的实际长度，直接破坏了视觉编码的准确性。折线图为什么可以不从零？因为折线图传达的是斜率（变化速度），不是绝对长度，Y 轴截断不改变斜率，不破坏折线图的视觉编码。

「饼图不能超过五六个分类」——因为饼图用角度编码，分类越多，每个扇形的角度越小，角度判断的误差越大，小扇形几乎完全不可读。

「气泡大小要按面积计算，不能按半径」——因为气泡用面积编码，半径和面积不是线性关系，按半径设置大小会引入额外的误差。

「热力图要配色阶说明」——因为颜色深浅的判断本来就不精确，如果没有色阶帮助读者把颜色值对应到具体数字，颜色深浅只能传达「大概的高低」，不能传达任何精确信息。

这些规则都不是凭空而来的，都是视觉编码可靠性在具体图表类型上的应用。记住规则没用，理解原因才能在面对新情况时做出正确判断。