数据可视化在中后台的设计中很常见,通常主要用于分析和决策,对实时性要求不高,从一部分功能上讲,其实也有着报告数据的作用。设计以2D平面展示为主,几乎不会有3D设计出现,视觉设计更注重简单直接,一目了然。
数据大屏在上面的基础上,对实时性要求较高,会更强调数据展示的效果,这也是会流行FUI未来主义科幻风格设计的原因,追求视觉上的酷炫效果。设计上2D、3D皆有,还可以伴随着动效搭配一些可交互的设计,来展示数据之间联动。
制作数据大屏的一点小建议
数据大屏的制作可能会包含一些动效交互及3D建模渲染,一般中小型公司通常技术能力有限。如果接到设计制作数据大屏的任务,不妨先和产品技术等一起就表现方式和技术实现等方面做个探讨,不要直接进行设计工作,贸然追求超燃的特效,避免最后因为无法实现导致无谓的返工。
1.百度Suger
Sugar是百度云推出的数据可视化服务平台,目标是解决报表和大屏的数据可视化问题,解放数据可视化系统的开发人力。
上图是官网提供的案例,界面风格是常规的FUI风格。
在组件的提供上,Suger提供了很多的2D和3D组件,在一定程度上也可以自定义组件。还可以设置数据下钻和图表联动,增强动效交互效果。
平台的编辑界面总体来说还是很方便设计师适应的,与一般的设计软件界面差不多。上方是一些工具,左侧是图层的排布,右侧则是一些组件的属性。设计师可以很快地适应并应用,没有学习成本,也不会有太高的操作难度。但是Suger在3D方面尚有不足,个人感觉没有阿里云DataV、腾讯RayData的3D效果突出。
最后一点,Suger目前处于推广期,推广期间是免费使用的。
2.阿里云DataV
DataV最著名的一个应用项目应该就是天猫双11的数据大屏了。每一年都惊艳了无数聚焦于双11活动的人们。2018年的双11数据大屏设计更是被称为数据经济时代的全球清明上河图。
△2018天猫双11大屏
同样的,DataV也提供了一个编辑平台,连该平台本身的界面设计也充满了未来科技感,可以根据模板新建,也可以新建空白页面。基本操作模式与Suger类似,设计师先建立画面,后开发进行数据源的接入。编辑界面的操作难度也不高,稍微了解一下,就可以快速入手。
△DataV平台
与Suger相比,个人更为喜欢DataV。DataV的设计风格与动效交互都会略好一点。一般企业进行数据大屏的设计项目,其目的更趋向于对外展示。DataV在效果的酷炫程度上会更符合领导的要求。只是DataV目前分为基础版、企业版和专业版收费服务。个人申请有30天的基础版试用期。具体选择需要看公司自身内部需求而定。
3.腾讯RayData
RayData是我跟随我们领导去参观腾讯在宁波的分公司进行了解。当时展示的项目是深圳的城市大脑。将城市管理集为一体,包含交通、医疗、警务等等。与其在官网展示的内容一致,只不过官网是截图,而当时参观时是有个小姐姐拿着ipad一边交互一边跟我们讲解。交互与数据联动的效果很好,当时我们领导很喜欢这种效果。
△智慧城市大数据可视化
整体来说,RayData的数据展示效果也是相当不错的。但是RayData目前处于内侧阶段,也没有平台提供编辑功能,当前主要的模式是付费定制。
了解一些技术开源库,一方面可以参照其图表案例,了解各类不同图表的展示方式;另一方面是为了保证自己设计的可实现度,不然再炫酷的设计效果如果因为技术开发能力无法实现也是徒劳的。
1.Echarts-百度开源可视化库
Echarts提供的图表很多样化,几乎包含常用的、不常用的各类图表样式。且提供有可交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
2.Mapv-百度地理信息可视化开源库
用以展示大量地理信息点、线、面的数据。创建需先上传地理信息数据,再设置地图样式后,即可下载保存。目前仅开放Beta版本。
3.蚂蚁AntV
蚂蚁金服的AntDesign,作为设计师应该都是较为熟悉的。AntV是蚂蚁Ant系列下的一个数据可视化解决方案。分为G2、G6、F2、L7不同产品,分别对应不同的特性需求。
4.D3.js-数据驱动的文档
D3js是一个基于数据来操作文档的JavaScript库,适宜用来建造各类可视化图表。支持大型数据集和交互与动画的动态行为。
5.billboard.js-简易界面的可交互图表库
这是一个基于D3V4+的JavaScript的图表库。可以对数据进行视图缩放、展示细节等交互操作。
6.FusionCharts
FusionCharts提供了100多个交互式图表和2000多个数据驱动的地图,对不同平台都可兼容。同时提供了前端和后端各类框架及代码语言的插件,来方便开发快速入门。不过这款是收费的,根据不同的使用环境定价不同。
1.Kitchen-蚂蚁金服官方插件
这是一个sketch的插件工具。主要功能如下图:
2.FusionCool-阿里FusionDesign开源中后台UI解决方案辅助工具
这也是一个sketch的插件工具。分为图标、图表、组件、模块和模板五大功能区。
FusionDesign作为一个开源中后台解决方案,和AntDesign有一定类似,但也有所差别。AntDesign是一套组件库,FusionDesign更像是一个组件库生成工厂。
直接下载安装FusionCool的话,打开sketch看到的将是一个默认组件库,图表部分的种类样式比Kitchen多了不少。而更厉害的是,你可以在FusionDesign上,基于官方库编辑改造成属于你自己的设计系统,发布主题后获得新的主题包,此时你在FusionCool中就可以看到专属于你的主题包了,在sketch中完成设计后,开发使用Iceworks安装你的主题库就可以直接编码实现你的设计。
3.MapGenerator-快速地图生成填充
这是一款基于谷歌地图的自动填充的Sketch插件,输入地址后就可以自动生成不同风格样式的地图,个人比较喜欢第三款灰色的。
△图为MapGnerator生成效果
4.Chart-图表插件
这个插件是收费的,每年10美元。优势在于可以在Sketch中创建包含随机、表格或者JSON数据的图表。图表样式也是非常丰富了。