仪表盘设计示例：14 种布局及其成功之处

良好的仪表盘设计始于一个问题，而不是一张图表：谁在查看，他们需要做什么决定，以及查看的频率如何？最好的仪表盘会在顶部放置几个带有上下文的核心数字，在下方用图表解释变化，让筛选器一目了然，并让人们能够针对所看到的内容采取行动。大多数实际的仪表盘都位于登录之后，因此下面我们先列出三个我们于 2026 年 10 月核查过的公开示例，然后是十一种通用布局（不指名具体产品）。之后是设计清单、常见错误以及如何构建你自己的仪表盘。

14 个示例一览

公开的仪表盘示例

以下内容描述的是截至 2026 年 10 月的情况。

1. Plausible 的实时演示

Plausible 是一款注重隐私的网站分析工具，它在实时演示中公开展示其自身网站的分析数据，任何人都可以浏览。其文档介绍了诸如热门页面之类的报告，包括页面浏览量、跳出率、停留时间和滚动深度，以及入口页和出口页。筛选按钮允许你按页面进行细分，支持“是”“不是”和“包含”规则，文档还介绍了如何比较不同时段的统计数据。

可借鉴之处： 使用真实数据的公开演示，让人们在注册之前就能评估仪表盘；一小组简单的报告，配合统一的筛选系统，无需培训也容易理解。你可以亲自打开这个演示，留意报告的布局方式。

2. Stripe 仪表盘

Stripe 的文档介绍了一个首页，其中包含关于业务表现的分析和图表，同时会突出显示重要通知，例如尚未处理的争议。你可以选择在概览中显示哪些小组件。侧边栏通向你可以操作的列表（余额、交易、客户、产品目录），每个列表都有筛选和导出功能。按下“?”可显示键盘快捷键，沙盒环境让你在不影响真实数据的情况下进行测试，并且还提供适用于 iOS 和 Android 的移动应用。

可借鉴之处： 将“我们做得怎么样？”的视图与“什么需要我关注？”的提醒搭配使用，并允许每个人自定义概览。

3. Grafana

Grafana 的文档介绍了由面板构建的仪表盘，每个面板对某个数据源运行一次查询，并按行或标签页进行组织。变量可以让同一个仪表盘在不同的服务器或环境之间切换。

可借鉴之处： 变量可以避免你制作十份相同仪表盘的副本。将面板分组为可折叠的行，可以让繁忙的仪表盘保持可读。

可直接套用的仪表盘布局

4. SaaS 指标仪表盘

顶行：月度经常性收入（MRR）、新增客户、流失客户和活跃用户，每项都附带相比上月的变化。下方：一条 MRR 趋势线、按套餐的细分，以及最近注册用户列表。我们关于 SaaS 指标的指南解释了每个数字的含义。

5. 销售漏斗仪表盘

按阶段统计交易的漏斗图或柱状图、按负责人统计的管道金额、本月即将成交的交易，以及一周内没有任何跟进活动的交易列表。点击某笔交易即可打开它，因此该仪表盘同时也是一份待办清单。

6. 电商后台

顶部显示今日订单、收入和平均订单金额；主要区域是“未发货订单”列表；侧边显示低库存商品和最新评价。最常见的操作“标记为已发货”应当只需单击一次。

7. 客服仪表盘

未结工单、等待你的团队处理的工单、首次响应时间中位数，以及按标签分类的工单。下方是按等待时长排序的实时队列。凡是超过响应时限的内容都应突出显示。

8. 库存仪表盘

首先列出低于补货水平的商品，并附带“补货”操作。然后是按类别统计的库存价值、近期库存变动，以及在设定时间内没有销售的商品。请参阅如何构建库存管理应用。

9. 项目仪表盘

每个项目一行，显示状态、负责人、截止日期和完成百分比，并附上所有项目中逾期任务的列表。仅对异常情况（延期、受阻）着色，使其突出显示。

10. 营销仪表盘

在所选日期范围内，按渠道显示访问量、注册数和转化率；一张随时间变化的注册数图表，并标注营销活动的上线时间；以及热门着陆页。

11. 财务仪表盘

现金余额、待付和逾期发票、本月支出与上月对比，以及即将到期的账单。会计级别的详细数据应保留在报表中，仪表盘只用于概览。

12. 诊所或预约仪表盘

以时间线显示今日预约、取消和未到场情况、空闲时段以及新预约。字号要足够大，让前台人员在屏幕前一眼就能看清。

13. 个人追踪仪表盘

当前连续记录、几个目标的进度，以及活动的日历热力图。它的作用是激励而非分析，因此请保持在一屏之内。

14. 面向客户的仪表盘

每位客户登录后只能看到自己的项目、报告或结果。标签清晰，不使用内部术语，并提供导出自己记录的按钮。这需要完善的登录和权限功能，请参阅基于角色的访问控制。

最佳仪表盘的共同特点

• **明确的受众和用途。**例如：“面向客服主管，每天早上查看。”
• 顶部放置核心数字，并附带上下文：对比、目标或趋势。
• **图表与问题相匹配。**趋势用折线图，类别比较用柱状图，精确数值用表格。
• 筛选器一目了然，尤其是日期范围，并应用于页面上的所有内容。
• **异常情况要突出。**用颜色标示需要关注的内容，而不是用于装饰。
• **通往行动的路径。**点击数字即可查看背后的数据行，然后采取行动。
• 定义一致。“活跃用户”在任何地方的含义都相同，并且该定义有文字记录。
• **速度快。**缓慢的仪表盘会逐渐无人打开。

常见错误

• **展示所有能测量的指标。**图表越多，每一张被注意到的几率就越低。
• 数字缺乏上下文。“1,240”如果没有上一周期或目标作为参照，意义不大。
• **饼图切片过多。**难以比较；排序后的柱状图通常更清晰。
• **颜色过多。**强烈的颜色应只保留给警报和一个重点数据系列。
• **数据过时却没有时间戳。**务必显示数据最后更新的时间。
• 没有移动端视图，而人们经常需要在外出时查看仪表盘。
• **混合受众。**董事会报告和日常运营视图很少应该放在同一页面上。

如何构建你自己的仪表盘

1. 写下仪表盘必须回答的问题，以及由谁来提出这些问题。
2. **列出数据源：**你应用的数据库、电子表格，或其他工具的 API。
3. **勾勒布局：**核心数字、两到四张图表、一个操作列表。
4. **动手构建。**使用 Mythex，你只需在聊天中描述仪表盘，并在实时预览中看到它运行。它可以创建仪表盘所需的数据库、登录功能和角色，并且只需点击一次即可发布到一个网址。你可以浏览模板作为起点。如果你的数据已经存放在数据仓库中，并且需要临时分析，BI 工具可能更适合；如果数据在电子表格中，请参阅如何将 Google Sheets 连接到你的应用。
5. **与真实用户一起测试。**观察他们使用一周，并移除他们从不使用的内容。

如需完整的操作指南，请阅读如何构建仪表盘。

我们如何选择这些示例

大多数仪表盘都是私有的，因此我们只列出了其仪表盘在其官网上公开或有文档说明的产品，并描述了这些页面在 2026 年 10 月的内容。其他布局则是通用的常见模式，以概括的方式描述，并非对任何特定产品的复制。

常见问题