5.10

View in English

5.10 数据可视化设计

概述与动机

一张图表是用墨水写成的论证。当你绘制数据时,你实际上是在选择读者会首先注意到什么、会比较什么,以及在移开视线前的两秒钟内会得出什么结论。做得好,一个难题就会自己给出答案:趋势一目了然,异常值跃然纸上,两组数据的差异清晰可辨。做得不好,同样的数据就会误导、混淆,或者干脆让人厌烦,而原本应由它支撑的决策,最终只能凭感觉做出。数据可视化是一门设计技艺,它把数字转化为图像,让人们能够看清数字背后的含义。

本章讲的正是这门技艺:选择正确的图表类型、诚实地编码数据、运用色彩和布局让视线落在该落的地方,并让整体保持可访问。它被放在第 5 部分中,是因为图表本身就是一种界面,继承了本部分其他内容的一切。它建立在 5.1 章用户体验(UX)基础之上,从 5.2 章的设计系统中借用设计令牌和组件,必须满足 5.3 章的无障碍义务,并使用 5.4 章内容设计中那种朴素、有明确目的的语言表达。它刻意不涉及底层管道:分析和商业智能(7.3 章)的数据管道、数据仓库和报表工具是另一个主题,7.5 章更广泛的决策科学和数据文化也是如此。在这里,你要学的是无论数据来自何处,如何把画面做好。

对于大型团队而言,这关乎协调与信任。当每个小组都各自设计自己的图表时,公司最终会积累出”营收随时间变化”的五十种方言,每一种都有不同的坐标轴、颜色和四舍五入方式,高管们也就学会了对所有这些图表都不信任。在企业场景中,一份误导性的仪表盘会把真金白银的预算引向错误的方向。在政府场景中,一张公开的图表是与公民之间的一次沟通行为,也关乎 10.16 章所讲的利益相关方沟通:一张公共卫生图表上被截断的坐标轴,可能会让数百万人陷入恐慌,或产生虚假的安心,而无障碍性也是一项法定义务,而非可选项。良好的可视化设计,正是数据赢得可信度的方式。

核心原则

  • 从读者的问题出发,再选择能回答这个问题的图表类型。
  • 将视觉编码方式与数据类型匹配:用位置表达精确比较,用色相表达类别。
  • 最大化承载数据的”墨水”占比;删除任何不承载数据的装饰。
  • 有意识地运用前注意属性,让视线首先落在重点上。
  • 依据数据角色(顺序型、发散型、分类型)选择调色板,并确保色盲友好。
  • 绝不单纯依赖颜色;要提供文字、结构和表格作为后备方案。
  • 如实呈现比例尺:不截断坐标轴、不使用误导性的面积、不添加无谓的双坐标轴。
  • 为洞见添加注释;不要让读者自己去挖掘重点。

建议

从问题出发,再选择图表

每一张好图表都始于一个问题,而不是一个数据集。在选定图表类型之前,先用一句话说清读者的问题,再把它对应到一种任务上。比较型问题(“哪个更大?“)需要条形图,因为条形长度落在同一条基线上,眼睛能毫不费力地对它们排序。随时间变化的趋势问题(“它在朝哪个方向发展?“)需要折线图,因为一条连续的线会被读作连续的变化。分布型问题(“数据是如何分散的?“)需要直方图或箱线图,它们能展示形状、集中趋势和异常值。部分与整体的关系(“每一部分各占多大比例?“)通常用堆叠条形图比用饼图表现得更好,因为人们比较长度的准确度远高于比较角度;只有当切分本身就是全部故事、且只有两三块时,才保留饼图。关系型问题(“这两者是否同步变化?“)需要散点图,它是唯一能一眼揭示相关性和聚类的图表。

这里的纪律是让问题来选择图表,而绝不能反过来。仅仅因为看起来令人印象深刻而选择的图表类型(一个炸开的 3D 饼图、一个雷达图、一个中间挖了个数字的甜甜圈图),是为了设计者自己的利益而做的决定,而不是为了读者。当一张表格能更快地回答问题时(一位只需要读取四行精确数字的读者,根本不需要图表),就用表格。只有当一幅图像能揭示出网格上的数字所隐藏的模式时,图表才有其存在的理由。

