数据仪表盘：15 分钟做 CEO 看板

背景：上周创始人在群里说「我想要一个能看到所有核心指标的页面，不要 Figma，不要 Tableau，就要一个能打开的页面」。我用 huashu-design 做了一个可交互的数据仪表盘，15 分钟，从零到可交付。

痛：一个 CEO 看板要多久？

传统做法：产品经理画低保真 → 设计师做高保真 → 前端开发 → 联调 → 至少 3 天。如果数据源还变了几次，一周就过去了。

更糟糕的是，很多数据页面做出来以后，CEO 打开一看「这不是我想看的数据」——然后从头返工。

huashu-design 的做法是：数据即界面，问清楚再看。

第一步：问清 3 个问题

开工前，AI 先问：

1. 谁在看这个看板？ — CEO / 运营 / 投资人？
2. 最关心的 3 个指标是什么？ — 做多了就是噪音
3. 实时还是快照？ — 决定要不要刷新逻辑

我的回答是：CEO 看板，关注用户增长 + 营收 + 健康度，实时数据，手机电脑都能看。

第二步：信息层级设计

不懂数据设计的人最容易犯的错：所有数字一样大。

CEO 看板的信息层级应该是：

第一眼：北极星指标（最大）
第二眼：核心趋势图（次大）
第三眼：细分表格（最小）

huashu-design 给了一个干净的卡片式布局：顶部 3 张 KPI 卡片（大字 + 趋势箭头），中间折线图区域，底部详细表格。

配色用深海军蓝底 + 暖金 accent，既专业又有温度——不是那种冷冰冰的「金融风」。

第三步：KPI 卡片——大字报的克制力

KPI 卡片的设计原则：只放一个数字 + 一个对比 + 一个趋势箭头。

┌─────────────────────┐
│  月活跃用户 (MAU)    │
│  128,493             │  ← 字号最大
│  ↑ 12.5% 较上月       │  ← 趋势
└─────────────────────┘

不要放三个指标在一张卡里。一张卡只做一件事，用户扫一眼就懂。

删减测试： 去掉「较上月」三个字，信息有损吗？有——因为没有参照系。去掉「月活跃用户」这个标签呢？有——不知道这是什么数字。但去掉任何背景色装饰？没有——那就别加。

第四步：趋势图——Sparkline 的妙用

每个 KPI 卡片底部加一条 sparkline（迷你趋势线），占 2 行文字的高度，不用坐标轴，用户只看「方向」。

三种颜色代表三种状态：
- 暖金（#FFD043）：正增长
- 赭石（#C04A1A）：持平
- 珊瑚（#E8615A）：需要关注

第五步：响应式——手机也能看

CEO 不一定在电脑前打开这个页面。huashu-design 的看板默认做了两个断点：

• 桌面（≥1024px）：3 列 KPI + 右侧趋势图
• 手机（<768px）：1 列堆叠，图表放底部

不用写媒体查询，框架自己处理。

数据源：从哪里来？

真实场景里，数据可能来自 SQL / API / CSV。huashu-design 的看板支持几种模式：

演示版本用静态 JSON，但接口预留了 fetch 占位符——从演示到上线，改一行代码。

耗时复盘

核心心得

数据仪表盘设计的本质不是「把数据画出来」，而是 「帮看的人节省认知成本」。

CEO 扫一眼就能回答三个问题：我们表现如何？趋势是好的还是坏的？哪里需要关注？——如果一张看板不能让人在 5 秒内回答这三个问题，它就是失败的。

下次你需要给老板看数据的时候，别开 Tableau 了，让他打开一个 HTML 文件就行。

截图清单

1. ✅ 数据仪表盘全览（KPI 卡片 + 趋势图 + 表格）— 已插入上文