如何制作一个可视化大屏模板？

随着人工智能的发展，越来越多的可视化需求出现，对于可视化的要求越来越高，当然，只要懂得多了，可视化也是很简单的事情。下面一些简单参考

1，梳理清楚自己需求，看看需要展示什么样的数据，需要什么样的维度等等，

2、对可视化工具的研究，比如最简单的Excel，复杂点的有R、Python等，在线的工具，如百度的Echarts等，

3、对可视化有一定研究，比如地图可视化，桑基图，弦图，玫瑰图等高级图片，了解了，才能有设计思路。下面给你几个看看。

4，别人设计的可视化模板作为参考，这样就能作为更好的设计了，给你几个参考的

5，根据图表与业务，进行美观度和业务满足程度进行权衡，不能太丑，当然也不能为了美观，放弃对业务的实际反应。

更多细节，关注我的头条，可以私聊我

本文主要讲述可视化全过程，并对各环节的关键点做了说明。希望通过这篇文章能让大家对可视化的设计有一定的认识

01 、什么是数据可视化

数据可视化是数据内在价值的最终呈现手段，它利用各类图表及图形化的设计手段将复杂不直观的数据有逻辑的展现出来，使用户找到内在规律，发现问题，从而指导经营决策，挖掘数据背后的商业价值。

02 、数据可视化的使用场景

首先介绍下使用场景：

可视化应用非常广如ToC、ToB等都会存在，之前所看到的各种图表仅以为是单纯的数据统计，其不然它也是一种可视化的展示方式。现阶段更多的理解数据可视化是大屏展示。多屏幕拼接，展示诸多数据和图表，效果一定是酷炫各种特效视觉于一身的才称之为数据可视化，其实这只是其中一种可视化的表现方式。下面基于应用场景的不同，对可视化区分介绍。

第一类使用场景：

此类以使用为主，主要在电脑上操作的pc端可视化，用户对它需长时间使用，例如企业数据报表分析，各类BI等。在此类场景下，简洁简单高效的传达数据内容是非常必要的，更多的是数据分析师及业务部门在使用，他们需要长时间停留在屏幕及数据上做分析统计比对等工作，精准的传达数据的同时也减少对眼睛的过度疲劳，利于用户长时间舒适阅读，所以这类场景下以简洁为主。

FineBI

第二类使用场景：

这类是以观看为主，并以快速传达核心数据信息的应用场景。此类场景多应用于指挥大厅、科技展馆、数字展厅等，他的特点是多屏幕拼接，展示面积大、数据类型多，展现形式多元化，业内也称之为数据可视化大屏。

此应用场景也是问题疑问比较多的，会关系到效果定位、数据信息传达、表现方式、软硬件结合等诸多情况。针对此应用场景展开分析，其他可视化设计也是相通的。

FineReport

03 、大屏数据可视化该这样设计

1、精准把握业务需求

设计终归是助力业务的，准确的理解业务需求是至关重要的，它将贯穿整个设计的始终，也是可视化设计开始的必要前提。如何解决用户的问题，完成既定目标，都需要设计师对需求有一个比较准确的理解。直接有效的方法就是“不懂就问”。

2、数据图形化的选择方法

需求及数据确立后，接下来是数据图形化的选择，不同的目标不同的数据对于图表展示的选择也是有讲究的，如：部分占总体的比例（占比）更适合选用饼图、用来反映时间变化趋势的图形化更适合曲线图等等，总之不同的数据展示维度，选择的图表是有差异的。

同样一组数据，存在多个图表同可展示，怎样选择最恰当的图表是至关重要的，合适有效的图表有助于信息有效的传达。遇到具体的数据要根据数据的维度，和要表达的业务目标，选择一种最佳的图表呈现。

这是可视化图表选择比较确切的一个方法，可以作为数据可视化图表的选择依据，有助于准确快速的把数据图形化。

首先根据业务目标结合数据维度确定大的关系（比较、分部、构成、联系），随后选择合适的图表，填充数据设计排版即可。到这一步图表基本成型，但是比较基础，为了视觉效果和数据的传达，也会在此基础上进行优化设计。

04 、设计尺寸与大屏的拼接方式