让视觉编码与数据相匹配

图表的工作原理是把数据映射到视觉属性上,而这些属性并非生而平等。数十年的感知研究对它们做出了排序。沿同一尺度的位置,是人类所拥有的最精确的感知通道,这正是为什么共享坐标轴上的条形和点在比较任务上胜过其他一切方式。其次是长度,然后是角度和斜率,再然后是面积,再然后是颜色深浅,最后是色相()色相在判断数量上几乎毫无用处,但在标注类别上却非常出色。把你最精确的通道,用在你最重要的数量上。

也要让通道与数据类型相匹配。定量数据(计数、金额、时长)应该落在位置、长度或顺序型色阶上。顺序数据(小、中、大)可以用有序的大小或由浅到深的色阶表示。分类数据(地区、产品线、党派)应该落在色相或形状上,绝不能用暗示某一类别”多于”另一类别的大小来表示。一个经典的错误是把一个类别编码成彩虹色,让读者的眼睛凭空想象出数据本不存在的顺序。让眼睛读到数量的地方承载数量信息,让眼睛读到身份的地方承载身份信息。

追求图表的卓越性:最大化数据墨水占比

Edward Tufte 为可视化设计提供了最清晰的设计伦理,值得内化于心。他提出的核心度量标准是数据墨水比:在页面上的所有墨水(或像素)中,究竟有多大比例真正承载了数据?其余的一切(厚重的网格线、加框的边界、投影、背景填充、冗余的图例、装饰性的 3D 效果)都是对读者注意力征收的一种税。Tufte 把这类装饰称为图表垃圾(chartjunk),他的指示直截了当:把它们抹去。把网格线调得几乎不可见,去掉图表边框,直接在数据旁标注,而不是强迫读者跑去查图例,让数据几乎独自呈现。一张图表完成的标志,不是再也没有什么可以添加,而是再也没有什么可以删除而不损失含义。

Tufte 的一个理念值得团队特别关注:小倍数图(small multiples)。与其把八个序列硬塞进一张缠绕不清的折线图中,不如在一个网格中画出八张小图,每一张都使用相同的坐标轴和比例尺,一个序列对应一张图。眼睛扫过整个网格,能立即发现那个与众不同的异类,因为每一格都可以直接比较。小倍数图把”太多线条读不清”变成了”一页可以一目十行浏览的内容”,其扩展能力也远胜于在单张已经超载的图表上不断堆叠更多颜色和更多图例条目。

运用前注意属性与视觉层级

有些视觉差异,会在有意识的注意力介入之前的一瞬间就被感知到,读者甚至无需”刻意去找”它们。这些前注意属性(一群灰点中的一个红点、一根更长的条形、一个在空间上被分离出来的项目)是引导视线的最有力工具。要有意识地运用它们。如果一张图表的重点是某个地区正在掉队,就为这个地区上色,把其余部分调成灰色;读者在读到标题之前,就已经看到了这个信息。如果一切都又亮又粗,那就等于什么都没有突出,因为对比是相对的,满屏的强调等于满屏的噪音。

这正是视觉层级在数据上的应用:决定读者应该首先注意到的那一件事,把你最强的信号用在那里。标题和注释用文字陈述结论。颜色和粗细指向证据所在。所有支撑性元素(坐标轴、网格线、次要序列)都退到灰色,让前景能够发声。一张没有层级的图表,等于是要求读者替设计者完成判断什么才重要的工作。

依据角色选择颜色,并确保色盲友好

颜色是最容易被误用的通道,因此要把它当作一个由三类构成的系统来对待。顺序型调色板在同一色相内由浅到深过渡,用于编码从低到高变化的数量(人口密度、营收)。发散型调色板由两种色相在一个中性的中点相遇,用于编码相对于某个中心的偏离程度(气温异常、盈亏围绕零点的波动、围绕中立立场的调查同意度)。分类型调色板是一组互不相同、没有顺序含义的色相,用于标注群组;应控制在大约七种颜色以内,因为超过这个数量读者就难以分辨。选错类别(用彩虹色表示一个数量,或用顺序型色阶表示无序的类别)会与读者的感知机制相冲突。

