高管看板Executive Dashboard
第一屏只留 4–6 个核心 KPI 与趋势，细节藏进下钻页。数字大、说明少、结论前置，配合红绿状态与倒计时提醒。
典型场景经营驾驶舱 · 投后管理
编号30
年代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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
第一屏只留 4–6 个核心 KPI 与趋势，细节藏进下钻页。数字大、说明少、结论前置，配合红绿状态与倒计时提醒。
关键词
High-level KPIslarge key metricsminimal detailsummary viewtrend indicatorsat-a-glance insightsexecutive summary
效果与动效
KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect
设计系统变量
--kpi-font-size48px--sparkline-height32px--status-green#22C55E--status-yellow#F59E0B--status-red#EF4444--card-min-width280px配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns
辅色 / Secondary
KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors
强调色在页面底色上的对比度约 6.4:1，可用于正文与图标。
适用场景
适合 / Best For
- C-suite dashboards
- business summary reports
- decision-maker dashboards
- strategic planning views
避开 / Do Not Use For
- Detailed analyst dashboards
- technical deep-dives
- operational monitoring
框架兼容
rechartschartjsd3
能力矩阵
浅色模式支持
深色模式支持
移动适配不建议
转化导向不适用Not applicable
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- KPIs 4-6 maximum,
- Trends visible,
- Status colors clear,
- One-page view,
- Mobile simplified,
- Print-friendly layout
CSS / 技术关键词
display: flex for KPI row, large font-size (24-48px) for metrics, sparkline SVG inline, status indicators (border-left color), card shadows for hierarchy, responsive breakpoints
AI 提示词
Design an executive dashboard. Use: large KPI cards (4-6 max), trend sparklines, high-level summary only, clean layout with white space, traffic light indicators (red/yellow/green), at-a-glance insights, minimal detail.