可视化大屏一般都是多屏拼接或者LED\LCD等材质屏幕。不同的屏幕像素是不相同的，显示像素、物理像素都不同，包括硬件设备的不同导致输出像素也不相同，例如同样是3X2的拼接屏，输出像素可以是X1*Y1也可以是X2*Y2，这就造成了很多潜在问题，设计之初屏幕硬件及拼接方式需要提前确定。

基本有两个方法，简单的说，方法一、拼接屏可以按照拼接后的横纵像素总和设计（拼接屏像素超大可等比例缩放）。LED/LCD屏幕设计也是同样的原理。方法二、按照硬件输出像素设计，硬件设备的输出像素一定是和整个拼接屏成比例或者是吻合的。所以按照输出像素设计是可以的。

05 、页面设计及布局思路

屏幕的拼接方式及屏幕材质确定后，就可以进行页面的设计及数据的布局，页面的布局主要是依据业务及数据的重要程度来布局，可视化中会把核心的数据或业务的要点放中间，一方面中间是视觉的中心，二来也是数据和业务最容易传达给观众的核心位置。

最后插播一句，如果是拼接屏记得把数据避开拼接缝，页面布局时就要考虑屏幕拼接方式，尽量把数据有序的展示在屏幕内，合理避开拼接缝减少对用户观感的影响。

具体设计要根据项目确定使用的工具做调整，如web、u3d、ue4等等。项目用什么开发工具很大程度决定了设计方法方式，各种工具自有不同的优劣势，像web轻量化图表控件多，效果相比u3d会弱很多。u3d对三维支持好，粒子等效果有优势。了解这些大致可知道设计思路。

字体：

选择识别性高的，字体不要太细，同时要注意版权，不要选择太圆润的字体。

颜色：

颜色明度饱和度要高些，远距离观更利于信息清晰传达。颜色不要过于相近，大屏颜色相近更不易于数据间的区分，降低阅读舒适感。大屏背景选择深色系，内容选择亮色系。

布局示例（以1920*1080尺寸，布局示例）

06 、设计风格的确定

通过对数据图表的选择，屏幕布局及风格设计，一张初步作品已经完成。

此时最好结合业务目标及数据，设计内部先自检：

• 现在的设计布局是否合理
• 配色是否合理并能通过色彩传达数据的意义
• 整体设计是否符合之初的业务目标
• 是否存在其他问题等等

接下来就是各个相关人员及领导确认阶段。

07 、现场硬件设备校对

当风格页确定后先别急于后面的页面设计，如果有可能的话，此时最好拿设计图去现场实地测试。确定现场硬件是否存在偏色问题、文字大小在合适的观看距离是否清晰可见、现场灯光光照等是否对设计有影响、拼接缝和数据是否有穿插、硬件设备输出是否和设计匹配等等。确认无误后在开展后面的页面设计工作。

08 、开发落地及再次现场校对（含性能）

开发工具不同（如web、u3e、ue4等等），对接方式也会有差异。相同相似之处有如标注规范，颜色，字体字号等等。对于一些三维场景需要提供三维文件，如obj、FBX等。

主要提供：设计规范（标注）、切图、三维文件（示项目需求并不一定设计提供），特殊动效可提供范例。

补充一点，拼接屏到8K左右甚至更高，输出像素不必达到8K，稍微加点效果，会卡到怀疑人生。一般会降低到4k左右，对硬件要求下降的同时也能保证整体效果和流畅度。

开发结束后，要拿到演示文件去现场测试，测试输出是否有问题，有无拉伸问题，测试有无卡顿现象，拼接缝与内容有无穿插，如有控制端（控制屏）需联调测试。确定整体无误后，才是设计的最后交接棒。

为什么要做模板？现成的模板不香吗？

本来做可视化大屏就很复杂了，而且很多大屏的排版和设计都是随着业务的变化、老板的喜好、指标的更改而变化的，所以模板这东西肯定是越多越好，仅仅一个模板肯定不能适用很多情况。

市面上现成的模板有不少，但是真的能体现出业务价值的有效模板真的不多，我看回答里有个阿里的员工，给的模板是真的不行。

FineReport里内置很多可视化模板和数据报表模板，有了数据就能直接用了，完全不担心不够科技，不够简单：

关注我，私信回复“大屏”，模板都安排给你！

你是要可视化大屏，还是要模板？

有了模板，就能直接做出来大屏，不需要别的了，如果有特殊需求的话，改一下就好了，可以说是直接复用。

