最近在做一个数据可视化大屏项目，从指标设计、视觉设计、可视化动效到大屏硬件、开发工具整个流程，总结了一些经验和观点，想和大家分享。

大屏制作工具

大屏的制作，可以用代码开发或现成的可视化工具来实现。

用的比较多的就是JS+Ecahrts，但数据量支撑、后台响应、实时更新、平台运维等应该还要调用更多的技术，这个不是非常懂就不赘述了。

另一种是用现成的可视化工具，能相对简单高效的搭建一个数据大屏，比如帆软FineReport，阿里dataV。

大屏硬件

大屏的展示工具几乎都是LED拼接屏，如果是boss办公室这种也有用大屏幕显示器的。

用LED拼接屏，UI设计时不用考虑屏幕缝隙影响内容的呈现，内容不会丢失，但有可能影响视觉的表现。设计时需要建立缝隙位置的参考线避，免类重要信息被分割。现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵。

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

下图是天猫可视化大屏设计，图中屌炸天的3D地球围绕粒子效果。

接下来就来讲讲制作可视化大屏的重头戏，指标、布局、设计、动效。以FineReport制作大屏为例，这篇文章将教你怎么实现可视化。

指标设计

设计大屏，大家可能会被酷炫的可视化所感动，但一定要谨记，大屏一定是以展示数据为核心，任何炫酷屌炸天的表现都要建立在不影响数据的有效展示上！

所以，大屏首要考虑的是放哪些数据，那么多指标应该放那些？

一般而言，一个大屏一定会有明确的主题，比如销售数据大屏，集团营业数据大屏。针对这种主题明确的可视化，推荐一个非常好用的套路——多维度拆解北极星指标法。

第一步：确定一个北极星指标。如销售大屏，你的销售总额一定是最重要的吧，这就是主题。

第二步：多维度拆解北极星指标，把你的销售额情况分解。

从时间的维度。每个季度每个月的销售额情况是如何，销售额特别高的时间段，原因是什么，做了哪些措施？

从地理维度。各大区域销售额情况如何？可以做个排名情况。

从计划维度。和年初定的计划相比，差了多少？

从占比维度。各个产品占的销售额多少，哪些是带来贡献最多的明星产品。

布局

布局的目的是为了让业务指标和数据合理的展现。由于往往展现的是一个全局的业务，一般分为主要指标和次要指标两个层次，主要指标反映核心业务，次要指标用于进一步阐述分析，所以在制作时给予不一样的侧重。

这里推荐几种常见的版式：

上面几个版式不是金科定律，只是通常推荐的主次分布版式，能让信息一目了然。实际情况中，不一定使用主次分布，也可以使用平均分布，或者可以二者结合进行适当调整。比如下图所示，指标很多很多，存在多个层级的，就根据上面所说的基本原则进行一些微调，效果会很好。

视觉设计

设计的风格，背景色一般用深色调，深色调紧张感强，让视觉更好的聚焦，大屏暗色调看上去更柔和舒服不刺眼，也会较省电。

大屏设计跟网页不一样，页面不能有滚动条，大屏的长宽都是固定的。

字号跟网页设计一样不小于12号字，可以用于图表的标注，数据信息建议14号字以上，大屏观者远距离才能看全内容，所以字号可以稍大一点。字体不一定只用一种，可以用到一些科技感强的字体，这里要注意，记得把字体给开发一份。

设计完成先去大屏上看一下效果，大屏的品质不一样色调也会有很大的差别，要根据自家的大屏呈现效果做调整。

可以去看一个开源的jquery插件库网站，里面有很多很棒的动态效果！

交互设计

我把大数据可视化大屏分为两种，一种“纯展示型”另一种“展示＋功能型”。纯展示型几乎没有交互，后台录入数据，在大屏上展示就行了。展示＋功能型，例如实时监控数据、采集数据、数据对比功能、云计算数据、分析与预警等等。

这里着重说一下带有功能型的大屏产品的结构层（信息架构）。一切功能结构都要围绕核心数据主页面来架构，因为大屏展示的核心就是将一些业务的关键指标数据以数据可视化的方式展示出来。

动效设计

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

其实，把握动效设计这个度其实并不难，只要看的舒服不影响数据清晰展示就可以，有数据展示的页面最好动的地方不易过多，如果要多，几个动画就得有节奏的变化，例如一个动画表现的视觉强，另一个就表现稍弱化，有强有弱、有主有次节奏才会舒服，同时动效能结合数据的变化而变化最好，这样就不容易看数据内容被动画抓走眼球。

动效怎么实现？

我习惯用AE的插件Bodymovin生成json文件实现。

这里用FineReport做大屏自带一些可视化动效：

3D动效怎么实现？

