设计师的数据可视化:如何做出真正能传达信息的图表

大多数产品仪表盘都是噪音。十二张图表、六套配色、没有清晰的层级,用户还得逐张研究才能弄明白它到底在衡量什么。团队管这叫数据驱动,然后上线了。用户管这叫看不懂,然后无视它。

这篇文章是实战版本。真正能传达信息的图表类型、在小尺寸下依然成立的色彩规则、让用户三秒内理解数据的层级决策,以及保证作品可用的无障碍底线。没有 D3 教程,没有图表画廊,只讲真实产品里数据可视化的设计纪律。

数据可视化到底是什么

数据可视化是把数字编码成形状,让眼睛比大脑读文字更快地完成比较。 柱状图把一列数字变成一组矩形,眼睛能瞬间比较它们的高度。折线图把时间序列变成一条斜率,眼睛把它读成一个故事。编码就是全部工作。

糟糕的图表,就是编码和数据打架的图表。十一块扇区的饼图,编码出来的东西眼睛根本没法比较。3D 柱状图先编码了数据,又为了视觉效果把编码扭曲。双轴折线图把两个故事编码得像一个故事。每一种都是设计的失败,不是数学的失败。

视觉层级设计那篇讲的是眼睛如何阅读静态页面。数据可视化,就是把层级用在数字上。

为什么产品中的数据可视化设计很重要

大多数产品界面,每屏只有一两条信息。仪表盘却有几十条。没有设计纪律,仪表盘就会变成一堵互相争抢的信号墙,用户找不到真正重要的东西。

数据可视化的失败方式也和其他设计不同。按钮颜色不对,只是难看。图表类型不对,是误导。用户根据自己以为图表说的内容做决定,而图表说的是另一回事。误导性图表的代价是错误的决策,而不只是难看的美学。

到了 2026 年,每个产品界面的数据量都比五年前更大。AI 功能会展示模型置信度、使用指标、成本拆分。分析类界面到处都是表格和图表。对任何比单一用途应用更复杂的产品来说,能搭建数据可视化系统的设计师现在都至关重要。

---

选对匹配问题的图表

选图表占数据可视化工作的 80%。选错了,再多的打磨也救不回来。选对了,设计几乎自己就完成了。

覆盖大多数产品工作的五大图表家族

大多数产品数据可视化都落在五大图表家族里。掌握这些,90% 以上的仪表盘工作就变成例行公事。

如果屏幕上的图表对不上其中任何一个,用户多半不知道它在回答什么问题。要么把图表改成匹配问题,要么改掉所问的问题。

什么时候用单个数字

产品设计中最被低估的图表,就是不用图表。一个大数字加一个标签和一个对比(“收入:$124,500,较上月增长 12%”),传达的信息比大多数十二张图表的仪表盘还多。

以下情况使用单个数字:

• 用户只关心最新数值,不关心趋势
• 趋势已经由对比语境暗示了
• 屏幕空间有限(移动端、侧边栏、状态栏)

一个粗体排版、标签清晰的单个数字,视觉分量非常大。如果把一半图表换成单个数字,大多数仪表盘都会更好。

什么时候用小多图

小多图是同一种图表类型针对不同类别重复排成的网格。当用户需要比较多个项目之间的模式,而不是绝对数值时,就用它。

一个由 12 条迷你折线组成的网格展示各地区收入,扫读起来比一张画了 12 条互相交叉的线的图表快得多。眼睛先单独读每个地区,再比较整个网格里的形状。这项技巧来自 Edward Tufte,在产品仪表盘中依然用得太少。

上限大约是每个视图 16 到 20 个小多图。超过之后,眼睛没法全部比较,网格就变成了壁纸。

---

在产品中几乎永远行不通的图表

有些图表类型之所以长盛不衰,是因为它们在截图里看起来很唬人。在真实产品里,它们几乎从来传达不好。见到就砍掉。

超过三块扇区的饼图。 超过三四块扇区,眼睛就无法准确比较角度。改用堆叠条形图或树图。饼图只适用于两块扇区的比例(是/否、开/关),几乎别无他用。

3D 柱状图。 第三个维度会扭曲编码。前面的柱子看起来比实际大,后面的柱子看起来比实际小。永远用 2D。