那如何才能找到可视化大屏的模板呢？用好工具就行。

FineReport做可视化大屏真的有一套，里面直接有模板，而且自己做也很简单。

无论是多场景切换、沉浸式背景、无缝钻取轮播......让大屏的空间感、立体感、精致度瞬间提升！

以下是可视化大屏的效果！

如果需要大屏模板和工具的话，关注我，然后私信回复“大屏”就能有了。

数据可视化在当下信息时代已经成为炙手可热的话题，而 B/S 化趋势，也使得许多大屏应用上在网页端出现，今天给大家分享一套不一样风格的大屏页面，与传统深蓝色不同，这次采用了暗红色设计，搭配粉色及黄色，加入了一些工业元素，让页面有别具一格的效果。而 Hightopo 独特的自适应机制，也解决了大屏需要针对分辨率设计的困扰，达到了可以一页用多屏的效果。

https://www.hightopo.com/index.html

随着工业4.0变革的推进，逐步开始走向了利用信息化技术促进产业变革的时代，也就是智能化时代。伴随着时代的走向，工业互联网 和 5G网络 逐渐揭开了帷幕，数据不再是单纯的数据信息源，数据可以结合一些可视化界面作为载体，实时地展示反馈出这个世界的变化。在诸多行业上，我们可以通过对数据的管控达到场景设备的维护效果，例如智慧园区、智慧楼宇的建设，水务系统的监控以及一些公共设施风力发电，数据中心可视化系统等等的搭建上，都可以通过可视化的搭载，进行数据的展示和维控。
HT for Web 不止自主研发了强大的基于 HTML5 的 2D、3D 渲染引擎，为可视化提供了丰富的展示效果。今天我们就将使用 Hightopo（以下简称 HT ）的 HT for Web 产品上的 web 组态跟大家介绍一下通过丰富的 2D 组态运用以及动画效果融合搭建的大屏数据可视化系统。

界面上的图纸是采用 HT 特有的设计，并沿用 HT 的响应式布局来进行划分排版，在无限放大和缩小图片的情况下依然能保持一致的精准度，可以适应不同分辨率的屏幕都不会模糊，不仅可以实现完美的跨平台，在大屏展示上的效果就不言而喻了。而对相应的数据节点以及动画节点做数据绑定，通过对接数据来展示数据可视化系统的运行，加上 HT 的动画函数 ht.Default.startAnim() 来驱动数据变动和动画展示效果。

数据可视化的基本思想：

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

数据可视化的基本手段：

1、数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式提取出来的信息，包括相应信息单位的各种属性和变量。它是一个处于不断演变之中的概念，其边界在不断地扩大。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。与立体建模之类的特殊技术方法相比，数据可视化所涵盖的技术方法要广泛得多。

2、数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。然而，设计人员往往并不能很好地把握设计与功能之间的平衡，从而创造出华而不实的数据可视化形式，无法达到其主要目的，也就是传达与沟通信息。

3、数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前，在研究、教学和开发领域，数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟的科学可视化领域与较年轻的信息可视化领域的统一。

而 HT 拥有一套完整丰富的 2D 组态可供用户快速上手搭建，展示上拥有独特的主题风格设计，在各种比例下不失真，加上布局机制，解决了不同屏幕比例下的展示问题。通过数据对接的载入，可以搭建出一套完整的数据可视化系统的解决方案，应多各种行业上数据展示的需求。

案例展示：https://www.hightopo.com/index.html

一、主题风格的多样化

HT 的设计上拥有独特的设计风格，拥有多种主题可供选择，大体上不仅有清新简洁的淡色风格，也有酷炫科技的深色风格，搭配上用户的项目需求，可以打造出用户独有专属设计。在动画交互上，HT 的实现跟风格设计上同样地出彩，结合风格上的主题展示，融合出一套适用于各种屏幕下，风格主体鲜明以及动画交互舒适的数据可视化大屏展示。

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

二、响应式（自适应）布局

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

但自动布局不是银弹，复杂的情况还是需要手工布局，或业务上做必要的妥协，甚至根据业务编写特殊的排布算法才能达到最佳效果，HT 自身拥有一套适应各种场合的布局机制，可供用户在一些特殊的布局效果上完成特定的布局。

三、动画效果的过渡

