2020,贴地飞行的 AntV 设计Recommanded by editor
355天前Publish
作者:Moonland 幕阑,蚂蚁集团设计师

一年一度的 AntV 品牌发布日又来了,今年我们给大家带来了“贴地飞行”的 AntV 设计。为什么称之为“贴地飞行”?这一年中,AntV 设计从重心为统计图表到现在关系图、地图都有涵盖,从原来专注 PC 端到现在移动端、响应式、多端适配都有涉猎,从原来的骨架到现在慢慢的血肉丰满。这一年 AntV 设计与工程密切结合,从业务中慢慢汲取养分、贴地飞行。2020,献给你们迄今为止为业务上最好用的 AntV 设计。

 

 

更全面的设计指引

 

统计图表 Chart

迷你图表 Minichart:业务图表中,除了高频使用的折柱饼,还有迷你图表 Minichart ,它通常在空间有限的情况下作为全尺寸图表的降级缩略展示。今年 AntV 新增了迷你图表 Minichart 的 demo 和设计指引。

详见:https://www.yuque.com/mo-college/vis-design/ffp61z#ksPT7



 

色板:基于业务实践,AntV 对分类色板、顺序色板、发散色板进行了优化。



 

主题:AntV 在默认分类色板的基础上,新增三类分类色板主题,分别是秋日橙主题、马卡龙主题、强对比主题。这些主题色板各有不同的使用场景。新主题色现已上线 AntV 官网,可一键下载或复制。

更多色板指南详见:https://www.yuque.com/mo-college/vis-design/ugbofr


 

 

图 Graph

图数据(Graph Data)反映现实世界人与人、人与物、物与物的关系,甚至关联地理维度与时间维度。今年,基于大量如知识图谱、金融风控、图数据库相关产品的设计实践,AntV 设计小组精心沉淀总结出适用于图可视化领域的设计指引。该指引用经典的 ETCG 设计框架来组织内容,系统性介绍图可视化设计以及最佳实践和背后的思考。希望给广大的关系图设计师带来更深入的思考。

查看图可视化指引全文:https://www.yuque.com/mo-college/vis-design/ez4ro1



 

 

地图 Map

地理空间数据可视化永远都充满着魅力,通过点的疏密变化、飞线的长短、颜色的深浅、气泡的大小,我们感知这些高维数据在地理上的时空分布、分析趋势弯化。



 

目前设计的地图主要包括气泡地图、亮点地图、符号地图、散点地图、路径图等 9 类,我们将其抽象成通用的三层框架:地图层、图形层、控件层,每层给予设计建议,并把一些约定成俗的规范分享出来,感兴趣的同学可以查看地图可视化指引全文:https://www.yuque.com/mo-college/vis-design/khdmrc



 

 

仪表板 Dashboard

一张图或者一个卡片很难看清一个业务问题,因此有了商业智能仪表盘 Business Intelligence Dashboard,简称为 BI Dashboard。AntV 经过多年的业务打磨,总结出一套仪表板的设计指引,借助它。我们能快速搭建出贴合业务需求的专业仪表板。

抛开业务属性,Dashboard 按内容组织以及交互形态,可以分为“指标大盘”、“多维分析”、“数据明细” 3 种类型。每种类型我们都给出 Demo 以及设计指引,详见:https://www.yuque.com/mo-college/vis-design/ktqkzn



除了通用的 Dashboard,AntV 基于业务实践,我们还给出了监控 Dashboard 的设计指引,详见:https://www.yuque.com/mo-college/vis-design/sw0ifv

 

 

更完备的可视化组件

 

时间轴 TimeBar

数据很少是静态的,某件事在某个时间点爆发或者持续间发生,关联的因子有多个,时间轴工具可以有效展示动态时序数据、分析图数据关联因子。可以让用户快速、直观地观察事件序列以及它们之间的联系。我们可以通过播放时间来发现异常和探寻模式,推动调查并揭示数据中隐藏的故事。



 

