仪表盘指标卡组

Dashboard Stat Cards

后台首页那排数字卡:今日订单、新增用户、转化率,每个带涨跌箭头和小趋势。

Web 网站桌面客户端数据与工作内容区组件

大白话说明

指标卡组把经营健康度压缩成排得整齐的数字:每张卡一个指标——名称、当前值、与上期对比的涨跌、一条迷你趋势线。涨跌颜色要有语义纪律(成本类指标涨了是坏事就该红)。点卡可下钻到明细。

什么时候用

后台、数据产品、运营看板的首屏第一行——回答「现在怎么样」。

什么时候不用

指标超过 6 个时先砍到关键 4 个,其余进图表区;数字本身需要解释口径的,要给悬停说明。

细节与变体

  • 涨跌箭头方向与颜色分开编码:箭头说方向,颜色说好坏,两者别打架
  • 数字滚动动画只用在首次加载,别每次刷新都表演一遍
  • 卡与卡之间口径周期必须一致(都是今日或都是本月)

配套效果见下方「可用效果」。

配套提示词(点开填空、复制)

可用效果

参考实现(开源)

  • Carbon(IBM) ↗ Apache-2.0 · 免费(Apache-2.0)

    IBM 的设计系统:Token 体系与数据密集型界面的标杆,后台产品必读参考。

  • Tabler 后台模板 ↗ MIT · 免费(MIT)

    老牌免费后台模板:页面量级大、完成度高,后台项目可以直接站在它肩膀上。

  • shadcn-admin 后台模板 ↗ MIT · 免费(MIT)

    shadcn/ui 拼出的完整后台:仪表盘、设置、聊天页都有,拆开就是现成的页面范式。