接下来要让它具备可访问性,因为大约每十二名男性中就有一人存在某种形式的色盲。红绿搭配是经典的陷阱:一张”红色代表差、绿色代表好”的图表,对最常见的色觉缺陷类型来说完全不可见。选择色盲友好的调色板(蓝到橙的发散配色方案,以及 ColorBrewer 等工具中经过充分测试的分类型配色集,都是安全的起点),并在发布前通过模拟常见的色觉缺陷类型来验证效果。也要检查对比度,确保文字和标记符合 5.3 章无障碍标准所要求的对比度。颜色应当强化一个即使没有它也依然成立的信息,而不是替代它。

不要单纯依赖颜色;提供替代方案

数据可视化中的无障碍性,远不止调色板的选择这么简单。Web 内容无障碍指南(WCAG)的核心规则是:颜色绝不能成为传达信息的唯一方式。因此要把颜色与第二种提示搭配使用:直接标注、散点图上不同的形状或标记、折线图上不同的线型(实线、虚线),或者在重点条形上添加文字标签。一位无法分辨你所用色相的读者,仍应能从这种冗余编码中获得完整的信息。

要提供真正的文字替代方案和后备方案。一张图表图像需要能陈述结论的 alt 文本,而不是”销售图表”这样的空泛描述,还需要一段更长的说明或标注趋势的说明文字。只要条件允许,就把底层数据以可访问表格的形式提供出来,这样屏幕阅读器用户和习惯看电子表格的分析师都能直接获得数字。这与 5.2 章”在组件层面一次性解决问题”的纪律如出一辙:构建具有正确角色、为交互元素提供键盘焦点、并内置表格视图的可访问图表组件,让每个团队都能继承无障碍性,而不必在每一个仪表盘上重新发明一遍。

明确你是在探索、解释,还是在监控

图表承担着三种不同的工作,混淆它们会产生糟糕的成果。探索性可视化是给你自己()分析师()用的,用于在数据中探寻有趣之处;它可以是快速、密集甚至不美观的,因为它的受众只有一位会不断迭代的专家。解释性可视化是给受众用的,用来传达一个你自己已经理解的具体发现;它是刻意为之的、带有注释的,并被削减到只剩单一信息,这属于 10.16 章讲故事技巧的范畴。仪表盘是第三种东西:一个持久的、一瞥即可读懂的显示界面,用于随时间监控已知的指标,其优化目标是”现在有没有什么地方出问题?“,而不是一次性的论证。

要让设计与工作相匹配。一张带有标题、突出显示单一序列的解释性图表,并不适合用作监控仪表盘,因为仪表盘的读者需要一眼扫过许多指标,并依靠一致的布局让眼睛记住这个版面。一个塞满叙事性注释的仪表盘,每天早上查看都会让人筋疲力尽。而一个充满原始图表的探索性笔记本,也绝不应该被当作一份解释性文档直接交给高管。先确定工作性质,设计才随之而来。

绝不误导:诚实的比例尺,诚实的面积

摧毁信任最快的方式,就是一张看起来诚实、实则说谎的图表。最常见的谎言是截断的坐标轴:把条形图的 y 轴起点设为 90 而非 0,会把一个 2% 的差异变成一道悬崖,因为条形长度不再与数值相对应。条形图必须始终从零开始;折线图编码的是变化而非量级,因此如果明确标注,可以使用非零基线。第二个陷阱是无谓的双坐标轴:一张图表上的两个 y 轴刻度,可以通过滑动比例尺来人为制造出任何你想展示的相关性,而读者往往察觉不到。应优先选用两张对齐的图表,或使用指数化视图作为替代。第三个陷阱是误导性的面积:当你同时按宽度和高度缩放一个图标或气泡来表示一个数值时,面积会按平方增长,极大地夸大了差异;应按面积缩放,而不是按边长缩放。

