仪表盘与数据大屏设计

引言

仪表盘（Dashboard）与数据大屏（Large Screen）经常被混为一谈，但它们的设计目标几乎相反。仪表盘是「工具」：坐在工位上的用户需要精确读数、下钻、导出，信息密度高、交互丰富。大屏是「广播」：站在三米外的观众需要三秒内抓住结论，信息密度低、字号大、几乎无交互。用仪表盘的设计方法做大屏，结果是「什么都看不清」；用大屏的方法做仪表盘，结果是「什么都查不到」。

设计上的真正难点不在「画得好看」，而在信息架构：一屏能放的信息有限，放什么、不放什么、按什么顺序排，决定了用户能否在 3 秒内找到答案。多数失败的仪表盘不是丑，而是没有回答任何具体问题——把所有能想到的图表堆上去，用户看完不知道要做什么。

本文按「目标 → 架构 → 布局 → 组件 → 交互 → 交付」的顺序展开。前两节建立仪表盘与大屏的差异认知，中间六节给出可落地的设计规则，最后四节处理交付流程与反模式。文中涉及的网格、字号、间距都以 1920×1080 为基准分辨率，其他尺寸按比例缩放。

目录

1. 仪表盘与大屏的目标差异
2. 信息架构：从问题到布局
3. 布局网格与视觉层次
4. KPI 卡片与指标设计
5. 筛选器与联动交互
6. 颜色语义与主题系统
7. 大屏的尺寸适配与分辨率
8. 刷新策略与实时性设计
9. 解释性仪表盘的叙事结构
10. 移动端与多端适配
11. 设计交付与评审流程
12. 常见设计反模式

1. 仪表盘与大屏的目标差异

先把差异说清楚，后面的所有设计规则都从它推导。

判断依据是「用户是来干活的还是来看一眼的」。如果用户需要筛选、对比、导出明细，那是仪表盘；如果用户只是路过扫一眼，那是大屏。这个判断决定了后面所有的设计参数。

一个常见的错误是把大屏当作「更炫的仪表盘」。大屏的交互能力受限于观看距离——站在三米外无法用鼠标精准点击，也无法读清 tooltip。把丰富的交互塞进大屏，用户根本用不上。

2. 信息架构：从问题到布局

设计仪表盘的第一步不是画图，是列出它要回答的问题。一个合格的需求描述应该是一组问句：

「经营日报」仪表盘要回答的问题:
  1. 今天的 GMV 是多少？比昨天/上周同期怎么样？        → KPI 卡片（含同比）
  2. 最近 30 天的趋势是什么样？有没有异常拐点？          → 折线图
  3. 哪些区域贡献最多？哪些在下滑？                     → 排序条形图
  4. 各渠道的结构占比如何变化？                         → 堆叠面积图
  5. 有没有需要立即处理的异常（退款率、缺货率）？        → 阈值告警列表

问题的顺序就是布局的顺序。第 1 个问题放在左上角（视线起点），第 2 个紧随其后，依此类推。这个顺序不是随意的——它对应了读者的阅读路径与信息优先级。

把问题映射到图表的规则很直接：问「是多少」用数字卡片，问「怎么变」用折线，问「谁多谁少」用排序条形，问「什么结构」用堆叠，问「有没有异常」用带阈值的列表或散点。这一步的详细选型规则可参考 数据可视化原理与图表选型 。

每张图必须能回答一个具体问题。如果一张图放上去的理由是「这个数据挺有意思」，它就应该被删掉。仪表盘的空间是稀缺资源，多一张图就多一分认知负担。

3. 布局网格与视觉层次

用 12 列网格做布局，间距统一用 8 的倍数。1920×1080 的基准下，常用参数：

画布:      1920 × 1080
外边距:    24px
栅格间距:  16px
卡片内边距: 16px
卡片圆角:  8px
标题字号:  16px（卡片标题）/ 24px（页面标题）
正文字号:  12~14px
数字字号:  28~36px（KPI 主数值）

