那些令人拍案叫绝的可视化大屏，如何不用代码也能实现？

随着工业4.0变革的推进，逐步开始走向了利用信息化技术促进产业变革的时代，也就是智能化时代。伴随着时代的走向，工业互联网 和 5G网络 逐渐揭开了帷幕，数据不再是单纯的数据信息源，数据可以结合一些可视化界面作为载体，实时地展示反馈出这个世界的变化。在诸多行业上，我们可以通过对数据的管控达到场景设备的维护效果，例如智慧园区、智慧工业、智慧矿山的建设，水务系统的监控以及一些公共设施风力发电，数据中心可视化系统等等的搭建上，都可以通过可视化的搭载，进行数据的展示和维控。

布局功能一直是数据可视化大屏的重要功能点之一，舒适的布局界面，可以使人拥有焕然一新的感觉，拥有响应式（自适应）布局的话，可以兼顾各种比例大小下的屏幕，不会因为比例的变化而使得整体的排版错乱。布局功能不仅适用于大屏的整体排版上，在三维场景数据可视化系统搭配的左右系统数据面板上，依然可以使用 2/3D 融合嵌套的形式完成，而在面板的排列上也可以使用 响应式（自适应）布局，可以将搭载的数据充分地显示出来。

主题风格的实现，是建立在 HT 特有的图纸设计机制下，在数据可视化系统实施的过程中，可以应用于各种屏幕的分辨率下。比如系统设计过程中，可以在个人电脑的显示器下进行图纸的设计和程序代码的调试开发，而当开发阶段完成后，在现场大屏的布置搭建或者在用户展示的时候，不用去担心关于分辨率的变化会出现的失真模糊的问题，从而在项目的开发和搭建上，用户的使用相对地会简单很多。加上 HT 自身研发的开发插件 API 也同样地易于上手，可以实现解决许多行业上的数据可视化系统的应用。

数据可视化技术的基本思想，是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析。

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

> 美观展示: 用数据展示企业特色，大会展台，媒体现场展示等

> 数据驱动：实时查看业务概况、监控预警、驱动内部快速响应

> 发掘价值：可视化数据呈现后，带来的视觉感受会帮助人发现新的因素

在 图扑软件（Hightopo）技术支持下，数据可视化除了“可视”，还有可交流、可互动的特点。设计带来的不仅是瞬息处理海量数据搭配酷炫的可视化样式所引起的视觉震撼，更应注重为业务需求服务，设计出符合不同行业需求的个性定制可视化，利于企业做出正确的商业决策，以有根据的数据呈现而帮助企业进行更科学的判断而避免决策的失误。

1. 从业务需求分定优先级

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

>主：主要指标位于屏幕中央，为地图展现照明区域使用数据。

>次：次要指标位于屏幕两侧以图表的形式展现。

>辅：主要指标的补充信息鼠标点击或悬停展示以及交互动效展示。

这样就可以方便在脑海中确定大屏的整体构架，以便于我们接下来的细化。

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

同一个指标的数据，从不同维度分析就有不同结果。如果分析的维度没有找准或定义的比较混乱，就会使可视化图表无法清晰的看清楚含义，使人困惑。这里我们引用 Stephen Few 的文章 《Visual Business Intelligence》的四项维度-比较，联系，分布，构成，来分析数据的逻辑性。

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

确立图表类型后，下一步要进入到布局具体的信息位置，确立交互稿的步骤。确立交互稿的第一步就是要确定大屏的尺寸。客户的大屏尺寸不用会影响到整体的布局和效果，设计的时候也要考虑下是否有拼接大屏接缝的问题，尽量以拼接屏尺寸来确立栅格化布局。

尺寸确立后，接下来要对设计稿进行布局和页面的划分。布局这里我们就要参考第一项的业务需求优先级来布局画面分割面积。核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。视觉上要尽量规避文字罗列或图表罗列，注意方圆图表的面积比例问题等，也是布局期间需要注意的事项。

4.确定设计风格与设计进行

设计风格的确定主要以下几点来确定：

设计风格的选择切勿追求效果炫酷而不符合业务需求，选择最合适的而不是选择最绚烂的尤为重要。因为设计中涉及的范围比较广，我们在后两章节单独着重讲解。下面展示部分我们做的不同行业对应的不同构图布局与元素的应用案例：

发动机的可视化以突出发电机产品为主，周围 UI 以大圆角形式设计，使视觉由四周向中间包围，集中于中心。

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

车间可视化案例以工业风与写实风格的车间模型浓缩了工业的运作场景，色调以贴近工业的灰色为主，设计出制造专业感十足的可视化效果。

同时在设计时因为使用的设备不同，大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，这里的很多问题只有设计稿投到大屏上才能够被发现，所以这一步在样图沟通确认环节非常重要，有时候需要开发出demo，反复测试多次来修改协调最终上屏效果。在测试时从设计上可以重点注重以下几点：

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

身处大数据时代的我们，有着许多的数据集等着我们去发掘，通过一系列的数据分析，可以明白很多事件发展的趋势走向，不仅可以带来更好的生活体验，也能通过数据预测事件发生的方向。在信息时代发展迅速的前提下，数据是当今重要的信息载体，可以通过数据的捕获，通过监管和维护去了解一个行业下关于工业管控下的数据可视化系统。