提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
作者:Moonland 幕阑,蚂蚁集团设计师
引言
一年一度的 AntV 品牌发布日又来了,今年我们给大家带来了“贴地飞行”的 AntV 设计。为什么称之为“贴地飞行”?这一年中,AntV 设计从重心为统计图表到现在关系图、地图都有涵盖,从原来专注 PC 端到现在移动端、响应式、多端适配都有涉猎,从原来的骨架到现在慢慢的血肉丰满。这一年 AntV 设计与工程密切结合,从业务中慢慢汲取养分、贴地飞行。2020,献给你们迄今为止为业务上最好用的 AntV 设计。
更全面的设计指引
统计图表 Chart
迷你图表 Minichart:业务图表中,除了高频使用的折柱饼,还有迷你图表 Minichart ,它通常在空间有限的情况下作为全尺寸图表的降级缩略展示。今年 AntV 新增了迷你图表 Minichart 的 demo 和设计指引,详见链接。
色板:基于业务实践,AntV 对分类色板、顺序色板、发散色板进行了优化。
主题:AntV 在默认分类色板的基础上,新增三类分类色板主题,分别是秋日橙主题、马卡龙主题、强对比主题。这些主题色板各有不同的使用场景。新主题色现已上线 AntV 官网,可一键下载或复制。更多色板指南详见链接。
图 Graph
图数据(Graph Data)反映现实世界人与人、人与物、物与物的关系,甚至关联地理维度与时间维度。今年,基于大量如知识图谱、金融风控、图数据库相关产品的设计实践,AntV 设计小组精心沉淀总结出适用于图可视化领域的设计指引。该指引用经典的 ETCG 设计框架来组织内容,系统性介绍图可视化设计以及最佳实践和背后的思考。希望给广大的关系图设计师带来更深入的思考。查看图可视化指引全文。
地图 Map
地理空间数据可视化永远都充满着魅力,通过点的疏密变化、飞线的长短、颜色的深浅、气泡的大小,我们感知这些高维数据在地理上的时空分布、分析趋势弯化。
目前设计的地图主要包括气泡地图、亮点地图、符号地图、散点地图、路径图等 9 类,我们将其抽象成通用的三层框架:地图层、图形层、控件层,每层给予设计建议,并把一些约定成俗的规范分享出来,感兴趣的同学可以查看地图可视化指引全文。
仪表板 Dashboard
一张图或者一个卡片很难看清一个业务问题,因此有了商业智能仪表盘 Business Intelligence Dashboard,简称为 BI Dashboard。AntV 经过多年的业务打磨,总结出一套仪表板的设计指引,借助它。我们能快速搭建出贴合业务需求的专业仪表板。
抛开业务属性,Dashboard 按内容组织以及交互形态,可以分为“指标大盘”、“多维分析”、“数据明细” 3 种类型。每种类型我们都给出 Demo 以及设计指引,详见链接。
除了通用的 Dashboard,AntV 基于业务实践,我们还给出了监控 Dashboard 的设计指引,详见链接。
更完备的可视化组件
时间轴 TimeBar
数据很少是静态的,某件事在某个时间点爆发或者持续间发生,关联的因子有多个,时间轴工具可以有效展示动态时序数据、分析图数据关联因子。可以让用户快速、直观地观察事件序列以及它们之间的联系。我们可以通过播放时间来发现异常和探寻模式,推动调查并揭示数据中隐藏的故事。
AntV 在业务的呼声中,在原有缩略轴的基础上,提供了一个更强大时间轴组件,借助它你可以做出很多出色的动态可视化作品。时时间轴可模块化拼装出三种常见类型:趋势时间轴、简版时间轴、时间刻度时间轴。每种类型我们均给出 Demo 及使用指引,点击查看图时间轴指引全文。
视图控制栏 View ToolBar
视图控制栏是用户与数据进行交互的载体,当用户操作视图工具栏时,可对视图可视区间缩放、平移、对数据进行检索、过滤等。如果数据绘制区域超过屏幕可视区域,为方便用户能以全局视角观察数据,建议开启视图控制栏(例:地图上的视图控制栏)。或者用户需要频繁与视图上的数据进行交互,比如放大、缩小视图空间,快速定位检索数据点等,也建议开启视图控制栏(例:公安通过关系网核查犯罪嫌疑人),点击查看视图控制栏指引全文。
图表信息组件 Info Component
为了更好地让读者理解图形背后的数据信息,图表设计者常常需要添加图例 Legend、指标卡或者 Tooltip,作为信息补充。何时需要使用图例? 如何设计 Tooltip?在空间有限的移动端应当如何合适地展现数据信息?
为此我们提出了信息组件(Info Component)的概念,从“信息-数据-表现”的角度囊括了传统的图例、指标卡和 Tooltip组件。并且给出设计规范,统一了前三者的用法,让图表在不同设备和尺寸下展现相同的信息,期望实现设计工程的提效和不同设备下阅读的体验一致。点击查看图表信息组件设计指引。
更好的场景案例
图表不仅承载着传达数据故事的功能,还需能满足不同场景下用户查看、分析数据的需求。AntV 在业务实践中不断打磨细节,以下给出一些业务场景中的真实案例,希望能给你带来一些启发。更多案例可以访问 场景案例。
高信息密度监控图表
在监控场景中,由于真实数据的不可控性与实时性,往往存在着数据信息过于密集难辨认,或者在某一时间点突然出现极值(数值徒增),而导致整个图表难以阅读的情况;也会出现因筛选时间过长,X 轴标签过于密集的状况。这些易常情况降低了数据分析的效率和准确性。AntV 通过以下方式规避图表中可能出现的问题,并对需要聚焦关注的异常时刻进行突出处理。
Y 轴缩略轴:监控场景中由于监控值的不确定性较大,容易出现个别极值/其他数个指标值域相近拥挤在一起的情况。Y 轴缩略轴组件的设计可以灵活设置y轴范围,规避各类异常情况。详见缩略轴文档。
列表式图例:锚定图表中某一时刻,可以在列表式图例中轻松查看到该时刻下的排序,或切换选择指标最大值等其他排序信息;点击列表中的图例可正反选指标,进行高亮或隐藏。
复杂多变的指标卡
在数据分析场景中,用户往往需要对某一指标进行多维监控。环绕关键指标查看衍生指标、拆分维度、观察时序趋势、作进度跟进,这些都可以通过指标卡来完成。AntV 基于业务场景提炼出一套灵活多变的指标卡,它可以演示成各种不同的指标卡类型。
以信息为导向的布局:指标卡的元素构成上始终遵循 主指标 > 拆分维度 > 衍生指标 > 趋势图 > 进度条 的信息优先级原则。对于重要的信息,采用更突出的视觉样式标记;对于次要信息,在有限的空间内优先展示突出特征,其余进行适当省略。
排版推荐:默认样式-趋势图在下方,用户不配置进度条/趋势图,也可以按照此样式做自适应,通用性较强;趋势图在右侧-适用于卡片数目较少,横向空间宽裕,或是纵向空间紧凑的情况。趋势图在右上角-适用于移动端,或趋势图重要性较低,希望指标卡整体紧凑布局的情况。
更佳的文档查阅体验
AntV 是体验驱动产品,我们既注重阅读者的浏览体验,同时也在不断改善研发者的开发体验,让图找到使用场景,让开发者找到 API。
官网首页
为此,我们重构了 AntV 主页首屏的信息框架,让设计者能通过缩略图快速明晰 AntV 各子产品的定位与使用场景,点击缩略图就能直达产品 Demo,让可视化先人一步。立即体验官网。
交互式文档
除着页面,我们一并升级了产品在线研发体验,通过图文合一的方式,让开发体验更流畅,立即体验。
扩展阅读
点击查看全面的 AntV 设计语言、设计策略、设计指引。
加入我们
AntV 各产品正在体系化升级,如对可视化设计感兴趣,对美对细节有追求,欢迎投简历+作品集至 antv@antfin.com,有前端相关经验加分。
数据可视化设计师:负责 AntV 相关设计工作,主要包括可视化设计体系搭建,可视化中台产品界面风格设计,输出高品质设计方案与规范。
附
AntV 2020 品牌日的发布详情
技术专文
设计专文
AntV 项目链接
欢迎关注我们的 GitHub 项目,点亮 star 了解我们的实时动态,期待 PR:
G2 是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各种各样的可交互的统计图表。
G2Plot 的定位是开箱即用、易于配置、具有良好视觉和交互体验的通用图表库。
F2 是一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。
F__2Native 是一个专注于客户端,开箱即用、高性能的可视化解决方案,完备的图形语法理论,满足你的各种需求,专业的移动设计指引为你带来最佳的移动端图表体验。
G6 是 AntV 旗下的图可视化与图分析引擎,G 来自于 Graphic、Graph ,意味着我们要基于图分析技术做图可视化;6 来自于《六度分隔理论》,表达了我们对关系数据、关系网络的敬畏和着迷。
Graphin 是一个基于 G6 封装的关系可视分析工具 __,简单,高效,开箱即用,取自 Graph Insight,图的分析洞察。
X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用。
L7 是一个基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location,7 代表世界七大洲,寓意能为全球位置数据提供可视分析的能力。
AVA 是为了更简便的可视分析而生的智能可视化框架。
G 是 AntV 几个产品共同的底层 2D 渲染引擎,高效易用,专注于图形的渲染、拾取、事件以及动画机制,给上层 G2、F2、G6 提供统一的渲染机制。
ChartCube 是一个可以快速完成图表制作的在线工具,只需要三步就可以创建出高品质的图表。
特别鸣谢相关设计贡献者(排名不分先后) @完白 @不过 @白弦 @源子 @子晴 @度安加壹 @刘大拐弯儿 @珊儿 @Moonland 幕阑 @yuyii @清芒 @清璇 @六一ZHW
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册