视觉层次靠三个手段建立：尺寸、对比度、留白。KPI 数字最大最粗（28 到 36px），图表标题次之（16px），坐标轴标签最小（12px）。同一层级的元素保持一致的样式，层级差异通过尺寸而非颜色堆叠来体现。

┌──────────────────────────────────────────────────────────────┐
│  经营日报            [日期范围 ▼]  [区域 ▼]  [渠道 ▼]          │  ← 筛选栏
├────────────┬────────────┬────────────┬───────────────────────┤
│  GMV       │  订单数     │  客单价     │  退款率                │  ← KPI 行
│  1,284万   │  86,420    │  ¥148.6    │  1.82%                │
│  ↑12.3%    │  ↑8.1%     │  ↓2.4%     │  ↑0.3pp               │
├────────────┴────────────┴────────────┼───────────────────────┤
│  30 天 GMV 趋势（折线 + 同比）          │  区域排行（排序条形）    │  ← 主图区
│                                       │                       │
├───────────────────────────────────────┼───────────────────────┤
│  渠道结构变化（堆叠面积）                │  异常告警列表           │  ← 次图区
└───────────────────────────────────────┴───────────────────────┘

Z 型阅读路径决定了左上角是最重要的位置。KPI 行放最上面（回答「现在怎么样」），主图区放中间（回答「为什么」），明细与异常放下面（回答「要做什么」）。

留白不是浪费。卡片之间的 16px 间距让分组关系清晰（格式塔的接近性），挤在一起会让读者分不清哪些元素属于同一组。宁可少放一张图，也不要压缩间距。

4. KPI 卡片与指标设计

KPI 卡片是仪表盘上被看得最多的组件，设计细节直接影响可读性。

一个卡片只放一个主数值。放两个同等大小的数字，读者会分不清哪个更重要。如果有主次关系，主数值 36px、次要数值 14px。

对比基准必须明确。单独一个「1,284 万」没有意义，必须给出参照：同比、环比、或目标完成率。参照要写清楚是「较昨日」还是「较上周同期」，不能只给一个箭头。

// KPI 卡片的数据结构：主值 + 对比 + 趋势迷你图
const kpi = {
  label: 'GMV',
  value: 1284,                    // 单位：万元
  unit: '万',
  comparison: { type: '同比', value: 0.123, direction: 'up' },
  target: { value: 1400, completion: 0.917 },
  sparkline: last30Days,          // 迷你趋势，看形状不看数值
};

趋势方向与好坏方向不一定一致。退款率上升是坏事，GMV 上升是好事——颜色语义要按「业务含义」而非「数值方向」着色。用红色表示「坏」、绿色表示「好」，而不是用红色表示「下降」。

**迷你趋势图（sparkline）**是 KPI 卡片的高价值配件。它去掉坐标轴与标签，只保留形状，让读者一眼看出「这个数是在涨还是在跌」。数据点应控制在 20 到 60 个（按屏幕像素计），过多会糊成色块。

目标完成率用进度条或环形。环形只在有明确「完成/未完成」语义时使用，且必须是 100% 的封闭环——开口的环形（仪表盘指针式）会让读者无法判断剩余量。

5. 筛选器与联动交互

筛选器是仪表盘的核心交互，也是性能杀手。三条规则。

数量控制在 4 个以内。每个筛选器都要拉一次候选值，5 个以上会明显拖慢首屏。常用的时间范围、区域、渠道三个足够覆盖大多数场景。

默认值必须合理。默认「过去 30 天」而不是「全部时间」——后者会拉取全量数据，既慢又让图表因为包含早期噪声而难以解读。

级联减少无效选项。选了「华东」后，「渠道」只显示华东存在的渠道。这需要筛选器之间声明依赖关系：

# 筛选器级联配置（以通用结构表达）
filters:
  - name: 区域
    field: region
    type: multi_select
  - name: 渠道
    field: channel
    type: multi_select
    depends_on: [区域]          # 候选值随区域变化
  - name: 日期范围
    field: order_date
    type: time_range
    default: last_30_days

