数据可视化大屏设计工具整理（上）

2022-5-22 纯纯

这是目录：

一、数据大屏与数据可视化

二、大厂的可视化服务

三、技术开源库

四、设计辅助工具

一、数据大屏与数据可视化

数据可视化是目前对数据展示最常用的方式。数据的可视化设计有助于将复杂的数据用最易理解的方式展示在用户的面前。

数据可视化在中后台的设计中很常见，通常主要用于分析和决策，对实时性要求不高，从一部分功能上讲，其实也有着报告数据的作用。设计以2D平面展示为主，几乎不会有3D设计出现，视觉设计重点更注重简单直接，一目了然。

△来源 dribbble 作者wuze，侵删

数据大屏在上面的基础上，对实时性要求较高，会更强调数据展示的效果，这也是会流行FUI未来主义科幻风格设计的原因，追求视觉上的酷炫效果。设计上2D、3D皆有，还可以伴随着动效搭配一些可交互的设计，来展示数据之间联动。

△来源 dribbble 作者William Chen，侵删

关于制作数据大屏的一点小建议：

数据大屏的制作可能会包含一些动效交互及3D建模渲染，一般中小型公司通常技术能力有限。如果接到设计制作数据大屏的任务，不妨先和产品技术等一起就表现方式和技术实现等方面先做个探讨，不要直接进行设计工作，贸然追求超燃的特效，避免最后因为无法实现导致无谓的返工。

二、大厂的可视化服务

百度 Suger

https://cloud.baidu.com/product/sugar.html

Sugar是百度云推出的数据可视化服务平台，目标是解决报表和大屏的数据可视化问题，解放数据可视化系统的开发人力。

△来源Suger官网

上图是官网提供的案例，界面风格是常规的FUI风格。

Sugar提供了组件编辑平台，进入平台后设计师可以直接进行组件的拖拽编辑，打造自己所需要的大屏界面。在设计师完成后就可以直接交接给开发进行各类数据源的接入。这种形式无疑节约了很多的开发时间，设计师也不用再担心前端开发的效果与自己的差之千里。对于时间紧迫或者自身技术能力不足的项目很适合。

在组件的提供上，Suger提供了很多的2D和3D组件，在一定程度上也可以自定义组件。还可以设置数据下钻和图表联动，增强动效交互效果。

△来源Suger编辑平台

平台的编辑界面总体来说还是很方便设计师适应的，与一般的设计软件界面差不多。上方是一些工具，左侧是图层的排布，右侧则是一些组件的属性。设计师可以很快的适应并应用，没有了学习成本也不会有太高的操作难度。但是Suger在3D方面尚有不足，个人感觉没有阿里云DataV、腾讯RayData的3D效果突出。

最后一点，Suger目前处于推广期，推广期间是 免费使用的。

阿里云DataV

https://data.aliyun.com/visual/datav?spm=a2c4g.11174283.2.1.46b66b79vzB03d

DataV最著名的一个应用项目应该就是天猫双11的数据大屏了。每一年都惊艳了无数聚焦于双11活动的人们。2018年的双11数据大屏设计更是被称为数据经济时代的全球清明上河图。

△2018天猫双11大屏

同样的，DataV也提供了一个编辑平台，连该平台本身的界面设计也充满了未来科技感，可以根据模板新建，也可以新建空白页面。基本操作模式与Suger类似，设计师先建立画面，后开发进行数据源的接入。编辑界面的操作难度也不高，稍微了解一下，就可以快速入手。

undefined

△DataV平台创建编辑界面

与Suger相比，个人更为喜欢DataV。DataV的设计风格与动效交互都会略好一点。一般企业进行数据大屏的设计项目，其目的更趋向于对外展示。DataV在效果的酷炫程度上会更符合领导的要求。只是DataV目前分为基础版、企业版和专业版 收费服务。个人申请有30天的基础版试用期。具体选择需要看公司自身内部需求而定。

腾讯RayData

https://cloud.tencent.com/product/raydata

RayData是我跟随我们领导去参观腾讯在宁波的分公司进行了解。当时展示的项目是深圳的城市大脑。将城市管理集为一体，包含交通、医疗、警务等等。与其在官网展示的内容一致，只不过官网是截图，而当时参观时是有个小姐姐拿着pad一边交互一边跟我们讲解。交互与数据联动的效果很好，当时我们领导很喜欢这种效果。