第三章 大屏视觉规范：色彩体系、字体规范、图标规范、间距与布局规范
好，咱们直接进入正题。大屏设计，说白了就是「视觉说服力」。你数据再牛，逻辑再顺，如果第一眼看上去配色辣眼睛、字体糊成一片、图标不知所云，那这屏基本就废了。我这些年落地过不少大屏项目，踩过的坑比走过的路还多。今天就把视觉规范这块的硬骨头，掰开了揉碎了讲给你听。
3.1 色彩体系：别让大屏变成「彩虹糖」
大屏的色彩，跟普通网页、App 完全不是一个玩法。普通界面讲究柔和、舒适，大屏呢？它要的是「远距离可读」和「氛围感」。你想想看，大屏通常挂在几米开外的墙上，周围环境光复杂，颜色稍微一淡，就啥也看不清了。
核心原则：深色背景 + 高饱和主色 + 低饱和辅助色。这是大屏界的「黄金三角」。
为什么非得用深色背景？ 我刚开始做第一个大屏项目时，甲方非要白色背景，说「显得亮堂」。结果呢？现场灯光一打，屏幕反光严重，数据根本看不清。后来我学乖了，深色背景（比如 #0A0E27、#0D1B2A）能有效吸收环境光，让前景数据更突出。说白了，深色背景就是给数据当「绿叶」的。
3.1.1 主色选择：蓝、青、紫是主流
企业级大屏，主色一般逃不出这三个色系：
- 科技蓝（#00B4D8、#0077B6）： 最稳妥，适合金融、物流、政务。我做过一个智慧城市项目，主色用的就是这种蓝，甲方看了直点头。
- 数据青（#00F5D4、#00BFA6）： 偏年轻化，适合互联网、新能源。视觉冲击力强，但别用太多，容易晃眼。
- 尊贵紫（#7B2FF7、#9D4EDD）： 适合高端制造、品牌展示。我个人习惯用紫色做点缀，大面积用紫色容易显得「脏」。
我的小技巧： 主色定好后，用 HSL 色相环旋转 30-60 度，就能得到一套和谐的辅助色。别自己瞎调，容易翻车。
3.1.2 语义色：红黄绿，别乱用
大屏上的红黄绿，是有「潜规则」的：
| 颜色 | 含义 | 色值参考 | 避坑指南 |
|---|---|---|---|
| 红色 | 警告、异常、高危 | #FF4D4F | 别大面积用，会让人焦虑 |
| 黄色 | 提醒、注意、临界 | #FAAD14 | 别跟白色背景混用，看不清 |
| 绿色 | 正常、安全、通过 | #52C41A | 别用太亮的绿，刺眼 |
我曾经在一个项目里，把红色用在了「已完成」状态上。结果现场操作员一看屏幕红了，以为出事故了，差点按了紧急停止按钮。嗯，从那以后，语义色我再也不敢乱标了。
3.2 字体规范：大屏不是「阅读器」
大屏上的字，核心就一个目标：看得清。别跟我谈什么衬线体、艺术字，在大屏上都是浮云。我见过太多设计师把 12px 的字体用在大屏上，结果现场根本看不清，那叫一个尴尬。
3.2.1 字体选择：无衬线是唯一解
推荐字体优先级：
- PingFang SC（苹方）： 苹果生态首选，字重丰富，显示细腻。
- Microsoft YaHei（微软雅黑）： Windows 大屏标配，兼容性好。
- 思源黑体（Source Han Sans）： 开源免费，跨平台，我个人的最爱。
- DIN Pro / DIN Alternate： 数字专用字体，显示数据时用这个，比中文数字好看十倍。
注意： 千万别用宋体、楷体等衬线字体。大屏像素颗粒大，衬线体的「小脚」会糊成一团。我见过一个项目用了「方正舒体」，结果远看像一堆蚯蚓在爬。
3.2.2 字号层级：远距离可读
大屏的观看距离通常在 2-5 米。我总结了一套字号规范，你直接拿去用：
| 层级 | 用途 | 最小字号 | 推荐字号 |
|---|---|---|---|
| 主标题 | 大屏标题、模块名称 | 36px | 48-60px |
| 数据数值 | 核心 KPI、大数字 | 48px | 60-96px |
| 数据标签 | 图表标签、轴名称 | 20px | 24-28px |
| 辅助信息 | 时间、单位、说明 | 16px | 18-20px |
为什么会这样？ 你想想看，大屏上最核心的是数据数值，它必须第一时间抓住眼球。主标题反而可以小一点，因为用户知道自己在看什么。辅助信息最小，但也不能低于 16px，否则远看就是一条线。
3.3 图标规范：别让图标「抢戏」
大屏上的图标，跟 App 里的图标完全是两码事。App 图标可以精致、复杂、有细节，大屏图标必须简洁、符号化、远距离可识别。
3.3.1 图标风格：线面结合，以面为主
我个人习惯用「面性图标」作为主力。为什么？因为大屏分辨率高，线形图标远看容易断掉，变成一堆散点。面性图标填充面积大，视觉重量足，远看依然清晰。
- 面性图标： 用于主要功能、状态指示。比如「警告」「成功」「失败」。
- 线形图标： 用于辅助信息、装饰。比如「搜索」「设置」「帮助」。
- 特殊图标： 比如地图上的 POI 图标、设备图标，需要定制，别用通用图标库。
避坑指南： 图标尺寸建议统一为 24px、32px、48px 三个档位。别用 28px、36px 这种奇怪尺寸，对齐会逼疯你的。我曾经在一个项目里用了 26px 的图标，结果跟文字死活对不齐，最后全部重做。
3.3.2 图标颜色：跟随语义，别乱改
图标的颜色，必须跟语义色保持一致。比如：
- 警告图标 → 红色
- 成功图标 → 绿色
- 信息图标 → 蓝色
- 禁用图标 → 灰色（#8C8C8C）
千万别为了好看，把警告图标改成蓝色。用户看到蓝色第一反应是「正常」，结果点进去发现是报警，这体验就太坑了。
3.4 间距与布局规范：呼吸感是设计灵魂
大屏最怕什么？怕「满」。很多新手设计师恨不得把所有数据都塞进一屏，结果呢？密密麻麻，用户看了直接头疼。大屏的间距，说白了就是给数据「留白」，让用户的眼睛有地方休息。
3.4.1 间距体系：8 的倍数法则
我推荐使用「8px 网格系统」。所有间距、内边距、外边距，都必须是 8 的倍数。为什么是 8？因为 8 能整除 16、24、32、40、48、56、64……几乎覆盖所有常见尺寸。
| 间距层级 | 数值 | 使用场景 |
|---|---|---|
| 超小间距 | 8px | 图标与文字之间、标签内部 |
| 小间距 | 16px | 卡片内元素间距、列表项间距 |
| 中间距 | 24px | 卡片与卡片之间、模块内部间距 |
| 大间距 | 32px / 40px | 模块与模块之间、大屏边缘留白 |
| 超大间距 | 48px / 64px | 大屏顶部标题区、底部操作区 |
我个人习惯在 Figma 里把「网格」设置为 8px，然后所有元素都吸附在网格上。这样出来的布局，不管怎么缩放，都是整整齐齐的。
3.4.2 布局规范：左中右，上中下
大屏布局，我总结了三套经典模板：
- 对称式布局： 中间放核心数据（比如地图、大数字），左右两侧放辅助图表。适合展示型大屏。
- 左中右三栏式： 左侧放列表/排名，中间放核心视图，右侧放详情/趋势。适合监控型大屏。
- 上下分层式： 顶部放标题/时间，中间放核心内容，底部放滚动信息/操作栏。适合指挥中心。
注意： 大屏的「安全区域」很重要。一般屏幕边缘 5%-10% 的区域，会有物理边框遮挡或反光。核心数据一定要放在屏幕中央 80% 的区域内。我曾经有个项目，把关键 KPI 放在了屏幕最左边，结果现场屏幕边框太宽，直接遮住了一半数字，被甲方骂惨了。
3.4.3 实战中的「呼吸感」技巧
嗯，这里分享一个我常用的技巧：「三明治法则」。每个模块，从上到下依次是：标题区（16px 间距）→ 内容区（核心数据）→ 底部留白（24px 间距）。这样每个模块看起来都像一块「三明治」，层次分明，不拥挤。
你想想看，如果每个模块之间只有 8px 间距，那整个大屏看起来就像一堵墙，用户根本找不到重点。给模块之间留出 32px 以上的间距，视觉上立刻就有了「呼吸感」。
总结一下： 色彩用深色背景 + 高饱和主色；字体用无衬线 + 大字号；图标用面性 + 语义色；间距用 8 的倍数 + 留白。这四点做到了，你的大屏至少能打 80 分。剩下的 20 分，靠的是你对业务的理解和对细节的打磨。
好了，视觉规范这块就讲到这里。下一章咱们聊聊数据可视化图表的选择与设计，那可是大屏的「灵魂」所在。