Rethinking Data Visualisation: A UX Approach To Dashboards That Actually Drives Decisions

重新思考数据可视化：采用用户体验方法打造真正推动决策的仪表盘 — Smashing Magazine

• Meriem Benhabiles

• 2026年8月26日

• 0条评论

重新思考数据可视化：采用用户体验方法打造真正推动决策的仪表盘

• 16分钟阅读

• 数据可视化 , UX , 设计

• 在Twitter上分享 , 在LinkedIn上分享

#### 作者简介

Meriem Benhabiles 是一位专注于用户体验设计的设计师，拥有五年以上在企业内部、广告公司和独立项目中的工作经验。她的背景是……更多关于 Meriem 的信息 ↬

#### 邮件通讯

每周前端与用户体验技巧。182,000+ 人信赖。

• 庆祝1000万开发者

• 与Stéphanie Walter一起探讨设计师的无障碍设计

• 与Samantha Gordashko一起探讨设计系统命名

• 智能界面设计模式，45节课+UX培训

• 与Rémi Parmentier一起构建现代HTML电子邮件

数据可视化位于两个很少交流的学科交汇处：数据和设计。许多仪表盘在技术上是正确的，但在沟通上却是惰性的。它们显示了正确的数字，却仍然无法产生决策、方向或思维方式的改变。Meriem Benhabiles 探讨了当将结构化的用户体验思维引入仪表盘和数据展示时会发生哪些变化，从在打开任何工具之前提出的问题，到决定洞察是否真正落地的决策。

在当今的组织中，数据从未如此容易获取。几乎每个职能领域（销售、产品、营销、运营）都有仪表盘和绩效报告，而构建它们的工具也从未如此易于获取。然而，在每周的站会和季度评审中，同样的事情却不断发生：有人分享了数据，房间里的人都点头，会议却在没有决策或明确方向的情况下结束。

当这种情况发生时，数据通常会被归咎。数据不够细致，数据集不完整，我们需要更多信息才能采取行动。但数据几乎从来不是问题所在。现实情况是，没有人设计数据来传递洞察。图表是基于可用的数据构建的，而不是基于需要回答的问题。受众被假设而非被理解，而看到这些数据后实际应该发生的变化——这个问题——从未被提出过。

数据可视化和用户体验设计正在解决同一个根本问题：两者都试图以改变某些事物的方式，将正确的信息传递给正确的人。它们的术语不同，但根本挑战是相同的。当你开始将它们视为互补的学科时，仪表盘将不再只是图表的被动集合，而是开始执行实际功能。

对于与数据合作的设计师、向非技术受众展示分析的分析师，以及需要让数据在幻灯片中发挥更多作用的营销人员来说，这篇阅读内容正是为你准备的。

图表从不是完整的故事

1973年，统计学家Francis Anscombe（PDF）发表了一篇论文，提出了一个安静但明确的观点。他构建了四个统计上完全相同的数集：相同的均值、相同的方差、相同的相关系数和相同的回归线。对这些数集中的任何一个进行计算，结果都完全相同。但将它们绘制出来时，它们的差异却显而易见。

Anscombe对统计学家的启示在于诊断：可视化揭示了原始数据所隐藏的操作真相。

安斯库姆四重奏：四个数据集具有相同的汇总统计量（均值、方差、相关系数），但生成了四个完全不同的散点图。（大型预览）

但可视化不仅仅是诊断工具；它也是沟通的媒介。你选择的呈现形式决定了理解的诞生或湮没于噪声之中。你的观众是带着数字离开，还是带着一个他们会引用和讨论的故事？

最引人注目的例子之一是Visual Capitalist的《瘟疫简史》。与其用庞大的伤亡数据表格淹没读者，它通过单条时间线上的比例气泡布局，将历史上重大瘟疫的死亡人数可视化。

Visual Capitalist的《瘟疫简史》：通过单条时间线上的比例气泡图，将历史上所有重大瘟疫的死亡人数进行可视化。在任何标签被处理之前，黑死病与其他瘟疫的规模对比已清晰可见。（大型预览）

在你的大脑读取任何数字之前，你的视觉系统已经把握了黑死病相对于页面上其他内容的绝对规模。恰当的可视化不仅绘制数据，更让故事无法被忽视。

爱德华·塔夫特通过其提出的“数据墨水比”原则，为这一领域确立了基础准则：图表上的每个标记都应服务于数据本身，而非装饰。这一框架至今仍是数据可视化领域广泛采用的标准，其核心假设是清晰度和视觉简洁性是最终目标。

