01
实时接入与流式聚合
多源数据（日志 / 埋点 / 业务库）统一接入，聚合窗口可配 1s / 10s / 60s。首屏只渲染可视区域图表，滚动时按需加载，长列表用虚拟滚动把 DOM 控制在 200 节点内。
12 类支持数据源类型
3 步完成接入配置
Core Capabilities
4 项核心能力，全部围绕「顺手」设计
每张能力卡都对应一组可验证的交互参数；鼠标悬停可看到抬升 + 描边发光，键盘 Tab 同样有焦点反馈。
02
多维可视化与图表编排
提供漏斗 / 热力 / 桑基 / 折线 4 类主图，拖拽即可重排卡片。图表进入视口用 0.45s 缓出淡入上浮，避免切页闪烁；配色统一收敛在主色与强调色内，保证同一屏不超过 3 个色相。
4 类主图类型
0.45s缓出淡入时长
03
钻取追溯与对比分析
点任一异常点即可下钻，最多 5 级并支持面包屑逐级回退；对比模式可锁定 2 个时间窗，差异值用强调色小面积高亮，绝不用整块高饱和底色。取数超 5s 自动给出进度与取消按钮。
5 级可回退钻取深度
2 窗口对比锁定数
04
响应式布局与多端一致体验
采用容器查询 + clamp() 排版，1280 / 1024 / 640 / 380 四档断点逐级收敛：桌面 4 列、平板 2 列、手机单列。触屏点按区不小于 44px，hover 语义在触屏降级为点击态，避免“悬浮才能看”的体验死角。
4 / 2 / 1桌面 / 平板 / 手机列数
44px最小可点按尺寸
User Voices
客户怎么说：微交互带来了什么
来自数据分析师、增长团队与前端负责人的真实反馈，全部围绕可量化的体验改动。
以前下钻一次要点 4 层菜单，现在点异常点直接进明细，回退只需点面包屑。日常排查从 9 分钟缩到约 3 分钟。
林可数据分析师 · 电商行业
效率 +62%
仪表盘进入视口的淡入上浮很克制，不再闪；给前端同学统一了动效令牌后，新增图表的实现成本降了一半。
周叙前端负责人 · SaaS 平台
工时 -50%
触屏上不再是“悬浮才看得见”的隐藏信息，点按区足够大，外出用平板看核心指标也没误触。
陈岸增长负责人 · 本地生活
误触 -38%
Interaction Close-up
一次「异常定位」的完整交互特写
从发现异常到得出结论的 4 步路径，每步都有明确的动效时长与反馈约定。
把「找数」变成「看见」
- 悬停定位：折线 hover 出现十字准星与浮层，浮层延迟 120ms 出现，避免快速划过时闪烁。
- 点击下钻：异常点点击后 320ms 缓出展开明细面板，面板保留上一级上下文，标题栏显示当前维度路径。
- 对比验证：一键锁定上周期同口径数据，差异值用强调色仅高亮数字与细线，避免大面积填色干扰阅读。
- 结论沉淀：可把当前筛选保存为「视图快照」，下次打开 1 次点击还原全部参数，减少重复操作。
Ecosystem
与数据生态伙伴并肩
数据源、可视化组件与前端动效库伙伴共同保障接入顺畅。悬停可暂停滚动，方便看清名称。
数仓引擎伙伴
可视化组件库
埋点采集平台
前端动效库
指标治理服务
数据权限网关
数仓引擎伙伴
可视化组件库
埋点采集平台
前端动效库
指标治理服务
数据权限网关
Practical Checklist
落地清单：6 条能直接照做的要点
每条都给出做法、参数或阈值，以及可验证的量化指标，避免“看起来不错”式的空话。
先定动效令牌，再写组件
把时长与曲线收敛成 3 档：快速 150ms（hover / 描边）、基础 250ms（展开 / 切换）、缓慢 450ms（入场 / 大面板），曲线统一 cubic-bezier(.16,1,.3,1)。禁止逐组件写死时长，新增页面动效实现成本可降约 50%。
悬停必须有等价键盘态
所有 hover 抬升 / 发光，都要配一份 :focus-visible 样式（2px 强调色外描边 + 2px offset）。验收标准：仅用 Tab 键能走完「筛选 → 下钻 → 回退」全流程，可完成率 ≥ 95%，且焦点环对比度 ≥ 3:1。
仪表盘首屏只渲染可见图表
用 IntersectionObserver 延迟初始化，离屏图表不建实例；单页图表实例控制在 ≤ 8 个，长列表虚拟滚动把 DOM 节点压在 200 以内。目标：首屏可交互时间 ≤ 1.8s（中端移动网络）。
取数超过 5 秒必须给进度与取消
查询发出即显示骨架屏，超过 5s 出现进度提示与「取消」按钮，超过 15s 自动提示缩小时间范围。避坑：不要用整块高饱和底色做加载态，用中性底 + 强调色细进度条，避免视觉疲劳。
响应式先保内容，再谈列数
断点取 1280 / 1024 / 640 / 380：桌面 4 列、平板 2 列、手机单列。所有网格用 minmax(0,1fr) 防长标题撑破列宽，图片容器统一固定宽高比 + object-fit:cover 防跳动；验收：320px 宽下无横向滚动条。
尊重 reduced-motion，动效可关
在 prefers-reduced-motion: reduce 下关闭错峰入场、跑马灯与呼吸光点，把过渡压到 0.01ms，跑马灯改为可横向滚动。同时保证动效关闭后信息不丢失：被隐藏的说明文字要能在静态态直接读到。