49. 📈 仪表盘与报表 Dashboard & Analytics ★★★★☆

🌏 Web 网页规范

  • KPI 指标卡模式：数值 + 趋势箭头 + 迷你折线图 (Sparkline)，支持环比/同比对比
  • 下钻交互 (Drill-down)：点击图表区域 → 侧栏/模态展开明细数据表，支持多层逐级下钻
  • 日期范围选择器：预设按钮 (今天/7天/30天/自定义) + 日历面板，支持本周期 vs 上周期对比
  • 可定制仪表盘布局：拖拽排列 Widget 网格，支持缩放、固定/解锁和个人布局保存

📱 App 移动端规范

  • 横滑指标卡片：水平 Swipable 卡片组，每张卡片展示一个核心 KPI 及迷你趋势图
  • 阈值推送告警：指标突破预设阈值时触发系统推送，锁屏即可查看详情
  • 移动端图表简化：Sparkline 折线替代完整图表，降低数据密度适配小屏
  • 下拉刷新取数：Pull-to-refresh 手势触发最新数据拉取，顶部旋转指示器反馈加载状态

Web KPI 指标卡与可定制仪表盘网格

Web KPI Cards, Drill-down Charts & Customizable Dashboard Grid

Web 仪表盘以KPI 指标卡为视觉锚点——每张卡片包含核心数值、趋势方向箭头 (绿升/红降) 和迷你 Sparkline 折线，支持环比/同比百分比对比。下钻交互允许用户点击图表任意区域展开明细面板，逐层深入数据细节。日期范围选择器提供预设快捷 + 自定义日历双通道，并支持"本周期 vs 上周期"对比视图。仪表盘采用可拖拽 Widget 网格，用户可自由排列、缩放组件并保存个人化布局。

App 横滑卡片与阈值推送告警

App Swipeable Metric Cards & Threshold Push Alerts

移动端仪表盘以水平滑动卡片组为核心交互，每张卡片聚焦一个 KPI 并以 Sparkline 替代完整图表，适配小屏信息密度。阈值告警与系统推送深度集成——当转化率跌破预设阈值或收入突破异常峰值时，锁屏通知直达并可一键跳转详情。图表在移动端简化为趋势线 + 关键标注，复杂交互退化为点击展开完整视图。数据刷新依赖下拉手势 (Pull-to-refresh) 触发最新拉取。

LIVE PLAYGROUND: KPI 指标卡与日期范围选择器 点击日期预设按钮切换时间范围，观察柱状图与 KPI 数值联动更新
https://web.meta-ui.edu/dashboard
09:41
📶 🔋
📅 时间范围： vs 上一周期
💰 收入
¥128.5K
▲ 12.3%
👥 用户
3,842
▲ 8.7%
🎯 转化率
4.2%
▼ 1.8%
⚡ 活跃
1,205
▲ 5.1%
📊 每日趋势 (最近 7 天) 点击柱体下钻查看明细
Mon
Tue
Wed
Thu
Fri
Sat
Sun
📈 数据概览 今天 · ↻ 刷新
💰 收入
¥128.5K
▲ 12.3%
👥 用户
3,842
▲ 8.7%
🎯 转化率
4.2%
▼ 1.8%
⚡ 活跃
1,205
▲ 5.1%
🔔 阈值告警 10:32

转化率跌破 4.5% 阈值，当前值 4.2%

7日趋势
📋 大模型统一 Prompt (LLM Prompt)