要把这些当作诚信规则,而不是风格偏好。一张图表是你要求读者信任的一项主张,上述每一种失真手法,都是在利用感知机制的弱点,把小事说大,或把不相关的事说成有关联。下文的政府和企业示例,展示了当受众是公众或董事会时,这种背叛的代价有多高昂。

为洞见添加注释,并谨慎地加入交互性

一张让读者自己去寻找重点的图表,只完成了一半的工作。要为它添加注释:用陈述发现的标题(“三月发布之后注册量翻了一番”),而不是陈述主题的标题(“注册量随时间的变化”);在关键事件上添加标注;为目标值或平均值添加参考线。注释正是 5.4 章的内容设计与图像相遇的地方;文字承载论证,标记提供证据。

只有当交互性能够回答一个真实的后续问题时,它才配得上一席之地。精确数值的工具提示、筛选到某个细分群体,以及深入到细节的下钻,在读者有静态图表无法承载的下一个问题时,都能派上用场。但交互性是有代价的:它把信息隐藏在悬停之后、在触屏和键盘用户上会失效,还可能把性能拖到爬行般缓慢。在 Web 端,要留意 5.6 章所说的渲染预算:数万个数据点需要用 canvas 或聚合视图,而不是数万个独立的文档元素。要让默认的静态视图讲清整个核心故事,再让交互去揭示其下的深度。

权衡取舍:优缺点

决策优点缺点
在产品内自建可视化完全掌控设计、无障碍性和交互消耗工程时间;性能和维护由你自己负责
使用 BI 工具自带的图表快速、低成本、已连接到数据仓库样式通用;无障碍性和注释控制能力有限
交互式图表能回答后续问题;可就地探索更慢、更难做到无障碍,打印和触屏场景下会失效
静态图表快速、无障碍、可打印、含义明确无法回答读者的下一个问题
仪表盘可一瞥即得地监控多项已知指标不适合一次性的论证;容易诱发指标泛滥
解释性图表有力地传达单一信息不适合监控或开放式探索
丰富的色彩与效果吸引眼球;显得精致图表垃圾;损害数据墨水比和无障碍性

反复出现的张力是表现力与诚实性、清晰性之间的取舍。每一项让图表更丰富的功能(第二根坐标轴、色彩渐变、3D 透视、动画)也同时增加了一种误导或掩盖重点的方式。解决办法是默认从简:用最少的颜色、诚实的比例尺,做出能回答问题的最简单图表。只有在某个具体的读者问题确实需要时,才增加表现力,并且要清醒地承担由此带来的无障碍性和性能代价。另一个长期存在的取舍是自建还是采购。BI 工具能在几分钟内把图表呈现在屏幕上,是内部监控场景的正确选择;而嵌入面向客户产品中的可视化,通常需要只有专门构建的组件才能提供的设计、无障碍性和性能控制能力。

