数据可视化大屏的定义及设计步骤

数据可视化大屏的定义

数据可视化大屏是将一些业务的关键指标通过数据可视化的方式展示到一块或多块LED大屏上，以大屏为主要展示载体的数据可视化设计。也就是通过整个超大尺寸的屏幕来展示关键数据内容。大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。利用其面积大、可展示信息多的特点，通过关键信息大屏共享的方式可方便团队讨论和决策，所以大屏也常用来做数据分析监测使用。

数据大屏可视化设计步骤

（1）客户沟通，明确需求

可视化大屏开始设计之前，最重要的就是，跟客户进行沟通，明确用户的需求。

整体项目是利用大屏设备进行相关数据及图表展示，我们预想将项目应用的场景分为两种情况：

①专业展示：参与商务活动、分享或为某些团体进行讲解及展示使用。

②普通展示：主办公区域或前台大厅实时数据展示。

通过应用场景，还可以进一步将用户进行区分。

（2）了解物理大屏，确定设计稿尺寸

大屏一般分辨率比较高，如果不事先确定物理大屏尺寸，设计稿设计出来的效果被投放到大屏上就会有偏差失真。一般情况下，确定设计稿尺寸需要分两种情况：当投屏电脑与与大屏系统尺寸比例、分辨率一致时，设计稿的尺寸、分辨率以投屏电脑为准；当投屏电脑与与大屏系统尺寸比例、分辨率不一致时，设计稿的尺寸、分辨率以物理大屏为准；

注意，若物理大屏分辨率过高，可进行分辨率减半设计，所以，一般我们也不建议大屏用自适应方式，如果是自适应，系统就会按各自模块的宽高比先计算实际值，一旦大屏内容布局较多或指标计算复杂，则会非常影响大屏计算性能和实时分析能力。

（3）确定关键指标

根据业务场景抽取关键指标关键指标是一些概括性词语，是对一组或者一系列数据的统称。一般情况下，一个指标在大屏上独占一块区域，所以通过关键指标定义，我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例，这里的关键指标有：企业停车时长、企业违停量、热点违停区域、车辆入栏率等。确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）。

（4）页面布局划分

尺寸和关键指标确立后，接下来要对大屏进行布局和页面的划分。这里的划分，主要根据我们之前定好的业务指标进行，核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。

（5）确定统计图类型

选定图表注意事项：易理解、易实现；图表类型选择，可以参考亿信华辰酷屏统计图，百余种统计图组件，任君选择。

易理解：要考虑大屏最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。

易实现：某些效果用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中一定要善用工具，切忌不计成本，埋头苦作。

（6）定义设计风格

可视化大屏的设计风格主要根据行业类型、客户喜好、具体展示指标整体搭配，但总体一般以深色为主，这主要是因为大屏如果是浅色系长时间观看会造成眼睛疲劳、刺疼，还一点就是浅色上面不是很适合体现动感光线等特效的展示。当然大屏虽酷炫，但我们也不能忘记了为了炫酷而炫酷，实际我们还是要以展示具体指标为主要目的。平时的时候可以多看一下优秀的可视化大屏案例网站，也会对设计风格有良好的帮助。

（7）可视化颜色搭配

色彩是最能给人直观感受的，能够直接的牵引用户去寻找有效信息。整体色彩确定后，便运用色彩来划分信息的层级关系，用主色调强调重点内容，以引导用户能够清晰、明确、迅捷的识别重要信息。

图表需要的颜色较多时，建议最多不超过12种色相。通常情况下人在不连续的区域内可以分辨6〜12种不同色相。过多的颜色对传达数据是没有作用的，反而会让人产生迷惑。

（8）动效设置

整个项目中有许多数据都是实时变化的，为了减少数据变化刷新时的突然性，动效设计必不可少。在整个动效设计的过程中，除过场动画、数据的变化外，动效还肩负起增添空间感、平衡画面和整合信息的作用。 但是在增加动效的同时，仍需考虑服务器在承载大量数据涌入的同时，是否能够承载较多的动效，分析画面与数据量，对动效部分进行适当取舍。使动效不必喧宾夺主，明确画面中的重点进行展示。

（9）页面定稿、开发

事实上页面开发阶段并不是到了这一步才进行，这里说的页面开发仅指前端样式的实现，实际上后台数据准备工作在定义好分析指标后就已经开始进行了，而我们当前的工作是把数据接入到前端，然后用设计的样式呈现出来。