设计原则

AntV 的设计原则是基于 Ant Design 设计体系衍生的，具有数据可视化特性的指导原则。它在遵循 Ant Design 设计价值观的同时，对数据可视化领域的进一步解读，如色板、字体的指引。

AntV 经过大量的项目实战经验，总结了四条核心原则：准确、清晰、有效、美，这四条原则按重要等级先后排序，相辅相成且呈递进关系。

准确

可视表达时不歪曲，不误导，不遗漏，精准如实反应数据的特征信息。例：某基金收益率趋势图，合理的值域区间可以反映真实的数据波动趋势。

清晰

清晰包括两个层面，结构清晰 与 内容清晰。

结构清晰：数据可视化呈现的是一幅作品，它是制作者分析思路的呈现，其布局决定阅读者的浏览顺序。清晰的平面布局以及清晰的数据纵深路径能很好的帮助阅读者获取信息。下图展示一个经典的仪表盘设计布局，上方的筛选区从顶层决定画布区呈现的数据，右侧区默认展示画布区的汇总信息，画布上激活数据点时，右侧则更新显示明细数据。

内容清晰：不让用户带着疑惑看图是我们始终不变的追求。当图上有数据日期、数据来源、数据指标需要说明时，应当在恰当的时间、合适的位置给予说明，以帮助阅读者更好地理解数据、定位问题。

有效

信息传达有重点，克制不冗余，避免信息过载，用最适量的数据-油墨比（Data-ink Ratio）表达对用户最有用的信息。

美

美是一种克制，合理利用视觉元素进行映射，运用格式塔原理对数据进行分组，既能帮助用户更快的获取信息，也能在一定程度上建立一种秩序美、规律美。

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 资产。以下所有色板均通过无障碍测试校验，可放心使用。

分类色板

分类色板用于描述分类数据，如苹果、香蕉、梨，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性，常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等。

用法示例
如图水果价格走势对比，使用红色代表苹果价格、蓝色代表蓝莓价格、黄色代表香蕉价格。

顺序色板

顺序色板，一般使用同一或邻近色相，通过明度和饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。

单色顺序色板
单一色相渐变称之为单色顺序色板，人眼可识别的色彩数量 5～7 个，为保证信息的最佳识别度，尽可能的克制使用颜色数量。

邻近色顺序色板
为拉开颜色差异，可用两个或以上个色相，通过明度或饱和度渐变，颜色连续而丰富，可产生更多色彩分级，表达更多的连续数值，常用于热力图中的热度变化，通过邻近色相的差异将聚集部分突显出来

用法示例
2017 年西安居民人均消费支出，通过连续的颜色变化，可以快速感知出居住方面消费占比最大，其次食品烟酒，第三是交替通信

发散色板

对比色渐变色板，一般是两种互补色（也可以是对比色）去展现数据从一个负向值到 0 点再到正向值的连续变化区间，显示相对立的两个值的大小关系，常用于气温的冷热、海拔高低、股票涨跌等

用法示例

全国等温线图，使用发散色板表示正负值的气温变化，暖色系的橙红色容易让人联系到太阳或炽热的感受，用于高温变化，颜色越红温度越高，反之，冷色系的蓝容易让人联想到冰和寒冷的感受，用于低温变化，颜色越深温度越低

叠加色板

叠加色板，为了色尽其用的原则，将两组顺序色板通过图层叠加模式产生一组新的色板，一个颜色代表两种变量数据，常用于观察一个事物两个维度变化的相关性，如胖瘦和高矮两个维度的人数分布中，瘦且高的人群分布

用法示例
双变量映射地图，相对于单变量映射的地图，该地图形式更加新颖，十分适合用来展示两个紧密联系的变量信息。如下图所示，图中展现了美国国民人口居住密度和家庭生产总值的分布关系，纵向由浅到深的紫色映射了人口密度，横向由浅到深的蓝色映射了家庭收入水平，相交的颜色可以总体反映出人口和家庭的分布情况。可以从地图中清晰地看到，人口多且收入高的大多分布在沿海地区，人口数少且收入低的则主要分布在中部地区。

强调色板

对比突出重点或特定数据，将重点关注的数据标以高饱和度的强调色，其他普通数据标以低饱和、低明度的基本色，常用于对比重点关注事物与其他分类事物的差别，如将自家产品与竞品的对比使用