对于孤立的图表而言，这确实成立。但图表永远不会被孤立阅读：它是由特定情境中的人，在特定压力下解读的。将图表简化到最干净的形式，你可能恰恰去除了决策者所需的上下文层级。简洁本身不是目标；适当的复杂度才是。

数据是一种信息，信号的强度完全取决于接收者是谁。

这引出了数据用户体验的核心原则：决定仪表盘成败的80%工作，大约在你绘制任何图表之前就已经完成。

这种依赖性是本文后续内容展开的主线。

在图表绘制之前发生的80%

这高杠杆的80%几乎永远不会在屏幕上发生。它发生在上游：在打开工具之前，在提取数据集之前，在做出任何设计决策之前。它归结为三个问题，一旦这些问题成为习惯，它们将改变你在每个项目初期注意到的内容、提出的问题以及坚持的立场。

• 背景：我们试图通过这些数据展示什么？这是在接触任何原始数据之前，定义可视化实际需要服务内容的阶段。明确写出精确的操作性问题，具体到足以确定需要提取和过滤的数据内容，这是产生辅助决策的仪表盘的关键。

• 受众：这是为谁准备的？他们如何思考？这是共情环节。了解房间里的人是谁、他们对什么负责、他们如何与数据互动，决定了可视化能承载的复杂度以及呈现方式。

• 洞察：这些数据落地后应该带来什么改变？一个决策、一个新方向、一种认知的转变。如果在设计阶段战略目标不清晰，仪表盘上线后这些目标将永远隐形。

背景：我们试图通过这些数据展示什么？

大多数数据密集型项目都以错误的方式开始：团队会提取内部分析工具已经追踪的指标，围绕这些指标构建可视化图表，而数据原本要回答的问题要么被默认忽略，要么根本没人提出。这仅仅是因为我们以眼前的数据为边界，误以为这是可能的极限。

优先定义目标听起来显而易见，但实践中很少有人能以必要的清晰度做到这一点。“展示产品表现”不是目标；“确定哪些功能能提高Q1注册用户的留存率”才是目标，因为它包含了前者没有的三个要素：一个指标、一个用户群体，以及一个隐含的行动。这种明确性将开放式的探索转化为可约束、可解答的设计问题。你从哪个起点出发，决定了后续所有内容：你包含什么、哪些对比重要、以及哪些内容会被完全忽略。

以现有数据为起点会产出一个无法回答特定问题的仪表盘，因为它从未被设计用来回答某个问题——所有数字都存在，但没有一个指向任何方向。以运营问题为起点则正好相反：屏幕上每个元素都占据其位置，因为它们的存在都是为了回答这个问题。

例如，考虑一个用户体验团队试图修复电商网站的漏斗式结账流程。数据优先的方法会提取所有可用数据，从点击到滚动深度和设备类型，最终生成一个庞大的仪表盘，却让所有人困惑地问：“好吧，但我们到底该改变什么？”情境优先的方法则从约束条件开始：“用户在结账流程的哪个环节流失？”通过过滤掉90%的噪音，团队构建了一个简单的漏斗图，立即发现支付页面存在瓶颈，并明确知道需要重新设计什么。

受众：这是为谁设计的？他们如何思考？

为受众设计归根结底涉及两个要素：责任性和熟悉度。

熟悉度涉及数据素养。他们是否能本能地解读图表？复杂的可视化是否会造成阻碍？将一个密集的多层仪表盘同时交给销售总监和高级分析师，就像给一个依靠地标导航的人和一个阅读网格坐标的人提供同一张地图。数据是准确的，但只有其中一人能真正有效使用它。

责任性决定了这种复杂性必须如何呈现。对于负责该数字的高管而言，显示12%下降的图表与仅仅报告该数字的分析师而言，其分量截然不同。理解你的受众意味着理解这种关系；当你的表现受到关注时，数据永远不会被中立处理。

熟悉度和责任性共同决定了一个实际问题：你能在某人面前呈现多少信息。

在数据可视化中，简洁性并非固定美德——合适的简洁程度取决于谁在阅读，以及他们需要做什么。

为分析师设计的高密度路径探索图（图A），展示粒度用户旅程流程，与为高管优化的简洁聚合概览图（图B），用于快速预算决策。（大图预览）

分析师依赖高密度环境进行诊断性探索。通过隔离单个行为节点并绘制原始用户流程，他们以原子级深度剖析数据，挖掘隐藏的洞察和影响未来活动表现的低效支出。