AntV 在业务的呼声中,在原有缩略轴的基础上,提供了一个更强大时间轴组件,借助它你可以做出很多出色的动态可视化作品。时时间轴可模块化拼装出三种常见类型:趋势时间轴、简版时间轴、时间刻度时间轴。每种类型我们均给出 Demo 及使用指引。

查看图时间轴指引全文:https://www.yuque.com/mo-college/vis-design/sr2c12

 

 

视图控制栏 View ToolBar

视图控制栏是用户与数据进行交互的载体,当用户操作视图工具栏时,可对视图可视区间缩放、平移、对数据进行检索、过滤等。如果数据绘制区域超过屏幕可视区域,为方便用户能以全局视角观察数据,建议开启视图控制栏(例:地图上的视图控制栏)。或者用户需要频繁与视图上的数据进行交互,比如放大、缩小视图空间,快速定位检索数据点等,也建议开启视图控制栏(例:公安通过关系网核查犯罪嫌疑人)。

查看视图控制栏指引全文:https://www.yuque.com/mo-college/vis-design/nwwos3



 

 

图表信息组件 Info Component

为了更好地让读者理解图形背后的数据信息,图表设计者常常需要添加图例 Legend、指标卡或者 Tooltip,作为信息补充。何时需要使用图例? 如何设计 Tooltip?在空间有限的移动端应当如何合适地展现数据信息?

为此我们提出了信息组件(Info Component)的概念,从“信息-数据-表现”的角度囊括了传统的图例、指标卡和 Tooltip组件。并且给出设计规范,统一了前三者的用法,让图表在不同设备和尺寸下展现相同的信息,期望实现设计工程的提效和不同设备下阅读的体验一致。

查看图表信息组件设计指引:https://www.yuque.com/mo-college/vis-design/zn1plv



 

 

更好的场景案例

图表不仅承载着传达数据故事的功能,还需能满足不同场景下用户查看、分析数据的需求。AntV 在业务实践中不断打磨细节,以下给出一些业务场景中的真实案例,希望能给你带来一些启发。

更多案例可以访问 场景案例:https://antv.vision/zh/case



 

 

高信息密度监控图表

在监控场景中,由于真实数据的不可控性与实时性,往往存在着数据信息过于密集难辨认,或者在某一时间点突然出现极值(数值徒增),而导致整个图表难以阅读的情况;也会出现因筛选时间过长,X 轴标签过于密集的状况。这些易常情况降低了数据分析的效率和准确性。AntV 通过以下方式规避图表中可能出现的问题,并对需要聚焦关注的异常时刻进行突出处理。



 

Y 轴缩略轴:

监控场景中由于监控值的不确定性较大,容易出现个别极值/其他数个指标值域相近拥挤在一起的情况。Y 轴缩略轴组件的设计可以灵活设置y轴范围,规避各类异常情况。

详见缩略轴文档:https://www.yuque.com/mo-college/vis-design/gs5ow9



 

列表式图例:

锚定图表中某一时刻,可以在列表式图例中轻松查看到该时刻下的排序,或切换选择指标最大值等其他排序信息;点击列表中的图例可正反选指标,进行高亮或隐藏。



 

 

复杂多变的指标卡

在数据分析场景中,用户往往需要对某一指标进行多维监控。环绕关键指标查看衍生指标、拆分维度、观察时序趋势、作进度跟进,这些都可以通过指标卡来完成。AntV 基于业务场景提炼出一套灵活多变的指标卡,它可以演示成各种不同的指标卡类型。



 

以信息为导向的布局

指标卡的元素构成上始终遵循 主指标 > 拆分维度 > 衍生指标 > 趋势图 > 进度条 的信息优先级原则。对于重要的信息,采用更突出的视觉样式标记;对于次要信息,在有限的空间内优先展示突出特征,其余进行适当省略。



 

排版推荐:

