@@ -53,24 +51,24 @@ AntV 5.0 的设计价目标是让用户更有信任感、轻松感和意义感
除了少思考和少操作以外，我们建议可以提供类似右键菜单的能力，让用户产生分析意图时即可所见即所得的获取分析工具，并对对象快速进行分析探索。
-### 意义感
+### 意义感
增强分析的能力，让用户更易洞察。
-用户在分析探索时，适时的画龙点睛之笔可以让洞察更直观的展现在分析者面前，一条辅助线和一块参考区间便可以快速的将机会点或者风险点清晰的暴露出来。但是如果这个时候如果用户需要填写复杂的表单才能记录自己的洞察，那么在复杂的操作间，灵感可能会稍纵即逝。
-我们建议为用户匹配更直观的交互语言，让用户抓住时机，快速沉淀洞察记录观点。如上图：用户在标注辅助线时原需要填写复杂的表单才能完成诉求，如果我们支持用直接长按坐标轴X即可添加辅助线，那么用户将获得更自由的交互体验，洞察也可被更快获取。
+用户在分析探索时，适时的画龙点睛之笔可以让洞察更直观的展现在分析者面前，一条辅助线和一块参考区间便可以快速的将机会点或者风险点清晰的暴露出来。但是如果这个时候如果用户需要填写复杂的表单才能记录自己的洞察，那么在复杂的操作间，灵感可能会稍纵即逝。我们建议为用户匹配更直观的交互语言，让用户抓住时机，快速沉淀洞察记录观点。如上图：用户在标注辅助线时原需要填写复杂的表单才能完成诉求，如果我们支持用直接长按坐标轴 X 即可添加辅助线，那么用户将获得更自由的交互体验，洞察也可被更快获取。
+
## 03 设计策略
-带着上面三个目标，我们对24种常见交互进行了设计迭代，沉淀了9+设计策略和20+设计案例，且会持续更新。
-本篇将对每个策略挑选一个案例进行简单说明。
+带着上面三个目标，我们对 24 种常见交互进行了设计迭代，沉淀了 9+设计策略和 20+设计案例，且会持续更新。本篇将对每个策略挑选一个案例进行简单说明。
+
### 信任感
#### 👀 有前馈
@@ -122,7 +120,7 @@ AntV 5.0 的设计价目标是让用户更有信任感、轻松感和意义感
-更多设计案例和设计Tips可查看： 
- 
- 
- 
- 
- 
- 
- 
-
-值得注意的是，数据可视化中，如果一个双钻流程没能拿到结果，那么我们再次探索、聚焦，直至找到满意的可视化解决方案。
-
-## 探索
-
-设计师在接到可视化设计任务时，切忌马上开始画稿。AntV 提倡从“提问题开始设计”。不断提问，扩大问题范围，进一步检测问题之下的根本原因，然后聚焦于其中一个问题的描述。
-
-- **业务背景：**业务方是谁？可视化的目的是什么？
-- **产品分析：**产品是什么？投放在哪？是否需要跨端适配？
-- **了解用户：**给谁看？年龄？知识构成？
-- **观察数据：**数据来自哪里？数据结构如何？数据极值情况如何？数据产出时效、质量如何？
-
-## 聚焦
-
-经过第一阶段的探索，第二阶段我们需要聚焦。可视化作品可以传达什么？我们用户想要在可视化上看到什么？
-
-- **用户目标：**可视化解决什么问题？用户关注哪些核心指标？在使用链路上是否需要协作？
-- **设计目标：**如何凸显用户关注的核心指标？我们期望用户看到什么？
-
-## 设计
-
-接下来，我们要开始画图了，但我们还得反问我们自己：我们应该阐述什么样的观点？用什么图表类型阐述比较合适呢？视觉设计上面需要注意什么？用户需要与可视化进行交互吗？交互上需要注意什么？
-
-- **图表类型：**数据类型（地理可视化数据、图数据、常规统计数据）、用户分析目地（看关系、看分布、看趋势、看比较、分析整体与部分关系）决定图表类型。AntV 提供图表分类导航决策树，借助它，我们可以快速定位我们可以使用的图表；
-- **视觉设计：**AntV 有一套完成的视觉设计体系，包括”布局“、”色板“、”字体“。详见[视觉设计指引](https://ava.antv.antgroup.com/en/docs/specification/language/basic)；
-- **交互设计：**屏幕空间很小？数据放不下怎么办，用户能否与数据进行交互？是否要为多端设计。详见[交互设计指引](https://ava.antv.antgroup.com/en/docs/specification/language/interact)；
-- **观点阐述：**数据反映出来的趋势或者关系分布能否总结出来？异常数据是否需要标记出来？你可能需要用到[标注组件](https://ava.antv.antgroup.com/en/docs/specification/module/annotation)。
-
-
@@ -15,7 +15,7 @@ order: 0
## 升级的原因是什么？
-本次色板升级主要有两个原因：首先是antv5.0从人的视角重新提出了三个价值观，新的价值观对可视化色板提出了更多要求。其次是5.0开放了系统灵活度，支持用户自定义主题色来生成专属的可视化色板，需要一套可被算法实现的取色逻辑。
+本次色板升级主要有两个原因：首先是 antv5.0 从人的视角重新提出了三个价值观，新的价值观对可视化色板提出了更多要求。其次是 5.0 开放了系统灵活度，支持用户自定义主题色来生成专属的可视化色板，需要一套可被算法实现的取色逻辑。
@@ -23,16 +23,15 @@ order: 0
## 现状分析
-明确了升级的原因后，让我们带着新的价值观来看看当前色板有哪些问题。
-信任感要求色彩应该避免让用户产生歧义，4.0色板中的灰色会红色分别会让用户误以为是对比数据和警告数据，从而造成用户疑惑。
+明确了升级的原因后，让我们带着新的价值观来看看当前色板有哪些问题。信任感要求色彩应该避免让用户产生歧义，4.0 色板中的灰色会红色分别会让用户误以为是对比数据和警告数据，从而造成用户疑惑。
-轻松感要求色板应该清晰容易识别，3.0色板整体与白色的对比较小，色彩运用到图形上不够清晰，图形上的文字不易阅读。
+轻松感要求色板应该清晰容易识别，3.0 色板整体与白色的对比较小，色彩运用到图形上不够清晰，图形上的文字不易阅读。
-意义感要求色彩帮助用户更好的理解数据，对于这一点，antv5.0会在官网消费侧通过色板使用指南帮助设计师正确的使用可视化色板。
+意义感要求色彩帮助用户更好的理解数据，对于这一点，antv5.0 会在官网消费侧通过色板使用指南帮助设计师正确的使用可视化色板。
@@ -40,10 +39,7 @@ order: 0
## 设计流程
-明确了升级原因和当前的问题后，我们主要会从下面三个步骤进行优化：
-第一步是确定取色逻辑：通过参考经典的配色理论来确定取色规律并得到色板初稿；
-第二步是基线检测：通过量化和测试的方式去检验色板是否满足价值观的要求；
-第三步是感性调整：在理性的推导之上加上感性的调整让色彩和谐舒；
+明确了升级原因和当前的问题后，我们主要会从下面三个步骤进行优化：第一步是确定取色逻辑：通过参考经典的配色理论来确定取色规律并得到色板初稿；第二步是基线检测：通过量化和测试的方式去检验色板是否满足价值观的要求；第三步是感性调整：在理性的推导之上加上感性的调整让色彩和谐舒；
@@ -51,11 +47,11 @@ order: 0
## Step1:确定取色逻辑
-首先进入到第一步，我们先来看一下4.0色板的取色逻辑是什么，如图所示，4.0色板在色彩的选取上有一定的逻辑，包括相邻色彩之间的明暗间隔，色彩之间的距离等，5.0会在4.0的基础上继续优化，同时对取色逻辑进行量化用于后期的拓展和算法实现。
+首先进入到第一步，我们先来看一下 4.0 色板的取色逻辑是什么，如图所示，4.0 色板在色彩的选取上有一定的逻辑，包括相邻色彩之间的明暗间隔，色彩之间的距离等，5.0 会在 4.0 的基础上继续优化，同时对取色逻辑进行量化用于后期的拓展和算法实现。
-为了得到一套可被量化同时又具有色彩搭配美感的取色方式，我们参考了经典的配色理论，包括「邻近取色」「对比取色」「分裂互补取色」从支付宝的品牌色出发依次使用三种配色方式得到三组色板。其中邻近取色沿着一个方向，按照相同的夹角取色，其优点是色彩具有很强的规律感和和谐度，缺点是整体区分度比较低。对比取色是相邻两个色彩是一组成180度的对比色，其优点是色板具有很强的区分度，缺点是相邻两色会误以为是一组对比数据，分裂互补取色是三个一组取色，前两个颜色是一组邻近色，第三个颜色是前两个颜色共同的对比色，这种取色方式兼顾了邻近色的和谐同时又有较高的区分度，没有明显的劣势。**因此5.0确定以分裂互补取色方式作为取色逻辑。**
+为了得到一套可被量化同时又具有色彩搭配美感的取色方式，我们参考了经典的配色理论，包括「邻近取色」「对比取色」「分裂互补取色」从支付宝的品牌色出发依次使用三种配色方式得到三组色板。其中邻近取色沿着一个方向，按照相同的夹角取色，其优点是色彩具有很强的规律感和和谐度，缺点是整体区分度比较低。对比取色是相邻两个色彩是一组成 180 度的对比色，其优点是色板具有很强的区分度，缺点是相邻两色会误以为是一组对比数据，分裂互补取色是三个一组取色，前两个颜色是一组邻近色，第三个颜色是前两个颜色共同的对比色，这种取色方式兼顾了邻近色的和谐同时又有较高的区分度，没有明显的劣势。**因此 5.0 确定以分裂互补取色方式作为取色逻辑。**
@@ -63,7 +59,7 @@ order: 0
## Step2:基线矫正
-根据取色方式得到色板初稿后，还需要通过4个基线矫正来让色彩满足价值观的要求。
+根据取色方式得到色板初稿后，还需要通过 4 个基线矫正来让色彩满足价值观的要求。
### 色彩不存在歧义
@@ -73,13 +69,13 @@ order: 0
### 色彩足够清晰
-无论作为元素还是容器，色彩与其相交的内容的对比度都应满足W3C可访问标准。
+无论作为元素还是容器，色彩与其相交的内容的对比度都应满足 W3C 可访问标准。
### 色彩间有区分
-色彩之间具有足够的区分度，通过在Lab模型下计算色彩之间的欧几里得距离来量化区分度，并确保该值大于可区分阈值。
+色彩之间具有足够的区分度，通过在 Lab 模型下计算色彩之间的欧几里得距离来量化区分度，并确保该值大于可区分阈值。
diff --git a/package.json b/package.json
index dc7575678..0c01c2516 100644
--- a/package.json
+++ b/package.json
@@ -50,8 +50,8 @@
"license": "MIT",
"scripts": {
"start": "npm run develop",
- "build": "NODE_OPTIONS=--max-old-space-size=4096 dumi build",
- "develop": "NODE_OPTIONS=--max-old-space-size=4096 dumi dev",
+ "build": "dumi build",
+ "dev": "dumi dev",
"deploy": " npm run build && npm run gh-pages",
"gh-pages": "gh-pages -d dist",
"copy-mirror-action": "mkdir -p public/.github/workflows && cp .github/workflows/mirror.yml public/.github/workflows",
diff --git a/site/components/Banner/Banner.module.less b/site/components/Banner/Banner.module.less
index 01c8a682a..5afcb53d3 100644
--- a/site/components/Banner/Banner.module.less
+++ b/site/components/Banner/Banner.module.less
@@ -23,7 +23,7 @@
background-repeat: no-repeat;
background-size: contain;
- >img {
+ > img {
position: absolute;
}
}
@@ -130,13 +130,13 @@
margin-top: 138px;
font-family: AlibabaPuHuiTiRHeavy;
- >span {
- color: #691EFF;
+ > span {
+ color: #691eff;
}
}
.subTitle {
- color: #424E66;
+ color: #424e66;
text-align: center;
font-size: 18px;
margin-top: 8px;
@@ -157,8 +157,8 @@
top: 350px;
width: 100%;
- >div,
- >a {
+ > div,
+ > a {
&:extend(.commonFlexConfig);
height: 54px;
width: 166px;
@@ -169,28 +169,26 @@
box-shadow: 0 8px 28px 0 #f2f2f2;
margin: 0 11.5px;
- >img {
+ > img {
margin-right: 6px;
}
}
.start {
font-size: 18px;
- background-color: #691EFF;
- color: #FFFFFF;
+ background-color: #691eff;
+ color: #ffffff;
.startIcon {
width: 20px;
height: 20px;
margin-right: 6px;
- background-image:
- url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lo_5RYdqKLsAAAAAAAAAAAAADmJ7AQ/original),
+ background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lo_5RYdqKLsAAAAAAAAAAAAADmJ7AQ/original),
url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*UcuoSovQjxAAAAAAAAAAAAAADmJ7AQ/original),
url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3VvbT7spBhIAAAAAAAAAAAAADmJ7AQ/original),
url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PI67SoRSfgsAAAAAAAAAAAAADmJ7AQ/original),
url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sP-zRZweTJcAAAAAAAAAAAAADmJ7AQ/original),
- url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SFfnTachgWgAAAAAAAAAAAAADmJ7AQ/original),
- ;
+ url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SFfnTachgWgAAAAAAAAAAAAADmJ7AQ/original);
background-repeat: no-repeat;
background-position-y: 0, 20px, 40px, 60px, 80px, 100px;
}
@@ -206,11 +204,11 @@
.design {
font-size: 18px;
- background-color: #FFFFFF;
- border: 1px solid #E8E8E8;
+ background-color: #ffffff;
+ border: 1px solid #e8e8e8;
&:hover {
- color: #691EFF;
+ color: #691eff;
}
}
}
@@ -229,9 +227,9 @@
width: calc((100vw - 360px - 26px) / 3);
min-width: 338px;
max-width: 551px;
- background-color: #FFFFFF;
- border: 1px solid #E5E8EF;
- transition: all .2s;
+ background-color: #ffffff;
+ border: 1px solid #e5e8ef;
+ transition: all 0.2s;
padding: 16px;
box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
border-radius: 16px;
@@ -241,12 +239,12 @@
.messageTitle {
font-weight: 500;
font-size: 18px;
- color: #1D2129;
+ color: #1d2129;
margin-bottom: 8px;
text-align: center;
position: relative;
- >img {
+ > img {
width: 24px;
height: 24px;
position: relative;
@@ -256,13 +254,13 @@
.messageSubTitle {
font-size: 14px;
- color: #86909C;
+ color: #86909c;
text-align: center;
}
&:hover {
transform: translateY(-8px);
- box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.10);
+ box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
.messageTitle {
color: rgba(105, 30, 255, 1);
@@ -300,4 +298,4 @@
100% {
background-position-y: -100px, -80px, -60px, -40px, -20px, 0px;
}
-}
\ No newline at end of file
+}
diff --git a/site/components/Banner/Banner.tsx b/site/components/Banner/Banner.tsx
index e094cc60d..98e471321 100644
--- a/site/components/Banner/Banner.tsx
+++ b/site/components/Banner/Banner.tsx
@@ -1,4 +1,4 @@
-import { useLocale, useIntl } from 'dumi';
+import { useIntl, useLocale } from 'dumi';
import React, { useEffect, useState } from 'react';
import { ActiveIcon } from '../common';
import { ANCHORNAME } from '../ProjectCard';
@@ -11,10 +11,10 @@ export default () => {
const language: 'zh' | 'en' = locale.id.includes('zh') ? 'zh' : 'en';
- const intl = useIntl()
+ const intl = useIntl();
const useT = (transformedMessage: string) => {
return intl.formatMessage({
- id: transformedMessage
+ id: transformedMessage,
});
};
@@ -29,48 +29,80 @@ export default () => {
// 跳转到 丰富图表，选用自如
const scrollToAnchor = () => {
const anchorElement = document.getElementById(ANCHORNAME);
- if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
- }
+ if (anchorElement) {
+ anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' });
+ }
+ };
return (
- 
+ 
- 
+ 
- 
+ 
+ 
{useT("规范下载")}
+
{text}
-
- - +
有了信息组件，我们可以不必为 PC 端指定一种组件悬浮提示 Tooltip，为移动端指定一种组件指标卡 Index Card。信息组件可识别不同端，不同的设备，甚至不同的尺寸，在信息不丢失的情况下做组件形态的转变。 # 信息组件构成 -信息组件由三类元素组合构成，它们分别是 -**视觉标记 Visual Mark** 、 -**文本标签 Label** 、 -**数值标签 Value** 。 +信息组件由三类元素组合构成，它们分别是 **视觉标记 Visual Mark** 、 **文本标签 Label** 、 **数值标签 Value** 。 -## 视觉标记 +## 视觉标记 视觉标记是视觉通道映射的载体，常见的为颜色、形状等，具体详见 [视觉篇](../language/basic) 和 [色板篇](../language/palette)。 @@ -36,19 +32,17 @@ order: 7 | 形状 |  | | 尺寸 |  | -## 文本标签 +## 文本标签 文本标签此处特指显示数据标签名称的文本组件。样式详见 全局样式-数据标签。 -## 数值标签 +## 数值标签 文本标签此处特指显示数据数值的文本组件。样式详见全局样式-数据标签。 # 常见形态 -**视觉标记 Visual Mark** 、 -**文本标签 Label** 、 -**数值标签 Value**  可组合变换出 N 种形态，常见的形态有以下 4 种： +**视觉标记 Visual Mark** 、 **文本标签 Label** 、 **数值标签 Value**  可组合变换出 N 种形态，常见的形态有以下 4 种： 1. 标签提示(Label） 2. 图例（Legend） @@ -59,9 +53,7 @@ order: 7 # 1.标签提示 Label -在图表中，标签是对当前的一组数据进行的内容标注。在图表中常见表现为中心文本，坐标提示，图形标签，注释标记。图形标签和注释标记详见 [标签 Label](./label) 和 [标注 Annotation](./annotation)
-
- +在图表中，标签是对当前的一组数据进行的内容标注。在图表中常见表现为中心文本，坐标提示，图形标签，注释标记。图形标签和注释标记详见 [标签 Label](./label) 和 [标注 Annotation](./annotation)
 ## 中心文本 @@ -76,6 +68,7 @@ order: 7 | **元素** | **适合设备** | **出现位置** | **适合图表类型** | | --- | --- | --- | --- | | Value | PC 端、移动端均可 | 轴上，覆盖轴标签 | 散点图、气泡图等笛卡尔坐标系图表 | +
 @@ -84,7 +77,7 @@ order: 7 ## 分类图例 Categorical Legend -分类图例用于解释图表中的分类维度信息。依据视觉标记的不同，分类图例可分为颜色图例和形状图例。 +分类图例用于解释图表中的分类维度信息。依据视觉标记的不同，分类图例可分为颜色图例和形状图例。  @@ -96,9 +89,9 @@ order: 7 **布局** -图例遵循流式布局，横向和纵向排列时超出区域，可以启用翻页。 +图例遵循流式布局，横向和纵向排列时超出区域，可以启用翻页。 -**1. 图例超出时翻页** 在 G2Plot 中，图例如果占据了图表大部分的位置，你可以发现内置提供了翻页功能。 +**1. 图例超出时翻页** 在 G2Plot 中，图例如果占据了图表大部分的位置，你可以发现内置提供了翻页功能。  @@ -106,23 +99,19 @@ order: 7 图例是对图形本身的概括。通常人的视觉动线是从上至下，从左到右。默认把图例放在左上角去做一个通用的方案看起来似乎很稳妥。但这样是最优做法吗？ -更好的做法：**缩短用户对照图例看图形的本能路径，提升信息获取效率。** -
+更好的做法：**缩短用户对照图例看图形的本能路径，提升信息获取效率。**
虽然图例的位置从技术上支持了 12 个位置，我们总结了图例在不同的图表类型中不同的位置后，经过克制收敛为两类，并应用在统计图表类库 G2Plot 以及智能生成图表 AVA 中。 -设计者和观看者甚至并不会感知到位置的变化，但获取信息的效率就在不经意间提升了。 -
+设计者和观看者甚至并不会感知到位置的变化，但获取信息的效率就在不经意间提升了。
 ## 连续图例 Continuous Legend -连续图例用于提供图表中度量值的参考。 -
+连续图例用于提供图表中度量值的参考。
-依据视觉标记的不同，连续图例可分为连续颜色图例和连续尺寸图例。连续图例通常适用于静态图表，提供大致的数据映射等级参考。在交互状态下用户依照 Tooltip 或 Label 查看详细信息更为方便。 -
+依据视觉标记的不同，连续图例可分为连续颜色图例和连续尺寸图例。连续图例通常适用于静态图表，提供大致的数据映射等级参考。在交互状态下用户依照 Tooltip 或 Label 查看详细信息更为方便。
 @@ -132,8 +121,7 @@ order: 7 **示例** 敬请期待此处的地图和关系图等复杂图表图例示例 -**布局** 连续图例的布局规则与分类图例基本一致，可以位于图表上下左右的 12 个方位，也可以位于图表上方。 -
+**布局** 连续图例的布局规则与分类图例基本一致，可以位于图表上下左右的 12 个方位，也可以位于图表上方。
 @@ -151,8 +139,7 @@ order: 7  -Tooltip 的基本元素包括：视觉标记图形，文本标签，数值标记等。 Tooltip 的可选元素：所在的 UI 容器还可以和其他 UI 组件配合使用，完成过滤，下钻等自助分析功能。 -
+Tooltip 的基本元素包括：视觉标记图形，文本标签，数值标记等。 Tooltip 的可选元素：所在的 UI 容器还可以和其他 UI 组件配合使用，完成过滤，下钻等自助分析功能。
# 4.指标卡 Index Card @@ -170,11 +157,11 @@ Tooltip 的基本元素包括：视觉标记图形，文本标签，数值标记 ## 高阶图例 -### 带数值 +### 带数值 - + -### 带操作 +### 带操作  diff --git a/docs/specification/module/label.en.md b/docs/specification/module/label.en.md index ec8003fcf..fcdc0bba0 100644 --- a/docs/specification/module/label.en.md +++ b/docs/specification/module/label.en.md @@ -3,34 +3,4 @@ title: Label order: 2 --- -## 定义 - -在图表中，标签是对当前的一组数据进行的内容标注。 - -## 元素 - -包括数据点、拉线、文本数值等元素，根据不同的图表类型选择使用。 - - - -## 显示策略 - -通常标签显示在图形外，但在「堆叠类」图表中，标签会显示在图形内。如下图： - - - -标签的文本和图形经常需要交叠展示，所以可读性需要足够良好，所以通过对 HS 值的判断，决定文字的颜色。这样对比度就在可控范围内，不会出现可读性的问题。 - - - -## 常见问题 - -### 问题 1：图表标签重叠时怎么办？ - -标签重叠时，g2plot 的默认方案为动态计算的抽样显示，在标签重叠时，自动隐藏其中一个，同时当 Hover 图表时，显示被隐藏的对应的数据。这样保证了图表的清晰度，也保证了信息的完整性。 - -
-
-### 问题 2：我可以自定义标签吗？
-
-可以，通过配置项你可以修改标签的样式，包括点的形状、文字大小等，但我们还是建议您使用默认方案。
+
diff --git a/docs/specification/module/timeBar.en.md b/docs/specification/module/timeBar.en.md
index 4c27fd5e6..053fb6ba3 100644
--- a/docs/specification/module/timeBar.en.md
+++ b/docs/specification/module/timeBar.en.md
@@ -3,4 +3,4 @@ title: TimeBar
order: 5
---
-
+
diff --git a/docs/specification/module/titleNote.en.md b/docs/specification/module/titleNote.en.md
index 96d22fddc..93602213c 100644
--- a/docs/specification/module/titleNote.en.md
+++ b/docs/specification/module/titleNote.en.md
@@ -3,30 +3,4 @@ title: Title and annotation
order: 0
---
-## 定义
-
-标题是对图表的主题进行阐述的一段话。
-
-注释是表明数据来源，让图表看起来来源清晰、可靠。
-
-## 何时使用
-
-让阅读者直观地阅读当前图表的主题，了解当前内容的来源。
-
-## 内容和位置
-
-**标题内容：**言简意赅，尽量避免被截断；
-
-**标题位置：**正、副标题一般放置于卡片左上角，标题宽度不超过卡片宽度。
-
-**注释内容：**引用内容、数据来源等，保证正确性；
-
-**注释位置：**一般放置于卡片左下角
-
-## 常见问题
-
-### 1、标题过长怎么办？
-
-尽量精简标题内容，当标题过长且超过了卡片宽度时，请省略标题中间的文字，保住首尾，如“我是...标题”。
-
-若副标题过长时，最多折 2 行，高度不超过卡片的 30%。
+
diff --git a/docs/specification/module/viewToolBar.en.md b/docs/specification/module/viewToolBar.en.md
index 17ed5fdf5..7f1ee251b 100644
--- a/docs/specification/module/viewToolBar.en.md
+++ b/docs/specification/module/viewToolBar.en.md
@@ -3,90 +3,4 @@ title: View ToolBar
order: 8
---
-## 定义
-
-
-
-视图控制栏是用户与数据进行交互的载体，当用户操作视图工具栏时，可对视图可视区间缩放、平移、对数据进行检索、过滤等。
-
-## 何时使用
-
-以下两种情况，建议设计时开启视图控制栏。
-
-- 数据绘制区域超过屏幕可视区域，为方便用户能以全局视角观察数据，建议开启视图控制栏。例：地图上的视图控制栏；
-- 用户需要频繁与视图上的数据进行交互，比如放大、缩小视图空间，快速定位检索数据点等。例：公安通过关系网核查犯罪嫌疑人；
-
-## 构成元素
-
-
-
-以下每组元素都为选配项
-
-- 搜索；
-- 画布控制按钮组：+、—、百分比、Mini Map 迷你视图（可选配）；
-- 自定义组：可定制视图工具栏按钮，比如全屏、定位当前位置等操作。
-
-## 常见类型
-
-
-
-## 出现位置
-
-- z-index 层级：层级高于画布，但低于视图中的 Tooltip 提示信息组件；
-- 水平边距：距两边边距均为 8 的倍数；
-- 位置：视布局需要，八个方向均可配置。
-
-
-
-## 交互说明
-
-### 搜索
-
-- 键盘操作：输入后，enter 执行搜索操作，按键盘 esc 可退出搜索框，搜索恢复 normal 态。
-
-
-
-### 画布控制按纽组
-
-- 点击“+”，0 以上默认增幅 25%，100% 以上默认增幅 50%，建议最大值 200%；
-- 点击”—“，100%~200% 之间，默认降幅 50%，100% 以下默认降幅 25%，建议早小值 25%；
-- 百分比字体：Roboto Condensed；
-- 键盘操作：按 esc 可退出已激活的下拉框。
-
-
-
-### Mini Map
-
-- 键盘操作：按 esc 可退出已显示的 Mini Map。
-
-
-
-## 设计建议
-
-### 按钮分组显示
-
-建议视图控制栏按钮按照格式塔原理分组显示。
-
-
-
-### 遵循用户阅读习惯
-
-画布初始位置，建议符合从左至右，从上至下的阅读习惯，而不是一刀切显示视图的正中间。比如：
-
-- 思维导图建议贴左，垂直居中；
-- 关系图将起始节点居中显示；
-- DAG 流程图建议贴上，水平居中；
-
-### 效率优先
-
-建议视图增快捷操作，提升使用效率
-
-- 放大 +：Ctrl/⌘ + +
-- 缩小 -：Ctrl/⌘ + —
-- 100% 1:1 等比例显示：Ctrl/⌘ + 0
-- 适应画布显示：Ctrl/⌘ + 1
-
-### 全场景考虑
-
-- 建议补充移动端样式及交互；
-- 补充 Dark Mode 模式。
+
diff --git a/docs/specification/principles/basic.en.md b/docs/specification/principles/basic.en.md
index 94511399a..bc8cacec3 100644
--- a/docs/specification/principles/basic.en.md
+++ b/docs/specification/principles/basic.en.md
@@ -1,8 +1,87 @@
----
-title: Principles
-order: 0
-redirect_from:
- - /en/docs/specification
----
-
-
+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. | +
+ 
+ |
+ + |
+ 
+ |
+
-