与高管不同，他们需要高度提炼的数据转化，以立即识别推动商业增长的关键因素。为受众定制仪表盘意味着调整信息密度调节器，以在特定受众的接受能力范围内传递最大价值信号。

洞察：数据落地后应发生哪些变化？

大多数数据项目都基于一个舒适但错误的假设：只要图表准确清晰，洞察就会自然产生。实际上，信息与洞察是完全不同的状态。信息是数据所展示的内容，而洞察则是某人看到数据后做出的具体决策、理解转变或方向调整。如果在设计开始前未明确预期的业务变化，仪表盘将默认采用被动报告模式，而非驱动行动。

每当核心业务指标突然暴跌时，营销和工程团队都会经历这种差距带来的危险。

为信息设计的仪表盘只会发出警报，展示一个追踪预订率骤降15%的图表。由于数据缺乏深度，管理层会陷入恐慌：他们立即联系UX设计团队，假设应用程序存在缺陷或结账流程存在问题。由于数据未能明确问题核心，这会引发代价高昂的误判应急响应。

为洞察设计的仪表盘会隔离做出明智决策所需的变量。与其展示单一的平铺式预订指标，可视化图表会将下降趋势与流量来源和活动发布进行对比——立即揭示出虽然应用程序性能和核心用户转化率完全稳定，但全站转化率因新扩展活动带来的大量低意图点击流量而被人为稀释。团队不会浪费时间重新设计功能正常的应用程序；他们获得的精准洞察正是暂停低效营销活动并调整获客策略所需的关键信息。

每个可视化都暗示着下一步行动，即使这一步是“目前无需改变”。关键在于设计是否能让观众明确识别出这一暗示。

从问题到仪表盘：项目实录

我在数据可视化领域的顿悟发生在为Pegasystems技能平台开发客户面向的B2B SaaS产品时。该平台专注于企业人才管理与能力跟踪，每天捕获大量遥测数据。项目需求非常开放："我们拥有大量用户活动数据存档，现在需要将其呈现给企业团队。"

我们本可以轻易地将所有捕获数据可视化，但如果用户最终只是面对一个数据坟场，这显然对终端用户毫无帮助。我的职责立即超越了纯粹的界面设计，转而成为为那些会频繁查看该仪表盘并需要其讲述真实、即时工作流故事的用户构建高度实用工具。

以下是项目实际推进过程：

背景

客户相信这庞大的数据池可以帮助用户表现更好，并希望打造一个真正实现这一增长的界面。将这种宏大愿景转化为具体可视化，需要定义性能的实用机制。哪些变量能表明进步与被动使用？"表现更好"究竟意味着什么？如何衡量它？

一个显而易见的候选指标是按产品划分的使用时长。每个平台都会追踪这一数据。它易于展示，也显得意义重大。但使用时长只是一个代理指标；它只能告诉你有人使用过产品，却无法说明他们是否从中获得了价值。

更具意义的信号是按领域划分的能力评分、认证完成率以及历史表现轨迹。将使用时长数据与这些绩效指标结合，增加了有价值的解读维度，帮助我们识别用户未充分利用的模块，以及这些模块的使用情况是否与低分表现直接相关。使用时长成为整个叙事中一个辅助性信号。

第二个问题是关于粒度级别的适当选择。相同的指标对不同的人来说权重可能完全不同。个人贡献者追踪自己的完成率时，需要知道自己是否节奏正确；而经理查看团队汇总数据时，需要明确知道哪些人需要立即支持。这种区分塑造了后续所有数据展示和过滤决策。早期明确界定这种结构性叙事，决定了究竟要向谁展示什么内容。

用户群体

这种设计最直接的方案会是可预测的：使用相同的图表，但提供个人视图和团队汇总视图。太多仪表板都依赖这种捷径，通过细微调整相同数据可视化图表的尺度并标注为“个性化”。

对用户群体进行真实分析会揭示更深层的差异。一线团队负责人和个体贡献者需要完全不同的叙事结构和设计原则。

我自己使用电子学习平台时，记得打开工具时缺乏对自己当前状态、核心优势或下滑指标的清晰认知，这种挫败感直接影响了个体贡献者工作区的设计。它需要成为一个高度定制的、自我导向的镜子，具备精细、诚实且个性化的特性。

相反，经理的界面最初需要跳过个人里程碑，以提供对团队弱点的宏观脉搏检查。它围绕着不同的运营现实进行设计：团队整体进展如何？持续存在的差距在哪里？该视图优先展示汇总画面，同时保留在需要时直观深入战术日常协调的路径。

洞察