与团队讨论的问题

  1. 我们的图表是否共享同一套视觉语言,还是每个团队都在各自发明一套? 当每个小组各自选择自己的颜色、坐标轴惯例、四舍五入方式和图表类型时,组织就会积累出悄悄侵蚀信任的各种方言:两个仪表盘展示”活跃用户”,却使用不同的比例尺和不同的绿色,这会让高管们学到一个教训()这些数据不可信。带上三个来自三个不同团队、展示同一指标的图表,把它们并排放在一起。你找到的差异(这里一个被截断的坐标轴,那里一片彩虹色的类别,一处营收单位是千,另一处是百万)正是建立一个共享图表组件库的理由()统一约定的调色板、默认的坐标轴规则,以及内置的无障碍性,并像 5.2 章的设计系统一样进行治理。目标是让公司里任何一张图表都能被一眼正确读懂,因为大家共享同一套语法。

  2. 我们最重要的图表,能经受住色盲读者和屏幕阅读器的考验吗? 数据可视化中的无障碍性很容易被忽略,因为对制作图表的人来说,图表看起来一切正常,而这正是陷阱所在。找出领导层最常看到的三张图表,把它们放进色盲模拟器中检验,然后关掉屏幕,只用 alt 文本和任何表格后备方案来尝试理解它们。如果一张红绿状态图变得无法分辨,如果 alt 文本只写着”图表”再无其他,或者如果没有鼠标就无法获取底层数字,那你就发现了一群目前正被排斥在外的读者()在公共部门的工作中,这在 5.3 章所述标准之下还构成法律风险。决定由谁负责修复,以及这项修复是否应当放进一个共享组件中,做到一次解决、处处生效。

  3. 对于每一张驱动决策的图表,我们能否说清它回答了什么问题,并确认它没有误导读者? 许多图表之所以存在,只是因为曾经有人做了它,而不是因为它回答了一个当下真实存在的问题,而其中一些被看得最多的图表,在没有人察觉的情况下扭曲了比例尺。逐一审视你们主仪表盘上的图表,为每一张明确它服务于哪个决策,并检查它的诚信程度:条形是否从零开始、是否存在无谓的双坐标轴、面积是否按诚实的方式缩放、标题是否陈述了发现而非仅仅是主题。回答不了任何当前问题的图表,应被列为删除候选;而存在误导的图表,则应被列为紧急修复候选,因为一张悄悄夸大差异的图表,比根本没有图表更糟。这与 7.5 章的决策文化直接相关:一个信任自己图表的团队,能做出更快、依据更充分的判断。

  4. 当一个团队需要一张图表时,我们是先想到 BI 工具自带的图表,还是先想到一个受治理的组件库,又由谁来决定? 倾向 BI 工具的拉力是真实存在的:它快速、低成本,而且已经与数据仓库连接好了,因此大多数监控类仪表盘确实应该用它。但它的通用默认设置正是方言和图表垃圾滋生的地方,它的无障碍性和注释控制能力通常也较弱,而这一点对承载你声誉的面向客户和公众的图表而言尤为重要。对大型组织来说,危险在于这个默认选择从未被真正决定过,于是每个团队都漂向最省事的做法,整个技术资产也就随之碎片化。带上一份当前图表实际是在哪里构建出来的清单,几个 BI 工具与专门构建组件的并排对比示例,以及各自存在的无障碍性缺口。在企业和政府场景中,还要纳入采购层面的现实:你们往往会被锁定在同一个 BI 平台上长达数年,因此要在签合同之前()而不是之后()就清楚知道它能诚实、无障碍地渲染哪些图表,哪些需要一个受治理的组件来补足。

  5. 谁有权把一张图表发布给外部或高管受众,它首先要经过怎样的审查? 自助式分析是一件真正的好事,但这也意味着一张误导性的图表,可能未经第二双眼睛的审视就直接送到董事会或公众面前,而一个公开图表上被截断的坐标轴或没有标注的骤增点,事后纠正要比事前预防困难得多。这里的张力在于速度与自主性,对上诚信与信任:把关太严,人们就会绕过你;把关太松,你就会发布出一张让市场或选民陷入恐慌的图表。带上你们最显眼的图表当前的发布路径、曾经未经审查就触达外部受众的例子,以及图表本身是否标注了方法和不确定性的证据。在公共部门和受监管的工作中,这一点尤为尖锐:一项官方统计数据是与公民之间的一次沟通行为,也关乎 10.16 章所讲的利益相关方信任,因此要明确由谁签字批准、他们采用怎样的诚信与无障碍性检查清单,以及当一张图表造成误导时问责归于何处。

  6. 我们在哪些地方加入了交互性,去掉鼠标之后,默认的静态视图是否仍能讲清整个故事? 交互性既诱人又昂贵:它把数值隐藏在悬停之后,在触屏和键盘用户上会失效,并且正如 5.6 章所警告的,在大数据集上可能把渲染预算拖到爬行般缓慢。与之相抗衡的考量是,一个真实的后续问题(一个精确数值、一次下钻、一个筛选出的细分群体)有时确实值得付出这个代价,因此目标是克制,而不是禁止。带上你们发布的交互式图表清单、去掉鼠标以及在手机上尝试每一个图表的结果,以及当数据增长到数万个点时的性能数据。对企业和政府受众而言,无障碍性这个角度在 5.3 章所述标准下是一项法定义务,图表会在信息亭、打印件和辅助技术上被阅读,因此静态的、带注释的默认视图必须承载核心信息,交互只能在此之上增添深度。

