绑定完请刷新页面
取消
刷新

分享好友

×
取消 复制
看似复杂炫酷的数据可视化设计,用这波神器轻松搞定
2019-09-06 10:20:59

数据大屏与数据可视化

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

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

△ 来源 dribbble 作者wuze

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

△ 来源 dribbble 作者William Chen

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

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

大厂的可视化服务

1. 百度 Suger

网站链接:https://cloud.baidu.com/product/sugar.html

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

△ 来源Suger官网

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

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

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

△ 来源Suger编辑平台

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

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

2. 阿里云DataV

网站链接:https://data.aliyun.com/visual/datav?spm=a2c4g.11174283.2.1.46b66b79vzB03d

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

△2018天猫双11大屏

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

△ DataV平台

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

3. 腾讯RayData

网站链接:https://cloud.tencent.com/product/raydata

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

△ 智慧城市大数据可视化

整体来说,RayData 的数据展示效果也是相当不错的。但是 RayData 目前处于内侧阶段,也没有平台提供编辑功能,当前主要的模式是付费定制。

技术开源库

了解一些技术开源库,一方面可以参照其图表案例,了解各类不同图表的展示方式;另一方面是为了保证自己设计的可实现度,不然再炫酷的设计效果如果因为技术开发能力无法实现也是徒劳的。

1. Echarts -百度开源可视化库

网站链接:https://echarts.baidu.com/

这是一个使用 JavaScript 实现的开源可视化库,可以流畅地运行在 PC 和移动设备上,兼容当前绝大部分浏览器。4.0 版本还提供了对微信小程序的适配。DataV 中的一些组件也是依赖 Echarts 生成的。

Echarts 提供的图表很多样化,几乎包含常用的、不常用的各类图表样式。且提供有可交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

△ 来源Echarts实例

2. Mapv – 百度地理信息可视化开源库

网站链接:https://mapv.baidu.com/

用以展示大量地理信息点、线、面的数据。创建需先上传地理信息数据,再设置地图样式后,即可下载保存。目前仅开放 Beta 版本。

△ 来源Mapv官网

3. 蚂蚁AntV

网站链接:https://antv.alipay.com/zh-cn/index.html

蚂蚁金服的 Ant Design,作为设计师应该都是较为熟悉的。AntV 是蚂蚁 Ant 系列下的一个数据可视化解决方案。分为 G2、G6、F2、L7 不同产品,分别对应不同的特性需求。

△ 来源AntV官网

4. D3.js – 数据驱动的文档

网站链接:https://d3js.org/

D3js 是一个基于数据来操作文档的 JavaScript 库,适宜用来建造各类可视化图表。支持大型数据集和交互与动画的动态行为。

△ 来源D3js官网

5. billboard.js – 简易界面的可交互图表库

网站链接:https://naver.github.io/billboard.js/

这是一个基于 D3 V4+ 的 JavaScript 的图表库。可以对数据进行视图缩放、展示细节等交互操作。

△ 来源billboard官网

6. FusionCharts

网站链接:https://www.fusioncharts.com/

FusionCharts 提供了 100 多个交互式图表和 2000 多个数据驱动的地图,对不同平台都可兼容。同时提供了前端和后端各类框架及代码语言的插件,来方便开发快速入门。不过这款是收费的,根据不同的使用环境定价不同。

△ 来源FusionCharts官网

设计辅助工具

1. Kitchen – 蚂蚁金服官方插件

网站链接:http://kitchen.alipay.com/

这是一个 sketch 的插件工具。主要功能如下图:

△ 来源Kitchen官网

Iconfont 图标库我比较常用,可以直接在 sketch 中搜索拖拽,不用再去打开网页查找了。其次数据填充也比较常用,自动填充时间、地址、城市等挺方便的。sketch 也有自带的功能,但毕竟自带的填充都是英文,想要中文的需要自己编写填充文档,相对还是比较麻烦。其他是像智能排版、色板等功能,我用的不多,还是以 sketch 自带功能为主。

另外,与可视化设计相关的就是里面的图表生成器了。不过 Kitchen 当前只有一些常规的图表,不过胜在简洁明了,很适合在此基础上进行二次设计。该插件还是蚂蚁 Ant 系列的官方插件,可以自动配置符合 Ant Design 规范的组件,配合公司采用的 Ant 系列的框架,会方便不少。

△ 来源Kitchen插件界面

2. FusionCool – 阿里Fusion Design开源中后台UI解决方案辅助工具

网站链接:https://fusion.design/tool

这也是一个 sketch 的插件工具。分为图标、图表、组件、模块和模板五大功能区。

Fusion Design 作为一个开源中后台解决方案,和 Ant Design 有一定类似,但也有所差别。Ant Design 是一套组件库,Fusion Design 更像是一个组件库生成工厂。

直接下载安装 FusionCool 的话,打开 sketch 看到的将是一个默认组件库,图表部分的种类样式比 Kitchen 多了不少。而更厉害的是,你可以在 Fusion Design 上,基于官方库编辑改造成属于你自己的设计系统,发布主题后获得新的主题包,此时你在 FusionCool 中就可以看到专属于你的主题包了,在sketch中完成设计后,开发使用 Iceworks 安装你的主题库就可以直接编码实现你的设计。

△ 来源FusionCool插件界面

3. Map Generator – 快速地图生成填充

网站链接:https://github.com/eddiesigner/sketch-map-generator

这是一款基于谷歌地图的自动填充的 Sketch 插件,输入地址后就可以自动生成不同风格样式的地图,个人比较喜欢第三款灰色的。

△图为Map Gnerator生成效果

4. Amcharts – 矢量地图定制下载

网站链接:http://pixelmap.amcharts.com/#

这个网站上面提过,但其实设计师用来获取矢量地图也很好用,选择地图样式和地区之后,右下方即可以下载 SVG、HTML、Image 格式的图,十分方便。点击「Generate Ppxel Map」还可以转化为像素圆点形式的地图。

如果需要省份的地图,网站上无法直接下载,但可以先下载中国 svg 地图,然后再打开 svg 选择自己需要的省份模块即可。

另外,在使用地图的时候,要注意正确用图,规范用图。要有国家版图意识,符合测绘法。

标准地图可以参考国家自然资源局提供的标准地图服务,服务网址:http://bzdt.ch.mnr.gov.cn/index.html

5. Chart – 图表插件

网站链接:https://github.com/pavelkuligin/chart

这个插件是收费的,每年10美元。优势在于可以在 Sketch 中创建包含随机、表格或者 JSON 数据的图表。图表样式也是非常丰富了


狮觉设计工坊

分享好友

分享这个小栈给你的朋友们,一起进步吧。

可视化
创建时间:2020-06-17 15:27:16
可视化(Visualization)是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,再进行交互处理的理论、方法和技术。
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅:虚拟交易,一经交易不退款;若特殊情况,可3日内客服咨询

• 专区发布评论属默认订阅所评论专区(除付费小栈外)

技术专家

查看更多
  • 栈栈
    专家
戳我,来吐槽~