chore: add design principles for components

examples/general/axis/design.zh.md

@@ -4,17 +4,17 @@ title: 设计规范
 
 ## 定义
 
-轴是用来定义一个坐标系的一组直线或一组曲线。
+二维空间里统计图表中的轴，是用来定义坐标系中数据在方向和值的映射关系的图表组件。
 
 ## 何时使用
 
-目的是显示数据中的尺寸。常在：折线图、面积图，条形图、柱形图、散点图等图表中使用
+在二维笛卡尔坐标系中，轴通常为水平方向的横轴（x 轴）和竖直方向的纵轴（y 轴）。极坐标系中，轴分为切向的切向轴（angle）和径向轴（radius）。
 
 ## 元素
 
-轴的常见元素包括：轴线、刻度线、轴上的网格线、文字标签和文字标题
+轴的元素包括：轴线、轴刻度线、轴标签和轴标题和坐标网格线。
 
-<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Dbb_TqO0WdwAAAAAAAAAAABkARQnAQ' width='800>
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Dbb_TqO0WdwAAAAAAAAAAABkARQnAQ' width='800'>
 
 ## 轴类型
 

examples/general/label/design.zh.md

@@ -2,4 +2,34 @@
 title: 设计规范
 ---
 
-设计规范
+## 定义
+
+在图表中，标签是对当前的一组数据进行的内容标注。
+
+## 元素
+
+包括数据点、拉线、文本数值等元素，根据不同的图表类型选择使用。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*zBZ7SpiXpvMAAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 显示策略
+
+通常标签显示在图形外，但在「堆叠类」图表中，标签会显示在图形内。如下图：
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*gKp9S4i6oQ4AAAAAAAAAAABkARQnAQ' width='500'>
+
+标签的文本和图形经常需要交叠展示，所以可读性需要足够良好，所以通过对HS值的判断，决定文字的颜色。这样对比度就在可控范围内，不会出现可读性的问题。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*kUOSQ5x9xWUAAAAAAAAAAABkARQnAQ' width='400'>
+
+## 常见问题
+
+### 问题1：图表标签重叠时怎么办？
+
+标签重叠时，g2plot 的默认方案为动态计算的抽样显示，在标签重叠时，自动隐藏其中一个，同时当 Hover 图表时，显示被隐藏的对应的数据。这样保证了图表的清晰度，也保证了信息的完整性。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*avVtSr0ZlugAAAAAAAAAAABkARQnAQ' width='500'>
+
+### 问题2：我可以自定义标签吗？
+
+可以，通过配置项你可以修改标签的样式，包括点的形状、文字大小等，但我们还是建议您使用默认方案。

examples/general/legend/design.zh.md

@@ -2,4 +2,43 @@
 title: 设计规范
 ---
 
-设计规范
+## 定义
+
+图例解释了图表区域中包含的所有视觉元素的含义。
+
+## 何时使用
+
+对图表中的图形进行解释说明，用来映射图形的尺寸、颜色、数值大小等含义，帮助用户直观地理解图表。
+
+## 元素
+
+由映射图形形状 + 文本组成。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Owf5Rr8Llz0AAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 类型
+
+根据数据类型不同，分为**连续型图例**和**分类型图例**。
+
+根据状态不同，图例可以被设置为**静态**或**可交互态**。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*kA9vS6rL5xIAAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 常见问题
+
+### 问题1：如何决定图例的位置？
+
+图例是对图形本身的概括。通常人的视觉动线是从上至下，从左到右。默认把图例放在左上角去做一个通用的方案看起来没毛病。
+但更好的做法是：**缩短用户对照图例看图形的本能路径，提升信息获取效率**。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*UKS2TbpxxYgAAAAAAAAAAABkARQnAQ' width='1000'>
+
+虽然图例的位置从技术上支持了12个位置，我们总结了图例在不同的图表类型中不同的位置后，经过克制收敛为两类，并应用在 plot 图表类库中，以及智能生成图表工具中。
+
+**设计者和观看者甚至并不会感知到位置的变化，但是对应图形获取信息的效率就在不经意间提升了。**
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*l-KKRYWtmrIAAAAAAAAAAABkARQnAQ' width='600'>
+
+### 问题2：图例太多怎么办？
+
+在 g2plot 中，图例如果占据了图表大部分的位置，你可以发现我们提供了翻页功能。

examples/general/title-description/design.zh.md

@@ -2,4 +2,30 @@
 title: 设计规范
 ---
 
-设计规范
+## 定义
+
+标题是对图表的主题进行阐述的一段话。
+
+注释是表明数据来源，让图表看起来来源清晰、可靠。
+
+## 何时使用
+
+让阅读者直观地阅读当前图表的主题，了解当前内容的来源。
+
+## 内容和位置
+
+**标题内容**：言简意赅，尽量避免被截断；
+
+**标题位置**：正、副标题一般放置于卡片左上角，标题宽度不超过卡片宽度。
+
+**注释内容**：引用内容、数据来源等，保证正确性；
+
+**注释位置**：一般放置于卡片左下角
+
+## 常见问题
+
+### 标题过长怎么办？
+
+尽量精简标题内容，当标题过长且超过了卡片宽度时，请省略标题中间的文字，保住首尾，如“我是...标题”。
+若副标题过长时，最多折 2 行，高度不超过卡片的 30%。
+