联动（cross-filtering）比筛选器更自然。点击某个区域柱子，其他图表自动过滤到该区域——这比让用户在筛选器里找「华东」快得多。联动要遵守两条规则：当前图表高亮选中项而非过滤自己（否则用户无法切换选择），提供明确的清除方式（再点一次或点空白处取消）。

下钻要有路径感。从「区域」下钻到「城市」，应该有面包屑显示当前位置并提供返回。这与格式塔的「共同区域」原则一致——每一层是一个独立区域。

6. 颜色语义与主题系统

仪表盘的颜色必须有语义且全局一致。三条规则。

语义色固定：红色 = 异常/下降/超阈值，绿色 = 正常/上升，黄色 = 警告，灰色 = 无数据/未选中，蓝色 = 中性主色。这个映射在整个仪表盘内不能变——如果一张图里红色表示「华东」，另一张里红色表示「告警」，读者每次都要重新建立映射。

分类色板全局统一：同一系列（如「华东」）在所有图表里用同一颜色。分类色不超过 6 个，超过后改用其他编码方式（直接标注、小倍数图）。

背景与网格线极浅。仪表盘的背景用白色或极浅灰（#fafafa），卡片用白色加细边框或浅阴影。网格线用 #f0f0f0 级别——只要能看出刻度位置即可，过深会稀释数据墨水比。

// 全局设计令牌，所有图表引用同一套
export const tokens = {
  color: {
    semantic: { danger: '#d64545', success: '#22a06b', warning: '#e8a33d', muted: '#9ca3af' },
    categorical: ['#2f6fed', '#22a06b', '#e8a33d', '#d64545', '#7a5af8', '#00a3b4'],
    // 区域 → 颜色的固定映射，全局一致
    byRegion: { 华东: '#2f6fed', 华南: '#22a06b', 华北: '#e8a33d', 西南: '#7a5af8' },
  },
  space: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
  radius: { card: 8, chip: 4 },
  font: { kpi: 32, title: 16, body: 13, axis: 12 },
};

深色主题要为图表重新调色。直接把浅色主题的色板搬到深色背景上，饱和度会显得刺眼、对比度不足。深色主题下应该降低饱和度、提高明度，并单独验证对比度是否达标。

7. 大屏的尺寸适配与分辨率

大屏的适配是工程上最容易翻车的环节。核心问题是：设计稿的分辨率与屏幕的物理分辨率不一致，且屏幕可能是拼接的。

主流大屏分辨率：1920×1080（16:9）、2560×1440、3840×2160（4K）、以及拼接屏的 1920×1080 × N。设计时应以 1920×1080 为基准，用等比缩放 + 留白/裁切适配其他尺寸。

// 等比缩放适配：以 1920x1080 为设计基准
function fitScreen(designW = 1920, designH = 1080) {
  const scale = Math.min(window.innerWidth / designW, window.innerHeight / designH);
  const el = document.getElementById('screen-root');
  el.style.transform = `scale(${scale})`;
  el.style.transformOrigin = 'left top';
  // 居中：按缩放后的尺寸计算偏移
  el.style.left = `${(window.innerWidth - designW * scale) / 2}px`;
  el.style.top = `${(window.innerHeight - designH * scale) / 2}px`;
}
window.addEventListener('resize', fitScreen);

不要用响应式布局做大屏。响应式会让元素在不同分辨率下重排，导致布局不可控（图表位置跳变）。等比缩放保证设计稿的每个像素都按比例映射，视觉效果可预测。

拼接屏要考虑物理边框。N 块屏幕拼接时，边框会吃掉几毫米到几厘米，导致跨屏的元素被切断。解决办法是让关键内容避开拼接缝，或把拼接缝的位置作为设计约束（比如把 3 块屏当作 3 个独立区域）。

字号按观看距离定。经验值：观看距离 3 米时，最小字号 24px；5 米时 36px；10 米时 60px 以上。一个粗略公式是「最小字号（px）≈ 观看距离（米）× 8」。大屏的图表标签、坐标轴、图例都要按这个标准放大，不能沿用仪表盘的 12px。