行业视角

初创企业。 速度制胜,因此要依靠你们 BI 工具自带的图表,或一个轻量级的图表库,而不要构建一整套你们无力维护的可视化组件资产。有一个成本很低、却会在日后带来回报的决定:从第一天起就选定一套色盲友好的调色板,并养成条形图从零开始的习惯,这样在你们还没有十个客户之前,就不会为同一个指标积累出十几种方言。相比一个你没有时间做到无障碍的交互式图表,更应优先选用能陈述结论的静态注释图表。

小型企业。 没有数据专家,预算也紧张,因此应把可视化当作你们已经付费使用的工具自带的功能来看待:电子表格、分析类 SaaS、CRM 里的仪表盘。学会那几条真正重要的诚信规则(条形图从零开始、数量不要用彩虹色、饼图不要切成九块),并采用一套现成的色盲友好调色板,而不是定制一套。买图表,而不是自建,把注意力留给正确地解读它。

企业。 这里的问题在于如何在众多团队之间保持一致性,因此要像对待设计系统一样治理可视化:一个共享的图表组件库,包含约定好的顺序型、发散型和分类型调色板,诚实的坐标轴默认设置,标准的数字格式,并内置无障碍性。在 8.1 章所述的交付流水线中,用视觉回归和诚信检查来强制执行这些标准,这样一张截断坐标轴或对比度不达标的图表会在发布前就被拦截。收获在于,任何团队产出的图表都能被一眼正确读懂,领导层也不再需要追问该相信哪个版本的数字。

政府。 每一张公开图表都是一次沟通行为,需要接受公共问责,因此诚实的比例尺和 WCAG 无障碍性是义务,而非可选项。要强制要求条形图从零开始、面积按面积编码、使用色盲友好的调色板、标题使用陈述发现的平实语言,并在每张图表旁提供一份可下载的可访问表格。在图表本身上标注方法和不确定性,这样一个有争议的数字就不会被简化成一条误导性的头条标题,并确保你们采购的任何 BI 工具都能满足这些标准,因为这项义务由你们承担,与供应商无关。

示例

初创企业。 一家十人规模的分析类初创公司发布了一个面向客户的使用情况仪表盘。第一个版本使用了一个 BI 工具的默认主题:一片彩虹色的类别、随处可见的网格线,以及一个切成九块、没人能看懂的饼图。用户反映这些数字让人感觉不可信。团队将其重建为嵌入式组件,采用一套小型的色盲友好调色板,用一个排序后的条形图替换了饼图,把网格线调淡,并添加了直接标注,使图例不再需要。他们把标题改成陈述发现的方式,并为每张图表添加了 alt 文本和表格切换功能。仪表盘的参与度随之上升,因为客户终于能够一眼看懂它,而这种更简洁的设计也成了演示中的一个卖点。

企业。 一家跨国银行拥有数十个团队构建的数百个内部仪表盘,每一个都有自己的颜色和坐标轴习惯,高管们也早已习惯对它们不信任,因为同一个指标在每一份演示文稿中看起来都不一样。公司在其 BI 平台之上引入了一个受治理的图表库:约定好的顺序型、发散型和分类型调色板;一条条形图坐标轴必须从零开始的硬性规则;标准的数字格式;以及内置在每个组件中的无障碍性。8.1 章所述交付流水线中的一项视觉回归检查,会拦截违反标准的图表。一年之内,任何团队产出的图表都能被一眼正确读懂,领导层也不再追问”这个数字我该相信哪个版本?”