不同的动画会添加更多有趣的交互体验，一个舒适的面板交互，也必然离不开动画的实现。优秀的数据可视化系统亦然如此，通过面板搭载数据的呈现，一方面数据的变动驱使动画交互来体现，另一方面动画交互还可以依附在悬浮、点击以及双击等用户体验上来表现，从而达到用户视觉和体检的最大限度提升。

其中动画效果上的实现，可以匹配自己的需求在 HT 原有的动画函数上进行封装，例如实现淡入淡出、裁剪、摇晃、旋转以及数值的跳动等实现效果，我们可以在动画的函数封装上下功夫。

而这些动画主要是通过封装了一个 setValue() 方法来设定动画效果实现的时候，通过属性参数变化的值设定动画运作的效果。其中通过一些参数值的传入，并且根据对 data 节点的类型判断来对应地去设定属性值：

• data：动画执行的节点；
• accessType：动画所涉及的属性类型；
• name：属性名称；
• value：数值的设定；

通过设定动画属性值的封装后，我们可以封装一些动画效果来调用以上 setValue() 的方法来实现许多动画效果。

例如，我们通过封装一个裁剪的动画函数，只需要传入动画节点 data、用户自定义函数 easing 以及时间 duration 来驱使裁剪属性 clip.percentage 在动画设定值的方法调用，就能完成裁剪动画的实现。而在其他的交互动画下也是依靠 HT 的动画函数来封装对应交互动画。

动画的用处是为了使变动的数据视觉上感官，拥有舒适的感觉。而数据的搭载是数据可视化系统最关键的部分，一个解决方案的实施是对于一套行业上用户数据的管理和维护的体现，所以在数据对接的部分是至关重要的，而 HT 的数据搭载可以适应现在所有主流开发的数据对接的方案，不用过多地担心数据对接的问题，只需通过后端平台所采集的数据进行系统数据的接入，就可以使数据可视化嵌入灵魂。

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

说起可视化数据分析大屏，在日常生活中大家也见得不少，不说每年天猫等电商双十一上的大屏展示，就说最近由于新型冠状病毒肺炎疫情的蔓延，各地政府先后运用大屏实现疫情数据可视化分析效果。这些可视化数据分析大屏，不仅清楚展示了数据现状，给为深入分析数据情况提供了智能数据分析支持，让浏览者在眨眼间实现可视化数据分析效果，秒速针对性分析，按个人所需钻取相关数据。

运用大屏来做可视化数据分析，不仅快，更直观

用大屏来做可视化数据分析，不仅能够更快分析到你想要的数据，同时也更直观。我们先来说快的部分。

大屏可视化数据分析快在哪里？

当用户面对一个大屏可视化数据分析报表时，只需动动手指，通过点击的方式就能快速实现数据聚合、更改字段与维度组合、秒速钻取相关分析报表或数据明细等。换言之当用户在面对一个大屏可视化数据分析报表时，如果你想更具针对性地分析某类数据现象，不需要让数据分析人员重新分析，自己当下就能自助式分析数据。数据分析不需等待，眨眼间就能完成。这难道还不快吗？ 说完快，我们再来说说大屏可视化分析的直观。

大屏可视化数据分析直观在哪里？

首先我们都知道可视化数据分析报表就是通过灵活运用各种可视化分析图表，结合不同类型的智能数据分析功能制作而成。在数据展现上最擅长用图像化方式来展现，而图像化的视觉展现比数字化、文字化更直观，更立体，能够让浏览者在看到的那一瞬立即理解数据情况。所以我们看到大屏可视化数据分析时，最常有的一个感觉就是：还没看清楚具体数值，就已经知道哪里的数据最高，哪里的最低，哪里的数据发展曲线不理想，哪里的数据趋势发展蒸蒸日上。甚至于能够在短时间快速发现问题，深入问题本质。 举个例子，在奥威BI部门费用分析可视化大屏报表上，浏览者在发现某部门支出过高时，双击即可钻取到该部门具体支出明细，或部门费用分析报表。根据权限设置的不同，能够实现不同浏览者能够分析钻取的部门明细不同。至于钻取路径，奥威BI可视化分析软件的智能钻取不同于其他产品的单一路径，而是能够实现多路径钻取，只要与钻取项有数据关联性，即使不在同一个分析模型中，也能够秒速钻取，十分快捷，更直观。