一、什么是大屏数据可视化？

nerror="javascript:errorimg.call(this);">

经研究表明，人类大脑对视觉信息的处理优于对文本的处理。因此，数据可视化是使用图表、图形和设计元素把数据进行可视化，把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段。

数据可视化除了“可视”，还有可交流、可互动的特点。

二、设计流程介绍

nerror="javascript:errorimg.call(this);">

关键指标是一些概括性词语，是对一组或者一系列数据的统称。通过规定主，次，辅，三个指标的关键词来概念性的清晰大屏的主要展示内容，例如我们做的一个照明的监测项目，我们可以归类成这三种：

• 主：主要指标位于屏幕中央，为地图展现照明区域使用数据。
• 次：次要指标位于屏幕两侧以图表的形式展现。
• 辅：主要指标的补充信息鼠标点击或悬停展示以及交互动效展示。

nerror="javascript:errorimg.call(this);">

2. 通过指标分析维度确立可视化图表类型

在思考四项维度的时候我们要思考几个问题：

1. 数据之间的相关性？
2. 指标里的数据主要集中在什么范围、表现出怎样的规律？
3. 数据之间存在何种差异、差异主要体现在哪些方面？
4. 指标里的数据都由哪几部分组成、每部分占比如何？

3. 根据大屏尺寸，规划页面布局，确立交互稿

尺寸确立后，接下来要对设计稿进行布局和页面的划分。

一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。视觉上要尽量规避文字罗列或图表罗列，注意方圆图表的面积比例问题等，也是布局期间需要注意的事项。

nerror="javascript:errorimg.call(this);">

设计风格的选择切勿追求效果炫酷而不符合业务需求，选择最合适的而不是选择最绚烂的尤为重要。因为设计中涉及的范围比较广，下面展示一些不同行业对应的不同构图布局与元素的应用案例：

nerror="javascript:errorimg.call(this);">

挖掘机的可视化采用了大地色进行设计，采用了色彩共情的原理，结合简洁的线性UI，使大屏在接地气的同时不失高端雅致的效果。

nerror="javascript:errorimg.call(this);">

地铁站的可视化以写实风格为主，再现了真实地铁站的样貌，以及身临其境的动画交互体验。

在做设计中一个很重要的点就是沟通，无论是设计师内部的沟通还是设计师与客户的沟通都会对大屏最后的修改效果产生一个很大的影响。

当然设计没有标准答案，也没有完美的面面俱到的设计方案，最理想的标准就是达到客户的理想诉求但对于自己做的设计一定要过了自己的这一关，能协调好自己的审美与客户的需求两赢的状态才是一个好的设计。

在测试时从设计上可以重点注重以下几点：

1. 之前确立的布局在放入设计内容后是否依然合适
2. 确立的图表类型带入数据后是否仍然客观准确
3. 根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受
4. 已有的样式、数据内容、动效等在开发实现方面是否存在问题
5. 大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象

将设计稿交与前端进行制作，与程序沟通交互切换效果，大屏动效等，一起实现把控大屏的最终效果。

nerror="javascript:errorimg.call(this);">

希望我们设计的每一张可视化大屏都可以回归到行业里，体现出设计师所理解的数据做出的设计后为社会生活带来的真实的价值。就算它可能不够炫酷，不够时尚，但是它的每一项数据的表现，每一个元素的绘制，都是经过细节的设计雕琢，细节决定成败。

题图来自 Pexels，基于CC0协议

顶一下()     踩一下()