政府。 一家国家统计机构发布关于经济、卫生和人口的公开数据,其图表的读者包括记者、政策制定者,以及无法自行核实底层数字的公民。该机构把每一张图表都视为与公众之间的一次沟通行为,也视为 10.16 章所讲的利益相关方信任问题。它强制要求诚实的比例尺(条形图从零开始、不使用误导性的双坐标轴、面积按面积编码)、用于区域比较的色盲友好发散型调色板、陈述发现的平实语言标题,以及在每张图表旁提供一份可下载的可访问表格以满足 WCAG 要求。当发布一个有争议的数字时,注释会在图表本身上解释方法和不确定性,这样一个被截断的坐标轴或没有标注的骤增点,就永远不会变成一条侵蚀公众信任的误导性头条。

商业案例:动机、投资回报率与总体拥有成本

良好可视化设计带来的回报,是更快、更好的决策,以及更少代价高昂的错误。一个能一眼揭示问题的仪表盘,缩短了从信号到行动之间的时间;一张诚实的图表,则能防止预算追逐一个由被截断的坐标轴人为制造出来的幻象。这些收益很难体现在发票上,但它们是真实存在的:每一次为该相信哪张图表而争论不休的领导会议、每一个建立在被误读趋势之上的战略,以及每一个因为你们产品的分析功能难以读懂而流失的客户,都是清晰设计能够消除的成本。在图表驱动真金白银的场景中,就像银行的例子一样,可信赖数字的价值,远远超过把它们做好所花费的成本。

采纳这套做法的成本大多是一次性的、共担的。你们要确定约定好的调色板、坐标轴和格式规则以及无障碍性默认设置,然后把它们编码进一个图表组件库中,让各团队继承它们,而不必在每个仪表盘上重新决定一遍。持续的拥有成本是真实存在的,但相对适度:维护这个库、随着标准演进保持其无障碍性,并抵制一次性定制图表的蔓延。忽视这一点的代价会悄悄累积:不一致、具有误导性、无法访问的图表会侵蚀人们对你们全部数据的信任,在受监管和公共部门场景中招致法律风险,并把人们推回原始电子表格,从而浪费掉你们在 7.3 章所述分析技术栈上的全部投入。要向领导层论证时,把可视化质量与他们已经在跟踪的成果挂钩:决策速度、对报告的信任度,以及在公共部门中的无障碍合规性。

反模式与陷阱

  • 被截断的条形图坐标轴: 让条形从零以上开始,使一个微小的差异看起来像一道鸿沟;这是最常见的图表谎言。
  • 无谓的双坐标轴: 一张图表上的两个 y 轴刻度,通过滑动来人为制造出作者想要展示的任何相关性。
  • 误导性的面积: 按边长缩放一个图标或气泡,使其面积、以及被感知到的数值按平方增长。
  • 用彩虹色表示数量: 用无序的分类色相来编码一个有序的数量,使眼睛无法读出量级。
  • 切分过多的饼图: 超过三块,迫使读者比较他们无法准确判断的角度;应改用排序后的条形图。
  • 图表垃圾: 厚重的网格线、边框、3D 效果和投影,会降低数据墨水比,掩盖真正的信号。
  • 仅用颜色作为唯一提示: 没有标签或形状的红绿状态图,对色盲读者和屏幕阅读器用户来说都是不可见的。
  • 满世界找图例: 迫使读者跑去查一个远处的图例,而实际上在折线或条形上直接标注就足够了。
  • 一切都被强调: 每个序列都又粗又亮,导致对比度崩溃,没有任何东西真正突出。
  • 本该用表格却用了图表: 用一张图片来呈现读者需要精确读取的四个确切数字。

