# 把图表拼成一页看板：分几个区、眼睛按什么顺序走、颜色该留给谁
用 3-30-300 分层把一页画布切成结论、趋势、拆解、明细四个区，再用位置、大小、对比和四件一致性把重点顶到读者眼前
> 数据可视化 · 报表自动化 · Power BI 入门 · 约 9 分钟 · 10 月 27 日
## 本篇要点
1. 一页看板读不懂，多数不是图表或计算错了，而是没有按读者的信息需求分区，也没把重点顶到读者眼前。
2. 排之前先定这一页回答哪三层问题（3 秒看整体、30 秒定位到哪个地区或品类、300 秒看明细），这三层直接对应结论区、趋势与拆解区、明细区。
3. 结论区放顶部，每张卡片必须带比较基准（同比、目标完成率）；只有绝对数，读者判断不了好坏。
4. 画布上每个位置的注意力价格不同：最高层级的信息放左上，越往右下越细；F 型适合密集分析页，Z 型适合元素少的高管页。
5. 突出重点只需三个杠杆——位置、大小、对比；整页留一个强调色给“需要你注意”，其余低饱和，并且不要只用红绿表示好坏。
6. 一致性有四件事：同一维度值同色、坐标轴刻度和排序一致、数字位数与单位统一（用万/百万缩放）、同页时间口径一致。
7. 验收靠 3 秒测试：让不看数据的人在 3 秒内说出“好不好、哪里最差”，说不出就是结论区没做对。
---
零件都齐了：清洗过、能刷新的一张宽表，拆好的事实表和维度表，几个算得对的度量值，四张选得对的图，一组能点的切片器。全拖到同一页画布上，文件一存，看起来就像个看板了。
然后老板打开，看了五秒，问：“这个月到底好不好？”
你指着卡片：“5600 万。”
“比去年呢？比目标呢？”
问题不在图表选错，也不在数字算错，而在于这一页没告诉读者眼睛该往哪走、数字该跟什么比。下面用一个具体案例走一遍。
## 这一页现在长什么样
画布上现在有这些东西，全堆在一起：
- 顶部三个切片器：月份、地区、品类，横着排了两行；
- 一张卡片，只有“5600 万”，字号和图例差不多大；
- 一张按月折线，两条线（今年、去年同期），标题写“销售额趋势”；
- 一张按产品类别的柱状图，标题写“品类分析”；
- 一张按地区的条形图；
- 一张 20 行的明细矩阵；
- 页面标题：“销售看板”。
数据都对，坐标轴也没错。但读者不知道先看什么，知道了也判断不出好坏，看完了不知道该找谁。
## 第一步：定这一页回答哪三层问题
排之前先别动图表，先回答：谁看、多久看一次、看完要做什么决定。这里是销售总监，每周一早上看一次，看完决定要不要找某几个区域谈话。
据此定三层：
- **3 秒**：整体状况——这个月卖得好还是不好。
- **30 秒**：在哪里——哪个地区、哪个品类在拖。
- **300 秒**：为什么——具体是哪些客户、哪些单子。
这个分层借自 SQLBI 提出的 3-30-300 规则，它把“总览 → 缩放筛选 → 按需明细”翻译成时间：3 秒拿总览，30 秒筛到关注的期间和类别，300 秒拿到能支撑决定的细节 [2]。文中也明确说，秒数只是把概念讲具体的比方，不是验收指标。
规则不难，难的是它的后果：**每一层对应画布上的一块区域。**层次定不下来，区域就分不出来，最后所有图表平铺，读者只能自己找。
同时定两条硬约束：一页只讲一个主题（销售达成，不讲库存也不讲费用）；尽量单屏放得下、不出滚动条——微软的设计建议里，看板的意义就是一眼看全，多到要滚动就该砍内容而不是加画布 [1]。
## 第二步：把画布切成四个区
三层落到位置上，就是四个区：
```
┌────────────────────────────────────────────────────────────┐
│ 本月销售低于进度，缺口集中在华东与 B 品类 ← 标题就是结论 │
├────────────────────────────────────────────────────────────┤
│ 5600万 同比+6% │ 目标完成92% │ 华东1280万 │ B品类−15% │ ← 结论区
├──────────────────────────────┬─────────────────────────────┤
│ 折线：近13个月 + 去年同期 │ 条形：各地区目标完成率 │ ← 趋势区 / 拆解区
├──────────────────────────────┼─────────────────────────────┤
│ 柱状：各品类销售额与同比 │ 矩阵：Top 客户明细 │ ← 拆解区 / 明细区
├────────────────────────────────────────────────────────────┤
│ 切片器：月份 / 地区 / 品类（集中在一条） │
└────────────────────────────────────────────────────────────┘
```
**结论区**是一条横带，放 3–5 张卡片。关键改动：每张卡片都要带比较基准。只有“5600 万”这一个绝对数，读者判断不了好坏，只能再问一句；加上“同比 +6%、目标完成 92%”，判断就在卡片上完成。这是它值得占最上面的原因——它承担 3 秒那一层。
**趋势区**放折线，回答“在变好还是变坏”，方向比数值重要，斜率一眼能看出来。
**拆解区**放条形或柱状，回答“问题在哪”。到 30 秒这一层，读者要的是排序：谁最差，排最上面。
**明细区**放矩阵，沉到右下或底部。它是 300 秒那一层，读者不会一上来就看。
切片器单独算一个区。三个横排两行占掉顶部一大条，还挤压结论区；要么收进一条横带，要么竖起来做左侧一列。经验上超过四五个就该竖着放（读者先设条件，再从左往右看结果），只有两三个时顶部一条就够。
上面是 SQLBI 对比的同一份 MTD 销售数据的两版排法。右边那版能更快答出“卖了多少、比目标高低”，不是因为更好看，而是它把最重要的信息放在左上、字号最大，颜色和箭头直接说明达标与否，明细矩阵留到最后 [2]。
## 第三步：眼睛的顺序——左上最贵，右下最便宜
微软的建议很直接：多数人从上往下读，所以把最高层级的数据放左上角，越往后越详细 [1]。也就是说，画布上每个位置的“注意力价格”不一样。
常见两种扫视路径：**F 型**（左侧一列筛选或导航，眼睛反复向右扫入内容，适合密集分析页）和 **Z 型**（左上 → 右上 → 左下 → 右下，适合元素少、要讲一句话的页）。这是设计上的经验惯例，不是硬规定，但它能帮你判断：**你希望被最先看到的东西，现在在不在左上角。**
按这个标准查，这个案例有两处排错了：
- **卡片位置对了、大小没跟上**，读者第一眼抓到的是占地最大的折线，优先级还是乱的。
- **明细矩阵占了中上位置**。20 行数据在 3 秒那一层是纯噪音，它该沉到底部。
还有一条容易忽略的：**相关的东西靠得近，不相关的东西离得远。**同一组视觉对象留 8–16px，不同组之间留 32px 以上，读者才会自动归成两堆；靠边框和底色分区是次选，一眼看去满屏是框反而更乱。最后数一下组数，一页控制在 7 组左右比较稳，超过时多半该分页，而不是把字号调小。
## 第四步：层级只有三个杠杆——位置、大小、对比
想突出一个东西，不需要阴影、图标、渐变，只有三件事真的有用：
**位置**：见上一步，左上最贵。
**大小**：整页只拉开两个字号层级——标题和最关键的 1 个数字。微软说得直白：如果文字和图表的尺寸都一样大，读者就难以聚焦到最重要的信息上 [1]。这里，卡片上的 5600 万应明显大过卡片标签，标签又明显大过图例和坐标轴文字。
**对比**：整页只留一个强调色，专门给“需要你注意”。这个案例里橙色只出现在“目标完成 92%”和“B 品类 −15%”，其余用统一的低饱和蓝灰。一页出现五种鲜艳颜色，等于说“这五个都重要”，结果一个都不重要。
顺带一个常见错误：**别只用红绿表示好坏**。色觉障碍的读者分不出，打印成黑白更是全丢。在颜色之外加箭头或“低于目标”几个字，信息才算传到。
## 第五步：一致性——四件必须全页对齐的事
前四步决定“重点在哪”，这一步决定“读者会不会读错”。
**同一维度值同色。**华东在条形图里是深蓝，在折线图、堆叠柱里也得是深蓝。微软专门提过这一点：同一维度值在图中使用的颜色要一致 [1]。否则读者点完切片器，会以为换了一份数据。
**刻度与排序一致。**两张图比同一个指标，纵轴从同一个起点开始，别一张从 0 起、一张从 800 起——后者会把 5% 的差异画成翻倍。排序同理：要突出高低就按度量值排，要让人快找类别就按类别名排，同一页别混用。
**数字格式。**有效数字控制在三四位内，用“万”“百万”缩放，别写 3,400,000——微软的建议是人读“340 万”比读“3,400,000”容易得多 [1]。同页统一小数位，单位写进卡片标签或图表标题（“销售额（万元）”），而不是每个数字后面跟一遍。更隐蔽的一条：**万级和千级的度量值不要同轴**，千级那条会被压成平线；真要比，用次坐标轴或拆成两张图。
**时间口径一致。**一张是“本月至今”，另一张是“上个月整月”，并排放着读者一定会相减。同页要么都用 YTD、要么都用当月，并把口径写进标题。
## 做完之后，怎么知道排对了
排版没有编译器替你报错，得自己验。三个办法：
1. **3 秒测试。**找一个不看这份数据的同事，全屏打开，数三秒后关掉，问：“这个月好不好？哪里最差？”答不出来或答错方向，说明结论区的位置、大小或基准有一项没到位。这比你自己盯半小时有用。
2. **数两样东西。**一页有几个视觉分组（7 组左右），以及要不要拉滚动条（最好不要）。
3. **逐个图表问一句**：“它在 3 秒、30 秒还是 300 秒那一层？”答不出来的删掉或挪去明细页。这里最后被砍的是“销售额占比饼图”——结论层卡片已经说了总量，拆解层条形图已经在排序，它两处都不占。
## 条件变了，怎么跟着变
- **读者是高管、一周看一次**：走 Z 型，卡片减到 3 张，标题写结论句，趋势用迷你折线代替完整折线，明细挪进钻取页。
- **读者是分析岗、天天泡在里面**：走 F 型，切片器做成左侧一列，图表可以密到十来个，信息密度是优点；但结论区仍在左上。
- **只在手机上看**：只留结论区和一张拆解图，其余砍掉，“单屏不滚动”从建议变成硬约束。
- **这一页本来就没有唯一重点**（比如月度经营例会，各部门指标并列）：别硬造一个强调色和一个大字号，改成几个大小相当的分区，用统一小标题分隔，靠分组而不是靠层级降低阅读负担。
回到那句“这个月到底好不好”。它不是在问数字，是在问判断；判断需要比较基准；基准需要位置和字号把它顶到眼前。排版做的就是这一件事：把“这一页回答什么问题”翻译成画面上的位置、大小和颜色。
## 思维导图
```mermaid
flowchart LR
A["一页看板排不好"] --> B["先定三层问题
3 秒 / 30 秒 / 300 秒“]
B --> C[”四区
结论 · 趋势 · 拆解 · 明细“]
C --> D[”阅读动线
左上最贵，右下最便宜“]
D --> E[”视觉层级
位置 · 大小 · 对比“]
E --> F[”一致性
同色 · 同刻度 · 同数字格式 · 同口径“]
F --> G[”验收
3 秒测试 · 组数约 7 · 单屏不滚动“]
C --> H[”切片器集中
两三个放顶部，多个放左侧一列"]
```
## 术语表
- 3-30-300 规则：把一页报表按读者的时间分层——3 秒拿总览、30 秒筛到关注范围、300 秒按需看明细；秒数是比方，对应的是信息层级。
- 结论区：顶部横带，用几张大字卡片加比较基准回答“整体好不好”，承担 3 秒那一层。
- 视觉层级三杠杆：位置、大小、对比，是真正能拉开优先级的三件事。
- 单一强调色：整页只保留一个高饱和颜色标记“需要你注意”，其余低饱和或灰阶。
- 视觉分组（邻近原则）：间距 8–16px 视为同一组，32px 以上视为不同组，靠间距比靠边框分区更有效。
- 3 秒测试：让没看过数据的人在 3 秒内说出“好不好、哪里最差”，用来验证结论区是否成立。
## 来源
1. [Microsoft Learn: Tips for designing a great Power BI dashboard — 官方看板设计建议，含左上放最高层级信息、单屏不滚动、维度颜色与刻度一致、数字格式与缩放](https://learn.microsoft.com/en-us/power-bi/create-reports/service-dashboards-design-tips)
2. [SQLBI: Introducing the 3-30-300 rule for better reports — 3-30-300 分层阅读规则及两版 MTD 销售报表布局对比](https://www.sqlbi.com/articles/introducing-the-3-30-300-rule-for-better-reports/)
---
原文：https://pangzhengboyin.com/articles/power-bi-dashboard-layout-and-hierarchy-2280d737
> **庞征博引** · 想学的，慢慢都会
>
> 庞征博引是把想学的东西写成连载的 AI 学习工具：每篇 5–10 分钟，边读边问，接下来学什么跟着你走。这篇就是这样写出来的。
>
> 开始你自己的连载 → https://pangzhengboyin.com