用法示例
如图某工厂历年能源消耗占比趋势对比，分别用五种不同的颜色代表五种能源，其中「天然气」为重点关注的能源类型，使用饱和度高的蓝代表「天然气」，其他能源类型着以低饱和度的分类颜色，以便关注的「天然气」能够快速被观察到，同时其他类型可作为对比参考而不会因颜色过多而产生干扰。

语义色板

色彩在可视化中的使用，不仅是数据信息传递的可视化通道，同时也是更深一层的文化故事的载体，用于表达意义或情感。重视用色习惯，遵循相关标准，色彩也不是都能寓意的，相当一部分图表色彩选择和感情因素无关，而是按照某种习惯来设定色彩，即所谓约定俗成，有的甚至形成来规范。如气象预警配色，红绿灯配色，股市的红涨绿跌等。

用法示例
某水产公司 2019 年的月盈利变化，使用红色表示盈利，绿色表示亏损。

3 大颜色主题

在默认主题的基础上，新增三大颜色主题，分别是秋日橙主题、马卡龙主题、强对比主题，这三类主题色板各有不同的使用场景。

秋日橙主题

以橙色调为主的主题色板，整体基调是秋日的丰收色，同时适应深浅模式，可按需替换默认主题。

马卡龙主题

以粉紫色调为主的主题色板，整体基调是马卡龙糖果色，同时适应深浅模式，风格活泼明快，可按需替换默认主题。

强对比主题

强对比分类主题，颜色饱和度较高，强对比度，在投屏场景等降对比场景使用。

8 条使用建议

我们发现，在提供官方色板的前提下，仍有用户并不是十分擅长在实际场景中应用色板，以下几条设计指引供使用时参考。

避免使用过多颜色

在实际应用中，经常会出现大量颜色使用的误区，建议高亮重要的数据（不超过8个），其他数据默认置灰，通过图例交互进行查看。

数据映射规则从简

同样的数据，映射规则尽量保持为一种。
例如当使用柱形的高度来映射数据时，就不需要再加上颜色的维度去映射数据了。

选择准确的色板

对应自己的数据，按照数据特性选用对的色板，下图中分类数据应选用分类色板，而不是连续色板。

解释你的颜色

当图表中出现不同颜色时，需要向读者解释颜色代表的含义。

保持颜色一致性

对于统一度量，使用同样的颜色方案，而且在整个页面（通常是仪表盘）使用时，注意保持整体颜色方案的一致性。

彩虹色环不连续

不以色环顺序来表达连续的有序型或数值型数据，因为色环顺序并非人眼自然记忆，且彩虹色变化并非均衡变化，如下图中灰阶的转化，很容易看出彩虹色并不是一个连续逐渐加深的色板，因此彩虹色环并不适合展示连续数据，容易引起误解。

顺序色板需均衡

下图右侧「不建议」图中，第 2 、第 3 个颜色很相近，难以区分，第 3 、第 4 个颜色跳跃很大，对于均衡的连续数据表达中，容易引起数据感知的误差，均衡选色可在 PhotoShop 的拾色器中使用 Lab 模式下固定色相不变，调节 L 值进行等距取色。

为视障群体设计

AntV 色板在做无障碍验证时，得出以下几点取色建议 ：

• 分类色板选取需明暗交替

虽然正常人眼中右侧分类色板通过色相可以区分差异，但在视障人士、甚至全色盲，则主要靠颜色的明暗差异来识别不同的数据类型，因此分类色板需要注意适度的明暗交替

• 离散色板尽量选取蓝黄对比

一般场景中，我们常也会使用黄绿配色，黄绿对比中，黄是暖色系，绿是冷色系，同样能给到对比感受，且打破常规的蓝红对比色，给到新颖的色彩感受，但如果你的用户中视障人士占比较多，则尽量避免绿黄配色，如图为两种色板在正常人眼和红绿色盲眼中的对比效果，黄绿配色在红绿色盲眼中就失去了色彩对比，难以区分。

交互

交互式图表

区别于传统数据报表相对静态的表现形式，交互式图表并不停留在信息展示层面。用户通过与图不断产生交互，从数据中获取更深层次的分析和信息。

