视觉
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 资产。以下所有色板均通过无障碍测试校验，可放心使用。
更多关于色板的信息请阅读此链接。
色板示例
分类色板
如图水果价格走势对比，使用红色代表苹果价格、蓝色代表蓝莓价格、黄色代表香蕉价格。
邻近色顺序色板
2017 年西安居民人均消费支出，通过连续的颜色变化，可以快速感知出居住方面消费占比最大，其次食品烟酒，第三是交替通信。
叠加色板
双变量映射地图，相对于单变量映射的地图，该地图形式更加新颖，十分适合用来展示两个紧密联系的变量信息。如下图所示，图中展现了美国国民人口居住密度和家庭生产总值的分布关系，纵向由浅到深的紫色映射了人口密度，横向由浅到深的蓝色映射了家庭收入水平，相交的颜色可以总体反映出人口和家庭的分布情况。可以从地图中清晰地看到，人口多且收入高的大多分布在沿海地区，人口数少且收入低的则主要分布在中部地区。
字体
为什么要定义字体
数据可视化的设计中，字体的设计很容易被忽略。我们习惯性引用系统的默认字体而忽视了数据字体的特定考量维度。身经百战后，AntV 设计小组认为一款好的数据可视化字体应当具备以下三个条件，实践表明， Roboto 字体是符合这三个条件的一款不错的数字等宽字体。
- 数字等宽，即数据可视化需要一款等宽字体，0 与 1 所占字符宽度应当一致；
- 识别度高，特殊字符 8B1IiLl0oO“’{[( 2zZ 具备良好的区分度；
- 混排美观，中英文+数字混排时，字体的 X -hieght 高度和谐；
等宽字体示例
等宽字体（monospaced font）是指字符宽度相同的电脑字体。与此相对，字符宽度不尽相同的电脑字体称为比例字体（proportional font）。在金融、财会领域，建议使用等宽字体且数值默认右对齐，它方便通过数值的长短来比对大小，提高读数效率，而使用非等宽字体会带来歧义。
定义系统字体
引入外部扩展字体会增加数据包的容量，影响加载性能。如非必要，勿须引入。另外，在字体申明的列表中，建议遵循 fallback 机制对字体顺序进行编排。如下示意：
font-family: “Roboto","Helvetica Neue", 'Segoe UI', Tahoma,Verdana, -apple-system, BlinkMacSystemFont ,sans-serif;
font-variant-numeric:tabular-nums，