成熟度模型

  • 第 1 级,启动: 图表是随手用手边的工具临时制作出来的。颜色、坐标轴和格式因作者而异,截断的坐标轴和彩虹色类别很常见,无障碍性从未被考虑过,读者也不信任由此产生的结果。
  • 第 2 级,发展: 一些团队开始采用基本的实践,但在组织内部并不一致。有些地方条形图从零开始,明显的图表垃圾在评审中会被劝阻,少数团队有一套内部调色板,但走廊另一端的团队仍在发布一个九块的饼图和一张红绿状态图。
  • 第 3 级,标准化: 一个共享的图表组件库中编码了约定好的顺序型、发散型和分类型调色板,诚实的坐标轴规则,标准的格式,以及无障碍性(色盲友好、alt 文本、表格后备方案)。这些标准已在全组织范围内形成文档并得到落实,解释性、探索性和仪表盘用途在设计上被明确区分开来。
  • 第 4 级,管理: 可视化质量相对于基线被度量和控制。无障碍性和图表诚信检查会在交付流水线中运行并汇报通过率;条形图从零开始、颜色符合对比度要求,以及具备表格后备方案的图表占比被作为一项指标持续跟踪;理解度会针对真实读者进行测试并与基线比较;每项关键指标存在的不同方言数量也会被持续关注,并趋向统一。违反标准的图表会在发布前被拦截,决定图表库需要改进之处的是数据,而不是主观意见。
  • 第 5 级,编排: 可视化实践在整个组织中持续改进并深度融合。标准会随无障碍性要求和读者需求的变化而调整,调色板、组件和惯例依据实测证据不断优化,注释和叙事已成为常态,这一实践与分析和决策文化融为一体,使得任何团队产出的图表都能被一眼正确读懂,视觉语言也随组织的学习不断演进。

讨论思路

  1. 如果你们主仪表盘上的某张图表坐标轴从零开始,它看起来会有什么不同,这会改变它所讲述的故事吗?
  2. 选出你们最重要的一张图表:它的信息在灰度模式下是否依然成立?如果不成立,需要添加什么冗余提示来修复它?
  3. 在哪些地方,你们使用了交互式图表,而一张静态的、带注释的图表本可以更快地讲清整个故事?
  4. 你们图表的标题陈述的是发现,还是仅仅是主题?如果某个头条数字悄悄反转了,谁会注意到?
  5. 你们的哪些图表回答不了任何当前的决策问题,要在没有人察觉的情况下删除它,需要做些什么?
  6. 一个团队什么时候应该在产品内自建可视化,什么时候应该使用 BI 工具,你们是否有一条成文的选择规则?

关键要点

  • 从读者的问题出发,再选择图表:比较用条形图,趋势用折线图,关系用散点图,分布用直方图,部分与整体的关系用排序条形图而非饼图。
  • 让编码方式与数据相匹配:把位置和长度用在你最重要的数量上,把色相用于类别,绝不用于表示量级。
  • 追求图表的卓越性:最大化数据墨水比,删除图表垃圾,使用小倍数图,并用前注意对比度和清晰的层级引导视线。
  • 把颜色当作一个系统(顺序型、发散型、分类型)来对待,确保色盲友好,绝不单纯依赖颜色;要提供标签、alt 文本和表格后备方案。
  • 如实呈现比例尺(条形从零开始、面积诚实、不添加无谓的双坐标轴),为洞见添加注释,只有在一个真实的后续问题确实需要时,才加入交互性。

参考文献与延伸阅读

  • Edward R. Tufte,The Visual Display of Quantitative Information
  • Edward R. Tufte,Envisioning Information
  • Stephen Few,Show Me the Numbers: Designing Tables and Graphs to Enlighten
  • Stephen Few,Information Dashboard Design: Displaying Data for At-a-Glance Monitoring
  • Cole Nussbaumer Knaflic,Storytelling with Data: A Data Visualization Guide for Business Professionals
  • Alberto Cairo,The Truthful Art: Data, Charts, and Maps for Communication
  • Alberto Cairo,How Charts Lie: Getting Smarter about Visual Information
  • William S. Cleveland,The Elements of Graphing Data
  • Jacques Bertin,Semiology of Graphics: Diagrams, Networks, Maps
  • Tamara Munzner,Visualization Analysis and Design
  • Cynthia A. Brewer,ColorBrewer: Color Advice for Cartography(colorbrewer2.org)
  • World Wide Web Consortium(W3C),Web Content Accessibility Guidelines (WCAG) 2.2