name: kpi-dashboard-design description: 设计有效的KPI仪表板，使用适当的指标选择、视觉层次结构和数据可视化最佳实践。在构建执行仪表板、创建分析视图或呈现业务指标时使用。 license: MIT
KPI仪表板设计
设计有效的仪表板，清晰传达关键指标。
KPI选择框架
良好的KPI是：
- 与业务目标相关
- 可衡量和量化
- 受团队影响
- 频繁更新
- 易于理解
常见业务KPI
| 目标 | KPI |
|---|---|
| 收入 | MRR、ARR、收入增长率 |
| 获客 | CAC、新用户数、转化率 |
| 留存 | 流失率、NPS、DAU/MAU |
| 效率 | LTV:CAC、消耗率 |
| 质量 | 错误率、响应时间 |
仪表板布局
┌─────────────────────────────────────────────────┐
│ 执行摘要 │
│ [收入 ▲12%] [用户 ▲8%] [流失 ▼2%] │
├─────────────────────┬───────────────────────────┤
│ │ │
│ 收入趋势 │ 用户获客 │
│ (折线图) │ (条形图) │
│ │ │
├─────────────────────┼───────────────────────────┤
│ │ │
│ 留存漏斗 │ 热门产品 │
│ (漏斗图) │ (表格) │
│ │ │
└─────────────────────┴───────────────────────────┘
视觉设计原则
/* 状态指示的交通灯颜色 */
.metric-good { color: #22c55e; } /* 绿色 */
.metric-warning { color: #f59e0b; } /* 琥珀色 */
.metric-bad { color: #ef4444; } /* 红色 */
/* 视觉层次 */
.metric-primary {
font-size: 2.5rem;
font-weight: 700;
}
.metric-secondary {
font-size: 1.5rem;
font-weight: 500;
}
图表选择
| 数据类型 | 图表 |
|---|---|
| 随时间趋势 | 折线图 |
| 比较 | 条形图 |
| 构成 | 饼图/环形图 |
| 分布 | 直方图 |
| 相关性 | 散点图 |
| 漏斗阶段 | 漏斗图 |
交互功能
- 向下钻取到详细视图
- 日期范围选择
- 按细分市场筛选
- 导出到CSV/PDF
- 定时邮件报告
最佳实践
- 每个仪表板限制5-7个KPI
- 显示趋势，而非仅快照
- 使用一致的色彩编码
- 包含对比周期（与上月相比）
- 实时或每小时更新数据
- 每季度审查仪表板相关性
常见错误
- 指标过多（信息过载）
- 无清晰的视觉层次
- 缺少上下文（无比较）
- 数据过时或陈旧
- 指标无归属责任