如果自己开发，用软件C4D+AE+PS，先建模选软再导入AE视觉稿。这里我就用了FineReport自带的3D动效。无非就是个炫，放一两个就够了。

3D地球可视化

开篇给大家留个悬念，怎么设计3D地球动画。天猫双十一阿里的3D地球是有专门人员设计的，阿里也有这方面的组件库。我们可以用开源网站类似组件来实现，大数据页面用到的图表这个网站几乎都有，且免费。最终的效果是用两个组件拼合在一起实现的，左边就是代码，后台录入信息可以让粒子效果匹配数据，最终实现数据的可视化。

同样有很多的图表组件，可以用Echarts和Highcharts。前者免费、开源、效果炫酷、原生全中文，但兼容性差、经常报错、文档不够详情。或者用更强大的Highcharts，优点是文档实例很详细、易懂易学、兼容性强可兼容到IE6，但是收费。

下图是我用FineReport做项目时的3D地球可视化插件。

最后，附上几张大屏图。带自动播放效果及3D动画特效的数据可视化！

大屏可以离屏用ipad控制，做到内容交互，简直是业务演示汇报的利器！

实际应用场景。

总结

大屏设计是一个长期跟进的过程，有很多问题会在数据真正进来时，放在大屏上才能发现，所以等产品做到落地时设计方面要积极跟进改进。

好了就这么多感谢阅读，希望这篇文章对你有一点用！想尝试大屏制作的，可前往官网自行下载FineReport学做dashboard。

掌握这7点，不懂代码也能做出酷炫可视化大屏！相关推荐

整理30份酷炫可视化大屏模板，一个代码不用敲，半天学不会来找我
整理了30张酷炫且使用频率极高的的可视化大屏模板,下载后可直接套用更改数据,涉及地产.制造.物流等10个行业,项目.人资.客户经理.销售等职业.获取方式在文末,可自行获取. 1.年终总结大屏-项目适 ...
不到 100 行 Python 代码教你做出精美炫酷的可视化大屏
作者 |俊欣来源 |关于数据分析与可视化 "碳达峰.碳中和"是2021年政府在不断强调与非常重视的事儿,那什么是"碳达峰".什么又是"碳中和&quo ...
零代码免费报表工具试用——数据可视化大屏
当今社会,从目前的发展情况来看,国内很多一部分企业采用的还是传统的Excel表格报表方式,这种方式确实能在一定程度上给予他们方便,但是长久下去并不是好计策.尤其是随着企业发展的壮大.互联网信息的泛滥, ...
【Python】全文3000字，Pyecharts制作可视化大屏全流程! (附代码分享)
就在上一篇的文章当中干货分享 | 用Pyecharts绘制20钟不同风格的炫酷交互式图表,建议收藏有粉丝提到说是不是可以写一篇用Pyecharts模块做可视化大屏的相关教程,小编立马就答应了他的请 ...
堪称暴力美学的可视化大屏是怎么做的？附无代码硬核教程
前些日子在和别人交流的过程中发现,现在市场变化太快,不仅用Excel做报表已经落后了,就连最后的数据都要以美观.直接.酷炫的方式展现出来. 那到底怎样呈现数据才是你们所说的美观酷炫,能让人赏心悦目?通 ...
不用写代码的可视化大屏，一口气把工具和方法都教给你
前段时间公司的领导偶尔看了阿里.天猫的大屏,也非要吵着要做可视化大屏,但是我们公司没有阿里天猫那样的技术基础和资金支撑,这可让我们IT部门苦恼了相当长时间. 于是IT的老大直接甩给了我们来做,其实之前 ...
不写代码，从0到1教你制作炫酷可视化大屏
从大屏可视化出现以来,一直深受各界企业的追捧,最典型的就是每年淘宝的双十一销售额大屏,最近我也刚接触了一个大屏项目,借此总结了一些可视化大屏制作经验与大家分享.文章写的比较细,请耐心阅读可视化大屏制 ...
不懂开发，也可以开发酷炫的可视化大屏
在软件开发.项目交付的过程中,很多时候需要开发酷炫的大屏驾驶舱. 别人开发的可视化大屏驾驶舱,是这样的: 可是当自己上手开发的时候,可能是这样的: 如何也能快速开发出酷炫的大屏呢? 可通过一站式可视化 ...
不懂代码，如何做出实时刷新的数据大屏？
首先恭喜你,当你看到这篇文章的时候,不管你是小白还是大咖,你都将直接获得一个高级技能:轻松上手可实时刷新的酷炫大屏. 制作可视化大屏,一般有这么几种方案: 写代码调用数据和图表,比如写JS+Echar ...

掌握这7点，不懂代码也能做出酷炫可视化大屏！