3、设计规范制定：色彩体系、字体规范、图表风格统一、动效规范
好，咱们接着聊。上一章我们把大屏的骨架搭起来了，也就是布局和栅格系统。但光有骨架不行，你还得给它「化妆」——这就是设计规范。
说实话，我见过太多大屏项目，功能都做完了，最后一看，颜色辣眼睛，字体大小不一，图表风格像拼凑的。嗯，这就是没定好规范。今天我就把我在几个千万级大屏项目里踩过的坑、总结的经验，一次性倒给你。
3.1 色彩体系：别让大屏变成「彩虹屏」
大屏的色彩，跟普通后台系统完全是两码事。普通后台讲究柔和、护眼，大屏讲究的是——视觉冲击力。你想想看，大屏通常放在展厅、指挥中心，环境光暗，距离远，颜色不够亮根本看不清。
核心原则：深色背景 + 高亮主色 + 辅助点缀色。深色背景用来吸收环境光，高亮色用来突出数据。
我个人习惯用「3+2」色彩模型：
- 3个主色：背景色（深蓝/深灰/纯黑）、主色（科技蓝/数据蓝）、文字色（白色/浅灰）
- 2个点缀色：警示色（橙红/金黄）、对比色（青绿/紫色）
我在项目中遇到过一个问题：客户非要加七八种颜色，说「数据分类多，颜色不够用」。结果大屏一投上去，跟个彩虹似的，数据根本没法看。后来我用了色相渐变法——同一色系里通过明度、饱和度来区分层级，而不是换颜色。
| 层级 | 色值 | 用途 |
|---|---|---|
| 背景 | #0A1628 | 主背景色，深空蓝 |
| 主色 | #00D4FF | 数据高亮、关键指标 |
| 辅助色1 | #36D399 | 增长趋势、正向数据 |
| 辅助色2 | #F56C6C | 预警、异常数据 |
| 文字色 | #FFFFFF / #A0B4D0 | 主标题 / 副标题、说明 |
小技巧：大屏上不要用纯白 #FFFFFF，刺眼。用 #E8F0FE 或者 #D0E0F0 这种带一点蓝调的白色，看着舒服多了。
3.2 字体规范：别让用户眯着眼看
字体这块，我踩过最大的坑就是——用了苹方字体。结果在Windows系统的大屏主机上，苹方不兼容，全部回退成宋体，丑到哭。那次项目交付前通宵改字体，教训深刻。
所以我现在定字体规范，就一句话：用系统自带字体，或者用Web安全字体。
大屏常用的字体栈：
/* 数字和英文 */
font-family: 'DINPro', 'DIN', 'Helvetica Neue', Arial, sans-serif;
/* 中文 */
font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
/* 组合写法 */
font-family: 'DINPro', 'PingFang SC', 'Microsoft YaHei', sans-serif;
字体大小也得定死。我一般用「4级字号体系」：
- 一级标题：36-48px，用于大屏主标题、核心数据
- 二级标题：24-32px，用于图表标题、模块名称
- 正文数据：18-22px，用于具体数值、指标
- 辅助说明：14-16px，用于单位、时间、图例
注意：大屏的观看距离通常在2-5米，字号至少要比普通网页大2-3个级别。我曾经见过一个项目用12px的字体，投到100寸大屏上，根本看不见。
3.3 图表风格统一：别让ECharts和AntV「打架」
大屏上图表是最核心的视觉元素。但很多团队犯一个毛病——柱状图用ECharts默认样式，折线图用AntV默认样式，饼图又换一套。结果整个大屏像拼盘，风格割裂。
我的做法是：先定图表「皮肤」，再写代码。
具体来说，我会在项目初期就定义好：
- 柱状图：圆角柱、渐变填充、无网格线
- 折线图：平滑曲线、渐变面积、圆点标记
- 饼图：环形饼图、引导线简洁、标签在外
- 仪表盘：圆弧进度、渐变指针
举个例子，这是我常用的ECharts主题配置片段：
// 统一图表主题
const chartTheme = {
color: ['#00D4FF', '#36D399', '#F56C6C', '#FFB74D', '#7C4DFF'],
backgroundColor: 'transparent',
textStyle: {
color: '#A0B4D0',
fontSize: 14,
fontFamily: 'DINPro, PingFang SC'
},
// 柱状图统一设置
bar: {
barWidth: '40%',
borderRadius: [4, 4, 0, 0],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: '#00D4FF' },
{ offset: 1, color: '#0A4B7A' }
]
}
}
},
// 折线图统一设置
line: {
smooth: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: { width: 2 },
areaStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
{ offset: 1, color: 'rgba(0, 212, 255, 0.02)' }
]
}
}
}
};
避坑指南：我曾经把ECharts和AntV混用在一个大屏上，结果两个库的动画帧率不一致，导致图表刷新时出现「撕裂感」。后来我统一只用ECharts，问题就解决了。如果非要用多个库，记得把动画时长统一。
3.4 动效规范：动效不是越多越好
大屏没有动效，就像人没有灵魂。但动效太多，又像喝了假酒——晃得人头晕。
我总结了一个「3-5-7」动效原则：
- 3种基础动效：入场动效（数据加载时）、刷新动效（数据更新时）、轮播动效（自动切换时）
- 5个控制参数：时长（300-800ms）、缓动函数（easeInOut）、延迟（0-200ms）、循环次数、触发条件
- 7分克制：70%的动效应该是微动效（透明度变化、位移10px以内），20%是中等动效（缩放、旋转），只有10%可以是大动效（全屏切换、数据飞线）
具体到实现，我一般这样定：
| 动效类型 | 时长 | 缓动函数 | 使用场景 |
|---|---|---|---|
| 数据入场 | 600ms | cubic-bezier(0.25, 0.1, 0.25, 1) | 图表数据首次加载 |
| 数据刷新 | 400ms | easeInOut | 定时刷新数据时 |
| 悬浮高亮 | 200ms | ease | 鼠标悬停、触摸交互 |
| 轮播切换 | 800ms | easeInOut | 多图表自动轮播 |
| 飞线动画 | 1500ms | linear | 地图数据流动 |
警告：动效时长不要超过2秒。大屏是给人看的，不是给人等的。我曾经见过一个飞线动画做了3秒，客户说「数据都刷新完了，动画还没播完」。另外，循环动效一定要加「暂停」机制，否则CPU占用率会飙升。
好了，色彩、字体、图表、动效，这四个规范定下来，你的大屏设计就有了「宪法」。后面所有开发都按这个来，就不会出现「五彩斑斓的黑」这种笑话了。
下一章，咱们聊聊组件库的搭建——怎么把规范落地成可复用的代码。