默认样式-趋势图在下方,用户不配置进度条/趋势图,也可以按照此样式做自适应,通用性较强;趋势图在右侧-适用于卡片数目较少,横向空间宽裕,或是纵向空间紧凑的情况。趋势图在右上角-适用于移动端,或趋势图重要性较低,希望指标卡整体紧凑布局的情况。



 

 

更佳的文档查阅体验

AntV 是体验驱动产品,我们既注重阅读者的浏览体验,同时也在不断改善研发者的开发体验,让图找到使用场景,让开发者找到 API。

 

官网首页

为此,我们重构了 AntV 主页首屏的信息框架,让设计者能通过缩略图快速明晰 AntV 各子产品的定位与使用场景,点击缩略图就能直达产品 Demo,让可视化先人一步。

立即体验官网:https://antv.gitee.io/zh



 

 

交互式文档

除着页面,我们一并升级了产品在线研发体验,通过图文合一的方式,让开发体验更流畅,立即体验。

  • 布局更灵活:三种布局随心换,更高屏的经典布局、更沉浸的两栏布局,更全面的三栏布局;

  • 查找更方便:一键搜索、导航收起;

  • 色板更丰富:即看即用(设计师下载、开发复制使用)。



 

 

扩展阅读

查看全面的 AntV 设计语言、设计策略、设计指引:https://antv.vision/zh/docs/specification/language/basic

 

 

加入我们

AntV 各产品正在体系化升级,如对可视化设计感兴趣,对美对细节有追求,欢迎投简历+作品集至 antv@antfin.com,有前端相关经验加分。

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


 

 

AntV 2020 品牌日的发布详情

技术专文

设计专文

 

 

AntV 项目链接

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

  • AntV 官网:https://antv.vision/

  • G2:https://github.com/antvis/g2

G2 是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各种各样的可交互的统计图表。

  • G2Plot:https://github.com/antvis/g2plot

G2Plot 的定位是开箱即用、易于配置、具有良好视觉和交互体验的通用图表库。

  • F2:https://github.com/antvis/f2

F2 是一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。

  • F2Native:https://github.com/antvis/F2Native

F__2Native 是一个专注于客户端,开箱即用、高性能的可视化解决方案,完备的图形语法理论,满足你的各种需求,专业的移动设计指引为你带来最佳的移动端图表体验。

  • G6:https://github.com/antvis/g6

G6 是 AntV 旗下的图可视化与图分析引擎G 来自于 Graphic、Graph ,意味着我们要基于图分析技术做图可视化;6 来自于《六度分隔理论》,表达了我们对关系数据、关系网络的敬畏和着迷。

  • Graphinhttps://github.com/antvis/graphin

Graphin 是一个基于 G6 封装的关系可视分析工具 __,简单,高效,开箱即用,取自 Graph Insight,图的分析洞察。

  • X6:https://github.com/antvis/X6

X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用。

  • L7:https://github.com/antvis/l7

L7 是一个基于 WebGL 的开源大规模地理空间数据可视分析开发框架L7 中的 L 代表 Location,7 代表世界七大洲,寓意能为全球位置数据提供可视分析的能力。

  • AVA:https://github.com/antvis/AVA

AVA 是为了更简便的可视分析而生的智能可视化框架。

  • G:https://github.com/antvis/g

G 是 AntV 几个产品共同的底层 2D 渲染引擎,高效易用,专注于图形的渲染、拾取、事件以及动画机制,给上层 G2、F2、G6 提供统一的渲染机制。

  • ChartCube:https://chartcube.alipay.com

ChartCube 是一个可以快速完成图表制作的在线工具,只需要三步就可以创建出高品质的图表。

 

 

特别鸣谢相关设计贡献者(排名不分先后) @完白 @不过 @白弦 @源子 @子晴 @度安加壹 @刘大拐弯儿 @珊儿 @Moonland 幕阑 @yuyii @清芒 @清璇 @六一ZHW


原文链接:https://ant.design/index-cn
12
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
杭州 | 设计爱好者
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