在企业数字化转型的浪潮中，数据可视化大屏已成为展示企业核心业务数据和指标的重要工具。本文将分享企业级数据可视化大屏设计的实战经验，全方位剖析如何打造一个既炫酷又实用的数据可视化大屏。

一、需求背景

公司希望开发一个炫酷的可视化大屏，展示公司的核心业务数据和指标，用户主要是领导层（对内）和外部客户或合作伙伴（对外）。

二、需求思路

1. 确定业务场景

通过回答5W（Who、What、Why、When、Where、How），我们逐步深入和细化业务场景和用户需求。

① Who：用户是谁？有哪些用户类型？

经过内部沟通，本次大屏主要为对外商务演示使用，用户类型主要为：同行、（潜在）合作伙伴、（潜在）投资方和其他参观者。

② What：数据大屏是什么？用户希望看到的数据大屏是什么样的，他们有哪些期望？用户重点关注哪些数据和指标？

经过沟通，了解到业务方对于大屏的期望：

• 展示公司的资产规模、交易规模和用户规模，有汇总也要有明细，支持数据下钻；
• 展示业务的核心指标，按照业务类型分别展示。
• 数据既要真实、可靠、相互可佐证，又要符合公司对外宣传的规模和形象，还需要系统自动更新数据，不依赖人力维护。
• 希望大屏外观上比较炫酷、有科技感、有动态、能交互。

③ Why：用户为什么需要数据大屏，主要用途是什么？

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

主要用于客户演示，但领导层也希望通过大屏了解公司业务全局，所以会有对内对外两个方向的使用场景。

④ When、Where：用户在什么时候什么场景在哪里看数据可视化大屏？

初步确定使用场景和投屏设备

⑤ How：我们怎么满足用户的需求，包括场景使用需求和数据需求？

这部分就是具体的需求分析和方案设计了。

2. 确定业务指标

根据大屏的使用场景和作用，确定大屏上要展示的数据和指标，比如设备运维监控大屏，可能会展示设备的规模和区域分布、设备运行的实时状态和设备故障告警等。

我本次的数据大屏主要是对外演示，展示公司某一核心业务的规模和运营效率等，向外展示公司在这一业务上的实力和能力。

主要的数据包括：

1. 规模数据：资产规模、交易规模、用户规模、客户规模
2. 细分数据：资产不同维度的分布、交易分布、日新增、日活跃等
3. 区域分布：资产覆盖省份和城市，具体省份和城市的数据。
4. 核心指标：业务质量指标和效率指标，加上一定时间的趋势图，增加数据丰富度。
5. 区域排行：省份和城市资产/交易/指标排行和分布

列举出所有要展示的业务指标、计算公式和数据维度，在列举的同时，初步规划展示形式和排版布局。

3. 实现过程和难点

在做这个企业级数据可视化大屏过程中，主要有三个难点：

① 大屏展示的数据和指标

如果完全零基础搭建数据和指标，需要完成数据采集、清洗和指标输出等全流程开发，在开始大屏需求之前要先完成底层数据指标系统的搭建，对于研发和测试来说是一个非常大的工作量。

好在我们小团队已经对该业务积累了基础数据和指标体系，大屏所需的数据基本是现成的，部分数据需要再基于档案和订单再做统计和呈现。

② 好看、高大上的大屏界面

大屏需兼顾数据可读性与视觉表现力，涉及动态图表、空间布局、视觉动效等多维度设计。由于部门UI资源短缺，作为产品经理真的是硬着头皮完成了大屏的UI设计图和动态效果。

前端同事非常给力，最终效果还原度90%，得到领导的好评。

③ 数据真实性和展示策略的平衡

我们的大屏数据是真实值和屏显值双轨并行的。屏显值是指在真实值上加上了偏移值，最终显示在大屏上的数据，如果数据未加偏移，屏显值=真实值。

这样做是因为领导层希望平时看到最真实的数据，但对外客户演示时，有些数据较为敏感或不符合对外宣传，则需要在真实数据基础上增加偏移值。

最终证明，我们这个双轨并行真的是太“明智”了，避免了业务和研发的“纠缠”。

4. 最终实现结果

感谢前端和后端大佬的鼎力支持，大屏很顺利地按期上线，后面根据业务部门的建议，进行了几个小版本的优化，目前已在正常使用。

5. 大屏设计的一些方法

5.1. 了解展示的设备

需要提前了解大屏会展示在哪些设备上，设备分辨率和尺寸是多少，更专业的可能还要考虑点间距、最佳可视距离等。

如果投屏设备的尺寸和分辨率不标准、屏幕是拼接屏，设计稿最好是基于投屏设备进行设计，但这样复用性就不高，投屏到其他设备，大屏会变形。

由于我们投屏设备是比较标准的尺寸和屏幕，分辨率也支持调整。所以设计稿选择常规的1920:1080，电脑和投屏设备打开，都能正常展示。

5.2. 内容排版

1. 信息层级：核心内容占60%，辅助信息占30%，次要信息占10%，凸出核心内容。
2. 符合人视觉动线习惯：一般人们习惯左上→右上→左下→右下的视觉动线看屏幕。我们设计的时候可以结合用户习惯，先把核心重点内容放在左上方，再通过一些对比、动态、高亮、微交互等吸引用户关注重要内容。
3. 数据-图表：数据要表达什么信息（趋势、占比和分布），使用哪种图表类型更合适清晰。
4. 明确主题：图表不要太过简化，要完整准确地告知表达的信息。

5.3. 大屏字体

中文字体：思源黑体

主标题：36px

副标题：20px

正文：16px

特殊文字：14px

5.4. 配色

1. 黄金6:3:1法则：60%主色（重要内容）、30%辅色（一般）、10%对比色（次要）
2. 大屏一般是暗色背景，最好使用高饱和度且协调统一的配色，背景优先使用纯色，避免渐变和图片底色（我们第一版加了很浅的网格底图，后面投屏放上去，网格非常明显，显得大屏有点幼态）。
3. 颜色含义匹配：红色一般表示预警/危险/下降，绿色表示安全/正常/上升、灰色表示暂停/无变化等。

大概先这样了~先完结了