高密数据看板Data-Dense Dashboard
在有限屏幕内塞入尽可能多的指标：12–14px 字号、36px 行高、8px 栅格、细分割线取代卡片阴影。效率优先，牺牲呼吸感。
典型场景运营后台 · 监控中心 · 内部工具
编号28
年代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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
在有限屏幕内塞入尽可能多的指标：12–14px 字号、36px 行高、8px 栅格、细分割线取代卡片阴影。效率优先，牺牲呼吸感。
关键词
Multiple charts/widgetsdata tablesKPI cardsminimal paddinggrid layoutspace-efficientmaximum data visibility
别名
Data-Dense
效果与动效
Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners
设计系统变量
--grid-gap8px--card-padding12px--font-size-small12px--table-row-height36px--sidebar-width240px--header-height56px配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333
辅色 / Secondary
Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)
强调色在页面底色上的对比度约 4.8:1，可用于正文与图标。
适用场景
适合 / Best For
- Business intelligence dashboards
- financial analytics
- enterprise reporting
- operational dashboards
- data warehousing
避开 / Do Not Use For
- Marketing dashboards
- consumer-facing analytics
- simple reporting
框架兼容
rechartschartjsd3
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向不适用Not applicable
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Grid layout 12 columns,
- KPI cards responsive,
- Tables sortable,
- Filters functional,
- Loading states for data,
- Export functionality
CSS / 技术关键词
display: grid, grid-template-columns: repeat(12, 1fr), gap: 8px, padding: 12px, font-size: 12-14px, overflow: auto for tables, compact card design, sticky headers
AI 提示词
Design a data-dense dashboard. Use: multiple chart widgets, KPI cards row, data tables with sorting, minimal padding (8-12px), efficient grid layout, filter sidebar, dense but readable typography, maximum information density.