image.png


又是一年一度的 11.22 AntV 品牌日,本年度设计的关键词为“优雅”,包括“优雅的视觉”、“优雅的交互”、“优雅的制图”。



优雅的视觉

对一个可视化系统来说,最大的确定在于数据的“不确定性”。我们不知道用户会加载什么样的数据,以及数据是什么样的体量。而设计的职责是把不确定的海量、高维、非结构化的数据用准确、有效的方式传递,以较低的数据油墨比表达清晰、美的效果。


统计图表中,高维数据可以通过交互或者切换图表类型进行解锁。但数据量级不可控,一旦系统不作为,将数据原形呈现在用户前面就会出现信息过载,在 2019.11.22 版本中,我们进行了诸多改进。可以对比之前信息过载时糟糕的视觉体验与现在的方案。


糟糕的视觉体验+优雅的视觉体验.jpg



合理的信息密度

解决信息过载的办法是制定内置规则结合内容的智能检测,将不确定的、不可预测的数据种类、数据体量控制在合理范围内,用确定的方式传递出来,避免信息过载。


特定规则

经过多年的实战分析+行业经验总结,我们根据不同的数据类型使用不同的规则。


image.png



智能检测

以数据标签为例,数据标签如果不知道它的背景色是深是浅,是疏是密,就会出现标签过密、颜色看不清等系列问题。这次产品发布中,标签结合颜色检测、碰撞检测、图形检测、超区域检测,我们已能解决这些问题。


智能检测备份.jpg


标签只是智能检测的一个例子,在轴、图例上面设计融入了诸多小而美的想法。我们一直坚信:Think big,design small,将这些看似很小的规则组合在一起,就能极大改善阅读体验。



全新的视觉样式

另外,本次发布 AntV 还来了全新的视觉样式。视觉样式升级围绕两个关键词 美学选择  专注


美学选择

随着 iOS 13 和 Android 10 的普及, Dark Mode 已成为业内趋势之一,在可视化领域 Dark Mode 早有先驱。

Mac OS HIG 里的一句话:Dark Mode 是给予用户多一种美学选择,给予用户使用界面的新鲜感和惊喜感,会增加用户使用应用的愉悦度和粘性。AntV 经历无数次打磨,此次发布的全新 Dark Mode 样式,它与 AntDesign 相关组件、页面无缝融合,整体和谐优美。

image.png


L7.gif



专注

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

G2-layer-.gif


专注 一词流入图的方方面面,如主题配色、关系图点与边的关系,让其更清晰,让用户专注于识别“关系,而不是区别图形本身;


g6.gif



优雅的交互

今天,无限数据空间与有限屏幕空间的冲突愈演越烈,许多静态可视化作品已不满足分析诉求,加上各种端、各种设备的尺寸均需适配。这些千呼万唤的功能在 2019 的 AntV 中已逐步实现,主要包括响应式设计与交互语法。


响应式

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


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


Comp-1_3.gif



交互语法

可视化技术与人机交互拥有着紧密的联系。实现用户与数据的交互,方便用户控制数据,更好地实现人机交互这是我们一直追求的目标。今年 AntV 继续深耕可视化交互,提供了多图表组合、叠加、联动等交互功能,让图表具备讲故事的能力。


图表联动2.gif


交互语法本质是以用户行为目的为导向,目的引发相应事件的发生,拆解成对应的交互动作以及对作关联的组件、组件状态,交互系统是多项关联、相互作用的。


image.png



优雅的制图

可视化设计师一直致力于让 AntV 更好看好用,这回我们私心了一把,让设计者进入图表制作的全面提效时代,只需 10 秒,轻松做出优雅图表。


Kitchen 图表生成(sketch 插件)

只需 10 秒,两步生成一张图表可能是Sketch 里最好用的作图利器!插件下载链接


01.gif



ChartCube 在线图表生成

除了 Kitchen 图表插件外,我们还支持在线生成图表,点此使用


chartcube.gif



结语

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

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


扩展阅读

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


AntV 品牌日的发布详情


AntV 项目链接

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