From 441b56b3a07d64c6786c04006550cb9ba1705477 Mon Sep 17 00:00:00 2001 From: Drunksweet <2141809608@qq.com> Date: Sun, 20 Apr 2025 16:55:41 +0800 Subject: [PATCH] fix: fix docs markdown bold syntax conflicts --- docs/specification/graph/conDashboard.zh.md | 8 +++---- docs/specification/graph/map.zh.md | 4 ++-- docs/specification/graph/mobile.zh.md | 12 +++++----- docs/specification/graph/pubDashboard.zh.md | 8 +++---- docs/specification/language/basic.zh.md | 6 ++--- docs/specification/language/interact.zh.md | 9 +++++-- docs/specification/language/media.zh.md | 8 +++---- docs/specification/module/timeBar.zh.md | 4 ++-- docs/specification/module/titleNote.zh.md | 8 +++---- docs/specification/strategy/modal.zh.md | 26 ++++++++++----------- 10 files changed, 48 insertions(+), 45 deletions(-) diff --git a/docs/specification/graph/conDashboard.zh.md b/docs/specification/graph/conDashboard.zh.md index 2b4cc76af..cfd2ae485 100644 --- a/docs/specification/graph/conDashboard.zh.md +++ b/docs/specification/graph/conDashboard.zh.md @@ -21,7 +21,7 @@ order: 4 业务总览页展现关键指标数目列表、报警分布，事件列表，帮助用户快速定位到问题模块，进入故障排查。 -**如何使用：**总指标卡描述了所监控业务的应用总个数、出现异常的应用数，以及自定义大盘个数，用于把控监控范围；报警分布展现各时段下异常数量，便于快速聚焦到需要关注的时间段里；事件列表提供故障处理人与处理进度等信息，方便管理者进行监管。 +**如何使用：** 总指标卡描述了所监控业务的应用总个数、出现异常的应用数，以及自定义大盘个数，用于把控监控范围；报警分布展现各时段下异常数量，便于快速聚焦到需要关注的时间段里；事件列表提供故障处理人与处理进度等信息，方便管理者进行监管。 ![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*o8qDTrJVX_8AAAAAAAAAAAAAARQnAQ) @@ -29,7 +29,7 @@ order: 4 故障排查页包含秒级时间区块筛选器、故障事件列表、故障事件基本信息、故障定位细分、失败任务链路、事件列表。 -**如何使用：**全局秒级时间区块筛选器对时间进行线性呈现，并将有故障的时间点高亮，有利于用户基于时间高效筛选排查问题高发区。下方左侧以列表形式罗列故障事件可供切换；右侧以总-分形式呈现事件波动概述、故障处理进度、故障定位细分、失败业务流程链路，设计师可根据业务需求选取合适的区块进行。另外，本页还可以延伸添加趋势图等其他图表类型。 +**如何使用：** 全局秒级时间区块筛选器对时间进行线性呈现，并将有故障的时间点高亮，有利于用户基于时间高效筛选排查问题高发区。下方左侧以列表形式罗列故障事件可供切换；右侧以总-分形式呈现事件波动概述、故障处理进度、故障定位细分、失败业务流程链路，设计师可根据业务需求选取合适的区块进行。另外，本页还可以延伸添加趋势图等其他图表类型。 ![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*f1qgSYqWaoIAAAAAAAAAAAAAARQnAQ) @@ -37,7 +37,7 @@ order: 4 自定义大盘为用户自主搭建的图表大盘页，可以包含智能决策意见列表/总指标卡、全局筛选与布局切换、自定义图表。 -**如何使用：**本页平铺所有指标，呈现全量信息。顶部列表展现智能决策建议，或监控总指标概览（如“齐全度”指标卡），下方工具栏包含全局筛选器、数据更新选项和图表排列方式。图表以单列的列表式或多列平铺卡片的形式切换展现。所有图表支持 y 轴缩放控制，以规避监控场景中易出现的极值问题。 +**如何使用：** 本页平铺所有指标，呈现全量信息。顶部列表展现智能决策建议，或监控总指标概览（如“齐全度”指标卡），下方工具栏包含全局筛选器、数据更新选项和图表排列方式。图表以单列的列表式或多列平铺卡片的形式切换展现。所有图表支持 y 轴缩放控制，以规避监控场景中易出现的极值问题。 ![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*c2XnTKBLUzkAAAAAAAAAAAAAARQnAQ) @@ -51,7 +51,7 @@ order: 4 点击图表/文字链/热区，触发抽屉查看下钻信息和明细列表；在抽屉中下钻，可推出二级抽屉，用于呈现包含更细节信息的图表。 -**如何使用：**需要对主页面上的信息进行下钻探索交互时，可使用抽屉，快速便捷。 +**如何使用：** 需要对主页面上的信息进行下钻探索交互时，可使用抽屉，快速便捷。 ![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*WOlVRbB0BdQAAAAAAAAAAAAAARQnAQ) diff --git a/docs/specification/graph/map.zh.md b/docs/specification/graph/map.zh.md index 9a59638a1..1463080b2 100644 --- a/docs/specification/graph/map.zh.md +++ b/docs/specification/graph/map.zh.md @@ -61,14 +61,14 @@ order: 2 ### 线图层数据 -**两点连线：**点的移动形成了线，线的位置参数中需至少包含起点、终点的经纬度信息。比如发货地与收货地。 +**两点连线：** 点的移动形成了线，线的位置参数中需至少包含起点、终点的经纬度信息。比如发货地与收货地。 | 起点 | 终点 | 起点-经度 | 起点-纬度 | 终点-经度 | 终点-纬度 | 来往次数 | | ---- | ---- | ---------- | --------- | ---------- | --------- | -------- | | A1 | A2 | 116.490794 | 39.949238 | 116.490794 | 39.949238 | 280 | | ... | | | | | | | -**寻路路径：**两点之间应用寻路规则形成运动路径。数据结构上是多个连续的经纬度打点。 +**寻路路径：** 两点之间应用寻路规则形成运动路径。数据结构上是多个连续的经纬度打点。 | 经纬度 | 气温（摄氏度） | | --- | --- | diff --git a/docs/specification/graph/mobile.zh.md b/docs/specification/graph/mobile.zh.md index 584824d02..996d0ab85 100644 --- a/docs/specification/graph/mobile.zh.md +++ b/docs/specification/graph/mobile.zh.md @@ -20,20 +20,20 @@ AntV 拥有一套基于移动端的可视化图形语法图表库（F2），我 基于以上移动端的特性，结合 AntV 可视化设计原则，建议在产品中进行数据可视化设计时，遵循以下几点建议： -## **1、信息轻量聚焦** +## 1、信息轻量聚焦 -**聚焦当前场景用户任务，避免不必要的视觉元素干扰。**移动端可视化信息传递需要更加聚焦用户在场景中的任务和具体的信息，最大程度刨除图表展示中的无用或相对次要的信息及图形元素，**减少信息维度交叉的复杂性和视觉干扰**，巧妙采用流程、排版、动效的方式将信息拆解。 +**聚焦当前场景用户任务，避免不必要的视觉元素干扰**。移动端可视化信息传递需要更加聚焦用户在场景中的任务和具体的信息，最大程度刨除图表展示中的无用或相对次要的信息及图形元素，**减少信息维度交叉的复杂性和视觉干扰**，巧妙采用流程、排版、动效的方式将信息拆解。 | PC | 移动端 | | --- | --- | | | | | | -## **2、手势操作自然** +## 2、手势操作自然 移动端的硬件特质以及发展趋势，要求可视化的操作更符合人的自然行为反应，使交互操作更自然。手势方式的选择上应该源于生活经验，易于理解，学习成本低，用户无操作压力。 -区别于游戏和其他沉浸式应用中的手势选择，在可视化场景中，**应该尽量避免高学习成本的手势，同时需要注意保持页面间交互的一致性。**以下为 AntV 的设计师推荐使用的最常用的标准手势： +区别于游戏和其他沉浸式应用中的手势选择，在可视化场景中，**应该尽量避免高学习成本的手势，同时需要注意保持页面间交互的一致性**。以下为 AntV 的设计师推荐使用的最常用的标准手势： ![](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*SmlZQY1NH-8AAAAAAAAAAAAAARQnAQ) @@ -47,7 +47,7 @@ AntV 拥有一套基于移动端的可视化图形语法图表库（F2），我 | 缩放 | 探索、识别数据 | Pinch ![](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*wE0sT7UUeesAAAAAAAAAAAAAARQnAQ) | ![](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*KKKGRKluIg4AAAAAAAAAAAAAARQnAQ) | | 平移 | 探索更大的数据空间 | Swipe ![](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*ELAJS7z5iLkAAAAAAAAAAAAAARQnAQ) | ![](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*yWrQQ5aLj6UAAAAAAAAAAAAAARQnAQ) | -## 3**、功能组件完善易用** +## 3、功能组件完善易用 由于硬件显示屏的限制，传统 PC 上的图表在展示上并不能很好的在移动端上做适应，因此对于某些功能组件，需要针对移动端做更具针对性的设计（以下拿 tooltip 为例）。由于硬件显示屏的限制，传统 PC 上的图表在展示上并不能很好的在移动端上做适应，因此对于某些功能组件，需要针对移动端做更具针对性的设计（以下拿 tooltip 为例）。 @@ -82,7 +82,7 @@ AntV 拥有一套基于移动端的可视化图形语法图表库（F2），我 由于用户的某些细节阅读和深度分析的需要，需要对图表的展示形态做变化，使得用户更容易看到细节，或有利于用户的进一步的操作。主要包括： -#### **场景切换和纵向的适配** +#### 场景切换和纵向的适配 在不同页面中相同图表可能承载的用户诉求类型不相同，需要通过不同场景的切换和变化，来更好的满足并达到较好的用户体验。 diff --git a/docs/specification/graph/pubDashboard.zh.md b/docs/specification/graph/pubDashboard.zh.md index f6ae0cc85..ff6e7169a 100644 --- a/docs/specification/graph/pubDashboard.zh.md +++ b/docs/specification/graph/pubDashboard.zh.md @@ -39,11 +39,11 @@ order: 3 **有逻辑组织页面层次**，Shneiderman 于 1996 年提出可视化信息检索的箴言 Overview First， Zoom and Filter， Then Details-on-De-mand，译为“概览第一，聚焦过滤，再按需查看详情”。它符合人类寻求信息的基本逻辑：先大体，再局部，然后聚焦兴趣点进行探索，这是一个由表及里的过程。 -**合理排布内容，**人的阅读顺序为从左至右，从上而下，采用格式塔设计原理，有限组织不同方面的思路，便于分组和快速扫描。将最重要的视图、最关键的指标放在此类型页面的顶部或左上方。阅读者可以快速准确地找到他们需要查看的文字。当我们打开网页或者仪表盘的时候，第一眼会看哪里？最可能是左手边，可将关键信息放在此位置。 +**合理排布内容**，人的阅读顺序为从左至右，从上而下，采用格式塔设计原理，有限组织不同方面的思路，便于分组和快速扫描。将最重要的视图、最关键的指标放在此类型页面的顶部或左上方。阅读者可以快速准确地找到他们需要查看的文字。当我们打开网页或者仪表盘的时候，第一眼会看哪里？最可能是左手边，可将关键信息放在此位置。 -![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*skq8RayrxeYAAAAAAAAAAAAAARQnAQ)\*\* +![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*skq8RayrxeYAAAAAAAAAAAAAARQnAQ) -\*\*内容组织 Tips +内容组织 Tips - 明确此类页面的使用者身份，以及分析目的，从而选择对应的页面类型.   划分用户。不同业务线间，关注的核心指标不同，常见的指标类型有：宏观的大盘数据，具体的业务指标。 - 针对决策者，可以选择描述型的指标结果页面； @@ -57,7 +57,7 @@ order: 3 ![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*h-e0RbW-4nwAAAAAAAAAAAAAARQnAQ) -**多用对比：**在数据分析领域，经常会说“无对比不分析”。没有对比就没有伤害，没有对比就看不出差距。所以，多用对比，方便阅读读看出数据之间的差异。比如当前数据与目标对比、同期对比往期。 +**多用对比：** 在数据分析领域，经常会说“无对比不分析”。没有对比就没有伤害，没有对比就看不出差距。所以，多用对比，方便阅读读看出数据之间的差异。比如当前数据与目标对比、同期对比往期。 ![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*N5-ORpGpdUkAAAAAAAAAAAAAARQnAQ) diff --git a/docs/specification/language/basic.zh.md b/docs/specification/language/basic.zh.md index 63d30500e..50dbe0bde 100644 --- a/docs/specification/language/basic.zh.md +++ b/docs/specification/language/basic.zh.md @@ -41,9 +41,9 @@ AntV 的设计体系中，视觉设计尤为重要。本文主要包括 3 个篇 在数据可视化领域中，数据与颜色的映射是非常重要的一个环节。颜色有三个视觉通道，分别是色调（H）、饱和度（S）、明度（B），不同的视觉通道可以与不同的数据类型建议关联。 -**色调（H）：**通常使用颜色中的不同色调来描述不同的分类数据，如水果品类中苹果映射为红色、香蕉映射为黄色、梨映射为绿色，将品类与色调（H）建立了关联。 +**色调（H）：** 通常使用颜色中的不同色调来描述不同的分类数据，如水果品类中苹果映射为红色、香蕉映射为黄色、梨映射为绿色，将品类与色调（H）建立了关联。 -**饱和度（S）/明度（B）：**颜色通过明暗和饱和度的共同变化来描述有序或数值型的连续数据，比如身高由低到高或由 160cm 到 180 cm 的颜色映射为由浅到深，将连续变化与颜色的明暗饱和变化建立关联。 +**饱和度（S）/明度（B）：** 颜色通过明暗和饱和度的共同变化来描述有序或数值型的连续数据，比如身高由低到高或由 160cm 到 180 cm 的颜色映射为由浅到深，将连续变化与颜色的明暗饱和变化建立关联。 | 颜色属性 | | 关系 | 数据类型 | | | :-: | :-: | :-: | --- | --- | @@ -53,7 +53,7 @@ AntV 的设计体系中，视觉设计尤为重要。本文主要包括 3 个篇 ### 6 大色板类型 -AntV 色板以蚂蚁极客蓝为起始主色，根据不同数据类型、使用场景扩展出 6 种可视化色板类型，可完美兼容 Ant Design  UI 资产。以下所有色板均通过无障碍测试校验，可放心使用。 +AntV 色板以蚂蚁极客蓝为起始主色，根据不同数据类型、使用场景扩展出 6 种可视化色板类型，可完美兼容 Ant Design UI 资产。以下所有色板均通过无障碍测试校验，可放心使用。 ![02-AntV 品牌色@3x.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*ob0rTbJccqgAAAAAAAAAAAAAARQnAQ) diff --git a/docs/specification/language/interact.zh.md b/docs/specification/language/interact.zh.md index 71c014123..32563339c 100644 --- a/docs/specification/language/interact.zh.md +++ b/docs/specification/language/interact.zh.md @@ -11,7 +11,7 @@ Shneiderman [1] 提出了经典的可视化信息交互策略：概览、缩放 经过业务的实践和沉淀，AntV 从用户视角出发，按照用户的目标和行为对可视化交互进行梳理。我们发现用户在进行可视化数据分析时，通常会经历三个步骤，分别为「看数-分析-洞察」。 -**看数：** 主要指用户获取数据并初步可视化加工和阅读查看的行为。 **分析：** 主要指用户对数据进行调整，从更多角度进行看数的行为。 **洞察：** 主要指用户通过交互强化洞见，并对结果进行流转的行为。 +**看数：** 主要指用户获取数据并初步可v视化加工和阅读查看的行为。 **分析：** 主要指用户对数据进行调整，从更多角度进行看数的行为。 **洞察：** 主要指用户通过交互强化洞见，并对结果进行流转的行为。 基于更多的业务调研和桌面调研，我们总结出常见的 24 类可视化交互，这是我们从用户视角出发的最全归纳。 @@ -189,4 +189,9 @@ AntV 5.0 的设计价目标是让用户更有信任感、轻松感和意义感 ## 参考文献 -[1] Schneiderman B. The eyes have it: a task by data type taxonomy forinformation\visualizations[J]. Craft of Information Visualization, 1996:364-371. [2] Dix, Alan, Ellis, Geoffrey. Starting simple: adding value to static visualisation throughsimple interaction[J]. 1998. [3]李洪海，齐兵．界面设计中交互行为的分类［J］．艺术与设计：理论，2013（11）：119-121． [4]Landesberger T V, Fiebig S, Bremm S, et al. Interaction Taxonomy for Tracking of UserActions in Visual Analytics Applications[J]. 2014:653-670. [5] Gotz D, Zhou M X. Characterizing users' visual analytic activity for insightprovenance[C]// IEEE Symposium on Visual Analytics Science & Technology. 2008. [6]:Donald A.Norman.《设计心理学 1》[M]． +[1] Schneiderman B. The eyes have it: a task by data type taxonomy forinformation\visualizations[J]. Craft of Information Visualization, 1996:364-371. +[2] Dix, Alan, Ellis, Geoffrey. Starting simple: adding value to static visualisation throughsimple interaction[J]. 1998. +[3]李洪海，齐兵．界面设计中交互行为的分类［J］．艺术与设计：理论，2013（11）：119-121． +[4] Landesberger T V, Fiebig S, Bremm S, et al. Interaction Taxonomy for Tracking of UserActions in Visual Analytics Applications[J]. 2014:653-670. +[5] Gotz D, Zhou M X. Characterizing users' visual analytic activity for insightprovenance[C]// IEEE Symposium on Visual Analytics Science & Technology. 2008. +[6] Donald A.Norman.《设计心理学 1》[M]． diff --git a/docs/specification/language/media.zh.md b/docs/specification/language/media.zh.md index 4928246c5..cc574698c 100644 --- a/docs/specification/language/media.zh.md +++ b/docs/specification/language/media.zh.md @@ -21,11 +21,11 @@ order: 3 ### 信息响应原则 -- **宏观：**保证核心信息优先展示，体现数据主要特征。 +- **宏观：** 保证核心信息优先展示，体现数据主要特征。 折线图展现趋势和变化，柱形图展现排名和分布，饼图展示占比。 -- **微观：**空间有限时，体现主要信息，保留图形特征。 +- **微观：** 空间有限时，体现主要信息，保留图形特征。 所有尺寸下细节信息都能通过交互获取到。 @@ -66,9 +66,9 @@ order: 3 ### 4. 明确约束条件 -**外部约束：**包含屏幕尺寸和设备属性。前者可拆解出断点范围，后者进一步约束了交互状态。 +**外部约束：** 包含屏幕尺寸和设备属性。前者可拆解出断点范围，后者进一步约束了交互状态。 -**内部约束：**包含组件所在的大小，组件内元素个数和间距。 +**内部约束：** 包含组件所在的大小，组件内元素个数和间距。 ![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*CdDuRpbruiUAAAAAAAAAAAAAARQnAQ) diff --git a/docs/specification/module/timeBar.zh.md b/docs/specification/module/timeBar.zh.md index 52e1ae794..1f343524c 100644 --- a/docs/specification/module/timeBar.zh.md +++ b/docs/specification/module/timeBar.zh.md @@ -77,8 +77,8 @@ order: 5 播放方式，分两种： -- **累计时间段数据：**开始时间不变，结束时间持续增加，适合查看从一个时间点开始，持续观察累计变化趋势； -- **区间时间段数据：**开始到结束时间的区间段固定不变，播放时该时间段水平移动，适合查看固定时间段内的数据变化趋势； +- **累计时间段数据**：开始时间不变，结束时间持续增加，适合查看从一个时间点开始，持续观察累计变化趋势； +- **区间时间段数据**：开始到结束时间的区间段固定不变，播放时该时间段水平移动，适合查看固定时间段内的数据变化趋势； ### 时间配置 diff --git a/docs/specification/module/titleNote.zh.md b/docs/specification/module/titleNote.zh.md index 3807605dd..c2c5369d9 100644 --- a/docs/specification/module/titleNote.zh.md +++ b/docs/specification/module/titleNote.zh.md @@ -15,13 +15,13 @@ order: 0 ## 内容和位置 -**标题内容：**言简意赅，尽量避免被截断； +**标题内容**：言简意赅，尽量避免被截断； -**标题位置：**正、副标题一般放置于卡片左上角，标题宽度不超过卡片宽度。 +**标题位置**：正、副标题一般放置于卡片左上角，标题宽度不超过卡片宽度。 -**注释内容：**引用内容、数据来源等，保证正确性； +**注释内容**：引用内容、数据来源等，保证正确性； -**注释位置：**一般放置于卡片左下角 +**注释位置**：一般放置于卡片左下角 ## 常见问题 diff --git a/docs/specification/strategy/modal.zh.md b/docs/specification/strategy/modal.zh.md index 1a67a11ab..22227ace6 100644 --- a/docs/specification/strategy/modal.zh.md +++ b/docs/specification/strategy/modal.zh.md @@ -15,26 +15,26 @@ order: 0 设计师在接到可视化设计任务时，切忌马上开始画稿。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 提供图表分类导航决策树，借助它，我们可以快速定位我们可以使用的图表； +- **视觉设计：** 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)。 ![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*Ql9TT6WcvuQAAAAAAAAAAAAAARQnAQ) @@ -44,7 +44,5 @@ order: 0 ![设计价值观.jpg](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*8x7ORJcLj9YAAAAAAAAAAAAAARQnAQ) -- **测试：**找用户或者身边同事，让他们扫视你的作品，描述他们第一眼感觉，看能否匹配你的设计预期。再让他们点一点、操作一下，能否找到自己想要的数据； -- **迭代**：如果不能，建议反问用户、反问自己问题出在哪里，并开始新一轮的迭代优化。 - -#### +- **测试：** 找用户或者身边同事，让他们扫视你的作品，描述他们第一眼感觉，看能否匹配你的设计预期。再让他们点一点、操作一下，能否找到自己想要的数据； +- **迭代：** 如果不能，建议反问用户、反问自己问题出在哪里，并开始新一轮的迭代优化。