真屏实据—数据可视化大屏设计经验分享

一、什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化，数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用。

在当前新技术支持下，数据可视化除了“可视”，还可有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。

二、什么是大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

“大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。原本看不见的数据可视化后，便能调动人的情绪、引发人的共鸣，传递企业文化和价值。

利用面积大、可展示信息多的特点，通过关键信息大屏共享的方式可方便团队讨论、决策，故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。

三、大屏数据可视化设计原则

设计服务需求

大屏设计要避免为了展示而展示，排版布局、图表选用等应服务于业务，所以大屏设计是在充分了解业务需求的基础上进行的。

那什么是业务需求呢？

业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在。

先总览后细节

大屏因为大，承载数据多，为了避免观者迷失，大屏信息呈现要有焦点、有主次。可以通过对比，先把核心数据抛给用户，待用户理解大屏主要内容与展示逻辑后，再逐级浏览二三级内容。部分细节数据可暂时隐藏，用户需要时可通过鼠标点击等交互方式唤起。

四、大屏可视化设计流程

1. 根据业务场景抽取关键指标

关键指标是一些概括性词语，是对一组或者一系列数据的统称。一般情况下，一个指标在大屏上独占一块区域，所以通过关键指标定义，我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。

确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）。

2. 确立指标分析维度

同一个指标的数据，从不同维度分析就有不同结果。很多小伙伴做完可视化设计，发现可视化图形并没有准确表达自己的意图，也没能向观者传达出应有的信息，可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

我们在选定指标后，就需要跟项目组其他小伙伴讨论：我们的各个指标主要想给大家展示什么，更进一步的讲，是我们想通过可视化表达什么样的规律和信息。

我们可以从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。

1.联系：数据之间的相关性

2.分布：指标里的数据主要集中在什么范围、表现出怎样的规律

3.比较：数据之间存在何种差异、差异主要体现在哪些方面

4.构成：指标里的数据都由哪几部分组成、每部分占比如何

3. 选定可视化图表类型

当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里，筛选出最能体现我们设计意图的那个就好了。选定图表注意事项：易理解、可实现。

易理解：

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

可实现：

（1）我们需要了解现有数据的信息、规模、特征、联系等，然后评估数据是否能够支撑相应的可视化表现。

（2）我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难。同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难。

所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计！一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，有取舍，不钻牛角尖、死磕不放。

4. 制作图表

当确定了要使用哪些图表做图后，开始进入制作流程，影响最终图表展现效果的元素一般分为两个层面：

非数据层：

不受数据影响样式的元素，比如说背景、网格线、外边框等等。这类元素起到的是辅助阅读作用，但如果不加处理全部放出，视觉上会显得杂乱和不够简洁，干扰到你真正想展示的信息。对于这类元素，应该尽量隐藏和弱化。

隐藏

·去除不必要的背景填充

·去掉无意义的颜色变化

·去掉不必要的外框

弱化

·坐标轴淡色或隐藏

·网格线淡色或隐藏

数据层：

受数据影响样式的元素，比如说柱状图的柱条长度，柱条颜色，柱条展示个数，气泡图气泡大小等等，这类元素的展示效果和图表本身的数据息息相关，一旦图表本身的数据比较极端，有可能会使得最终视觉展现不尽如人意，我们无法改变具体的数据，是否就完全无法操控这些元素了呢？

精简数据项

在做数据报告时，不管有多少数据项，为了完整和精确性，所有的内容都会显示出来，但在大屏中，如此满的数据展示，不但忽略了视觉体验，还会让用户抓不住重点，对于饼图来说，建议扇区个数不要超过5个，例如保留占比前5的扇区，剩下的非重点数据全部归到“其他”。

保留前五或后五

如果柱状图的数据项过多，展示时会过于密集，建议先把数据项按照数值大小排序，只保留前五或后五的数据项。

5. 页面布局、划分

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

6.可视化设计

根据选定的图表类型进行合理的可视化设计。目前来讲大屏可视化主要有：指标类信息点和地理类信息点两大可视化数据。

指标类信息点可视化效果相对简单易实现，而地理类信息点一般可视化效果酷炫，但是开发相对困难，需要设计师跟开发多沟通的。

地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点，所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求，硬件配置不够的情况下可能出现卡顿甚至崩溃的情况，所以这点也是需要提前沟通评估的。

数据可视化大屏设计少不了动效，动效是可视化重要的组成部分，动效的增加能让大屏看上去是活的，增加观感体验。但过分的动效极其容易喧宾夺主，让观看者的眼球不知道往哪里聚焦，反而弱化了数据的展示。

7.样图沟通确认

样图沟通环节，最初的样图不需要十分精致，我们可以把它理解为一个“低保真”原型，然后通过不断沟通修改，让它逐步完善精致起来，也就是小步快跑，避免那种一下子走到终点，然后又大修大改的情况。

因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点，所以这一步我们需要用尽可能简单的方法 ，把之前几步的成果在页面上快速体现出来，然后根据样图效果尝试确定五方面内容：

1.之前确立的布局在放入设计内容后是否依然合适；

2.确立的图表类型带入数据后是否仍然客观准确；

3.根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受；

4.已有的样式、数据内容、动效等在开发实现方面是否存在问题；

5.大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象。

大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，这里的很多问题只有设计稿投到大屏上才能够被发现。所以这一步在样图沟通确认环节非常重要，有时候需要开发出demo，反复测试多次。

8.页面定稿、开发

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

一般开发用代码写不出的样式或动效，都需要设计师切图作支持：比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。

9.整体细节调优与测试

这部分是指页面开发完成后，将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。

视觉方面的测试：关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。

性能与数据方面的测试：图形图表动画是否流畅、数据加载、刷新有无异常；页面长时间展示是否存在奔溃、卡死等情况；后台控制系统能否正常切换前端页面显示。

五、大屏设计的注意事项

1. 字体使用

字体优先使用系统默认字体，需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

如果页面是云端部署，需要嵌入字体包时，我们可以使用FontCreator这类的软件把那些用不到的字符从字体包中删掉，然后重新打包上传，减小字体包大小，可以优化页面加载体验，避免在替换默认字体的过程中出现页面文字跳动等现象。

一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符，对于大屏这个明确的场景，我们可以删掉其它使用不到的字符，仅保留中文、拼音和数字

2. 颜色搭配

（1）色彩明度与饱和度差异显著、对比鲜明， 尽量避免使用邻近色配色

3. 页面布局

主次分明、条理清晰、注意留白，合理利用大屏上各小的显示单元，并尽量避免关键数据被拼缝分割。

六、问题

设计稿投到大屏上显示效果不佳怎么办？

大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下，我们应该在设计开始前，就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品，然后投上去查看实际效果。

因为大多数时候大屏都会存在色彩偏差，这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现。如果不可以，那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面，样图沟通环节及时测试也很重要。