仪表盘设计使用场景
- SaaS 收入评审同时查看收入、账户、流失率和延迟指标。
- 账户监控在同一张表格中比较账户名称、套餐和状态。
- 订阅事件跟踪结合近期账户事件的时间和套餐信息进行查看。
仪表盘布局亮点
- 四项摘要指标MRR、活跃账户、流失率和 P95 延迟位于首要位置。
- 收入与账户宽幅趋势图位于新账户行旁边。
- 近期事件四个示例事件按显示时间排序。
仪表盘视图
1 / 1SaaS 收入概览
页面标题为“Overview · April 2026”，顶部有“Last 30 days”控件和“+ New report”按钮。下方的四个指标面板分别显示 MRR（$48.2K）、活跃账户（3,184）、流失率（30d）（2.1%）和 P95 延迟（182 ms），每项都带有一个次级变化值。这样一来，商业指标和技术指标会在首次查看时同时呈现，不过页面没有解释这些不同指标是如何定义的。
颜色为次级数值提供了快速的视觉区分：其中三个为绿色，而流失率的“+0.4 pp”为红色。仅凭正负号无法说明变化是否有利，因此标签和单位很重要。所提供的数值和账户详情是说明性示例内容，并非经过验证的运营结果。
阅读收入和账户面板
下一行将“Revenue · 30 days”与“New accounts”并列。CSS 将这一行定义为 2:1 的列比例，使折线图比账户表格拥有更多空间。这一比例让收入走势成为主要视觉焦点，同时保留套餐和状态信息，便于快速检查账户。
图表整体呈上升趋势，但包含清晰可见的下跌；由于没有显示坐标轴标签或绘制数值，它传达的是方向和波动，而不是精确的每日数值。相邻表格有三个明确字段：Account、Plan 和 Status。例如，Linear 的套餐为 Team、状态为 active，而 Notion 的套餐为 Team、状态为 trial。将套餐和状态分列，有助于区分订阅层级与账户状态。
指标扫描
比较四项主要数值及其相应变化，同时在解读变化方向之前检查每项的单位和标签。
账户检查
使用账户表格将组织与其套餐和状态关联起来，不要将套餐名称当作状态标签。
从摘要到近期事件
视觉阅读顺序从四项指标开始，接着是图表和新账户表格，随后向下进入“Recent events”。样式表让该事件区域横跨两列面板下方的整行。其表格使用 Time、Account、Event 和 Plan 字段，因此读者可以将一项记录的操作与组织和套餐同时关联起来。
列出的示例包括 Acme Co 的“Upgraded to Team”和 Globex 的“Cancelled subscription”。这些行补充了摘要指标和账户状态表未提供的上下文，但页面没有说明这些事件与所显示指标之间的关系。排序方式和示例时间戳使其成为近期活动视图，而不是完整审计历史的证据。
| 区域 | 可见字段 | 阅读目的 |
|---|---|---|
| 指标面板 | 指标、数值、变化 | 查看主要指标及其相应变化值。 |
| 新账户 | 账户、套餐、状态 | 比较账户层级与其显示状态。 |
| 近期事件 | 时间、账户、事件、套餐 | 将示例活动记录与账户和套餐关联起来。 |
可见的设计与能力边界
这个作品示例展示了包含示例值和可见控件的仪表盘设计。“Last 30 days”和“+ New report”看起来具有交互性，但现有证据无法证明它们会改变日期范围、创建报告或连接到实时服务。因此，应将图表、指标和表格理解为设计内容，而不是实时数据、数据存储或已完成操作的证明。
源文件在主工作区旁定义了一个 220px 宽的侧边栏。所捕获的视图聚焦于主要区域：先是 2:1 的图表与账户行，随后是全宽事件表格。在 900px 以下，源文件会将这两个面板上下堆叠，并将指标卡片改为两列；它没有提供完整的手机专用导航布局。
如何在 OpenDesign 中创建 SaaS 收入仪表盘设计
设置概览和指标定义
从带日期的概览标题和四个指标面板开始。根据受众选择适合放在一起的衡量指标，并明确每个数值及其变化代表什么，包括单位和对比周期。确保示例值与经过验证的运营数据在视觉上有明显区别。
建议提示词创建一个 SaaS 收入仪表盘设计，包含带日期的概览、分别用于 MRR、活跃账户、30 天流失率和 P95 延迟的四个指标面板、30 天收入折线图、新账户表格和近期事件表格。使用明确标注的说明性示例数据。将可见的日期范围和新建报告控件仅作为设计元素展示；不要暗示存在可运行的服务或实时数据。
安排图表和账户上下文
优化收入图表与账户表格之间的平衡。保留账户、套餐和状态之间的区别，并根据预期的阅读任务决定图表是否需要显示坐标轴或数值。检查更详细的表格在趋势视图旁边是否仍然清晰易读。
将事件与其上下文关联
为事件列表提供时间、账户、事件和套餐字段，然后检查示例行是否能传达一项操作，同时不暗示这是完整历史记录。按照预期的工作区宽度，检查从摘要指标到图表、账户行和事件的过渡。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
