数据大屏风Data Dashboard Screen

核心特征

• 深蓝底色加径向光晕，营造屏幕发光感
• 青蓝发光色 #00E5FF 与亮蓝 #1E90FF
• 卡片为细边框加四角装饰线与半透明底
• 数字使用 Orbitron，带发光阴影
• 标题下方带向右渐隐的横向光线

色板与字体

英文

Orbitron、JetBrains Mono（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

数字与标题可用 Orbitron、DIN 或 Rajdhani，中文用系统黑体；大屏上的小标注可用等宽字体，如 JetBrains Mono。

起源与代表作

年代：2015 年后在国内智慧城市、政企可视化项目中普及

数据大屏起源于指挥中心与监控室的多屏墙，2010 年代中期随着智慧城市、政务与企业经营分析项目的铺开而普及，阿里云 DataV 等可视化产品进一步降低了搭建门槛；每年双十一的实时成交额大屏也让这种形式广为人知。其特征是深蓝背景、青蓝色发光数字与图表、四角带装饰线的半透明卡片，用于在大屏上一眼读出关键指标。

AI 设计提示词 · Prompt

数据大屏风（Data Dashboard Screen）风格界面：页面背景深空蓝 #020B1F，顶部叠加亮蓝 #1E90FF（35% 透明度）的径向光晕，右下角叠加发光青 #00E5FF（12% 透明度）的光斑。文字冷光白 #E6F7FF，次要文字 #8FB4D6。卡片背景 rgba(30,144,255,0.1)，1px 青色 rgba(0,229,255,0.35) 边框，圆角 0，并在四个角用 2px 青色 #00E5FF 的 L 形线条做装饰（12px 长）。标题使用 Orbitron，28px，下方带一条 2px 的横向光线：linear-gradient(90deg, #00E5FF, transparent)。数字使用 Orbitron 800，发光青 #00E5FF，text-shadow: 0 0 12px rgba(0,229,255,0.6)。主按钮发光青底、深空蓝字，次按钮青色描边。不使用大圆角与暖色，辅助图表用亮蓝 #1E90FF。所有正文对比度不低于 4.5:1，发光只用于数字与标题。

A Data Dashboard Screen interface: page background deep-space blue #020B1F, with a bright-blue #1E90FF radial glow at 35% opacity at the top and a glowing-cyan #00E5FF spot at 12% opacity in the bottom-right corner. Text is cold white #E6F7FF, secondary text #8FB4D6. Cards use background rgba(30,144,255,0.1) with a 1px cyan rgba(0,229,255,0.35) border and zero corner radius, decorated at all four corners with 12px-long L-shaped 2px lines in cyan #00E5FF. Headings use Orbitron at 28px with a 2px horizontal light line below: linear-gradient(90deg, #00E5FF, transparent). Numbers use Orbitron 800 in glowing cyan #00E5FF with text-shadow: 0 0 12px rgba(0,229,255,0.6). The primary button is glowing cyan with deep-space text and the secondary button has a cyan outline. No large radii or warm colors; secondary chart color is bright blue #1E90FF. Keep all body contrast at least 4.5:1 and use glow only on numbers and headings.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #020b1f;
  --ds-panel: rgba(30, 144, 255, 0.1);
  --ds-text: #e6f7ff;
  --ds-muted: #8fb4d6;
  --ds-cyan: #00e5ff;
  --ds-blue: #1e90ff;
  --ds-border: 1px solid rgba(0, 229, 255, 0.35);
  --ds-glow: 0 0 12px rgba(0, 229, 255, 0.6);
}

适合与不适合

和相近风格的区别

• 赛博朋克：数据大屏用深蓝底与青蓝发光，卡片规整、强调信息可读，服务于指标展示；赛博朋克用近黑底、霓虹黄品红与切角、故障字，更重世界观与反乌托邦氛围。

常见踩坑

• 发光数字与大面积光晕在暗屏上看着醒目，但小号正文不要加发光，否则字形模糊，正文保持纯色并对比度不低于 4.5:1
• 四角装饰用多层渐变背景实现，数量太多会增加绘制开销，一屏的装饰卡片控制在二十张以内，并避免与动画叠加
• 大屏常在 1920×1080 以上展示，小屏上直接缩放会让字号过小，需为窄屏提供降级布局而不是整页等比缩小
• 若给数字加跳动或扫光动画，必须提供 prefers-reduced-motion 的静态方案，且不要让关键数值只靠颜色区分状态

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题