常见的图表交互 PC 端有经过、点击、框选、平移，移动端有轻点、轻扫等操作，但仅仅只有这些吗？随着意识的不断深入，用户要从图上获取的信息远不是鼠标经过、点击、平移能够得到，也就是说要获取更多的信息，图表需要有更多的交互行为支持。

任务层次

Shneiderman 于 1996 年提出可视化信息检索的箴言 “Overview First, Zoom and Filter, Then Details-on-Demand”，译为“概览第一，聚焦过滤，再按需查看详情”。它符合人类寻求信息的基本逻辑：先大体，再局部，然后聚焦兴趣点进行探索，这是一个由表及里的过程。

数据获取：该层解决用户的第一个问题“是什么”，用户主要通过浏览查看来获取数据，其通用交互范式为 Overview + Detail（概览+细节），常见于传统数据报表、汇报型图表、大屏等，比如流量监控、区域销售大盘。

信息加工：该层解决用户的第二个问题“为什么”，当图上有看不懂的信息时，用户期望有人告诉他为什么会这样，或者自己查探明究竟，其通用交互范式为 Focus + Context（聚焦+关联），常见于富交互的统计报表，或海量、高维、多源的可视分析系统。

知识流转：该层解决用户的第三个问题“怎么办”，当获取洞见通用交互范式为 Annote + Guide（标记+指引），常见于可视分析系统、智能分析、智能决策系统，比如运营专员对异常点进行标记辅助管理员进行决策，智能系统对整体趋势进行解读与归因分析。

举个例子

某公司运营同学需要找出销量整体下滑的原因。在图表上，运营同学的思路是找出症结、定位问题、关联分析、验证设想、得出结论并给出指引。

交互建议

上述案例贯穿了数据可视化任务的三层次：“数据获取”、“信息加工”、“知识转换”，这三层是由浅及深、由表及里、循序渐进、互相融合的过程。

我们并不建议图表上堆砌交互动作，每一个交互都应有目的，用户的每一次操作都因有迹可循。在设计图表时建议站在高层次上关注用户界面与相关行为的整体结构，明确图表的使用场景以及用户可能面临的数据处境，让用户可以高效、有效地浏览可视化内容，使呈现给用户的信息合理并且具有意义。具体来说可以遵循以下几点：

操控感

给用户以操控感，不让其迷失在数据的海洋中。提供足够便捷的过滤筛选组件，配合鼠标悬停、点击、框选等操作，方便用户查看更多视图空间，快速定位感兴趣的数据空间，亦或根据特定变量对数据进行排序、突出、降维处理等。当我们将这些组件与交互动作进行结合，用一些习以为常的交互去操纵可视化时，用户将会很清晰、并且有信心控制好当前视图。

渐进呈现

在复杂的可视化中，必须保证用户在不同层次的信息之间能进行无缝和直观的探索。
首先给出作为分析入口的概览视图，提供“数据获取”的交互操作辅助完成任务，同时给出可以看到具体内容的细节视图，各视图间协同一致。在渐进呈现过程中，“信息加工”相关组件安排在扩展窗口中，作为一个触发机关的通道。渐进呈现对于专家用户来说是顺势而为，对中级用户来说也是福利。

构建系统，而不是单个图表

复杂的可视化场景经常会多层次、多人群、甚至人机协同。一个完备的可视化系统应该为用户提供组件来记录、组织在探索过程中获得的见解，总结传达他们的洞察，给出有效的行动指引。以便受众能根据线索还原视觉探索，串连一个有体感的可视化故事。

得益于丰富的可视化分析工具，我们可以处理复杂的可视化。比如我们可以建立多个分离图表的视觉关联让其有特征联系，再比如我们可以做筛选维度的联动，当一个区域分布的图表上选择“杭州”时，明细表、趋势表也会刷新为杭州维度，这无疑给看似“静”的图表赋予“动”的视角，让图、图与图之间活了起来，而这底层的关联正像一个系统的运转。

小结

本文尝试总结现阶段图表交互的三个任务层次：“数据获取”、“信息加工”、“知识转换”，并列举每个任务层次可能涉及的相关交互行为并给出操作建议。

在大数据时代，可视化是面临海量、高维、多源、非结构化数据的挑战。展望未来，不再局限于键鼠、手指点击等交互，甚至还有自然化（肢体、NLP 语言）、虚拟化（AR/VR/MR）等趋势。它们相应的交互模式又是如何？什么样的匹配操作能帮助用户在数据复杂度不断提高的情况下更快的得到结论从而辅助决策呢？想想都兴奋，这是一条很长的路，需要我们共同来探索。

