2020，贴地飞行的 AntV 设计

引言

一年一度的 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 各产品正在体系化升级，如对可视化设计感兴趣，对美对细节有追求，欢迎投简历+作品集至 [email protected] ，有前端相关经验加分。

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

附

AntV 2020 品牌日的发布详情

• 利业·立业 - AntV 与业务的故事
• 技术专文
• G2Plot 2.0 全新来袭
• F2Native 1.0 新的起点
• G6 栈：图可视分析如此简单
• X6 1.0 抱歉来晚
• L7 2.3 业务为本完善生态
• AVA 1.0 你的图表参谋
• 设计专文
• 2020，贴地飞行的 AntV 设计

AntV 项目链接

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

• AntV 官网 ： https:// antv.vision/
• G2 ： https:// github.com/antvis/g2
  G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
• G2Plot： https:// github.com/antvis/g2plo t G2Plot 的定位是开箱即用、易于配置、具有良好视觉和交互体验的通用图表库。
• F2 ： https:// github.com/antvis/f2
  F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。
• F2Native ： https:// github.com/antvis/F2Nat ive
  F__2Native 是一个专注于客户端，开箱即用、高性能的可视化解决方案，完备的图形语法理论，满足你的各种需求，专业的移动设计指引为你带来最佳的移动端图表体验。
• G6 ： https:// github.com/antvis/g6
  G6 是 AntV 旗下的图可视化与图分析引擎 ， G 来自于 Graphic、Graph ，意味着我们要基于图分析技术做图可视化；6 来自于《六度分隔理论》，表达了我们对关系数据、关系网络的敬畏和着迷。
• Graphin： https:// github.com/antvis/graph in 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 是一个可以快速完成图表制作的在线工具，只需要三步就可以创建出高品质的图表。

特别鸣谢相关设计贡献者（排名不分先后）@完白@不过 @白弦 @源子@鱼亦 @伽壹@solitude@刘大拐弯儿@珊儿 @Moonland 幕阑