发布稿 - 设计2.jpg


导读

在 1122 AntV 品牌日发布之际,我们想花一点时间和大家分享一下我们设计团队在封装 G2Plot 时背后的一些思考。这篇文章会分享我们在封装 G2Plot 同时如何完善可视化设计体系;在准确、有效、清晰、美的设计原则下,如何引导我们去指引未来 G2 4.0 的升级,如何在一些图表呈现上和工程师小伙伴一起“斤斤计较”并乐此不疲,共同为 G2Plot 做一些「微小而美好」的改变。


什么是可视化设计体系

可视化设计体系核心为了解决 2 个问题:图表的提效以及可控性问题;将图表输出品质控制在一定范围内,为设计者提供一套高质量“开箱即用”的图表库,避免重复造轮子等问题。


什么是G2 和 G2Plot

G2Plot 是基于 G2 可视化语法为底座,官方出品的开箱即用、默认好用的高质量统计图表类库。

设计-g2plot.jpg



设计新特性


更优雅的色板 

我们为图表穿上了新衣服,这是最直观的变化之一。尽管之前的色板也不错,但是我们希望它能更优化、极致,功能和样式能很好的做融合。


除此之外,全新 Dark Mode 样式与 AntDesign 相关组件、页面无缝融合,整体和谐优美。

image.png



为了满足业务大数据量下的可视化展示需求,我们将原本 8 个的基础色版,增加到 10 个,同时还新增了 20 色的扩展色板以供选;你会发现,对比原本的配色方案,现有方案色彩区间更接近,饱和度更协调,两两颜色之间的对比更鲜明,阅读体验更友好。此外,我们还提供了更均匀、更符合可视化场景应用的连续色板、邻近色板以及离散色板,以供更多不同数据场景的选择。


image.png


为了得到最好的色板效果,在遵循了准确、有效、清晰、美几个基本设计原则的大前提下,设计师与工程师联手,引入了「计算设计」的方法,通过对“色彩空间”的合理把控,让取色过程更加理性化。为了支持这次redesign,工程师花了不少时间为我们提供了一个色彩拾取工具 colorlab,一同完成这次色板升级的工作。


2019-11-12 17-01-03.2019-11-12 17_10_58.gif



我们总结归纳了以下几个取色思路。


image.png


更「聪明」的组件

信息有效性

1、内置规则

经过多年的实战分析+行业经验总结,我们根据数据类型来决定不同数据的显示规则,以「轴」和「图例」为例:


设计-组件.jpg


2、检测机制

以数据标签为例:为帮助用户更快获取信息我们会在图形上显示数据标签以辅助阅读。以往数据标签不知道它的背景色是深是浅,是疏是密,会出现标签过密、颜色看不清等系列问题。这次产品发布中,标签结合颜色差异度检测、跨图形检测、位置碰撞检测、超区域检测,我们已能解决这些问题。


image.png


3、遵循用户心智

图例的位置来举例,图例是对图形本身的概括。通常人的视觉动线是从上至下,从左到右。默认把图例放在左上角去做一个通用的方案看起来没毛病。

但更好的做法是:缩短用户对照图例看图形的本能路径,提升信息获取效率


2019-11-19 21-13-53.2019-11-19 21_16_50.gif


虽然图例的位置从技术上支持了12个位置,我们总结了图例在不同的图表类型中不同的位置后,经过克制收敛为两类,并应用在 PLOT 图表类库中,以及智能生成图表工具中。

设计者和观看者甚至并不会感知到位置的变化,但是对应图形获取信息的效率就在不经意间提升了。


02.gif


元素可读性

AntV 作为企业级数据可视化解决方案,最重要提升数据的获取效率。而效率很大程度与专注度有关。因此,我们在设计时重新定义的组件海拔高度,让图表信息层级更清晰,让用户更加专注于核心的内容。

G2-layer-.gif


内容完整性

当数值映射到size时,可能气泡会非常大,散点图、气泡图的图形有 size 维度,容易出血,,轴标签很难精确计算位数+宽度,容易出血;

我们这次对图表布局做了优化,把可视元素都在可控的区域内,且保证轴标签不出血,保证了用户对信息获取的完整性和有效性。

image.png



响应式的布局

AntV 在构建响应式系统时结合 Responsive design 与 Adaptive design,在宏观与微观层面遵循规则如下:


有了以上规则后,小到 mini 图表,大到大屏显示,AntV 总能保证重点信息不丢失的同时轻松胜任各种尺寸、多种设备。


Comp-1_3.gif



更流畅的体验

这次,AntV 官网也进行了整合优化,引导设计者更快找到想看到的内容。

在我们的设计者中,有大量的开发者和设计师、产品经理等等,不同角色都有不同的诉求,所以我们为开发者提供了更便捷的 demo & api 查看方式,为非开发者提供了设计指引等图表知识,以及智能生成图表工具。

点击体验:https://antv.alipay.com/zh-cn/index.html

image.png



结语

AntV 各产品正在体系化升级,如对可视化设计感兴趣,求贤若渴,欢迎投简历+作品集至 antv@antfin.com

数据可视化设计师:负责 AntV 相关设计工作,主要包括可视化设计体系搭建,可视化中台产品界面风格设计,输出高品质设计方案与规范。


扩展阅读

-------------------------


AntV 品牌日的发布详情


AntV 项目链接

欢迎关注我们的 GitHub 项目,点亮 star 了解我们的实时动态,期待 pr: