Dashboard 指标卡语义契约

大理论

很多 dashboard 失败不是因为图表不漂亮，而是关键指标没有可解释上下文。一个大数字如果没有单位、周期、基线、变化方向、数据更新时间、异常解释和 drill-down 路径，用户只能猜它是否好坏。指标卡应该是 dashboard 的最小决策单元：告诉用户当前状态、相比什么变化、可信度如何、下一步看哪里。

小知识点

1. 指标名必须是业务可理解名称，不只写内部字段名；必要时提供定义 tooltip 或 glossary 链接。
2. 数字显示单位、精度、货币/百分比/人数、时区和数据窗口，例如 last 7 days、MTD、rolling 30d。
3. Delta 要声明比较基线：vs previous period、vs target、vs forecast、vs cohort，不要只放绿色上箭头。
4. 变化方向有语义：成本上升可能是坏，转化率上升可能是好；颜色不能脱离业务含义。
5. 卡片要显示 data freshness、loading/error/partial states；过期数据不能伪装成实时。
6. 点击或辅助操作应进入对应明细、过滤后的表格、图表解释或 action，而不是无目标跳转。

设计判断

如果用户能在 5 秒内判断这项指标是什么、相比什么、是否需要行动、哪里能查证细节，指标卡就是有效的。如果只能看到一个醒目数字和模糊趋势，它只是装饰性数据。

实现建议

建立 metric card schema：id、label、definition、value、unit、precision、timeRange、baseline、deltaValue、deltaDirectionMeaning、target、status、updatedAt、source、drilldownHref、empty/error/loading copy、accessibilityLabel。视觉上让主值、delta、period、source 和 action 保持稳定位置；移动端避免把多张卡压成横向滚动无标签数字。

反例/风险

所有指标都用绿色上升表示好、缺少时间范围、同比/环比混用、把 loading 显示为 0、数据源失败仍显示旧值、点击卡片跳到泛 dashboard、屏幕阅读器只读出“42 percent up”。

案例分析

USWDS data visualizations 指南强调数据可视化用于传达数据集中的模式和关系，并把 usability 与 accessibility 作为互补目标；Mobbin 的 dashboard pattern 库展示真实产品常把 segmented controls、filters、cards、charts、tables 和 progress indicators 混合使用。可学习点是：指标卡应接入筛选、时间范围、明细和可访问说明，而不是孤立数字组件。

来源链接

USWDS Data Visualizations: https://designsystem.digital.gov/components/data-visualizations/ Mobbin Dashboard screens: https://mobbin.com/explore/web/screens/dashboard Carbon Data Table: https://carbondesignsystem.com/components/data-table/usage/ Observable Plot: https://observablehq.com/plot/