双轴折线图。 一张图上有两个 y 轴,暗示这两条线应该被比较,但这种比较毫无意义,因为每个轴的刻度不同。用户读出了并不存在的相关性。要么拆成两张图,要么在一个轴上使用指数化数值。

中间带标签的环形图。 环形图就是多费了力气的饼图。里面的标签往往重复了屏幕上已有的信息。改用单个数字加一个小柱状图。

词云。 它们看起来像数据,却什么也传达不了。字号和频率只是松散相关,眼睛无法准确比较大小,而且更长的词因为像素更多看起来更大。见到即砍。

雷达图。 适用于非常特定的比较(同一刻度上的多维评分),但几乎总被误用于一般性比较。眼睛无法比较不规则多边形的面积。如果图表不是用于某个明确已知的场景,就用柱状图。

---

数据可视化中的色彩

数据可视化中的色彩不是装饰。它是编码的一部分。选错颜色,就能让图表从清晰变成误导。

色彩的三种用途

图表中的每一种颜色,都在做三件事之一:

分类色 用来区分没有顺序的离散类别。每个地区、每个产品、每个客户分群各用一种不同的色相。使用 6 到 8 种有区分度的色相。超过 8 种,眼睛就会开始混淆相近的颜色,编码随之失效。

顺序色 表示沿单一维度排列的有序数值。由浅到深,由低饱和到高饱和。使用单一色相的渐变,而不是多个。顺序色板通过明度而不是色相来传达量级。

发散色 表示围绕一个有意义的中点,从负到正变化的数值。红到白到蓝是经典例子。中点必须是真正的零点或阈值,而不是为了视觉方便。

三者混用会毁掉图表。用分类色板去编码量级,根本读不懂。用顺序色板去编码类别,令人困惑。为数据选对那一种。

设计师的色彩理论那篇讲了更广泛的色彩原则。色板词条讲了色板是如何构建的。

在小尺寸下依然成立的色彩规则

大多数图表配色,在图表真正所处的小尺寸下就失败了。一条 60 像素的迷你折线,没有足够的视觉空间清晰呈现八种分类色。

五条站得住脚的规则:

• 每张图表最多使用 6 种分类色。 超过六种,眼睛就放弃了。
• 留一种强调色给高亮。 用户应该最先看的那条线或那根柱,使用品牌色或高对比色相。其余全部压低。
• 压低次要数据。 背景、网格线、坐标轴标签用 40% 到 60% 的不透明度。前景数据用满饱和度。这种对比就是层级。
• 用单色测试。 把图表转成灰度,检查层级是否依然成立。如果图表只有靠颜色才行,说明颜色承担了太多工作。
• 用深色模式测试。 大多数产品图表需要在浅色和深色背景上都能用。同一个色相往往在深色上显得太饱和,在浅色上显得太寡淡。为每种模式做一套配对色板。

深色模式设计那篇讲了更广泛的深色模式纪律。图表是深色模式中最难做好的部分之一。

色盲并不小众

大约 8% 的男性和 0.5% 的女性有某种形式的色觉缺陷。大多数在设计师眼里看起来没问题的分类色板,对这些用户来说根本没法读。

解决办法是永远不要只靠颜色编码信息。把颜色和形状、位置、标签或纹理搭配使用。一张有三条彩色线的折线图,也应该在每条线上有直接标签。柱状图应该为用户需要比较的柱子加上数值标签。

用色盲模拟器测试色板。最常见的失败是红色和绿色对绿色盲(deuteranopia)用户无法区分。改用蓝色和橙色作为分类配对,它们在最常见的几种色觉缺陷下都能用。

无障碍色彩对比度那篇讲了对比度的底线。对比度词条讲了对比度是如何测量的。

---

图表中的层级

每张图表都有层级。用户的眼睛应该先落在数据上,其次是标签,最后才是网格线和坐标轴。大多数产品图表把这个顺序颠倒了,用户得费劲才能找到数据。

强调什么,压低什么

数据是主角。柱子、线条、点获得最强的视觉分量。满不透明度、满饱和度,合适时使用品牌色或强调色。

标签和标题是配角。强到能读清,但不强到和数据竞争。通常是数据视觉分量的 50% 到 70%。

网格线、轴线和刻度线是舞台。只有用户去找的时候才看得见。通常是标签视觉分量的 20% 到 40%。