我们的洞察策略在早期概念阶段就已确定，远早于绘制任何图表的线框图。我们有意放弃了构建密集的被动数据日志的想法，转而专注于叙事弧线的节奏控制。

对个体贡献者而言，核心价值是自主性，确保他们能在周一早上快速查看界面，立即获得本周明确的优先事项清单。

对经理而言，目标是彻底改变运营对话的时间节点，为他们提供必要的基准，以便在技能差距演变为关键项目失败之前及时干预。可视化需要揭示需要人工检查的精确时刻，将他们的工作流程从被动的事后分析转向主动指导。

这个比较工具是无人要求却成为亮点的功能。经理仪表盘和个人仪表盘的出现是显而易见的。更难实现的是：如果经理希望将两名特定团队成员的同一组指标并排对比，该怎么做？这种视图源于一个设计假设，最终却成为最能引起用户共鸣的功能。

这个项目中最重要的决策并未包含在最初的简报中——收集他们未曾想到要请求的数据，并构建结构来回答他们此前从未明确表达过的问题，这正是以用户为中心的数据战略的核心差异点。

#### 早期构建心智模型

可视化布局的选择必须遵循数据本身的几何特性。对于这个项目，核心设计问题是让个人用户只需一瞥就能回答特定问题：在八个不同的能力领域中，我的相对优势和差距在哪里？

为了解决这个问题，我们使用雷达图来映射数据。通过极坐标将多个变量分布在从中心点辐射出的轴上，界面将数据点连接成一个统一的形状。均匀平衡的多边形立即传达出全面的能力，而明显倾斜的形状则会立即吸引目光关注异常区域。

传统线性条形图会迫使用户扫描八个独立的条形并进行心理计算以比较差异，而同心圆径向布局则通过分层展示数据，使进度追踪和技能差距一目了然。当所有维度共享相同的刻度和评分方法时，雷达图不是非传统的美学选择——它是多维分析最实用的工具。

一个对比展示如何通过径向布局将多维技能映射为可立即识别的用户画像（图表B）。它直观显示用户1保持高度稳定且高于平均水平的基准线，所有能力均无低于50%的重大缺口，并在网络安全领域获得满分，同时立即暴露用户2明显倾斜的画像——在两个领域表现出色的同时，另外两个关键领域得分在25%或以下。（大图预览）

色彩系统的设定是另一个早期就做出的决策，而且是真正意义上的早期。在品牌设计阶段，三个产品各自被分配了一种颜色。这种颜色并未停留在品牌指南中，而是从一开始就构建进数据模型，贯穿每个图表、每个筛选条件、每个数据分解。当用户第一次进入仪表盘时，心智模型已经建立完成。他们并未被教导这种语言，却已经理解了它。

#### 变化之处

从被动信息向主动洞察的转变首先体现在仪表盘的实际使用方式上。根据内部报告数据，部署个性化仪表盘和并排团队对比工具后，平台分析功能的周活跃使用率显著上升。经理们不再每月打开工具获取静态报告，而是每周一早上主动使用它来规划整周工作。

收入和用户增长在接下来的两个季度也呈现出积极趋势，尽管——正如大多数单一项目成果一样——很难准确衡量仪表盘对整体变化的贡献。客户报告称，平台的流失率降至历史最低水平之一。最明确的成效证据来自定性反馈。管理者表示，他们不再需要在月度结束后用数据去分析“糟糕”的月份，可视化功能使他们能够立即发现绩效下滑，并在问题演变为实际差距前及时安排快速的支持性跟进会议。

结语

当可视化呈现被视作上游架构设计的选择而非下游格式化步骤时，数据设计才能发挥最大潜力。将结构化的用户体验思维引入数据领域，能使可视化转变为积极的决策引擎，确保每张图表、每份报告和每个指标都直接服务于人类需求：

• 上游定位：将每个可视化选择建立在特定的运营问题基础上，而非默认使用可用指标。
• 精准密度：根据读者的素养水平和责任范围，直接调整复杂度的层次。
• 以决策为导向的洞察：通过结构化数据揭示战略成果而非孤立统计数据，将可视化信号转化为即时的运营推动力。

下次当你需要创建数据可视化——无论是企业仪表盘、高管报告还是面向公众的信息图——请暂时离开设计画布和BI工具。将初始精力集中在屏幕背后的人类决策上。唯有如此，你的数据才能从被动记录过去的日志，转变为驱动未来方向的引擎。

(yk)

Explore more on

Smashing Newsletter Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons Everything TypeScript, with code walkthroughs and examples. And other printed books.