大屏设计规范:分辨率、配色、排版与字体的 12 条最佳实践

大屏设计为什么总翻车

最常见的翻车现场:设计师在 27 寸显示器上做出一版"很美"的大屏,投到会议室 3 米外的 75 寸电视上——字看不清、颜色发灰、重点全无。原因很简单:大屏的阅读距离是 2~5 米,而不是 50 厘米。所有设计决策都要围绕这个前提重新校准。

一、分辨率与画布基准

以最主流的 1920×1080(16:9) 为设计基准,组件字号、间距按这个基准给定;超宽屏(3840×1080 拼接屏)可以按"两块 1080p 拼接"来规划左右分区,而不是把组件无脑拉宽。

• 设计稿 = 最终分辨率,避免二次缩放导致字重发虚;
• 播放设备与大屏画布分辨率不一致时,用等比缩放适配而不是拉伸;
• 提前到现场确认:是 LED 拼接屏还是液晶电视?点距不同,小字号在 LED 屏上可能直接糊掉。

二、配色:深色底 + 三色原则

深色底是行业共识:指挥中心环境光暗,深蓝黑背景(#0a0e1c~#141c36)既护眼又能让图表颜色"跳出来"。在此之上遵守三色原则:

• 主色 1 种:品牌蓝紫系,用于标题、主图表;
• 强调色 1~2 种:青色用于数据高亮;
• 语义色固定:红 = 异常/告警,绿 = 正常/达标,全屏一致,不要一张图红是上涨另一张图红是下跌。

渐变可以增加科技感,但只用于大面积背景与按钮,图表配色保持克制。

三、排版:布局骨架与黄金位

经典骨架是"顶部标题栏 + 左中右三区":顶部放标题与时间;中央黄金位(视线最先落下的区域)给核心 KPI 或主地图;左右两栏按"趋势 → 对比 → 明细"的优先级排布。三个排版铁律:

• 核心指标放大、居上或居中,面积与重要性成正比;
• 同屏组件数量控制在 8~15 个,给呼吸感留白;
• 对齐!所有卡片边缘对齐网格,歪 2px 的卡片比丑配色更毁专业感。

四、字号:按观看距离定下限

字号下限由观看距离决定,1080p 画布的参考值:

另外:数字用等宽字体或 tabular-nums,滚动刷新时不会"跳舞";中文标题加 letter-spacing 更有科技感。

五、图表与动效的选择

• 折线看趋势、柱状做对比、饼图只用于占比且分类 ≤ 5、地图表达分布——选错图表类型,再炫也没用;
• 每张图表只回答一个问题,不要在一张图里塞两条 Y 轴三种维度;
• 动效克制:数字滚动、地图飞线、告警闪烁是加分项;所有图表同时转圈就是灾难。

12 条速查清单

1. 设计稿分辨率 = 播放分辨率,以 1920×1080 为基准;
2. 深色底(#0a~#14 区间),避免纯黑与大面积纯白;
3. 主色 1 + 强调 1~2,语义色(红/绿)全屏统一;
4. 渐变只用于背景与按钮,图表配色克制;
5. 中央黄金位给核心 KPI 或主地图;
6. 组件 8~15 个,保留留白;
7. 所有卡片对齐网格;
8. KPI 数字 ≥ 48px,图表标签 ≥ 20px;
9. 数字用等宽/表格数字;
10. 饼图分类 ≤ 5,柱状图条目 ≤ 12;
11. 每张图表只回答一个问题;
12. 动效服务注意力:重要的动,次要的静。

不想从零纠结配色与装饰?直接从 21 套行业模板 里挑一套改造,规范已经内置在模板里。