大多数产品图表上线时网格线都是满强度,因为这是每个图表库的默认值。解决办法就是一条 CSS 覆盖,把网格线压低,图表立刻就从模板味变成了设计过的样子。

直接标注胜过图例

图表侧边的图例会迫使用户的眼睛在图例和数据之间来回乒乓。直接标在每条线、每根柱或每个区段上的标签,让用户一遍就能读完图表。

直接标注实现起来更难,图表库对它的支持也不好。照做就是了。一张三条线都在右端标注的折线图,可读性远高于同一张图把图例放在角落。

例外是系列太多,直接标签放不下。这时使用可交互的图例。悬停或点击图例项,就在图表中高亮该系列并压低其余。

---

三秒法则

产品中的每张图表都应该在三秒内回答它的问题。如果用户得研究图表,设计就失败了。

如何测试三秒法则

把图表给一个没见过这个仪表盘的人看。问“这张图告诉你什么?”给回答计时。

如果回答在三秒内出来,图表就有效。如果更久,就找出拖慢他们的原因。通常是以下之一:

• 图表类型和问题不匹配
• 层级颠倒(网格线比数据还醒目)
• 图例迫使视线乒乓
• 色彩编码不清晰
• 图表系列太多

修好问题,再测一次。每张图表都通过三秒测试的仪表盘,才是用户真正能用的仪表盘。

三秒法则不适用的情况

探索式分析工具(BI 工具、数据科学笔记本)不一样。用户不是在扫一眼,而是在调查。他们想要每个变量、每个维度、每个筛选器。三秒变成三分钟,这没问题。

错误在于用 BI 工具的纪律去做产品仪表盘。产品用户不是在调查,而是在查看。三秒就是预算。

---

数据可视化中的交互

产品 UI 中的图表是可交互的。悬停看提示框,点击做筛选,框选来缩放。这些交互需要和静态编码一样用心设计。

提示框设计

图表上的提示框回答的是“这个点的精确数值是多少?”大多数图表库默认的提示框会一次展示所有系列,悬停时就变成一堵文字墙。

更好的默认做法:

• 每个系列一个提示框,而不是所有系列。 悬停你关心的那条线,看到那条线的数值。悬停在图表背景上什么都不显示。
• 提示框包含单位。 是“$1,240”,不是“1240”。
• 提示框在有用时展示对比语境。 “$1,240(较上周 +8%)”让提示框变成一个故事。
• 提示框绝不挡住数据。 根据图表边缘与光标的接近程度,把位置放在光标上方或下方。

筛选与框选

支持直接操作的图表,给人的响应感是需要单独筛选面板的图表比不了的。在 x 轴上框选日期范围来缩放,点击图例中的类别来单独查看,拖动阈值线来筛选行。每一项都需要工程投入,但会换来用户的信任。

风险是过度工程。一张需要五种交互才好用的图表,就该拆成多张更简单的图表。每一种交互都是认知成本。

渐进式披露词条讲了更广泛的原则。图表可以用得很好:在用户表现出意图之前,先隐藏高级控件。

---

需要警惕的数据可视化失败

每次仪表盘审查都会发现同样的失败。如果产品上线时带着其中任何一条,数据可视化这一层就在拖整个产品的后腿。

截断 y 轴来夸大变化。 y 轴从 95 而不是零开始的柱状图,会把 2% 的变化变成一道视觉悬崖。除非有明确理由,否则使用完整范围的轴,并且明确标注任何截断。

柱状图没有零基线。 柱子的长度就是编码。如果柱子不从零开始,编码就在撒谎。这对柱状图没得商量。折线图在展示随时间的小范围变化时可以使用截断的轴。

同一个仪表盘里图表类型不一致。 两张柱状图用了不同方向,两张折线图用了不同的轴范围,一张饼图旁边摆着一张展示同样数据的堆叠条形图。为每个问题选合适的图表类型,但整个仪表盘的视觉处理要保持一致。

图表加载得比页面其余部分慢。 布局 200 毫秒就绘制出来、图表却要 2 秒的仪表盘,感觉就是坏了。为每张图表做骨架屏状态。对首屏以下的图表做懒加载。用流式传输数据,而不是等完整载荷。

无视品牌的图表。 使用图表库默认颜色的仪表盘,看起来就像模板。图表配色应该从品牌色彩系统派生出来,并针对无障碍和小尺寸可读性做调整。永远不要在生产环境上线带默认 Chart.js 或 Recharts 配色的仪表盘。