8. 刷新策略与实时性设计

刷新策略决定了大屏是「活数据」还是「摆设」。三种模式。

定时轮询：按固定间隔重新拉取（如每 30 秒）。实现简单，但会有无效请求，且数据更新与刷新周期不同步。适合数据更新频率已知且较慢的场景。

增量更新：只拉取变化的部分（如新订单），在前端追加。适合流式数据，但需要处理乱序与去重。

推送（WebSocket/SSE）：服务端主动推送变化。延迟最低，但需要长连接管理，且要处理断线重连。

// 定时轮询 + 页面可见性优化：不可见时暂停，节省资源
let timer = null;
function startPolling(intervalMs = 30000) {
  stopPolling();
  timer = setInterval(async () => {
    if (document.hidden) return;      // 页面不可见时跳过
    const data = await fetchDashboardData();
    updateCharts(data);
  }, intervalMs);
}
function stopPolling() { if (timer) clearInterval(timer); }
document.addEventListener('visibilitychange', () => {
  document.hidden ? stopPolling() : startPolling();
});

刷新要有视觉提示。数据更新时给变化的数字一个短暂的强调动画（如数字滚动或背景闪烁一次），让观众知道「这是新的」。但不要用全屏闪烁或轮播切换——那会打断阅读，且频繁的动效会让人烦躁。

刷新频率与数据更新频率要匹配。数据每分钟更新一次，大屏却每 5 秒刷新，是在做无用功且增加后端压力。反过来，数据每秒更新而大屏每分钟刷新，会错过关键的瞬时峰值。

9. 解释性仪表盘的叙事结构

仪表盘不只是「数据的容器」，它可以承载叙事。三类叙事结构。

概览到明细（Overview first, zoom and filter, then details on demand）：这是 Shneiderman 的经典范式。首屏给全局概览，用户通过筛选缩小范围，最后按需查看明细。适合探索性仪表盘。

问题到行动：首屏直接呈现「需要处理的事项」（异常列表、待办指标），每项可以点进去看原因。适合运营与运维仪表盘——用户打开就知道要做什么。

时间叙事：按时间顺序排列，从「昨天发生了什么」到「今天要注意什么」。适合日报、周报类仪表盘。

「问题到行动」型仪表盘的结构:
  第 1 行: 需要立即处理的事项（红色告警卡片，可点击）
  第 2 行: 核心指标的健康度（KPI + 阈值状态）
  第 3 行: 趋势与归因（为什么会出现异常）
  第 4 行: 明细与操作入口（在哪里处理）

标题要写结论，不要写变量名。「GMV 趋势」是变量名，「本周 GMV 环比下降 8%，主要来自华南」是结论。后者让读者不需要自己分析就能获得洞察。这与解释性可视化（explanatory）的定位一致——探索阶段的图可以只有变量名，交付给他人看的图必须有结论。

10. 移动端与多端适配

移动端的核心约束是窄屏与触控。三条规则。

布局从多列变单列。12 列网格在移动端退化成 1 到 2 列，卡片垂直堆叠。KPI 行从 4 个横排变成 2×2 网格。

图表类型要简化。折线图的序列从 5 条减到 2 到 3 条，散点图改成聚合后的热力图，地图改成排行列表。移动端的屏幕放不下复杂图表，硬塞会导致元素重叠。

触控目标至少 44×44 像素。筛选器、下钻按钮、图例点击区都要满足这个尺寸，否则手指点不准。悬浮提示（hover tooltip）在触屏上不可用，要改成点击触发。

移动端优先考虑「看板」而非「仪表盘」。移动端的典型场景是「领导在会议间隙看一眼关键指标」，因此应该优先呈现 KPI 卡片与少量趋势图，而不是完整的分析工具。

11. 设计交付与评审流程

仪表盘设计的交付物不只是设计稿，而是一份可实现的规格。

