下钻分析Drill-Down Analytics
用面包屑、层级缩进与上下文条记录「我在哪一层」，点击图表即进入明细。关键是保持筛选条件可见、可回退。
典型场景BI 平台 · 财务分析 · 用户增长
编号32
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
用面包屑、层级缩进与上下文条记录「我在哪一层」，点击图表即进入明细。关键是保持筛选条件可见、可回退。
关键词
Hierarchical data explorationexpandable sectionsinteractive drill-down pathssummary-to-detail flowcontext preservation
效果与动效
Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation
设计系统变量
--breadcrumb-separator/--expand-duration300ms--level-indent24px--back-button-size40px--context-bar-height48px--drill-transition300ms ease配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors
辅色 / Secondary
Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors
强调色在页面底色上的对比度约 4.9:1，可用于正文与图标。
适用场景
适合 / Best For
- Sales analytics
- product analytics
- funnel analysis
- multi-dimensional data exploration
- business intelligence
避开 / Do Not Use For
- Simple linear data
- single-metric dashboards
- streaming real-time dashboards
框架兼容
rechartschartjsd3
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向不适用Not applicable
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Breadcrumbs clear,
- Back navigation easy,
- Expand animation smooth,
- Context preserved,
- Mobile drill works,
- Deep links supported
CSS / 技术关键词
breadcrumb nav with separators, details/summary for expand, transition for drill animation, position: sticky breadcrumb, nested grid layouts, smooth scroll to detail
AI 提示词
Design a drill-down analytics dashboard. Use: breadcrumb navigation, expandable sections, summary-to-detail flow, back button prominent, level indicators, context preservation, hierarchical data display.