可视化大屏设计

常见的可视化实现方式是二维加三维相结合，比如大屏两侧的可视化图表可以用 Echarts这种第三方的轻量化图表控件或者Vue来去实现。

主视觉部分会基于Unity3D、虚幻引擎（UE4）、Ventuz、threejs等工具去实现

一、设计大屏的原则

1. 确定业务需求

大屏的展示都是基于业务的需求，不是简单的排数据，展示数据。所有的大屏都是基于业务这一基础上展示。

明确，大屏都是基于业务。数据的展示给相关人员全局的了解数据带来的价值从而达到增效。如果脱离了这一诉求，展示的数据就一无所用。

了解相关人员的业务需求是根本。例如：

• 对于设备而言相关人员想知道设备的运转是否正常、设备损耗多少、设备何时要修理、设备是否故障等；
• 对于事故而言相关人员想知道事故发生了多少、哪里发生事故、事故有没有减少、事故损失多少等等
• ……

知道了业务需求，我们才能帮助相关人员真正意义上的解决问题。才能更好的确定知道，知道数据要如何展示。

2. 设计框架后细节

我们知道大屏很大，大到设计者不知道都不知道让人怎么看，胡乱设计的大屏不能帮助相关人员解决问题。所以设计大屏的时候我们要把握好方向，定好框架，展示内容要有主次之分，使用者才有聚焦点。才知道那些是核心数据，那些是辅助数据。那些是要进入二三级界面。这都是需要设计者好好斟酌。

二、设计逻辑

还是上面所说的3定1量3选3调优，对这几个详细讲解：

1. 定需求，定指标、定粒度

1）定需求、定指标

知道业主的诉求，将业主的诉求提炼成指标，比如，在停车监控系统中，业主想知道停车的时长、空车的数量、外部来的车辆有多少、车辆都停在哪里、哪里有违停等，可以提炼出指标：停车场空位数、外来车辆数、内部车辆数、车辆区域热力图、车辆违停数、热点停车区域、热点违停区域等。提炼了这些指标我们就能大概知道大屏需要显示哪些内容，屏幕会分为哪几块。

2）定粒度

粒度讲白了就是用比较好的维度讲解指标，很多产品小伙伴整理完关键指标之后无法准确的表明自己的意图，同时不能给业主展示他们想要的数据，展示的图形让迷惑或者云里雾里，很大原因就是维度把握不准确或者指标定义不明确（如何更好运用图形可以看3.2）。

2. 量大屏

量大屏不是真正意义上去尺子量，而是要提前知道电脑的分辨率，很多大屏由于面积过大，所以需要需要多个电脑或者信号源进行适配，设计的分辨率很容易不满足实际场景，展示效果也不好，单纯靠标准的大屏设计很可能不满足现场需求，所以设计前了解物理大屏宽比、大屏的整体分辨率很重要。

不同大屏简单介绍：

1）Led屏幕

点间距不同：

p3点与点之间的距离是3毫米，p4点与点之间的距离是4毫米。

清晰度不同：

P后面那个数字越小，代表两个灯珠之间的距离越小，清晰度越高，相对应，价格也会高，因为每平方的像素点P3比P4多很多，成像效果好。

最佳可视距离不同：

点间距P3（3mm）的显示屏，它的最佳可视距离是3.5~10米，点间距P4（4mm）的显示屏，它的最佳可视距离是5~13.5米。可以根据自己的实际情况，选择最适合的型号。

2）拼接屏

拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏＝3200最后得出设计稿尺寸就是：高1080px乘宽3200px

现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵。

另外大屏设计还有一个比较重要的问题就是注意拼接屏之间的缝隙，设计时千万不能跨屏设计，不然很影响美观。

3）控制端

目前企业用的最多的控制端为ipad控制，需要在ipad上制作出控制端页面，一般尺寸为2048*1536，控制端大多数为按钮操作，页面尽量简单明了。

注意：

• 要以大屏的比例去定义设计稿，保证大屏完美呈现
• 4k分辨率电脑，优先使用大分辨率作为设计稿
• 使用最接近大屏分辨率的电脑屏幕比例投放

3. 选图表、选风格、选布局

1）选图表

提到图表，大家脑海里浮现的，通常是柱状图、饼图、趋势图等等，没有把握数据的关联性经常会导致图表的误用。

图表的作用，是帮助我们更好地看懂数据。选择什么图表，需要回答的首要问题是『我有什么数据，需要用图表做什么』，而不是 『图表长成什么样』 。因此我们从数据出发，从功能角度对图表进行分类。找出指标里的数据主要集中在什么范围、有啥关联性、两者之间有啥差异、表现出怎样的规律等。

（引用网图）

2）选风格

不同颜色、不同搭配，给与观看者不一样的感受，大屏色彩的搭配很有讲究，也有一定规律，大屏一般是主打科技炫酷的，多以深蓝色的主调，各个背景、统计图等多用深色，让界面更有科技感，一下子就被吸引。（ps：更多风格设计可以百度下情绪板的学习，本文就不多讲解）

3）定布局

设计布局设置，要显示关键的指标信息，展示主次，让使用者能过直观理解数据背后的意义。市面常见的布局：

(中心环绕)

(左右分布)

（上下分布）

布局根据实际的大屏进行设计，不能硬生生套用模板。

4. UI调优、开发、测试之后调优

1）ui设计调优

ui设计调优分为两步，第一是确定可视化的酷炫效果，大屏的硬件配置有着很大不同,如果硬件配置不够的情况下要求酷炫的效果可能造成卡顿甚至崩溃的情况，这是需要提前沟通的。

第二步是，是要与UI不断的试稿，沟通，不断的修改沟通，定好布局、图表、关键元素、结构。不断的重复试错，尝试修改，很多时候，设计出来的投放到大屏的效果不好，所以不断沟通确认是很重要的。很多时候开发出来的DEMO需要反复调优。

2）开发调优

开发调优主要是针对前端展示、设计处理；

前端的话很多前端无法用样式写出动效、，一般需要设计人员提供切图。例如边框、图表等，设计人员要给于切图。才能让开发进行设计调优。

设计处理需要把原始数据进行处理，将杂乱无章的数据处理成有价值的数据，这需要数据处理人员的介入。数据处理的逻辑如下：

3）测试调优

测试调优，是投放到大屏上进行测试调优，主要有视觉上跟性能上的调优。

视觉上，看大屏的字体、效果、图表是不是根预先设计的一样；

性能上，看动画是不是流畅、数据是不是有问题，跳转是不是有卡顿等。

只有经过测试调优过的大屏系统，才能真正的运用到市场。