# 构成
考虑到实际业务应用场景，以下罗列了较为重型的可视分析页面中图表的卡片元素。如下图，一个具有阅读端一定分析和操作能力的图表，可分为 8 个模块：
- Title 标题 必选
- Toolbar 卡片操作栏 必选
- SwitchButton 快捷切换：时间范围切换。antd 组件
- Filter 时间筛选、文本筛选、数值筛选 Filters antd 组件
- SwitchButton 时间粒度切换、聚合粒度切换 antd 组件
- DropdownPanel 分析维度：分类维度、聚合指标、衍生指标 antd 组件
- Legend 图例：颜色图例、样式图例、指标型图例
- Element 图表图形必选
## 信息优先级
卡片尺寸不是固定的，卡片内容需要根据尺寸进行响应式调整，整体遵循下图响应规则，越 Low 的越可以优先进行裁剪或者省略，越 Constant 越需要强制显示，不可进行裁剪隐藏。 
#### 视觉
- Canonical page: https://antv.antgroup.com/zh/specification/language/basic/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/language/basic.md
- Description: 视觉
---
title: "视觉"
description: "视觉"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/language/basic/"
---
AntV 的设计体系中，视觉设计尤为重要。本文主要包括 3 个篇章”布局“、”色板“、”字体“。
## 布局
有数据表明，人的平均注意力集中时间从 2008 年的 12 秒下降到 2015 年的 8 秒，这个时间还在缩短。我们的大脑每天都要处理海量信息，眼睛会倾向于通过扫视来获取重要信息，扫视的视线流一般是从左至右、从上往下。在数据可视化设计中，布局了决定用户的阅读顺序。在有限的屏幕空间内建立规范的空间布局，可以合理有效地传递信息，让内容为“扫视”而生！
### 组件构成
得益于图形语法的启发，AntV 设计团队从设计角度，将图表进行原子级拆分、抽象，形成这样一套通用组件，如下图中的标题、轴、图形、标签、注解、提示信息、图例等。
### 平面空间布局
将这些组件在平面空间上合理排布，可以分清主次，同时决定我们的阅读先后顺序。
### 纵向空间层级
我们引入“组件海拔”的概念，去管理这些组件的层级关系。将组件的重要层级重新梳理，归为四类：次要信息、辅助信息、正文、强调信息。通过增加透明度来决定视觉上的“Z”轴的海拔层次。
### 布局示例
以图例为例，图例是对图形数据的概括。通常人的视觉动线是从左到右、从上至下。因此我们习惯性把图例放在左上角，这对绝大多数图表来说没有问题。但图形的变化是复杂多样的，如果图的阅读顺序不是从左到右，而是从上至下，比如下图右边的堆叠柱状图，它是从上往下阅读。因此设计师对图例的位置进行了微调，让其图形与图例顺序建立关联，提高信息获取效率。
## 色板
在可视化设计中，色板的运用原则上优先保障准确性，考虑在操作指引、交互反馈上起到强化或凸显的作用。其次需兼顾色障碍群体，帮助有色盲色弱的人群也能在数据可视化中获取洞见。
### 颜色映射原理
在数据可视化领域中，数据与颜色的映射是非常重要的一个环节。颜色有三个视觉通道，分别是色调（H）、饱和度（S）、明度（B），不同的视觉通道可以与不同的数据类型建议关联。
**色调（H）：** 通常使用颜色中的不同色调来描述不同的分类数据，如水果品类中苹果映射为红色、香蕉映射为黄色、梨映射为绿色，将品类与色调（H）建立了关联。
**饱和度（S）/明度（B）：** 颜色通过明暗和饱和度的共同变化来描述有序或数值型的连续数据，比如身高由低到高或由 160cm 到 180 cm 的颜色映射为由浅到深，将连续变化与颜色的明暗饱和变化建立关联。
| 颜色属性 | | 关系 | 数据类型 | |
| :-: | :-: | :-: | --- | --- |
| 色调（H） |  | = | 分类型 | 如 🍎、🍌、🍐 |
| 饱和度（S） |  | = | 有序型 | 如多少、高低、大小 |
| 明度（B） |  | | 数值型 | 如 9.5cm 、18 个 |
### 6 大色板类型
AntV 色板以蚂蚁极客蓝为起始主色，根据不同数据类型、使用场景扩展出 6 种可视化色板类型，可完美兼容 Ant Design UI 资产。以下所有色板均通过无障碍测试校验，可放心使用。
更多关于色板的信息请[阅读此链接](/zh/specification/language/palette/)。
### 色板示例
**分类色板**
如图水果价格走势对比，使用红色代表苹果价格、蓝色代表蓝莓价格、黄色代表香蕉价格。
**
**
**邻近色顺序色板**
2017 年西安居民人均消费支出，通过连续的颜色变化，可以快速感知出居住方面消费占比最大，其次食品烟酒，第三是交替通信。
**叠加色板**
双变量映射地图，相对于单变量映射的地图，该地图形式更加新颖，十分适合用来展示两个紧密联系的变量信息。如下图所示，图中展现了美国国民人口居住密度和家庭生产总值的分布关系，纵向由浅到深的紫色映射了人口密度，横向由浅到深的蓝色映射了家庭收入水平，相交的颜色可以总体反映出人口和家庭的分布情况。可以从地图中清晰地看到，人口多且收入高的大多分布在沿海地区，人口数少且收入低的则主要分布在中部地区。
## 字体
### 为什么要定义字体
数据可视化的设计中，字体的设计很容易被忽略。我们习惯性引用系统的默认字体而忽视了数据字体的特定考量维度。身经百战后，AntV 设计小组认为一款好的数据可视化字体应当具备以下三个条件，实践表明， Roboto 字体是符合这三个条件的一款不错的数字等宽字体。
- 数字等宽，即数据可视化需要一款等宽字体，0 与 1 所占字符宽度应当一致；
- 识别度高，特殊字符 8B1IiLl0oO"'{[( 2zZ 具备良好的区分度；
- 混排美观，中英文+数字混排时，字体的 X -hieght 高度和谐；
### 等宽字体示例
等宽字体（monospaced font）是指字符宽度相同的电脑字体。与此相对，字符宽度不尽相同的电脑字体称为比例字体（proportional font）。在金融、财会领域，建议使用等宽字体且数值默认右对齐，它方便通过数值的长短来比对大小，提高读数效率，而使用非等宽字体会带来歧义。
### 定义系统字体
引入外部扩展字体会增加数据包的容量，影响加载性能。如非必要，勿须引入。另外，在字体申明的列表中，建议遵循 fallback 机制对字体顺序进行编排。如下示意：
```css
font-family: “Roboto","Helvetica Neue", 'Segoe UI', Tahoma,Verdana, -apple-system, BlinkMacSystemFont ,sans-serif;
font-variant-numeric:tabular-nums，
```
#### 标题与注释
- Canonical page: https://antv.antgroup.com/zh/specification/module/titleNote/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/module/titleNote.md
- Description: 标题与注释
---
title: "标题与注释"
description: "标题与注释"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/module/titleNote/"
---
## 定义
标题是对图表的主题进行阐述的一段话。
注释是表明数据来源，让图表看起来来源清晰、可靠。
## 何时使用
让阅读者直观地阅读当前图表的主题，了解当前内容的来源。
## 内容和位置
**标题内容**：言简意赅，尽量避免被截断；
**标题位置**：正、副标题一般放置于卡片左上角，标题宽度不超过卡片宽度。
**注释内容**：引用内容、数据来源等，保证正确性；
**注释位置**：一般放置于卡片左下角
## 常见问题
### 1、标题过长怎么办？
尽量精简标题内容，当标题过长且超过了卡片宽度时，请省略标题中间的文字，保住首尾，如“我是...标题”。
若副标题过长时，最多折 2 行，高度不超过卡片的 30%。
#### 设计价值观
- Canonical page: https://antv.antgroup.com/zh/specification/principles/basic/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/principles/basic.md
- Description: 设计价值观
---
title: "设计价值观"
description: "设计价值观"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/principles/basic/"
---
数据可视化 AntV 的设计价值观是基于 Ant Design 设计体系衍生的，具有数据可视化特性的指导原则。它在遵循 Ant Design 设计价值观的同时，对数据可视化领域的进一步解读。
AntV 设计语言初建定义了四条设计价值观「准确、清晰、有效、美」，经过几年内部业务大量的项目实践，随着用户看数分析诉求的变化，对图表提出了新的要求。
今天我们从「物视角」到「用户视角」的转变，重新审视 AntV 设计价值观，过去对图表的「准确、有效」本质是期望建立用户的「信任感」，过去对图表的「清晰、美」本质是建立用户的「轻松感」，图表作为数据信息传递的载体，最重要的价值是给到用户启发和洞见，过去对「意义感」的缺失，在今天我们进行了新增，于是有了今天的价值观升级。
## 信任感
如果把图表拟作人，图表看得见的外观，与之交互的行为反馈，甚至发出的声音，都是与用户建立信任感的方式。信任感是，当用户远远初见图表时，能够被它的可靠外观所吸引，表达时不歪曲，不误导，不遗漏，精准如实反应数据的特征信息。这样才能让用户放心地相信图表的数据，勇敢地去靠近、探索和理解它们，让用户敢于看数。
| 🙅 不建议 | 👍 建议 | |
| 标签溢出信息杂乱，容易造成用户质疑，数据是否有人维护？图表数据是否真实可用？ | 围绕用户看数目的，循序渐进展示所需的数据信息，如关系图缩小看全貌看概览，放大看单个数据明细。 | |
|
|
|
| 🙅 不建议 | 👍 建议 | |
| 图形、文本、标签与背景，图形与图形之间颜色对比度过低导致图表画面灰蒙蒙，用户阅读不清晰和不轻松 | 强化图形、文本、标签与背景，图形之间颜色对比度，通过适量的油墨和适当的交互帮助用户轻松读懂数据 | |
|
|
| 🙅 不建议 | 👍 建议 | |
| 看似整洁无错乱的数据图表，仅刻画了数据最基础的呈现，用户难以直观知道涨跌背后的原因 | 无对比不分析，添加适量可对比的均值参考辅助线，事件标记辅助趋势解读，整体智能洞见，帮助用户快速读懂数据规律 | |
|
|
值得注意的是，数据可视化中，如果一个双钻流程没能拿到结果，那么我们再次探索、聚焦，直至找到满意的可视化解决方案。
## 探索
设计师在接到可视化设计任务时，切忌马上开始画稿。AntV 提倡从“提问题开始设计”。不断提问，扩大问题范围，进一步检测问题之下的根本原因，然后聚焦于其中一个问题的描述。
- **业务背景：** 业务方是谁？可视化的目的是什么？
- **产品分析：** 产品是什么？投放在哪？是否需要跨端适配？
- **了解用户：** 给谁看？年龄？知识构成？
- **观察数据：** 数据来自哪里？数据结构如何？数据极值情况如何？数据产出时效、质量如何？
## 聚焦
经过第一阶段的探索，第二阶段我们需要聚焦。可视化作品可以传达什么？我们用户想要在可视化上看到什么？
- **用户目标：** 可视化解决什么问题？用户关注哪些核心指标？在使用链路上是否需要协作？
- **设计目标：** 如何凸显用户关注的核心指标？我们期望用户看到什么？
## 设计
接下来，我们要开始画图了，但我们还得反问我们自己：我们应该阐述什么样的观点？用什么图表类型阐述比较合适呢？视觉设计上面需要注意什么？用户需要与可视化进行交互吗？交互上需要注意什么？
- **图表类型：** 数据类型（地理可视化数据、图数据、常规统计数据）、用户分析目地（看关系、看分布、看趋势、看比较、分析整体与部分关系）决定图表类型。AntV 提供图表分类导航决策树，借助它，我们可以快速定位我们可以使用的图表；
- **视觉设计：** AntV 有一套完成的视觉设计体系，包括”布局“、”色板“、”字体“。详见[视觉设计指引](https://ava.antv.antgroup.com/zh/docs/specification/language/basic)；
- **交互设计：** 屏幕空间很小？数据放不下怎么办，用户能否与数据进行交互？是否要为多端设计。详见[交互设计指引](https://ava.antv.antgroup.com/zh/docs/specification/language/interact)；
- **观点阐述：** 数据反映出来的趋势或者关系分布能否总结出来？异常数据是否需要标记出来？你可能需要用到[标注组件](https://ava.antv.antgroup.com/zh/docs/specification/module/annotation)。
## 评估
设计好的可视化作品，用户看得懂吗？AntV 的四条核心原则：准确、清晰、有效、美，这四条原则也是评估可视化作品的四点准则；
- **测试：** 找用户或者身边同事，让他们扫视你的作品，描述他们第一眼感觉，看能否匹配你的设计预期。再让他们点一点、操作一下，能否找到自己想要的数据；
- **迭代：** 如果不能，建议反问用户、反问自己问题出在哪里，并开始新一轮的迭代优化。
#### 如何生成你的分类色板
- Canonical page: https://antv.antgroup.com/zh/specification/tool/creator-color/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/tool/creator-color.md
- Description: 如何生成你的分类色板
---
title: "如何生成你的分类色板"
description: "如何生成你的分类色板"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/tool/creator-color/"
---
可视化色板是数据驱动的，色彩背后还承载着数据信息，不能单纯依靠美丑评判好坏，一套优秀的可视化色板应该让用户信任数据，轻松阅读数据，并能启发用户发掘数据背后的意义。基于新的设计价值观和考虑帮助设计师上手一套色板设计，我们将色板设计流程化的同时，提炼设计规则量化为色彩算法，实现用户输入品牌色即可轻松得到一整套可视化色板，实现人人都可以是专业的可视化设计师。
## AntV 可视化色彩体系
了解了可视化色板的业务特点后，接下来让我们深入了解 antv 的可视化色彩体系，根据不同的业务场景，antv 总共有 6 套不同的色板，其中最关键的是分类色板，其他色板都是分类色板根据一定的映射关系衍生而来，因此本次升级会以分类色板作为抓手进行升级。
## 升级的原因是什么？
本次色板升级主要有两个原因：首先是 antv5.0 从人的视角重新提出了三个价值观，新的价值观对可视化色板提出了更多要求。其次是 5.0 开放了系统灵活度，支持用户自定义主题色来生成专属的可视化色板，需要一套可被算法实现的取色逻辑。
## 现状分析
明确了升级的原因后，让我们带着新的价值观来看看当前色板有哪些问题。信任感要求色彩应该避免让用户产生歧义，4.0 色板中的灰色会红色分别会让用户误以为是对比数据和警告数据，从而造成用户疑惑。
轻松感要求色板应该清晰容易识别，3.0 色板整体与白色的对比较小，色彩运用到图形上不够清晰，图形上的文字不易阅读。
意义感要求色彩帮助用户更好的理解数据，对于这一点，antv5.0 会在官网消费侧通过色板使用指南帮助设计师正确的使用可视化色板。
## 设计流程
明确了升级原因和当前的问题后，我们主要会从下面三个步骤进行优化：第一步是确定取色逻辑：通过参考经典的配色理论来确定取色规律并得到色板初稿；第二步是基线检测：通过量化和测试的方式去检验色板是否满足价值观的要求；第三步是感性调整：在理性的推导之上加上感性的调整让色彩和谐舒；
## Step1:确定取色逻辑
首先进入到第一步，我们先来看一下 4.0 色板的取色逻辑是什么，如图所示，4.0 色板在色彩的选取上有一定的逻辑，包括相邻色彩之间的明暗间隔，色彩之间的距离等，5.0 会在 4.0 的基础上继续优化，同时对取色逻辑进行量化用于后期的拓展和算法实现。
为了得到一套可被量化同时又具有色彩搭配美感的取色方式，我们参考了经典的配色理论，包括「邻近取色」「对比取色」「分裂互补取色」从支付宝的品牌色出发依次使用三种配色方式得到三组色板。其中邻近取色沿着一个方向，按照相同的夹角取色，其优点是色彩具有很强的规律感和和谐度，缺点是整体区分度比较低。对比取色是相邻两个色彩是一组成 180 度的对比色，其优点是色板具有很强的区分度，缺点是相邻两色会误以为是一组对比数据，分裂互补取色是三个一组取色，前两个颜色是一组邻近色，第三个颜色是前两个颜色共同的对比色，这种取色方式兼顾了邻近色的和谐同时又有较高的区分度，没有明显的劣势。**因此 5.0 确定以分裂互补取色方式作为取色逻辑。**
## Step2:基线矫正
根据取色方式得到色板初稿后，还需要通过 4 个基线矫正来让色彩满足价值观的要求。
### 色彩不存在歧义
色彩应该避免与容易引起歧义的色彩(警告红)混淆，从而让用户产生歧义。
### 色彩足够清晰
无论作为元素还是容器，色彩与其相交的内容的对比度都应满足 W3C 可访问标准。
### 色彩间有区分
色彩之间具有足够的区分度，通过在 Lab 模型下计算色彩之间的欧几里得距离来量化区分度，并确保该值大于可区分阈值。
### 兼顾视障体验
保证在视障场景下相邻色彩之间有足够区分，视障人群对色相识别有障碍，对明暗更敏感，因此需要保证相邻两色有一定明度差异。
通过色环取色和基线矫正，我们就得到一组具有色彩搭配美感，算法可实现并满足价值观要求的色板。
## Step3:感性调整
色彩是感性的视觉语言，理性的取色内核上，还需要将色板放入真实场景中去验证，对过于突出的色彩进行调节，让色彩更加和谐。
## 改版前后对比
得出色板之后，我们将色板放到真实业务中进行测试，并收获了用户的正面反馈。
- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴；
- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴；
- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义；
- 标签：用来解释数据点的值；
- 图形：图形默认为线，也可以利用面积图渐变填充的方式强调趋势走向。
# 柱/条形图
**定义：** 柱状图用于描述分类数据之间的对比，如果我们把时间周期，如周、月、年，也理解为一种分类数据 (time category)，那么柱状图也可以用于描述时间周期之间的数值比较。详见 AntV 官网 柱形图 demo。
| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
| :-- | :-- |
| 功能 | 对比分类数据的数值大小 |
| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 |
| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 |
##
**元素构成：** 与折线图一样，主要包括坐标轴、图例、标签、图形等内容。
- X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。
- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
- 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
- 标签：用来解释数据点的值。
##
**何时使用：** 这个问题相信困扰着一些刚接触可视化的设计者。柱形图、条形图都是利用相同宽度下矩形的长度来表示维度之间度量值的大小区别，利用的视觉通道是绝对位置。在大多数情况下，折线图和柱形图是可以互相替换的。
**适用于柱形图：**
1. 当图表画布长度大于高度时，利用宽度空间的富余，展现更多的柱形。
2. x 轴变量为时间等时序离散数据时，柱形图相当于强化了单时间点度量体量的“增强版折线图”。
**适用于条形图：**
1. 当当图表画布长度大于高度时，利用高度空间的富余，展现更多的条形。
2. 当维度名称较长，在条形图的空间下可以展示更多的文字标签。
3. 条形图的上下排布更适合延伸出转化漏斗、排名占比等业务语义。
# 饼图
**定义：**饼图通过扇形区块的面积，弧度和颜色等视觉标记，展现数据的分类和占比情况。它的特点是展现部分与部分之间，以及部分与整体的关系。部分相加之和等于整体的 100%，用整圆表示。详见 AntV 官网 饼图 demo。
| **适合的数据** | 一个「分类维度字段」和一个「数值度量字段」 |
| :-- | :-- |
| **功能** | 对比分类数据的数值大小 |
| **数据与图形的映射** | 「维度字段」的计数映射区块颜色和数量；「度量字段」的聚合值映射区块弧长和面积 |
| **适合的数据条数** | 建议区块数目不超过 9 种，超出的部分可以考虑合并显示为“其它” |
##
**元素构成：饼**图主要包括图形、标签、图例等内容。
- **图形(Element)：** 饼图由扇形组成，环图由滑块组成。
- **图形标签(Label)：** 显示各个区块的占比（%），名称（华东、华南、华北）和实际数值（123.45）。
- **复合指标：** 在环图中心位置处显示，或以指标卡形式显示在图表上部分。
# 迷你图表 Minichart
**定义：** Minichart 通常在空间有限的情况下作为 fullsize chart 的降级显示形式，相比于 fullsize chart，Minichart 省略了轴和图例，标题，标签等组件，而只保留了图表图形的基本态势，因此展现的信息量是有限的，在静态展示状态下，只能体现数据的大概分布。详见 AntV 官网 mini 图表。
**Minichart 类型：** 可折线图、面积图、柱形图、直方图、饼图、环形/条形进度条、子弹图等。
| 折线图 Sparkline |   |
| --- | --- |
| 面积图 MiniArea |  |
| 柱形图 MiniBar |  |
| 直方图 Histogram |  |
| 环形进度条 |  |
| 条形进度条 |  |
##
**何时使用：** 在有限的空间内展现数据的大体分布/趋势/占比关系。可以单独使用 Minichart 作为页面里的单个图表, 也可以搭配其他 UI 组件使用。
#### 色板
- Canonical page: https://antv.antgroup.com/zh/specification/language/palette/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/language/palette.md
- Description: 色板
---
title: "色板"
description: "色板"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/language/palette/"
---
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
AntV 色板是基于 Ant Design 色彩体系，并结合数据可视化设计价值观而设计。在可视化设计中，色板的运用原则上优先保障给予用户的信任感，同时考虑在呈现阅读、交互反馈强化给到用户轻松感，最重要的是颜色在不同场景中使用的意义感，帮助用户能在数据可视化中启发理解和获取洞见，收获工作的意义。下载资源色板
## 颜色映射原理
在数据可视化领域中，数据与颜色的映射是非常重要的一个环节。颜色有三个视觉通道，分别是色调（H）、饱和度（S）、明度（B），不同的视觉通道可以与不同的数据类型建议关联。
**色调（H）:** 通常使用颜色中的不同色调来描述不同的分类数据，如水果品类中苹果映射为红色、香蕉映射为黄色、梨映射为绿色，将品类与色调（H）建立了关联。
**饱和度（S）/明度（B）:** 颜色通过明暗、饱和度的共同变化来描述有序或数值型的连续数据，比如身高由低到高或由 160cm 到 180 cm 的颜色映射为由浅到深，将连续变化与颜色的明暗饱和变化建立关联。
| 颜色属性 | | 关系 | 数据类型 | |
| :-: | :-: | :-: | --- | --- |
| 色调（H） | 
| = | 分类型 | 如 🍎、🍌、🍐 |
| 饱和度（S） | 
| = | 有序型 | 如多少、高低、大小 |
| 明度（B） | 
| | 数值型 | 如 9.5cm 、18 个 |
## 6 大色板类型
AntV 色板以蚂蚁极客蓝为起始主色，根据不同数据类型、使用场景扩展出 6 种可视化色板类型，可完美兼容 Ant Design UI 资产。以下所有色板均通过无障碍测试校验，可放心使用。
### 分类色板
分类色板用于描述分类数据，如苹果、香蕉、梨，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性，常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等。
[Interactive content](
- 离散色板尽量选取蓝黄对比
一般场景中，我们常也会使用黄绿配色，黄绿对比中，黄是暖色系，绿是冷色系，同样能给到对比感受，且打破常规的蓝红对比色，给到新颖的色彩感受，但如果你的用户中视障人士占比较多，则尽量避免绿黄配色，如图为两种色板在正常人眼和红绿色盲眼中的对比效果，黄绿配色在红绿色盲眼中就失去了色彩对比，难以区分。
## 扩展阅读
- [AntV 色彩体系的搭建](https://zhuanlan.zhihu.com/p/70121039)
- 想自定义色板？查看 [色板生成教程](https://antv.vision/zh/docs/specification/tool/creator-color)
- [下载色板资源](/zh/specification/resources/)
#### 图形 Element
- Canonical page: https://antv.antgroup.com/zh/specification/module/element/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/module/element.md
- Description: 图形 Element
---
title: "图形 Element"
description: "图形 Element"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/module/element/"
---
## 定义
图形是统计图表的视觉通道在形状上映射的视觉展现，是图表的主体部分。图表中其他组件的目的皆是帮助读者更好地理解数据在图形上的映射关系。
## 何时使用
图形可以通过视觉特征更快地被读者感知和接受。从认知学的角度，人眼在对图形的获取效率远高于对抽象意符的理解。所以图形是数据可视化的必备元素，承载着数据背后蕴含的信息。
图形是可视化图表区别于表格和文本的最重要元素。是每个可视化通常必须包含的组件，且通常很大程度上决定了该可视化的有效性与美观度。一个优秀的可视化作品，其图形必定能准确、清晰地呈现背后的数据，带给读者启发和信息。一个优美的可视化作品，其图形是标题信息之后首先被读者注意到的部分，是 data-storytelling 过程戏剧张力和引发读者注意力的载体。
可视化设计中，较图形的美观度更重要的，是作者想表达的数据特性能否被准确地通过图形表达出来。数据特性和用户的认知水平可以帮助可视化设计师决定有效的图形映射类型和视觉映射通道，设计师再通过读者阅读的媒介、设备和环境决定可视化作品的人机交互方式，最后考虑到图形的美观度设计。
## 类型
按照基础图表类型，图形可分为：折线，面积，散点，气泡，饼/环，柱形，条形。
## 样式
二维空间内的统计图表图形属性遵循计算机视觉元素构成，有 填充，描边，阴影等样式。
## 用法建议
#### 图形比例
以柱条形图为例，柱形/条形比例和两边间距的比例为 1：2：1，柱子宽度为总宽度的 60%。
直方图中的柱形会相比之下排布更加密集，柱子之间间距恒定为 1px。
环形图扇区的外半径和内半径比例为 5：3， 外半径和画布尺寸的 80%。
####
#### 填充样式
根据图形元素在实际图表中的面积占比，我们定义了相应的填充样式。图形占比越大的图表，对应填充的透明度越高。如，在柱/条形图中，图形的填充比例为 95%；在面积图中，图形的填充比例为 25%；在折线图中，可以通过渐变填充的方式强调线条的位置。
####
#### 与交互状态关联
图形可以吸引用户的注意力，因而在交互语法中，图形在正常态、悬浮态、选中态、被动高亮态，都有显著的视觉样式区别，交互状态的变化基于图形设计，保证了整个可视化设计体系和体验的一致。
| mouse-event | null | hover | click | click |
| --- | --- | --- | --- | --- |
| visual-state | default | highlighted | active | de-active |
| Style |  |  |  |  |
####
#### 为信息重要性服务
在不同尺寸下的响应式布局中，依据图形对应代表的信息优先级，决定图形的展现策略。
持续更新中，敬请期待…
#### 分析模型
- Canonical page: https://antv.antgroup.com/zh/specification/strategy/analysis/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/strategy/analysis.md
- Description: 分析模型
---
title: "分析模型"
description: "分析模型"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/strategy/analysis/"
---
## 概览
数据可视化是一个相对的过程，你想要用户看到什么取决于他能看到什么。设计者通过对数据进行编码设计，阅读者再对数据进行解码，去理解可视化背后的数据。
- **设计者**：从数据到图表——数据元素到视觉编码的映射过程
- **阅读者**：从图表到数据——视觉解码还原为数据结构的过程
## 分析模型
我们设计数据可视化时，应当站在用户的角度换位思考。用户面对可视化时，通常会套用一个固化的分析思路，它们环环相扣形成闭环，是固定的分析模式，我们称之“分析模型”。
> 5W 模型最早由 IBM 提出，作为通用分析模型指引分析师进行工作。
“发生了什么”、“为什么会发生”、“接下来会发生什么”、“我能做什么”、“我的计划是什么” 这几个问题越往前越浅显偏现象、越往后越偏本质及解决方案，中间有任何卡壳都会影响用户的分析思路甚至导致分析流程中断。
1. 发生了什么？有没有“冲突”？
1. 为什么会发生？“冲突”的原因是什么？为什么会发生？
1. 接下来会发生什么？有没有特征线索表明“冲突”会持续下去？
1. 我能做什么？怎么避免“冲突”继续 发生或者让“冲突”反转？
1. 我的计划是什么？针对“冲突”我能做什么？
所以在可视化设计时，应当甄别用户可能会遇到的问题、以看问题的视角来确定数据的展示顺序及视图关系，设计上突显需阐述的道理或规律，让其可以帮助用户透过现象看本质甚至预测未来。
#### 地图 Map
- Canonical page: https://antv.antgroup.com/zh/specification/graph/map/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/graph/map.md
- Description: 地图 Map
---
title: "地图 Map"
description: "地图 Map"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/graph/map/"
---
# 地图通用概念
地图是将空间数据映射在坐标轴上，通过可视化图层表达出来的特殊形式。它主要包括：图层、坐标、数据。
## 图层
**地图框架设计**
### 控件层
辅助用户操纵画面、查看固定窗体下多视角信息的快捷工具层，如视角切换、镜头拉远拉近等工具。控件层一般指纯视图操作的视图组件：图表标题/视图工具栏/图形绘制组件/标尺/品牌 logo 等。
### 图形层
精彩纷呈的数据可视化层，包含图形和图形组件，共同呈现一个场景下的数据可视化表达。
图形：大体分为点、线、面图层
| **点图层** | **线图层** | **面图层** |
| :-: | :-: | :-: |
|  |  |  |
图形组件：图形可视化的内容增强，共同传递界面信息，如图例、数据面板等，常见的如 Tooltip/筛选器/时间过滤器/数据面板/图例等
### 地图层
承载 LBS 信息的地理地图层，给予观众更沉浸式感受的可视化层，L7 默认提供黑白彩三版地图
## 坐标
在地理空间（比如地球和地图）中，完整的坐标体系采用(经度、维度、海拔)的结构来表述，`position(longitude, latitude, altitude)` ，但绝大多数坐标信息仅包含经纬度信息，`position(longitude, latitude)`。
绝大多数平面地图为地球球体采用莫帕托投影方式展开的平面图。因而，不管是平面地图还是立体地球，都可以采用同一套坐标体系。
## 数据
数据类型大概分类点、线、面
### 点图层数据
| 某城市小店名称 | 经度 | 纬度 | 店铺规模权重 | 图形 |
| --- | --- | --- | --- | --- |
| A | 116.490794 | 39.949238 | 200 | 
|
| B | 116.332692 | 40.009834 | 600 | 
|
| ... | | | | |
### 线图层数据
**两点连线：** 点的移动形成了线，线的位置参数中需至少包含起点、终点的经纬度信息。比如发货地与收货地。
| 起点 | 终点 | 起点-经度 | 起点-纬度 | 终点-经度 | 终点-纬度 | 来往次数 |
| ---- | ---- | ---------- | --------- | ---------- | --------- | -------- |
| A1 | A2 | 116.490794 | 39.949238 | 116.490794 | 39.949238 | 280 |
| ... | | | | | | |
**寻路路径：** 两点之间应用寻路规则形成运动路径。数据结构上是多个连续的经纬度打点。
| 经纬度 | 气温（摄氏度） |
| --- | --- |
| [116.478885,39.998642],[116.477769,39.995798],[116.48058,39.994072],[116.483884,39.995338],[116.481932,39.997985] | 40 |
| ... | |
### 面图层数据
面图形层(polygon)，指用一连串首尾闭合的点坐标对（xi,yi）来表达，其中每一个坐标对都具有定位意义。属于依比例符号图层，其轮廓范围是表达对象实际范围的缩影。
| 省份 | 经纬度 | 风险等级 |
| --- | --- | --- |
| A 省 | [116.472501,39.994524],[116.472641,39.991286],[116.474647,39.993226] | 3 |
| B 省 | [116.472791,39.99122],[116.475527,39.989486],[116.477447,39.99136] | 10 |
| ... | | |
# 地图种类
## 气泡图
指地图上用一个形状相同、面积大小和数值成正比的圆点来定位的地图，是散点图的扩展，用于表达离散现象分布特征的地图。 
## 亮点图
散点图的变形，指用一个点代表一个值，连续渐进颜色代表数值大小，并通过色彩的叠加的达到效果增强，专为海量散点数据运用而生，解决散点图在远视角时，因面积变小导致色彩无法区分的情况，常用于海量数据的地理分布，如城市灯光数
## 符号图
散点地图的变体，用具象的图标指代抽象的圆点，无需图例就能直观看出数据点代表的内容，常用于地图上重要地标的显示或数据量较少时的信息表达，如某品牌的分店分布情况，可用品牌 LOGO 图标；如常见公交的士站点分布情况等
## 散点图
指地图上可用一个形状大小相同的圆点来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布，常用于海量数据分布
## 路径图
指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布，通常用来表示线状或带状分布的地理要素，用于需要对路径详细变化观察的场景，如人类运动轨迹等等
## 弧线图
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。通常用来表示线状或带状分布的地理要素，用于重点关注路径起止点以及两地理位置之间的关系，如航线轨迹等等
## 填充图
填充图，也叫分级统计图，可在地图上不同领土区域进行着色，查看区域间的分布对比情况，通常用来表达区域范围具有分级现象的聚合面状分布，常以颜色或底纹填充的图斑，如：风险等级划分、降水量划分，等等
更多地图类型详见 AntV-L7。
# 设计规范
| **动作名称** | **点图层** | | **线图层** | | **面图层** | |
| --- | :-: | :-: | :-: | --- | --- | --- |
| 不可点击数据点 | 不透明度 30% |  | 不透明度 30% |  | 不透明度 30% |  |
| 常态数据点 | -- |  | -- |  | -- |  |
| 悬停数据点 | 对象图形底部增加大于该图形直径 4px 的 30% 不透明度的实心同色同类型图层 |  | 对象图形底部增加大于该图形直径 4px 的 30% 不透明度的实心同色同类型图层 |  | 对象图形底部增加大于该图形直径 4px 的 30% 不透明度的实心同色同类型图层 |  |
| 点击数据点 | 对象图形增加大于该图形直径 4px 的外轮廓 2px 描边同色同类型图层 |  | 对象图形增加 3px 同色描边 |  | 对象图形增加大于该图形直径 4px 的外轮廓 2px 描边同色同类型图层 |  |
# 设计建议
## 对外使用中最重要的地图合规性
地图设计涉及国际领土界限问题，在信息呈现上需要谨慎对待，信息的层级结构、区域划分都和政治主张密切相关，切犯政治错误。在设计中运用地图元素一直是一个风险度极高的事情，主要是因为它的合规性和完整性非常的专业，普通设计师没有相关专业背景，敏感度相对薄弱，很容易触发红线，作品如需对外，设计前期可先向所在公司了解相关审批流程。
## 使用叠加色板拯救你的海量数据
远视角观察海量数据点很小时，颜色明度变化基本看不出来，此时的连续色板映射没有发挥到最大，基本无效，建议开启色彩叠加效果，增强对比效果
## 色尽其用
合适的数据分区，等间距、等分位等，充分利用色彩通道
## 黑白场切换，色彩也应随之变换
色彩编码中，有个通用常识，地图底图颜色若是浅色的，因为亮色最接近底图颜色，色彩对比小，亮色往往是编码最小值，而深色对比大，感觉海拔更高，离你更近，因此是最大编码。但切换后的地图底图变深色了，同理，最亮的颜色就应该是编码最大值
#### 交互
- Canonical page: https://antv.antgroup.com/zh/specification/language/interact/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/language/interact.md
- Description: 交互
---
title: "交互"
description: "交互"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/language/interact/"
---
## 01 交互层次
区别于传统数据报表相对静态的表现形式，用户通过与图不断产生交互，从数据中获取更深层次的分析和信息。
Shneiderman [1] 提出了经典的可视化信息交互策略：概览、缩放、过滤、按需提供细节、关联、记录和提取。两年后，Dix [2] 将高亮与焦点、上下翻页和超链接、概况与上下文、同一表示的不同参数、时间轴的过渡归纳为新的交互操作模式。交互的种类有很多，学者们对可视化交互的分类方式也各有不同，有「行为」[3]、「意图」[4]、「意图+参数」[5]等多种方式。
经过业务的实践和沉淀，AntV 从用户视角出发，按照用户的目标和行为对可视化交互进行梳理。我们发现用户在进行可视化数据分析时，通常会经历三个步骤，分别为「看数-分析-洞察」。
**看数：** 主要指用户获取数据并初步可v视化加工和阅读查看的行为。 **分析：** 主要指用户对数据进行调整，从更多角度进行看数的行为。 **洞察：** 主要指用户通过交互强化洞见，并对结果进行流转的行为。
基于更多的业务调研和桌面调研，我们总结出常见的 24 类可视化交互，这是我们从用户视角出发的最全归纳。
### 举个例子
某大型超市销售同学想要分析今年的营收情况，找出所有有潜力的商品类型，并制定下一年度销售策略。于是销售同学找到数据，并使用可视化图表帮助自己看数、分析和洞察。
## 02 设计建议
AntV 5.0 的设计价目标是让用户更有信任感、轻松感和意义感。下面从交互的角度切入，提供设计建议。
### 信任感
对操作多些确定，让用户自助使用。
用户在浏览图表查看数据时，我们建议每一次鼠标触发都有实时有效的反馈，如上图：用户在使用鼠标悬浮在图例上时，可实时的联动高亮图例对应的图形内容，让用户对自己当前阅读的对象有更明确的感知。
### 轻松感
交互的操作简单，让用户轻松分析。
用户在交互过程中，始终都要跨过认知鸿沟和执行鸿沟 [6]，为了降低用户的认知成本和操作成本，我们建议在可视化交互中提供更多的直接操纵的能力。如上图：当用户有对数据自定义排序的场景下，若用户可以直接拖拽图形进行排序，便可以获得更自然的交互体验。
除了少思考和少操作以外，我们建议可以提供类似右键菜单的能力，让用户产生分析意图时即可所见即所得的获取分析工具，并对对象快速进行分析探索。
### 意义感
增强分析的能力，让用户更易洞察。
用户在分析探索时，适时的画龙点睛之笔可以让洞察更直观的展现在分析者面前，一条辅助线和一块参考区间便可以快速的将机会点或者风险点清晰的暴露出来。但是如果这个时候如果用户需要填写复杂的表单才能记录自己的洞察，那么在复杂的操作间，灵感可能会稍纵即逝。我们建议为用户匹配更直观的交互语言，让用户抓住时机，快速沉淀洞察记录观点。如上图：用户在标注辅助线时原需要填写复杂的表单才能完成诉求，如果我们支持用直接长按坐标轴 X 即可添加辅助线，那么用户将获得更自由的交互体验，洞察也可被更快获取。
## 03 设计策略
带着上面三个目标，我们对 24 种常见交互进行了设计迭代，沉淀了 9+设计策略和 20+设计案例，且会持续更新。本篇将对每个策略挑选一个案例进行简单说明。
### 信任感
#### 👀 有前馈
#### 👂 有反馈
#### 🤏 可撤销
### 轻松感
#### 🧠 少思考
#### ⌛️ 快触发
#### 👆 少操作
### 意义感
#### ⚒️ 能力全
#### 💡 洞察快
#### 🥳 更自由
更多设计案例和设计 Tips 可查看： AntV 交互设计工具箱
## 04 交互索引
### 看数
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
### 问题 2：我可以自定义标签吗？
可以，通过配置项你可以修改标签的样式，包括点的形状、文字大小等，但我们还是建议您使用默认方案。
#### 图 Graph
- Canonical page: https://antv.antgroup.com/zh/specification/graph/graph/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/graph/graph.md
- Description: 图 Graph
---
title: "图 Graph"
description: "图 Graph"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/graph/graph/"
---
# 0. 引言
在「科学与复杂性」一文中，科学家 Warren Weaver 按学界面临问题的复杂性，将现代科学史划分为「简单问题、无序复杂问题、有序复杂问题」3 个阶段。20 世纪中叶之后，学界开始面临更多不稳定性、非线性和多元性的有序复杂问题，业界急需一种基于网络模型的分析探索工具，和思考方式。后来，以 [柯尼斯堡七桥问题](https://zh.wikipedia.org/zh-hans/%E6%9F%AF%E5%B0%BC%E6%96%AF%E5%A0%A1%E4%B8%83%E6%A1%A5%E9%97%AE%E9%A2%98) 基于图的拓扑结构被解决为起始点，图可视分析在越来越多的领域发挥作用，在互联网行业，随着大数据与 AI 技术发展，越来越多的业务场景用上了图可视分析，如社区结构分析、聚类、消息传播、节点分类、链接预测、图表示学习、图神经网络、网络演化等。
> 《Science of Complexity》 - Warren Weaver 1948
这些形形色色的图可视分析产品，对设计的需求越来越旺盛。设计在这一领域又能做什么？该如何设计一个复杂的图可视分析产品？图可视化的视觉和交互设计又有哪些值得注意和思考的点？AntV 设计小组把我们在这一领域的思考和沉淀总结成「G6 图可视化设计体系」，希望能给更多设计师在这一陌生的设计领域带来更多思考和帮助。
# 1. 简介
## 1.1 常见应用场景
在阿里、蚂蚁集团，图可视分析广泛应用于云安全、知识图谱、企业风控、图数据库等不同的业务场景。抽象来看基本上有两种类型：
- **对现状的记录、阐明、揭示**：如对机房安全，流量监控等现状的监控；
- **对现状的扩展、抽象（对未来的预测）**：如基于人工智能的各类技术，对于图的预测和实时防控。
## 1.2 图的种类
关系图种类划分，无论业界还是学界目前都没有一个统一的定论。基于 AntV 自身的业务，我们总结归纳出几种常见图的类型：关系图、流程图、DAG 图、血缘图、ER 图、树状图。每种图都有其自身的使用场景以及设计时需要考量的点。我们从图的基本介绍、特点、适用业务场景、设计指引几个方面提供了详细的介绍。
查看 [图的种类详细介绍和设计指引 >](https://www.yuque.com/mo-college/fel945/peopdx)
# 2. 设计对象
设计师在面对一个关系图设计需求时，不仅需要设计一张图「看上去」如何，更需要考虑体验设计五要素的每一层。从了解业务和产品目标出发，洞察用户需求，同产品经理一起定义图分析产品的功能边界，再基于用户场景去构建产品的任务流程，信息框架和界面布局，最终再去打磨产品界面以及最重要的图本身的视觉和微交互设计。
| 层级 (Layer) | 描述 (Description) |
| :--- | :--- |
| **表现层** (Surface) | 视觉感知层：产品基础界面和图本身节点和边的视觉设计。 |
| **框架层** (Skeleton) | 界面布局：如画布、各类组件的布局关系和使用逻辑。 |
| **结构层** (Structure) | 流程、信息架构：确定产品中多个图分析模式如何整合为一体，各种功能的模块组合，信息框架的构建。 |
| **范围层** (Scope) | 功能/内容需求：定义产品图分析功能和呈现内容的边界。 |
| **战略层** (Strategy) | 用户需求、业务目标、产品目标。 |
## 2.1 通用流程
从图分析的角度来看一个图分析产品通常会历经如下几个阶段，以将数据源转化为对用户有价值的信息。
> 引用自《图分析与可视化》
## 2.2 常见图分析模式
> 对应「五要素」中的范围层
按图产品探索分析场景的特性，我们将图分析产品的分析模式为**有明确目的、无明确目的和特殊场景**三种。不同的分析模式界面会有所不同，用户的使用流程也会有所差异。诚然，一个功能完备的图分析产品，3 种分析模式可能会同时具备，从而导致界面复杂度成倍的提升。需要设计师能够抽丝剥茧，知其所以然，理清楚每一种模式各自特点之后，再结合实际的用户场景，全盘考虑产品设计方案。
### 2.2.1 有明确目的
这类分析模式是有明确的分析或查询条件，这个条件的呈现形式可能是一个规则表达式，一段 Gremlin 或 GQL 的查询语句，或明确的起点和终点，甚至是直接查看某个节点或某条边的具体信息。常见的模式有：规则查询、Gremlin 查询、关联分析、筛选/搜索画布、查看详情等。这类模式下，通常需要通过搜索或在各种类型的输入面板中，输入查询语句、规则等明确的条件信息，来进行探查和分析。
### 2.2.2 无明确目的
无明确目的地探索是指基于已有数据内容，进行关系的 N 度扩展、下钻分析、子图探索、撤销回退等操作，来挖掘数据中的特性，发现价值或机会点的分析过程。
### 2.2.3 特殊场景
#### 2.2.3.a 内置了 AI 算法能力的分析场景
这类分析场景通常需要借助内置的算法或规则推理能力来实现，从海量数据中快捷的挖掘出符合特定规则的目标节点和关系，常见的有：担保圈、实控人、最短路径等。
#### 2.2.3.b 结合时间或地理信息的场景
在源数据中含有时间和地理维度的内容时，会出现结合时间或地理信息的分析场景。
## 2.3 常见组件
> 对应「五要素」中的框架层
点和边的基础样式是所有图可视化的基石，要组成一个完整的图分析产品，还需要有各类组件来承担不同的功能。从体验设计的角度来看，常见的组件可分为如下几种类型：
- **基础组件**：图例、工具栏、右键菜单、视图控制栏、系统日志等；
- **条件输入**：查询、筛选、搜索、画布设置等；
- **信息输出**：详情面板、气泡、Tooltip、画板信息等；
- **高级功能**：时间轴、快照画廊、分析报表等。
查看 [AntV 内置的各类组件 >](https://www.yuque.com/mo-college/fel945/fkm1n0)
## 设计指引
###
### 合理组织内容
**有逻辑组织页面层次**，Shneiderman 于 1996 年提出可视化信息检索的箴言 Overview First， Zoom and Filter， Then Details-on-De-mand，译为“概览第一，聚焦过滤，再按需查看详情”。它符合人类寻求信息的基本逻辑：先大体，再局部，然后聚焦兴趣点进行探索，这是一个由表及里的过程。
**合理排布内容**，人的阅读顺序为从左至右，从上而下，采用格式塔设计原理，有限组织不同方面的思路，便于分组和快速扫描。将最重要的视图、最关键的指标放在此类型页面的顶部或左上方。阅读者可以快速准确地找到他们需要查看的文字。当我们打开网页或者仪表盘的时候，第一眼会看哪里？最可能是左手边，可将关键信息放在此位置。
内容组织 Tips
- 明确此类页面的使用者身份，以及分析目的，从而选择对应的页面类型. 划分用户。不同业务线间，关注的核心指标不同，常见的指标类型有：宏观的大盘数据，具体的业务指标。
- 针对决策者，可以选择描述型的指标结果页面；
- 针对执行者，可以选择有更多分析功能的分析、详情页面。
- 确定核心指标间的联系及优先级，合理地进行页面布局，把结论和最重要的指标放在最醒目的位置；
- 请记住，你可以将以上页面通过交互方式串联起来，讲述你的数据故事。
### 突出重点
如果系统知道那些值较高，或者超出阈值，为什么要用户去找，不高亮它们？
**多用对比：** 在数据分析领域，经常会说“无对比不分析”。没有对比就没有伤害，没有对比就看不出差距。所以，多用对比，方便阅读读看出数据之间的差异。比如当前数据与目标对比、同期对比往期。
### 准确传递
保证数据的准确性、清晰度和完整性
1、使用正确的图表类型。
2、在必要的时候对数据的定义作出解释。
#### 响应式
- Canonical page: https://antv.antgroup.com/zh/specification/language/media/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/language/media.md
- Description: 响应式
---
title: "响应式"
description: "响应式"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/language/media/"
---
## 为什么需要响应式
数据可视化始终面对无限（海量）数据与有限屏幕空间的冲突，如何解决不同端、不同屏幕尺寸下内容的适配问题，在有限的空间内帮助用户更快地理解信息和获取洞见，是我们一直致力研究的问题。如果可视化图表缺少合适的布局方案，看似美好的设计稿，在灌入未知体量的数据或者改变尺寸时会变得惨不忍睹。
## 挑战
- 图表本身构成复杂；
- 数据体量不可预知；
- 设计者对显示的不足做点状修补，无法给出体系化的解决方案；
- 开发者欠缺专业的可视化知识；
- 开发者依赖底层组件能力，无法二次改造。
## 如何解决
### 信息响应原则
- **宏观：** 保证核心信息优先展示，体现数据主要特征。
折线图展现趋势和变化，柱形图展现排名和分布，饼图展示占比。
- **微观：** 空间有限时，体现主要信息，保留图形特征。
所有尺寸下细节信息都能通过交互获取到。
### 对应技术方案
数据可视化的响应式设计包括“响应式”与“自适应”
- Responsive design 响应式：缩放图表其结构和外观保持不变，能适应显示区域。
- Adaptive design 自适应：根据显示区域调整图表的结构和外观，如图表布局、信息密度、交互方式等。
## 设计流程
不同于传统的 UI 组件，图表的多端适配显示既要考虑报表的整体与页面其他元素/图表的响应式布局，也要考虑图表内组件之间的自适应布局。在 Ant Design 的可视化体系中，我们自研出一套适用于全量图表的布局适应规则，从整体图表、图表内原子组件梳理了适用于所有图表的布局适应体系，设计流程如下图：
### 1.定义经典布局
考虑到信息展现地尽量完整和美观，图表的布局规则会相对灵活和细致。同时，PC 端，移动端和大屏，不同端的交互方式也要求图表的组件做到相应的转换和适配。
作为开始，我们可以针对图表，找到最频繁显示图表的屏幕尺寸。如 PC 端一行放三个图表，560px 的宽度，和移动端一行放一个图表，350px 的宽度。本示例中还包含了极小尺寸下的迷你布局。
对三种尺寸的图表（PC、Mobile、Mini），分别定义经典布局。
### 2. 拆解构成
取单个经典布局，拆解为图表组件级的构成。如下图，统计图表 Chart&Plot 可以拆解为 Title，Toolbar，Axes，Element，Label，InfoComponent-legend，Guideline 等。之后我们将对每个图表组件、以及组件之间的关系为切入点，约束布局。
### 3. 确定信息优先级
### 4. 明确约束条件
**外部约束：** 包含屏幕尺寸和设备属性。前者可拆解出断点范围，后者进一步约束了交互状态。
**内部约束：** 包含组件所在的大小，组件内元素个数和间距。
### 5. 采取响应策略
其中，省略、换行、旋转、抽样，依赖于数据属性。转化方式依赖于设备的限制。
### 6. 布局适应规则
##
## 案例
#### 坐标轴 Axis
- Canonical page: https://antv.antgroup.com/zh/specification/module/axis/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/module/axis.md
- Description: 坐标轴 Axis
---
title: "坐标轴 Axis"
description: "坐标轴 Axis"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/module/axis/"
---
## 定义
坐标轴指二维空间中统计图表中的轴，它用来定义坐标系中数据在方向和值的映射关系的图表组件。
## 何时使用
在二维笛卡尔坐标系中，轴通常为水平方向的横轴（x 轴）和竖直方向的纵轴（y 轴）。极坐标系中，轴分为切向的切向轴（angle）和径向轴（radius）。
## 构成元素
坐标轴主要构成元素包括：轴标题、轴标签、轴线、轴刻度线、坐标网格线。
### 轴标题
**设计建议**
- 通常都建议加上轴标题解释轴的含义。当图表其他部分的内容（图表标题，图形标签，注释，轴标签文字等）已能充分显示轴的意义，可以略去轴标题，精简画面元素。
- 除了数值百分比（%），科学计数法单位（k/m/g）、日期时间（年/月/日）单位和其他情况的数据单位建议在轴标题中显示，在各个轴标签中略去；例：生产总值（亿元）。
##
### 轴标签
**设计建议：**
- 可根据图表类型设置轴标签是否显示、旋转角度以及显示间隔。
- 对文本数据：不建议开启抽样。
- 对数值数据：不建议开启尾部省略。
- 连续轴、时间轴默认自动抽样 + 不旋转；
- 分类轴默认自动旋转 + 自动省略。
轴标签「若图形区域内有数据标签」，则轴标签可以考虑隐藏，如下图：
## 轴类型
映射轴的数据类型可分为
与此对应，轴可以分为：分类轴，时间轴，连续轴。
##
## 双轴图如何设计？
顾名思义，双轴图共用 Y 轴值域区间，它含有两个 Y 轴左标轴，左右各一个。双轴图的使用大大提高了屏效。
**设计建议**
- 尽量保证基线从「0」开始，且左右 Y 轴分段数量一致；
- 建议两组数据的 Y 轴单位是不同的，比如一组为「人数」，一组为「百分比」；
- 建议开启轴标题。
#### 监控 Dashboard
- Canonical page: https://antv.antgroup.com/zh/specification/graph/conDashboard/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/graph/conDashboard.md
- Description: 监控 Dashboard
---
title: "监控 Dashboard"
description: "监控 Dashboard"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/graph/conDashboard/"
---
## 定义
在企业级产品中，运维人员常需要监控、跟进、检测、处理多事件、多维度、多指标的实时信息。用户需要清晰、高效地查看全局概况；再明确问题，聚焦下钻分析，处理跟进问题。本文面向**多指标多维度实时数据**的监控场景，提供快速上手的设计模板。
监控模板提供了整个对于监控业务的问题发现定位-分析追溯-跟进处理的解决过程建议。监控人员首先在业务总览页，对所有业务故障的发生与处理有总体把控，再进入故障排查页面进行每段时间内的故障排查，以及下钻查看问题详情；也可以在总览后，进入自行搭建的自定义大盘页面，对相应业务数据有针对性地监控。
模板的提供不局限于单页面。设计师可以根据自己的业务场景，选取符合的区块进行拼装。
## 模板结构
模板内容涉及三个模块，以三个主页面的形式给出。也支持单页面拼合使用。
### 1.总览页
业务总览页展现关键指标数目列表、报警分布，事件列表，帮助用户快速定位到问题模块，进入故障排查。
**如何使用：** 总指标卡描述了所监控业务的应用总个数、出现异常的应用数，以及自定义大盘个数，用于把控监控范围；报警分布展现各时段下异常数量，便于快速聚焦到需要关注的时间段里；事件列表提供故障处理人与处理进度等信息，方便管理者进行监管。
### 2.故障排查页
故障排查页包含秒级时间区块筛选器、故障事件列表、故障事件基本信息、故障定位细分、失败任务链路、事件列表。
**如何使用：** 全局秒级时间区块筛选器对时间进行线性呈现，并将有故障的时间点高亮，有利于用户基于时间高效筛选排查问题高发区。下方左侧以列表形式罗列故障事件可供切换；右侧以总-分形式呈现事件波动概述、故障处理进度、故障定位细分、失败业务流程链路，设计师可根据业务需求选取合适的区块进行。另外，本页还可以延伸添加趋势图等其他图表类型。
### 3.自定义大盘页
自定义大盘为用户自主搭建的图表大盘页，可以包含智能决策意见列表/总指标卡、全局筛选与布局切换、自定义图表。
**如何使用：** 本页平铺所有指标，呈现全量信息。顶部列表展现智能决策建议，或监控总指标概览（如“齐全度”指标卡），下方工具栏包含全局筛选器、数据更新选项和图表排列方式。图表以单列的列表式或多列平铺卡片的形式切换展现。所有图表支持 y 轴缩放控制，以规避监控场景中易出现的极值问题。
点击布局切换后，可由列表式布局切换为卡片式布局。列表式布局可以让详细查看每个图表；卡片式布局则可以让用户纵览到更多的图表。用户可根据自身需求切换两种布局。
### 4.下钻查看问题详情
点击图表/文字链/热区，触发抽屉查看下钻信息和明细列表；在抽屉中下钻，可推出二级抽屉，用于呈现包含更细节信息的图表。
**如何使用：** 需要对主页面上的信息进行下钻探索交互时，可使用抽屉，快速便捷。
## 设计建议
### 串联分析思路
- 分析思路遵循[通用 dashboard 设计](https://ava.antv.antgroup.com/zh/docs/specification/graph/pubDashboard)。
- 明确此类页面的使用者身份，以及分析目的，从而选择对应的页面类型。不同业务线间，关注的核心指标不同，常见的指标类型有：宏观的大盘数据，具体的业务指标。
- 针对决策者（如监控业务管理者），可以选择描述型的指标结果页面；
- 针对执行者（如异常情况处理者），可以选择有更多维分析功能的分析、详情页面。
- 确定核心指标间的联系及优先级，合理地进行页面布局，把结论（如智能决策）和最重要的指标（如监控页面中的总指标卡）放在最醒目的位置；
- 设计师可以将以上页面通过交互方式串联起来，展现监控数据分析思路。
### 监控场景图表建议
在监控场景中，由于真实数据的不可控性与实时性，往往存在着数据信息过于密集难辨认，或者在某一时间点突然出现极值（数值徒增），而导致整个图表难以阅读的情况；也会出现因筛选时间过长，x 轴标签过于密集的状况。降低了数据分析的效率和准确性。故建议通过以下方式规避图表中可能出现的问题，并对需要聚焦关注的异常时刻进行突出处理。
- Y 轴缩略轴：监控场景中由于监控值的不确定性较大，容易出现个别极值/其他数个指标值域相近拥挤在一起的情况。y 轴缩略轴组件的设计可以灵活设置 y 轴范围，规避各类异常情况。
- 警告标记线：凸显警告时刻/时间段；时间下方用白底躲避与其他 x 轴数值的重叠。
- 图表上 hover 态：由于监控下可能出现较多时间点，不作处理时 x 轴的轴标签过于密集，故需要抽样显示。同时，鼠标在图表上的 hover 态显示出该时刻的时间，并用白底躲避下方数字；与警告线重合时，时间变为红色。
- 列表式图例：锚定图表中某一时刻，可以在列表式图例中轻松查看到该时刻下的排序，或切换选择指标最大值等其他排序信息；点击列表中的图例可正反选指标，进行高亮或隐藏。
#### 缩略轴 Axis Navigator
- Canonical page: https://antv.antgroup.com/zh/specification/module/axisNavigator/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/module/axisNavigator.md
- Description: 缩略轴 Axis Navigator
---
title: "缩略轴 Axis Navigator"
description: "缩略轴 Axis Navigator"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/module/axisNavigator/"
---
## 定义
缩略轴是一种辅助看数据的组件，它将大量数据浓缩在一个轴上，既可以缩小宏观看数据全貌，又可以放大微观看数据的片断，同时还可以拖拽观察数据在一定区间内的演变。
## 何时使用
缩略轴是值域数据的浓缩，它跟轴的类型息息相关。一般来说时间轴上使用缩略轴的频率高，连续轴使用缩略轴频率低、分类轴几乎不会用到缩略轴。
- 时间轴，数据跨度非常大，【高频使用】，比如一组时序数据跨度 10 年，需观察这期间数据变化趋势时，建议开启缩略轴；
- 时间轴，数据密度很高，【高频使用】，比如分钟级更新的实时数据，当需要查看一天内的数据走势时，建议开启缩略轴；
- 连续轴，数据密度很高，【低频使用】比如查看 1-100 岁平均身高分布，开启缩略轴可以全局查看身高分布；
- 分类轴【不建议使用】。
## 常见类型
### X 轴缩略轴
### Y 轴缩略轴
## 构成元素
缩略轴主要包括轴“主体”与“轴刻度”，其中“轴刻度”可以隐藏不显示。
## 出现位置
缩略轴可出现在图的四个方向，一般建议摆放在左、下、右方，上方因为有过多的图表组件（标题、图例、筛选器等）不建议摆放。
## 交互说明
### 缩略轴主题色
缩略轴建议与图表主题配色搭配使用，让整体更加和谐美观。假设你的图表主题色为蓝色，那么缩略轴选定区域也应该为蓝色，同理也可以为橙色。
### 文本躲避规则
### 与时间轴的关系
时间轴是缩略轴的分支，差异点如下：
| 类型 | 支持数据类型 | 摆放位置 | 支持配件 |
| --- | --- | --- | --- |
| [缩略轴 Axis Navigator](https://antv.vision/zh/docs/specification/module/axisNavigator) | 时间轴（时序数据）、连续轴（非连序数据）均可 | X、Y 轴均可 | 无时间配置有播放器 |
| [时间轴 TimeBar](https://antv.vision/zh/docs/specification/module/timeBar) | 必须要有时间轴（时序数据） | X 轴 | 有时间配置与播放器 |
#### 移动端 Mobile
- Canonical page: https://antv.antgroup.com/zh/specification/graph/mobile/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/graph/mobile.md
- Description: 移动端 Mobile
---
title: "移动端 Mobile"
description: "移动端 Mobile"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/graph/mobile/"
---
AntV 拥有一套基于移动端的可视化图形语法图表库（F2），我们设计师在 Ant Design “准确、有效、清晰、美”的数据可视化原则的基础之上，融入移动端的特性，拓展出专门为移动端数据可视化而生的设计指引。
# 移动端特性
在移动端运用数据可视化之前应该清晰移动端的特性，主要有以下几方面：
> 1. 用户碎片化时间、浏览行为多于深入交互行为；
> 2. 多试用于触摸界面，和手势化的简单交互操作；
> 3. 硬件界面多样性；
> 4. 界面相对较小，内容信息呈纵向和多线性；
> 5. 用户操作时环境条件多样；
> 6. 网络电量相对不稳定，要求具有性能高及特殊状况下的良好体验。
# 设计建议
基于以上移动端的特性，结合 AntV 可视化设计原则，建议在产品中进行数据可视化设计时，遵循以下几点建议：
## 1、信息轻量聚焦
**聚焦当前场景用户任务，避免不必要的视觉元素干扰**。移动端可视化信息传递需要更加聚焦用户在场景中的任务和具体的信息，最大程度刨除图表展示中的无用或相对次要的信息及图形元素，**减少信息维度交叉的复杂性和视觉干扰**，巧妙采用流程、排版、动效的方式将信息拆解。
| PC | 移动端 |
| --- | --- |
| 
| 
|
| |
## 2、手势操作自然
移动端的硬件特质以及发展趋势，要求可视化的操作更符合人的自然行为反应，使交互操作更自然。手势方式的选择上应该源于生活经验，易于理解，学习成本低，用户无操作压力。
区别于游戏和其他沉浸式应用中的手势选择，在可视化场景中，**应该尽量避免高学习成本的手势，同时需要注意保持页面间交互的一致性**。以下为 AntV 的设计师推荐使用的最常用的标准手势：
在 “信息轻量聚焦” 中我们提到移动端的可视化设计多聚焦于用户的直接任务，用[可视化交互](/zh/specification/language/interact/) 一文中提及的任务层次来分析，移动端交互设计上会更聚焦在数据获取层，对复杂程度较高的交互行为要进行适度的克制。下图是 AntV 设计总结的常用手势表，给大家做参考。
| **动作** | **目的** | **操作** | **示例** |
| --- | --- | --- | --- |
| 浏览 | 寻找感兴趣的数据 | Touch and hold  |  |
| 选中 | 对单个数据点感兴趣 | Tap  |  |
| 过滤 | 聚焦重点信息 | Touch and hold  |  |
| 缩放 | 探索、识别数据 | Pinch  |  |
| 平移 | 探索更大的数据空间 | Swipe  |  |
## 3、功能组件完善易用
由于硬件显示屏的限制，传统 PC 上的图表在展示上并不能很好的在移动端上做适应，因此对于某些功能组件，需要针对移动端做更具针对性的设计（以下拿 tooltip 为例）。由于硬件显示屏的限制，传统 PC 上的图表在展示上并不能很好的在移动端上做适应，因此对于某些功能组件，需要针对移动端做更具针对性的设计（以下拿 tooltip 为例）。
| 名称 | 改造前（传统 PC） | 改造后 |
| --- | --- | --- |
| |  |  |
| | 传统的 tooltip 的展示方式在移动端上展示时，浪费了更多的信息空间，并遮挡了有效信息。 | 有效利用屏幕的空间并尝试结合图例展示详细信息。 |
移动端可视化图表往往承载于卡片等“容器”的载体之上，对于图表本身而言也许并不需要复杂的栅格系统，但同样需要找到图表结构的动态空间秩序，达到无论硬件或“容器”如何变化，都有可遵循的『秩序之美』。
在移动端的可视化体系中，建议从三个方面出发：
- 容器尺寸；
- 布局及适配；
- 阅读模式切换。
### 4-1、容器尺寸
移动端的界面尺寸非常多样，为了保证在浏览状态下图表各信息显示的完整性，并在主流尺寸下显示更多信息内容，AntV 移动端的容器尺寸（下面会给出定义）建议用 4：3 比例进行设计。
### 4-2、布局及适配
虽然 AntV 的图表组件在各个组块的配置上给出了足够的灵活性，但由于移动端的硬件的多变性，设计师更应该带着适配的概念，判断哪些模块应该是确定，哪些模块应该动态适应硬件的变化，具体的模块定义如下图。
### 4-3、阅读模式切换
由于用户的某些细节阅读和深度分析的需要，需要对图表的展示形态做变化，使得用户更容易看到细节，或有利于用户的进一步的操作。主要包括：
#### 场景切换和纵向的适配
在不同页面中相同图表可能承载的用户诉求类型不相同，需要通过不同场景的切换和变化，来更好的满足并达到较好的用户体验。
| | 在多图表的长页面中，多为浏览型的诉求，设计上更简明更快速做为主要体验目标。 | 对某一图表做进一步操作（详情、下钻等）时，可以通过切换场景或扩大面积方式，沉入式操作。 |
| --- | --- | --- |
| **场景切换** |  |  |
| **纵向拉伸** |  |  |
#### 阅读模式的切换
在时间跨度比较大的时序数据图表中，纵向屏展示时很多数据细节会因清晰表达的原因隐藏掉，可以利用移动硬件的横竖屏的转换，横屏条件下展示更多信息。
| 纵向 | 横向 |
| --- | --- |
|  |  |
## 总结
本文基于移动端硬件及用户习惯的特性，对数据可视化图表的展示从信息整理、交互手势、功能模块改造、适配布局等四个角度，给出了一些在移动端可视化设计中的建议和指引，文中使用的案例均基于我们在 AntV F2 组件库中的实践，但指引并非是局限性的规则，目的是希望让每一个设计师能够转变思维，根据自身实际的设计场景，给出最优秀的移动端可视化设计方案。
最后，移动端可视化在现阶段已远远不只是承载于手机、平板设备上，试想，随着人们在智能数据化、IoT 、及穿戴式、虚拟屏设备上的不断探索，移动端可视化的设计将会有更多的趣味和可能性，也希望在未来和大家一起来探索。
| 名称 | 改造前（传统 PC） | 改造后 |
| --- | --- | --- |
| |  |  |
| | 传统的 tooltip 的展示方式在移动端上展示时，浪费了更多的信息空间，并遮挡了有效信息。 | 有效利用屏幕的空间并尝试结合图例展示详细信息。 |
#### 时间轴 TimeBar
- Canonical page: https://antv.antgroup.com/zh/specification/module/timeBar/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/module/timeBar.md
- Description: 时间轴 TimeBar
---
title: "时间轴 TimeBar"
description: "时间轴 TimeBar"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/module/timeBar/"
---
## 定义
时间轴组件基于普通缩略轴演变而来，它是有效展示动态时序数据、分析图数据的组件。该组件可以让用户快速、直观地观察事件序列以及它们之间的联系。用户可以播放时间来发现异常和探寻模式，推动调查并揭示数据中隐藏的故事。
##
## 何时使用
如果需要观察一定时间内图数据的演变情况，分析变化趋势时，建议开启时间轴组件。例：在金融风控领域，保险公司和金融机构的反欺诈人员通过图可视化分析三个月内的案件情况，时间轴组件可以帮助快速分析可疑人脉、财务转账关系，定位嫌疑人。
## 常见类型
### 趋势图时间轴
该时间轴包括但不限于折线图、面积图、柱状图中的一种或多种组合用来表示某种数据属性趋势的时间轴组件，查看演示 Demo
### 简版时间轴
相对于趋势图时间轴而言，去掉了表示数据趋势的图表，使用更为简洁的线条来表示时间范围，查看演示 Demo
### 时间刻度时间轴
指表示时间刻度的时间轴组件，查看演示 Demo
## 构成元素
时间轴组件主体分为三部分，2、3 部分需同时出现或隐藏。
1. 缩略轴：可配置成趋势图时间轴、简版时间轴、时间刻度时间轴；
1. 播放器：播放时间动画，可配置是否显示；
1. 时间配置：可配置播放速度、是否只看单一时间点；
## 出现位置
时间轴作为辅助组件，建议放在图形区下方。
## 交互说明
### 缩略轴
支持拖拽、点击、平移改变时间范围。
简版时间轴、时间刻度时间轴交互操作同上。鼠标滚轮滚动时，左右平移已选定区间，暂不支持触控版操作。
轴上数值文本内置自动躲避规则。
### 播放器
播放器主要包括三部分，其中播放、暂停按钮动作及状态相互切换。
播放方式，分两种：
- **累计时间段数据**：开始时间不变，结束时间持续增加，适合查看从一个时间点开始，持续观察累计变化趋势；
- **区间时间段数据**：开始到结束时间的区间段固定不变，播放时该时间段水平移动，适合查看固定时间段内的数据变化趋势；
### 时间配置
时间配置主要包括两部分，单一时间开关、播放速度设置。
- 单一时间开关，默认不开启
- 播放速度设置，默认配速为最慢速 1，最大速为 5。支持滚轮（触控板）滑动切换配速，每次增减值为 1。
#### 资源下载
- Canonical page: https://antv.antgroup.com/zh/specification/resources/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/resources.md
- Description: 资源下载
---
title: "资源下载"
description: "资源下载"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/resources/"
---
这里提供 AntV 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
#### 标注 Annotation
- Canonical page: https://antv.antgroup.com/zh/specification/module/annotation/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/module/annotation.md
- Description: 标注 Annotation
---
title: "标注 Annotation"
description: "标注 Annotation"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/module/annotation/"
---
## 定义
“辅助标记”指为帮助浏览者阅读图表更易理解图表信息，而添加的对图表整体或者部分元素的注解信息。
## 何时使用
辅助标记在以下两种场景可帮助用户理解图表：
1. 对于无分析经验或时间较少的用户，直接获取有用的信息。例：有分析经验的用户手动标注异常或重要的数据
1. 对于通过可视分析获取洞见的用户，提升分析效率。例：系统智能高亮波动并分析原因
## 常见类型
单一数据注解
区间数据注解：对某一区间范围（时间、数据、对象等）做注解
数据对比注解：统计指标、值域区间、辅助区间
多数据指定区域注解
多数据批量注解
## 构成元素
辅助标记的可选元素包括：文本，拉线，数据点，区间，辅助线，标记点
用户可针对不同的标记内容，选取不同的元素
注意：当无法避免与其他组件碰撞时，保持注解内容位于其他**组件最上层**
### 文本
**设计建议**
1. 在空间的允许下，尽可能显示文本，直观表达标注内容。如果不显示文本需显示 icon，用户可通过点击查看
1. 当文本内容宽度大于等于图表宽度 1/2 时，**隐藏文本显示文本 icon**
1. 文本内容较多时，需设定最大宽度（例：10 个字符），超出显示「...」，用户可通过 hover 查看全部
### 拉线
**设计建议**
1. 通常建议加上拉线来加强标注与图表的关联
1. 默认方向**与值域趋势方向一致**，方向视空间而定。建议:上 > 下 > 延长 > 折角 > 隐藏
### 数据点
**设计建议**
1. 在单一数据注解或多数据统一注解的场景，建议加上数据点，以突出标注的数据
1. 样式上建议区分已标注与未标注
### 区间
**设计建议**
1. 对某一区域/范围做批注时，建议显示区间。区间底色需与图形样式做区分
1. 区间的使用不宜重叠，且区间面积不宜过多，避免干扰用户阅读图表信息
### 辅助线
**设计建议**
1. 辅助线的样式需与图表样式做区分，且辅助线的数目不宜过多
1. 辅助线需配合文本表达含义
### 标记点
**设计建议**
1. 在对多数据做批量批注时，建议在文本附近显示标记点作为提示
#### 信息组件 Info Component
- Canonical page: https://antv.antgroup.com/zh/specification/module/info/
- Markdown source: https://antv.antgroup.com/markdown/zh/specification/module/info.md
- Description: 信息组件 Info Component
---
title: "信息组件 Info Component"
description: "信息组件 Info Component"
language: "zh"
canonical: "https://antv.antgroup.com/zh/specification/module/info/"
---
# 定义
信息组件（Info Component）是图形与数据映射关系实体的统称，我们常见的图例 Legend、提示信息 Tooltip 等都是信息组件的一种实体。信息组件可对图表中的数据进行转译，帮助阅读者更高效的理解图背后的数据。
# 为什么要有信息组件
信息组件是连接“数据层-表现层-洞察层”的桥梁，制作者将数据加工后通过信息组件进行视觉映射，阅读者通过信息组件与可视化作品进行交互。这两层转化需要灵活多变的组件来进行承载。
过去，我们设计图表的思路是特图特做，比如设计 PC 端折线图鼠标 hover 时，折线上方显示悬浮提示 Tooltip 组件。在移动端，因为没有鼠标 hover 操作，需将原来悬浮出现的 Tooltip 提示信息转化为更直观的组件，比如指标卡 Index Card 平铺显示。 
# 构成
考虑到实际业务应用场景，以下罗列了较为重型的可视分析页面中图表的卡片元素。如下图，一个具有阅读端一定分析和操作能力的图表，可分为 8 个模块：
- Title 标题 必选
- Toolbar 卡片操作栏 必选
- SwitchButton 快捷切换：时间范围切换。antd 组件
- Filter 时间筛选、文本筛选、数值筛选 Filters antd 组件
- SwitchButton 时间粒度切换、聚合粒度切换 antd 组件
- DropdownPanel 分析维度：分类维度、聚合指标、衍生指标 antd 组件
- Legend 图例：颜色图例、样式图例、指标型图例
- Element 图表图形必选
## 信息优先级
卡片尺寸不是固定的，卡片内容需要根据尺寸进行响应式调整，整体遵循下图响应规则，越 Low 的越可以优先进行裁剪或者省略，越 Constant 越需要强制显示，不可进行裁剪隐藏。 
#### Visual
- Canonical page: https://antv.antgroup.com/en/specification/language/basic/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/language/basic.md
- Description: Visual
---
title: "Visual"
description: "Visual"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/language/basic/"
---
#### Title and annotation
- Canonical page: https://antv.antgroup.com/en/specification/module/titleNote/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/module/titleNote.md
- Description: Title and annotation
---
title: "Title and annotation"
description: "Title and annotation"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/module/titleNote/"
---
#### Design Values
- Canonical page: https://antv.antgroup.com/en/specification/principles/basic/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/principles/basic.md
- Description: Design Values
---
title: "Design Values"
description: "Design Values"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/principles/basic/"
---
The design values of AntV for data visualization are derived from the Ant Design design system (Ant Design) and serve as guiding principles with characteristics of data visualization. While adhering to the design values of Ant Design, it offers a further interpretation in the field of data visualization.
AntV's design language initially defined four design values: "Accuracy, Clarity, Effectiveness, and Beauty". After several years of extensive project practice in internal business and with the changes in users' demands for data analysis, new requirements have been put forward for charts.
Today, we have shifted from the "object perspective" to the "user perspective" and reexamined the AntV design values. In the past, the essence of "accuracy" and "effectiveness" for charts was to build users' "sense of trust". The essence of "clarity" and "beauty" for charts was to build users' "sense of ease". As a carrier for transmitting data information, the most important value of charts is to inspire and provide insights for users. In the past, there was a lack of "sense of meaning", and today we have added it, thus resulting in the upgrade of the values today.
## Sense of Trust
If we compare a chart to a person, its visible appearance, the behavioral feedback during interaction, and even the sounds it makes are all ways to build a sense of trust with users. The sense of trust means that when users first see a chart from a distance, they can be attracted by its reliable appearance. When presenting data, it should not distort, mislead, or omit information, but accurately and truthfully reflect the characteristic information of the data. Only in this way can users trust the data in the chart with confidence, bravely approach, explore, and understand it, and be bold enough to analyze the data.
| 🙅 Not Recommended | 👍 Recommended | |
| The overflowing labels and messy information can easily make users question whether the data is maintained and whether the chart data is real and usable. | Display the required data information step by step according to users' purposes of analyzing data. For example, for a relationship diagram, users can view the overall picture when it is zoomed out and view the details of individual data when it is zoomed in. | |
|
|
|
| 🙅 Not Recommended | 👍 Recommended | |
| The color contrast among graphics, texts, labels, and the background, as well as between graphics, is too low, resulting in a hazy chart that makes it unclear and uneasy for users to read. | Strengthen the color contrast among graphics, texts, labels, and the background and between graphics. Use an appropriate amount of ink and proper interactions to help users easily understand the data. | |
|
|
|
| 🙅 Not Recommended | 👍 Recommended | |
| The seemingly neat and error-free data chart only depicts the most basic presentation of data, and it's difficult for users to intuitively understand the reasons behind the rises and falls. | There is no analysis without comparison. Add an appropriate amount of comparable mean reference auxiliary lines and event markers to assist in trend interpretation, along with overall intelligent insights, to help users quickly understand the patterns of data. | |
|
|
|
## 设计指引
###
### 合理组织内容
**有逻辑组织页面层次**，Shneiderman 于 1996 年提出可视化信息检索的箴言 Overview First， Zoom and Filter， Then Details-on-De-mand，译为“概览第一，聚焦过滤，再按需查看详情”。它符合人类寻求信息的基本逻辑：先大体，再局部，然后聚焦兴趣点进行探索，这是一个由表及里的过程。
**合理排布内容，**人的阅读顺序为从左至右，从上而下，采用格式塔设计原理，有限组织不同方面的思路，便于分组和快速扫描。将最重要的视图、最关键的指标放在此类型页面的顶部或左上方。阅读者可以快速准确地找到他们需要查看的文字。当我们打开网页或者仪表盘的时候，第一眼会看哪里？最可能是左手边，可将关键信息放在此位置。
\*\*
\*\*内容组织 Tips
- 明确此类页面的使用者身份，以及分析目的，从而选择对应的页面类型. 划分用户。不同业务线间，关注的核心指标不同，常见的指标类型有：宏观的大盘数据，具体的业务指标。
- 针对决策者，可以选择描述型的指标结果页面；
- 针对执行者，可以选择有更多分析功能的分析、详情页面。
- 确定核心指标间的联系及优先级，合理地进行页面布局，把结论和最重要的指标放在最醒目的位置；
- 请记住，你可以将以上页面通过交互方式串联起来，讲述你的数据故事。
### 突出重点
如果系统知道那些值较高，或者超出阈值，为什么要用户去找，不高亮它们？
**多用对比：**在数据分析领域，经常会说“无对比不分析”。没有对比就没有伤害，没有对比就看不出差距。所以，多用对比，方便阅读读看出数据之间的差异。比如当前数据与目标对比、同期对比往期。
### 准确传递
保证数据的准确性、清晰度和完整性
1、使用正确的图表类型。
2、在必要的时候对数据的定义作出解释。
#### Media
- Canonical page: https://antv.antgroup.com/en/specification/language/media/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/language/media.md
- Description: Media
---
title: "Media"
description: "Media"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/language/media/"
---
#### Axis
- Canonical page: https://antv.antgroup.com/en/specification/module/axis/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/module/axis.md
- Description: Axis
---
title: "Axis"
description: "Axis"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/module/axis/"
---
#### Monitor Dashboard
- Canonical page: https://antv.antgroup.com/en/specification/graph/conDashboard/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/graph/conDashboard.md
- Description: Monitor Dashboard
---
title: "Monitor Dashboard"
description: "Monitor Dashboard"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/graph/conDashboard/"
---
## 定义
在企业级产品中，运维人员常需要监控、跟进、检测、处理多事件、多维度、多指标的实时信息。用户需要清晰、高效地查看全局概况；再明确问题，聚焦下钻分析，处理跟进问题。本文面向**多指标多维度实时数据**的监控场景，提供快速上手的设计模板。
监控模板提供了整个对于监控业务的问题发现定位-分析追溯-跟进处理的解决过程建议。监控人员首先在业务总览页，对所有业务故障的发生与处理有总体把控，再进入故障排查页面进行每段时间内的故障排查，以及下钻查看问题详情；也可以在总览后，进入自行搭建的自定义大盘页面，对相应业务数据有针对性地监控。
模板的提供不局限于单页面。设计师可以根据自己的业务场景，选取符合的区块进行拼装。
## 模板结构
模板内容涉及三个模块，以三个主页面的形式给出。也支持单页面拼合使用。
### 1.总览页
业务总览页展现关键指标数目列表、报警分布，事件列表，帮助用户快速定位到问题模块，进入故障排查。
**如何使用：**总指标卡描述了所监控业务的应用总个数、出现异常的应用数，以及自定义大盘个数，用于把控监控范围；报警分布展现各时段下异常数量，便于快速聚焦到需要关注的时间段里；事件列表提供故障处理人与处理进度等信息，方便管理者进行监管。
### 2.故障排查页
故障排查页包含秒级时间区块筛选器、故障事件列表、故障事件基本信息、故障定位细分、失败任务链路、事件列表。
**如何使用：**全局秒级时间区块筛选器对时间进行线性呈现，并将有故障的时间点高亮，有利于用户基于时间高效筛选排查问题高发区。下方左侧以列表形式罗列故障事件可供切换；右侧以总-分形式呈现事件波动概述、故障处理进度、故障定位细分、失败业务流程链路，设计师可根据业务需求选取合适的区块进行。另外，本页还可以延伸添加趋势图等其他图表类型。
### 3.自定义大盘页
自定义大盘为用户自主搭建的图表大盘页，可以包含智能决策意见列表/总指标卡、全局筛选与布局切换、自定义图表。
**如何使用：**本页平铺所有指标，呈现全量信息。顶部列表展现智能决策建议，或监控总指标概览（如“齐全度”指标卡），下方工具栏包含全局筛选器、数据更新选项和图表排列方式。图表以单列的列表式或多列平铺卡片的形式切换展现。所有图表支持 y 轴缩放控制，以规避监控场景中易出现的极值问题。
点击布局切换后，可由列表式布局切换为卡片式布局。列表式布局可以让详细查看每个图表；卡片式布局则可以让用户纵览到更多的图表。用户可根据自身需求切换两种布局。
### 4.下钻查看问题详情
点击图表/文字链/热区，触发抽屉查看下钻信息和明细列表；在抽屉中下钻，可推出二级抽屉，用于呈现包含更细节信息的图表。
**如何使用：**需要对主页面上的信息进行下钻探索交互时，可使用抽屉，快速便捷。
## 设计建议
### 串联分析思路
- 分析思路遵循[通用 dashboard 设计](https://ava.antv.antgroup.com/en/docs/specification/graph/pubDashboard)。
- 明确此类页面的使用者身份，以及分析目的，从而选择对应的页面类型。不同业务线间，关注的核心指标不同，常见的指标类型有：宏观的大盘数据，具体的业务指标。
- 针对决策者（如监控业务管理者），可以选择描述型的指标结果页面；
- 针对执行者（如异常情况处理者），可以选择有更多维分析功能的分析、详情页面。
- 确定核心指标间的联系及优先级，合理地进行页面布局，把结论（如智能决策）和最重要的指标（如监控页面中的总指标卡）放在最醒目的位置；
- 设计师可以将以上页面通过交互方式串联起来，展现监控数据分析思路。
### 监控场景图表建议
在监控场景中，由于真实数据的不可控性与实时性，往往存在着数据信息过于密集难辨认，或者在某一时间点突然出现极值（数值徒增），而导致整个图表难以阅读的情况；也会出现因筛选时间过长，x 轴标签过于密集的状况。降低了数据分析的效率和准确性。故建议通过以下方式规避图表中可能出现的问题，并对需要聚焦关注的异常时刻进行突出处理。
- Y 轴缩略轴：监控场景中由于监控值的不确定性较大，容易出现个别极值/其他数个指标值域相近拥挤在一起的情况。y 轴缩略轴组件的设计可以灵活设置 y 轴范围，规避各类异常情况。
- 警告标记线：凸显警告时刻/时间段；时间下方用白底躲避与其他 x 轴数值的重叠。
- 图表上 hover 态：由于监控下可能出现较多时间点，不作处理时 x 轴的轴标签过于密集，故需要抽样显示。同时，鼠标在图表上的 hover 态显示出该时刻的时间，并用白底躲避下方数字；与警告线重合时，时间变为红色。
- 列表式图例：锚定图表中某一时刻，可以在列表式图例中轻松查看到该时刻下的排序，或切换选择指标最大值等其他排序信息；点击列表中的图例可正反选指标，进行高亮或隐藏。
#### Axis Navigator
- Canonical page: https://antv.antgroup.com/en/specification/module/axisNavigator/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/module/axisNavigator.md
- Description: Axis Navigator
---
title: "Axis Navigator"
description: "Axis Navigator"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/module/axisNavigator/"
---
#### Mobile
- Canonical page: https://antv.antgroup.com/en/specification/graph/mobile/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/graph/mobile.md
- Description: Mobile
---
title: "Mobile"
description: "Mobile"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/graph/mobile/"
---
#### TimeBar
- Canonical page: https://antv.antgroup.com/en/specification/module/timeBar/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/module/timeBar.md
- Description: TimeBar
---
title: "TimeBar"
description: "TimeBar"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/module/timeBar/"
---
#### Annotation
- Canonical page: https://antv.antgroup.com/en/specification/module/annotation/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/module/annotation.md
- Description: Annotation
---
title: "Annotation"
description: "Annotation"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/module/annotation/"
---
#### Info Component
- Canonical page: https://antv.antgroup.com/en/specification/module/info/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/module/info.md
- Description: Info Component
---
title: "Info Component"
description: "Info Component"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/module/info/"
---
#### View ToolBar
- Canonical page: https://antv.antgroup.com/en/specification/module/viewToolBar/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/module/viewToolBar.md
- Description: View ToolBar
---
title: "View ToolBar"
description: "View ToolBar"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/module/viewToolBar/"
---
#### Resources
- Canonical page: https://antv.antgroup.com/en/specification/resources/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/resources.md
- Description: Resources
---
title: "Resources"
description: "Resources"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/resources/"
---
#### Classical Literatures
- Canonical page: https://antv.antgroup.com/en/specification/reference/
- Markdown source: https://antv.antgroup.com/markdown/en/specification/reference.md
- Description: Classical Literatures
---
title: "Classical Literatures"
description: "Classical Literatures"
language: "en"
canonical: "https://antv.antgroup.com/en/specification/reference/"
---