品牌色板那篇讲了更广泛的品牌色彩纪律。数据可视化色板是派生的,不是凭空发明的。

---

2026 年条件下的数据可视化

三种转变改变了数据可视化的设计方式。工作必须随之适应。

AI 几秒钟就能生成图表。 ChatGPT 和 Claude 这样的工具,一条提示词就能从原始数据生成图表。风险在于设计师不再思考图表选择,因为 AI 替他们选了。AI 几乎总是选一个和实际问题不匹配的通用图表类型。用 AI 做初稿,然后根据用户在问的问题重构。

实时数据成为默认。 仪表盘现在流式展示实时数据,而不是每 60 秒刷新一次。设计上的含义是,动效也需要设计。每次更新都闪烁的实时图表没法用。数据点之间的平滑插值和清晰的“实时”指示器是底线。

移动端仪表盘很常见。 只为桌面设计的仪表盘,会失去大部分周末和出行场景的使用。移动端的图表需要不同的决策,往往是更简单的图表类型、更少的系列、可滚动的更高布局,而不是被压缩的网格布局。

响应式设计那篇讲了更广泛的响应式纪律。数据可视化是最难做到真正响应式的层之一。

---

FAQ

我该用什么图表类型?

让图表匹配用户在问的问题。跨类别比较数值:柱状图。展示随时间的变化:折线图。展示整体的组成部分:堆叠条形图或树图(几乎绝不用饼图)。展示两个变量的关系:散点图。展示分布:直方图或箱线图。如果屏幕上的图表对不上其中任何一个,用户就不知道它在回答什么问题。

什么时候应该避免饼图?

几乎总是。饼图适用于两三块扇区、且比例就是全部故事的情况(是/否、开/关、简单的二元划分)。超过三块扇区,眼睛就无法准确比较角度,图表就变成了装饰。改用水平堆叠条形图或树图。

一张图表应该用多少种颜色?

最多六种分类色,外加一种强调色用于高亮的系列。超过六种,眼睛开始混淆相近的色相,编码就会失效。对于顺序数据(从低到高),使用一条由浅到深的单色相渐变。对于发散数据(从负到正),围绕一个有意义的中点使用双色相渐变。

如何让图表具备无障碍性?

永远不要只靠颜色编码信息。把颜色和形状、位置、标签或纹理搭配使用。用色盲模拟器测试色板(绿色盲最常见)。让图表元素与背景之间满足 WCAG 的最低对比度。尽可能提供直接标签,而不是只靠图例引用。为图表组件添加可供屏幕阅读器读取的无障碍名称。

图表的三秒法则是什么?

产品仪表盘中的每张图表,面对一个陌生用户时,都应该在三秒或更短时间内回答它的问题。如果用户得研究图表,设计就失败了。测试方法是把图表给一个没见过仪表盘的人看,并计时他们概括图表内容需要多久。超过三秒,就说明图表需要简化。

我该用图表库还是自己做?

初稿和原型使用图表库。产品 UI 中的大多数生产图表,都受益于在库之上加一层自定义来修正默认值:压低的网格线、直接标签、品牌化色板、自定义提示框。只有当图表类型特殊到没有任何库支持时,才有理由用 D3 或 canvas 做纯自定义的数据可视化。

数据可视化是设计,不是装饰

有纪律的数据可视化让仪表盘像一个尊重用户时间的产品。没有纪律的仪表盘,则像一堵恰好装着数字的装饰墙。两者之间的距离很小,通往前者的唯一道路,就是把设计纪律用在图表选择、色彩、层级和交互上。

选匹配问题的图表。压低网格线,突出数据。把颜色当作编码,而不是装饰。用三秒法则测试。用色盲测试。在移动端和深色模式下测试。

上线了有纪律的数据可视化的产品,读起来很专业。上线了图表库默认输出的产品,读起来像模板。用户即使说不出为什么,也能察觉到差别。

如果你想要一个在搭建产品 UI 的同时也搭建数据可视化系统的团队,雇用 Brainy。每个项目里,图表都是设计系统中的一等公民。

相关阅读

• 视觉层级设计
• 设计师的色彩理论
• 深色模式设计
• 无障碍色彩对比度