交互索引

数据获取

动作	目的	操作	示例
浏览	寻找感兴趣的数据	Hover
		Hover 组合“Alt”键
		Touch and hold（📱移动端）
	高亮视觉联动，寻找关系	Hover
选中	对单个数据点感兴趣	Click Tap（📱移动端）
	对多个数据点或数据组感兴趣	Brush 框选
过滤	聚焦重点信息	值域漫游器区间定位
缩放	探索、识别数据	触控板 改变缩略轴区间 滚动条 Pinch（📱移动端）
平移	探索更大的数据空间	触控板 拖动缩略轴 滚动条 Swipe（📱移动端）

信息加工

动作	说明	相应操作	示例
拖拽	对数据重新加工计算	拖拽合并计算
重编码	改变数据视觉通道，让数据特征更显性化	选中-修改
重配置	切换维度以不同视角看数据	单选切换
下钻/上卷	聚焦到感兴趣的数据子空间	下钻/上卷
链接	直观的展示分析逻辑和呈现数据结果，让分析更流畅，让报表会说话	链接跳转
联动	跨视图高亮显示数据对象间的联系，可同时观察数据的不同属性	联动刷新

知识流转

交互

响应式

为什么需要响应式

数据可视化始终面对无限（海量）数据与有限屏幕空间的冲突，如何解决不同端、不同屏幕尺寸下内容的适配问题，在有限的空间内帮助用户更快地理解信息和获取洞见，是我们一直致力研究的问题。如果可视化图表缺少合适的布局方案，看似美好的设计稿，在灌入未知体量的数据或者改变尺寸时会变得惨不忍睹。

挑战

• 图表本身构成复杂；
• 数据体量不可预知；
• 设计者对显示的不足做点状修补，无法给出体系化的解决方案；
• 开发者欠缺专业的可视化知识；
• 开发者依赖底层组件能力，无法二次改造。

如何解决

信息响应原则

• 宏观：保证核心信息优先展示，体现数据主要特征。
  折线图展现趋势和变化，柱形图展现排名和分布，饼图展示占比。
• 微观: 空间有限时，体现主要信息，保留图形特征。

所有尺寸下细节信息都能通过交互获取到。

对应技术方案

数据可视化的响应式设计包括“响应式”与“自适应”

• Responsive design 响应式：缩放图表其结构和外观保持不变，能适应显示区域。
• Adaptive design 自适应：根据显示区域调整图表的结构和外观，如图表布局、信息密度、交互方式等。

设计流程

不同于传统的 UI 组件，图表的多端适配显示既要考虑报表的整体与页面其他元素/图表的响应式布局，也要考虑图表内组件之间的自适应布局。在 Ant Design 的可视化体系中，我们自研出一套适用于全量图表的布局适应规则，从整体图表、图表内原子组件梳理了适用于所有图表的布局适应体系，设计流程如下图：

1.定义经典布局

考虑到信息展现地尽量完整和美观，图表的布局规则会相对灵活和细致。同时，PC 端，移动端和大屏，不同端的交互方式也要求图表的组件做到相应的转换和适配。

作为开始，我们可以针对图表，找到最频繁显示图表的屏幕尺寸。如PC端一行放三个图表，560px的宽度，和移动端一行放一个图表，350px的宽度。本示例中还包含了极小尺寸下的迷你布局。
对三种尺寸的图表（PC、Mobile、Mini），分别定义经典布局。

2. 拆解构成

取单个经典布局，拆解为图表组件级的构成。如下图，统计图表 Chart&Plot可以拆解为 Title，Toolbar，Axis，Element，Label，InfoComponent-legend，Guideline等。之后我们将对每个图表组件、以及组件之间的关系为切入点，约束布局。

3. 确定信息优先级

4. 明确约束条件

外部约束：包含屏幕尺寸和设备属性。前者可拆解出断点范围，后者进一步约束了交互状态。
内部约束：包含组件所在的大小，组件内元素个数和间距。

5. 采取响应策略

其中，省略、换行、旋转、抽样，依赖于数据属性。转化方式依赖于设备的限制。

6. 布局适应规则

案例