此篇汇总Dashboard常见的布局方式，作为后续设计的参考。
二十年数据分析的经验告诉我：布局不是审美问题，是信息传递效率问题。 一个糟糕的布局，能让最精准的数据变成噪音。
在谈具体方案之前，先把规矩立好。这四条原则是所有布局的底座，违反任何一条，dashboard 就是在给用户添堵：
| 原则 | 说明 | 典型反例 |
|---|---|---|
| 信息层级 | 最重要的指标占据最大面积和最优视觉位置 | 把核心 KPI 塞在右下角 |
| 阅读动线 | 遵循 Z 型或 F 型自然阅读顺序 | 指标散布无逻辑跳转 |
| 留白呼吸 | 视觉元素之间保持合理间距，信息密度 ≠ 堆砌 | 每寸屏幕都塞满图表 |
| 一致性 | 同一 dashboard 内字体、色系、图表风格统一 | 每个卡片用不同配色 |
┌──────────────────────────────────────────────┐
│ [KPI-1] [KPI-2] [KPI-3] [KPI-4] │ ← 顶部指标卡
├──────────────────────┬───────────────────────┤
│ │ │
│ 主分析图表 │ 辅助分析图表 │ ← 详情区
│ (趋势/对比) │ (构成/分布) │
│ │ │
├──────────────────────┴───────────────────────┤
│ │
│ 底部支撑图表（明细表/交叉表） │ ← 明细区
│ │
└──────────────────────────────────────────────┘
适用场景：管理层经营看板、销售业绩总览
设计要点：
我见过最多的错误：KPI 卡堆了 8 个，每个字小得跟蚂蚁似的——你这是给高管看还是给眼科医生看？
┌────────┬─────────────────────────────────────┐
│ 导航 │ [KPI-1] [KPI-2] [KPI-3] │
│ ├─────────────────────────────────────┤
│ ○ 总览 │ │
│ ● 销售 │ 当前选中页内容 │
│ ○ 财务 │ (图表/表格/指标) │
│ ○ 人力 │ │
│ ├─────────────────────────────────────┤
│ 筛选器 │ 底部辅助区域 │
│ 📅日期 │ │
│ 🏷部门 │ │
└────────┴─────────────────────────────────────┘
适用场景：多功能综合看板、部门级数据门户
设计要点：
避坑提醒：Power BI 的页面导航（Page Navigation）比书签导航（Bookmark Navigation）维护成本低 10 倍。除非你确实需要同一页面切换可见性，否则别碰书签。
┌──────────────────────────────────────────────┐
│ │
│ 单一核心指标 │
│ ¥ 12,847,300 │
│ ▲ 23.5% vs 上月 │
│ │
├──────────┬──────────┬──────────┬─────────────┤
│ 子指标1 │ 子指标2 │ 子指标3 │ 子指标4 │
│ ¥3.2M │ ¥2.8M │ ¥4.1M │ ¥2.7M │
│ ▲12% │ ▼3% │ ▲31% │ ▲8% │
├──────────┴──────────┴──────────┴─────────────┤
│ │
│ 趋势图 / 瀑布图 / 分解树 │
│ │
└──────────────────────────────────────────────┘
适用场景：大屏展示、会议室投屏、高管实时监控
设计要点：
说句不好听的：很多大屏项目预算花在酷炫动画上，核心数据却看不清。炫技给谁看？数据能说明问题才是正事。
┌──────────┬──────────┬──────────┐
│ 卡片 1 │ 卡片 2 │ 卡片 3 │
│ 趋势图 │ 柱状图 │ 饼图 │
├──────────┼──────────┼──────────┤
│ 卡片 4 │ 卡片 5 │ 卡片 6 │
│ 散点图 │ 地图 │ 热力图 │
├──────────┴──────────┴──────────┤
│ 卡片 7 │
│ 详细数据表格 │
└────────────────────────────────┘
适用场景：数据分析团队自用、多维交叉分析、运维监控
设计要点：
选图参考：
| 分析目的 | 推荐图表 | 不推荐 |
|---|---|---|
| 趋势变化 | 折线图、面积图 | 柱状图（时间点多时） |
| 分类对比 | 柱状图、条形图 | 饼图（超过5类） |
| 占比构成 | 饼图（≤5类）、环形图 | 堆叠柱状图（难比较） |
| 分布关系 | 散点图、气泡图 | 折线图 |
| 地理分布 | 地图、填充地图 | 任何非地图 |
| 明细追溯 | 表格、矩阵 | 图表（信息密度不够） |
┌──────────────────────────────────────────────┐
│ 标题区：Q1 销售表现 — 从问题到行动 │
├──────────────────────────────────────────────┤
│ │
│ ① 现状：总销售额趋势与目标达成 │
│ [趋势图 + 目标线] │
│ │
├──────────────────────────────────────────────┤
│ │
│ ② 发现：各区域贡献差异 │
│ [条形图 + 条件格式] │
│ │
├──────────────────────────────────────────────┤
│ │
│ ③ 归因：TOP 影响因素分解 │
│ [瀑布图 / 分解树] │
│ │
├──────────────────────────────────────────────┤
│ │
│ ④ 行动：建议与下一步 │
│ [文本框 + 关键指标卡] │
│ │
└──────────────────────────────────────────────┘
适用场景：月度/季度汇报、数据故事讲述、项目复盘
设计要点：
| 元素 | 推荐尺寸 | 说明 |
|---|---|---|
| 画布 | 16:9（1280×720 或 1920×1080） | 除非有特殊屏幕，否则别用 4:3 |
| KPI 卡 | 高 80-100px | 太矮放不下趋势箭头 |
| 图表区 | 最小 300×200px | 小于这个尺寸，图表基本不可读 |
| 间距 | 8-12px 统一 | 随意间距 = 随意的设计 |
| 字号 | 标题 14-18pt / 数值 24-36pt / 辅助 10-12pt | 再小就是在考验视力 |
默认配色是 Power BI 最大的设计灾难之一。 请务必自定义：
| 方案 | 主色 | 辅色 | 强调色 | 适用场景 |
|---|---|---|---|---|
| 商务蓝 | #1B4F72 | #2E86C1 | #E74C3C | 金融、企业级 |
| 暖橙 | #D35400 | #E67E22 | #2ECC71 | 零售、消费 |
| 深色系 | #1A1A2E | #16213E | #E94560 | 大屏、投屏 |
| 素雅灰 | #2C3E50 | #7F8C8D | #3498DB | 通用、报表 |
你的 dashboard 给谁用？
│
├─ 高管/大屏 → 方案三（沉浸式）或 方案一（KPI+详情）
│
├─ 业务团队 → 方案一（KPI+详情）或 方案二（导航+内容）
│
├─ 数据分析师 → 方案四（矩阵网格）
│
└─ 汇报/演讲 → 方案五（故事线叙事）
布局方案没有银弹，只有最适合当前场景的选择。但有一条底线永远不变：
用户打开 dashboard 的 3 秒内，必须能看出「这页在说什么」。 做不到这一点，再炫的图表也只是自嗨。
数据可视化是让复杂数据变简单，不是让简单数据变复杂。记住这一点，你就不会在布局选择上犯大错。
二哈之言 · 数据分析二十年，该说的不该说的都说了
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。