交付物清单:
  1. 需求文档: 要回答的问题清单（问句形式）
  2. 线框图: 布局与信息层次（不含具体数据）
  3. 视觉稿: 最终样式（1920×1080 基准）
  4. 组件规格: 每个图表的类型、编码字段、交互行为
  5. 设计令牌: 颜色、间距、字号（供前端直接引用）
  6. 数据契约: 每个图表依赖的字段与聚合口径

评审要用「五秒测试」。给没参与设计的人看 5 秒，问三个问题：这个仪表盘在讲什么、最重要的数字是哪个、有没有异常。三个问题都能答对才算通过。

上线后要跟踪使用数据。哪些图表被看得最多、哪些筛选器被用得最多、用户在哪个页面停留最久然后离开。数据会告诉你哪些图该删、哪些该提前。一个常见的发现是：超过一半的图表从未被点击过。

12. 常见设计反模式

3D 图表：透视会压缩远端数据，且深度维度不编码任何信息。唯一价值是「看起来炫」，代价是可读性。

双 Y 轴：两条曲线的斜率对比完全由轴缩放决定，可以制造出任意「相关性」。改用上下双图共享 X 轴。

仪表盘指针（Gauge）：占用大量空间只表达一个数值，且指针角度难以精确读取。改用 KPI 卡片 + 进度条。

彩虹色阶：明度非单调，产生虚假边界。连续量用 viridis 或单色相渐变。

自动轮播：每 10 秒切换一屏，观众还没读完就切走了。大屏应该固定布局，靠数据刷新而非页面切换来保持新鲜感。

无意义的动效：柱子上下来回弹跳、数字持续滚动、背景粒子动画。这些动效只消耗 GPU，不传递信息。

过度装饰：渐变填充、阴影、立体边框、装饰性图标。它们稀释数据墨水比，让读者难以聚焦。

把 EDA 阶段的图直接贴上去：没有标题结论、坐标轴没有单位、颜色没有图例。这类图离开作者的口头讲解就无法理解。

权衡取舍

常见坑清单

1. 用响应式做大屏——元素重排导致图表位置跳变；固定设计基准用等比缩放。
2. 大屏字号沿用 12px——三米外不可读；按观看距离放大，3 米至少 24px。
3. 筛选器超过 5 个——每个都要拉候选值，首屏变慢；控制在 4 个以内并设合理默认值。
4. KPI 没有对比基准——孤立数字没有意义；必须给同比/环比/目标完成率。
5. 语义色全局不一致——红色在不同图里含义不同，读者反复建立映射；用设计令牌固定。
6. 图表超过 20 张——首屏并发查询压垮数据库且认知过载；仪表盘控制在 12 到 16 张。
7. 刷新频率与数据更新不匹配——过频是无用功，过疏会错过峰值；按数据更新周期设。
8. 自动轮播切换——观众没读完就切走；固定布局靠数据刷新保持新鲜。
9. hover tooltip 用在触屏——触屏没有 hover；改成点击触发并保证 44px 触控目标。
10. 图表标题写变量名——「GMV 趋势」不传递结论；改成「本周 GMV 环比下降 8%」。

小结

仪表盘与大屏的设计差异源于观看距离与使用目的：仪表盘是工位上的分析工具，追求高信息密度与丰富交互；大屏是远距离的广播载体，追求三秒内抓住结论。混淆两者会导致设计参数全面错位——字号、密度、交互、刷新频率都要按目标重新定。

设计方法的核心是从问题出发：先列出仪表盘要回答的问题清单，问题的顺序决定布局的顺序，每张图必须回答一个具体问题。布局用 12 列网格 + 8 的倍数间距，视觉层次靠尺寸而非颜色堆叠建立，颜色语义全局统一且按业务含义着色。

下一步可以按技术栈落地：ECharts 图表工程实战 与 AntV G2 声明式图表体系 给出图表层的实现细节，大屏的性能瓶颈与优化手段见 大屏渲染性能与优化 ；如果仪表盘的数据来自数仓，先读 可视化与 OLAP 数仓集成 。