docs: Update 4.0 site (#20486)

* adjust docs & logo * adjust typo * doc update * update style & trans * fix style * update doc * update translate
2025-06-07 17:44:35 +08:00 · 2019-12-28 11:57:41 +08:00 · 2019-12-28 11:57:41 +08:00 · f965d92aa8
commit f965d92aa8
parent e9b0fab156
41 changed files with 218 additions and 172 deletions
--- a/docs/spec/alignment.en-US.md
+++ b/docs/spec/alignment.en-US.md
@ -7,7 +7,7 @@ title: Alignment

 As is described in the Law of Continuity of Gestalt psychology, in the perceptual process, people usually tend to understand the object in the way that it is firstly perceived, to let the straight lines be straight and let the curve lines be curve. In the design of interface, aligning the elements meets users' perception, also delivers the information to users in a more smooth way.

-> ** Gestalt psychology or gestaltism（German：Gestalttheorie）** ：Gestalttheorie is an important genre of psychology. It rose in the beginning of the 20 century in Germany.The central principle of gestalt psychology is that the mind forms a global whole with self-organizing tendencies.『The whole is other than the sum of the parts.』--Quote from Wikipedia
+> ** Gestalt psychology or gestaltism（German：Gestalttheorie）** ：Gestalttheorie is an important genre of psychology. It rose in the beginning of the 20 century in Germany.The central principle of gestalt psychology is that the mind forms a global whole with self-organizing tendencies.「The whole is other than the sum of the parts.」--Quote from Wikipedia

 ---

--- a/docs/spec/alignment.zh-CN.md
+++ b/docs/spec/alignment.zh-CN.md
@ -5,9 +5,9 @@ order: 2
 title: 对齐
 ---

-正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
+正如「格式塔学派」中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。

-> ** 格式塔学派（德语：Gestalttheorie）** ：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』
+> ** 格式塔学派（德语：Gestalttheorie）** ：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，「整体不同于其部件的总和」。——摘自「维基百科」

 ---

--- a/docs/spec/cases.zh-CN.md
+++ b/docs/spec/cases.zh-CN.md
@ -44,7 +44,7 @@ OceanBase 是一款真正意义上的云端分布式关系型数据库，而 Oce

 ### Ant Design Pro

-Ant Design Pro 是一个企业级中后台前端/设计解决方案，秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
+Ant Design Pro 是一个企业级中后台前端/设计解决方案，秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的「用户」和「设计者」的体验。

 [立即访问](https://pro.ant.design)

--- a/docs/spec/colors.en-US.md
+++ b/docs/spec/colors.en-US.md
@ -1,5 +1,5 @@
 ---
-category: Global Style
+category: Global Styles
 order: 0
 title: Colors
 ---
--- a/docs/spec/colors.zh-CN.md
+++ b/docs/spec/colors.zh-CN.md
@ -20,7 +20,7 @@ Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模

 ## 系统级色彩体系

-Ant Design 系统级色彩体系同样源于『自然』的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。
+Ant Design 系统级色彩体系同样源于「自然」的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。

 ### 基础色板

@ -48,7 +48,7 @@ ReactDOM.render(<Palette color={{ name: 'gray' }} direction="horizontal" />, mou

 ### 数据可视化色板（敬请期待）

-数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 『有效、清晰、准确、美』的原则产生的。
+数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 「有效、清晰、准确、美」的原则产生的。

 ### 色板生成工具

--- a/docs/spec/contrast.en-US.md
+++ b/docs/spec/contrast.en-US.md
@ -46,4 +46,4 @@ Taking advantage of changing the typesetting, the typeface and the size, we high

 Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better

-The forms we usually see include 『static contrast』 and 『dynamic contrast』.
+The forms we usually see include 「static contrast」 and 「dynamic contrast」.
--- a/docs/spec/contrast.zh-CN.md
+++ b/docs/spec/contrast.zh-CN.md
@ -22,7 +22,7 @@ title: 对比

 <br>

-<img class="preview-img" align="right" alt="不区分主次的示例" description="『通过』和『驳回』都使用次按钮，系统保持中立。" src="https://gw.alipayobjects.com/zos/rmsportal/gniiMTPEHagxaelGBjAe.png">
+<img class="preview-img" align="right" alt="不区分主次的示例" description="「通过」和「驳回」都使用次按钮，系统保持中立。" src="https://gw.alipayobjects.com/zos/rmsportal/gniiMTPEHagxaelGBjAe.png">

 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。

@ -46,4 +46,4 @@ title: 对比

 通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。

-常见类型有『静态对比』、『动态对比』。
+常见类型有「静态对比」、「动态对比」。
--- a/docs/spec/copywriting.md
+++ b/docs/spec/copywriting.md
@ -28,13 +28,13 @@ title:
 ### 明确表述立足点

 <img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uBzzoUAMupDWPXFUeRIn.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EOVTgwoOsYptbkUqpMKn.png" alt="错误示范" description="侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EOVTgwoOsYptbkUqpMKn.png" alt="错误示范" description="侧重在「我们」为用户提供了什么，而不是以用户视角的关注点为中心。">

 在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。

 既然以用户为中心，文案就应该尽量以用户为主体来写作。

-> 注：当用户向后台反馈问题、提出建议或申诉时，使用『我们』是合理的语境，例如『我们将会审核你的申诉』。
+> 注：当用户向后台反馈问题、提出建议或申诉时，使用「我们」是合理的语境，例如「我们将会审核你的申诉」。

 ### 精简语句

@ -52,12 +52,12 @@ title:

 使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。

-间接、暧昧模糊的说法，生僻和过于『文雅』的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。
+间接、暧昧模糊的说法，生僻和过于「文雅」的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。

 ### 表述一致

 <img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ToMaEybHQCrcAfcYRbxF.png" alt="正确示范" description="备注描述使用相同的介词。">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/BUFFQwfvLqTLrOzaEccX.png" alt="错误示范" description="同一区块描述中出现了『受』和『被』两个不同的介词。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/BUFFQwfvLqTLrOzaEccX.png" alt="错误示范" description="同一区块描述中出现了「受」和「被」两个不同的介词。">

 <img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/AAaXSGqNUBlZChkrMbYl.png" alt="正确示范" description="在同一页面、同一区域在语序上一致。">
 <img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/DYCoXTphnpdkMMCtyMdN.png" alt="错误示范" description="语序上不一致，会影响用户理解成本。">
@ -75,7 +75,7 @@ title:

 让用户第一眼看到最重要的内容，不用到段落中寻找。

-> 注：如考虑安全性问题时，隐私信息也可调整为『点击后可见』的方式。
+> 注：如考虑安全性问题时，隐私信息也可调整为「点击后可见」的方式。

 ### 完整、直接得阐述信息

@ -86,8 +86,8 @@ title:

 <br />

-<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/dlAkFzezQEwtNnZDWpQh.png" alt="正确示范" description="相对于『失败』，『无法完成』是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qqrgyclPnhBFgPEYsBXd.png" alt="错误示范" description="对于异常情况不是冷冰冰告诉你『失败』。">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/dlAkFzezQEwtNnZDWpQh.png" alt="正确示范" description="相对于「失败」，「无法完成」是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qqrgyclPnhBFgPEYsBXd.png" alt="错误示范" description="对于异常情况不是冷冰冰告诉你「失败」。">

 报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。

@ -100,7 +100,7 @@ title:
 <img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/TFhFTbqHlEXTMOyCxIvN.png" alt="错误示范" description="专业的行业用词有别字。">

 <img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qIwLlXOyJQlAqFwWSUuo.png" alt="正确示范" description="时间信息的表述精准完整。">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HBCyJcXZYmtLECZUtjzE.png" alt="错误示范" description="时间信息的描述词不是具体的『日』、『月』，容易让用户产生困扰。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HBCyJcXZYmtLECZUtjzE.png" alt="错误示范" description="时间信息的描述词不是具体的「日」、「月」，容易让用户产生困扰。">

 <table style="font-size:12px;float:right;width:496px;margin-left:60px;margin-bottom:100px;clear:both;">
  <tr>
@ -111,12 +111,12 @@ title:
  <tr>
    <th>其他</th>
    <td>其它</td>
-    <td>『其他』的应用范围更广</td>
+    <td>「其他」的应用范围更广</td>
  </tr>
  <tr>
    <th>抱歉</th>
    <td>对不起</td>
-    <td>如果是我们系统造成的结果，可以使用『抱歉』，如果是用户自己造成的结果，不能使用。</td>
+    <td>如果是我们系统造成的结果，可以使用「抱歉」，如果是用户自己造成的结果，不能使用。</td>
  </tr>
  <tr>
    <th>验证码</th>
@ -136,7 +136,7 @@ title:
  <tr>
    <th>此</th>
    <td>该</td>
-    <td>当要表达当前事物时，『此』更加明确。</td>
+    <td>当要表达当前事物时，「此」更加明确。</td>
  </tr>
 </table>

@ -153,16 +153,16 @@ title:
 ### 拉近彼此的距离

 <img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LXVkAEabvRXwOTYkewzV.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/KxSWWhUiCPYaadFucIEr.png" alt="错误示范" description="建议不要使用『您』，太过客气，让用户感觉有些疏远。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/KxSWWhUiCPYaadFucIEr.png" alt="错误示范" description="建议不要使用「您」，太过客气，让用户感觉有些疏远。">

-直接使用『你』、『我』来和用户对话，与用户建立亲密感。避免使用『您』，让用户感觉太过疏远。
+直接使用「你」、「我」来和用户对话，与用户建立亲密感。避免使用「您」，让用户感觉太过疏远。

 <br />

 <img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mkFlHfRJxVaFpCVnhJxz.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SwzkNWboQRPncuORBPmL.png" alt="错误示范" description="同时出现了称谓『我』和『你』，用户会感到迷惑，不清楚到底指代对象是谁。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SwzkNWboQRPncuORBPmL.png" alt="错误示范" description="同时出现了称谓「我」和「你」，用户会感到迷惑，不清楚到底指代对象是谁。">

-> 注：不要在同一个句式中混用『你』和『我』，交互中指代混乱会让用户相当纠结。
+> 注：不要在同一个句式中混用「你」和「我」，交互中指代混乱会让用户相当纠结。

 ### 友好、尊重用户

@ -176,7 +176,7 @@ title:
 ### 表述不应过于极端

 <img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/zXLrYMCesvdZXdSoJEcP.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MTIsErHJIswPHVfUFQnI.png" alt="错误示范" description="『绝不』过于绝对，让用户感到不适。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MTIsErHJIswPHVfUFQnI.png" alt="错误示范" description="「绝不」过于绝对，让用户感到不适。">

 不要使用过于绝对的表述，这样会让用户觉得不适。

@ -242,7 +242,7 @@ title:

 感叹号会让文案显得过于激动，容易让气氛变得过于紧张。

-> 注：当向用户表达问候或祝贺时，使用『！』是合理的语境，例如『欢迎回到社区！』。
+> 注：当向用户表达问候或祝贺时，使用「！」是合理的语境，例如「欢迎回到社区！」。

 ### 基本标点规范

@ -276,7 +276,7 @@ title:
  <tr>
    <th>省略号</th>
    <td>…</td>
-    <td>使用半角的『…』为省略号。</td>
+    <td>使用半角的「…」为省略号。</td>
  </tr>
  <tr>
    <th>隐藏符号</th>
--- a/docs/spec/data-display.en-US.md
+++ b/docs/spec/data-display.en-US.md
@ -1,6 +1,7 @@
 ---
-category: Patterns
-order: 10
+category: Design Patterns
+type: Global Rules
+order: 99
 title: Data Display
 ---

--- a/docs/spec/data-display.zh-CN.md
+++ b/docs/spec/data-display.zh-CN.md
@ -1,6 +1,7 @@
 ---
-category: 模式
-order: 10
+category: 设计模式
+type: 全局规则
+order: 99
 title: 数据展示
 ---

@ -20,7 +21,7 @@ title: 数据展示
 > 注：
 >
 > 1. 表格中的时间、状态、操作栏需保持词语完整不过行。
-> 2. 当数据为空时，可使用『- -』来表示暂无数据。
+> 2. 当数据为空时，可使用「- -」来表示暂无数据。

 ## 折叠面板（Collapse）

@ -30,20 +31,20 @@ title: 数据展示

 这类组件在导航中大量使用，同时也适合冗长的、无规则的内容管理。

-> 注：若折叠内容彼此之间关联度较低时，可使用更为节省空间的『手风琴』模式——『手风琴』是一种特殊的折叠面板，只允许单项内容区域展开。
+> 注：若折叠内容彼此之间关联度较低时，可使用更为节省空间的「手风琴」模式——「手风琴」是一种特殊的折叠面板，只允许单项内容区域展开。

 ---

 ## 卡片（Card）

-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xtIGZmqUHAovPPKjwyVT.png" description="如页面内容加载过慢时，可采用『预加载』或『分步获取』的方式来缓解用户在等待时间中的焦虑感。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xtIGZmqUHAovPPKjwyVT.png" description="如页面内容加载过慢时，可采用「预加载」或「分步获取」的方式来缓解用户在等待时间中的焦虑感。">

 卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。

 > 注：
 >
 > 1.  卡片通常根据栅格进行排列，建议一行最多不超过四个
-> 2.  在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如『Ant Design 适用于中台…』
+> 2.  在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如「Ant Design 适用于中台…」

 ---

@ -64,7 +65,7 @@ title: 数据展示

 <img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/QZyxnLWUkbIuTqGYxTQs.png">

-『树形控件』通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。
+「树形控件」通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。

 用户可同时浏览与处理多个树状层级的内容。适用于任何需要通过层级组织的信息场景，如文件夹、组织架构、生物分类、国家地区等等。

--- a/docs/spec/data-entry.en-US.md
+++ b/docs/spec/data-entry.en-US.md
@ -1,6 +1,7 @@
 ---
-category: Patterns
-order: 9
+category: Design Patterns
+type: Global Rules
+order: 98
 title: Data Entry
 ---

--- a/docs/spec/data-entry.zh-CN.md
+++ b/docs/spec/data-entry.zh-CN.md
@ -1,17 +1,14 @@
 ---
-category:
-  zh-CN: 模式
-  en-US: Patterns
-order: 9
-title:
-  zh-CN: 数据录入
-  en-US: Data Entry
+category: 设计模式
+type: 全局规则
+order: 98
+title: 数据录入
 ---

 数据录入是获取对象信息的重要交互方式，用户会频繁的增加、修改或删除信息。多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验。设计者应当注意这几点：

- 为初级用户／偶尔访问的用户提供简单易懂的文案作为『标签（Label） 』；为领域专家提供专业术语作为『标签（Label） 』。当需要用户提供敏感信息时，通过『暗提示』来说明系统为什么要这么做，例如：需要获取身份证号码、手机号码时；
- 让用户能在上下文中获取信息，帮助他完成输入。使用『良好的默认值』、『结构化的格式』、『暗提示』、『输入提醒』等方式，避免让用户在空白中猜测输入。
+- 为初级用户／偶尔访问的用户提供简单易懂的文案作为「标签（Label） 」；为领域专家提供专业术语作为「标签（Label） 」。当需要用户提供敏感信息时，通过「暗提示」来说明系统为什么要这么做，例如：需要获取身份证号码、手机号码时；
+- 让用户能在上下文中获取信息，帮助他完成输入。使用「良好的默认值」、「结构化的格式」、「暗提示」、「输入提醒」等方式，避免让用户在空白中猜测输入。

 ---

@ -41,7 +38,7 @@ title:

 > 注：输入框通常与标签（label）搭配使用，标签（label）默认放于输入区域的左侧，当文案过长或英文环境下也可放于在上方，但同个系统中需保持统一。

-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xcDCXmgTCeXWelIovxvh.png" description="当说明文案较长时，你可以使用一个『信息』图标或者提示工具。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xcDCXmgTCeXWelIovxvh.png" description="当说明文案较长时，你可以使用一个「信息」图标或者提示工具。">

 <img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/AUTvHOWDsCTgSojYrQms.png" description="对于那些短的输入提醒（短于一句），你可以将其放置在输入框的下方。">

@ -80,14 +77,14 @@ title:

 <img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MsOFIDWorXeobBLkEwjS.png">

-用于切换单个选项的状态。『开关』的内联标签应该显示清楚，例如：禁用/启用，不允许/允许等。
+用于切换单个选项的状态。「开关」的内联标签应该显示清楚，例如：禁用/启用，不允许/允许等。

 <br />

 <img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/GJNIykRlFgmVRSKNGOCg.png" alt="正确示范">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/gLJCJDtOquBTRdBSoGYe.png" alt="错误示范" description="切换『开关』结果会立即生效，无需与操作按钮搭配使用。">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/gLJCJDtOquBTRdBSoGYe.png" alt="错误示范" description="切换「开关」结果会立即生效，无需与操作按钮搭配使用。">

-> 注：当用户切换『开关』按钮将直接触发状态改变。
+> 注：当用户切换「开关」按钮将直接触发状态改变。

 ### 选择列表（Dropdown）

@ -110,7 +107,7 @@ title:

 <img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jRUNDmdChSEsFAXVBzAx.png">

-> 注：在不要求精准数值的场景下用户使用『连续滑块』可得到更灵活便捷的操作；在用户需要精确数值时，可与『数字输入框』搭配使用。
+> 注：在不要求精准数值的场景下用户使用「连续滑块」可得到更灵活便捷的操作；在用户需要精确数值时，可与「数字输入框」搭配使用。

 ### 穿梭框（Transfer）

--- a/docs/spec/direct.en-US.md
+++ b/docs/spec/direct.en-US.md
@ -5,32 +5,32 @@ order: 5
 title: Make it Direct
 ---

-As Alan Cooper states：『Where there is output, let there be input』. This is the principle of direct manipulation. eg：Instead of editing content on a separate page, do it directly in context.
+As Alan Cooper states：「Where there is output, let there be input」. This is the principle of direct manipulation. eg：Instead of editing content on a separate page, do it directly in context.

 ---

 ## In-Page Editing

-<img class="preview-img" align="right" alt="Example of click to edit" description="Status 1: Common browsing mode, do not distinguish between editable  and  non-editable lines；<br>Status 2: On mouse hover, the background is backlit with yellow. A tool tip invites the user to 'Click to edit'；<br>Status 3: Once the user clicks on the title, the form elements 『Input box』, 『Ok』 and 『Cancel』 appear, and the cursor is positioned in the 『input box』." src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">
+<img class="preview-img" align="right" alt="Example of click to edit" description="Status 1: Common browsing mode, do not distinguish between editable  and  non-editable lines；<br>Status 2: On mouse hover, the background is backlit with yellow. A tool tip invites the user to 'Click to edit'；<br>Status 3: Once the user clicks on the title, the form elements 「Input box」, 「Ok」 and 「Cancel」 appear, and the cursor is positioned in the 「input box」." src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">

 Single-Field Inline Edit

-If 『readability』 is more important than 『editability』, 『click to edit』 can be used.
+If 「readability」 is more important than 「editability」, 「click to edit」 can be used.

 <br>

-<img class="preview-img" align="right" alt="Example of Text link/Icon Edit" description="Status 1: Text link/icon appears near the editable line.；<br>Status 2: Once the mouse clicks 『edit』,the form elements 『Input box』, 『Ok』 and 『Cancel』 appear, and the cursor is positioned in the 『input box』.
+<img class="preview-img" align="right" alt="Example of Text link/Icon Edit" description="Status 1: Text link/icon appears near the editable line.；<br>Status 2: Once the mouse clicks 「edit」,the form elements 「Input box」, 「Ok」 and 「Cancel」 appear, and the cursor is positioned in the 「input box」.
 " src="https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png">

-If the priority is given to 『readability』 and the 『editability』 of operation lines need to be highlighted at the same time, 『text link/icon edit』can be used.
+If the priority is given to 「readability」 and the 「editability」 of operation lines need to be highlighted at the same time, 「text link/icon edit」can be used.

 <br>

-<img class="preview-img" align="right" alt="Example of Multi-Field Inline Edit" description="Edit mode without destroying integrity can enlarge the space in order to put down the 『Input box』 and other form elements. Besides, when switching the edit mode in the Table, it is necessary to ensure that each column does not beat." src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">
+<img class="preview-img" align="right" alt="Example of Multi-Field Inline Edit" description="Edit mode without destroying integrity can enlarge the space in order to put down the 「Input box」 and other form elements. Besides, when switching the edit mode in the Table, it is necessary to ensure that each column does not beat." src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">

 Multi-Field Inline Edit

-> Note：In『Multi-Field Inline Edit』, there are huge different between the content and required field, So it is more needed to use the [『Explain What Just Happened』](../docs/spec/transition#解释刚刚发生了什么) in 『Use Transition』to eliminate this visual effects.
+> Note：In「Multi-Field Inline Edit」, there are huge different between the content and required field, So it is more needed to use the [「Explain What Just Happened」](../docs/spec/transition#解释刚刚发生了什么) in 「Use Transition」to eliminate this visual effects.

 <br>

@ -38,7 +38,7 @@ Multi-Field Inline Edit

 ## Drag and Drop

-<img class="preview-img" align="right" alt="Example of Drag and Drop List" description="Status 1: On mouse hover,a removable 『icon』 appears.；<br>Status 2： When hovering over the 『icon』, the pointer changes into a 『hand』, click-and-drag operation can be used；<br>Status 3：Drag  target to the placeable block. When  blue stroke appears, inform  user that object can be placed in the block." src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
+<img class="preview-img" align="right" alt="Example of Drag and Drop List" description="Status 1: On mouse hover,a removable 「icon」 appears.；<br>Status 2： When hovering over the 「icon」, the pointer changes into a 「hand」, click-and-drag operation can be used；<br>Status 3：Drag  target to the placeable block. When  blue stroke appears, inform  user that object can be placed in the block." src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">

 Drag and Drop List

--- a/docs/spec/direct.zh-CN.md
+++ b/docs/spec/direct.zh-CN.md
@ -5,31 +5,31 @@ order: 5
 title: 直截了当
 ---

-正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
+正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。

 ---

 ## 页内编辑

-<img class="preview-img" align="right" alt="单击编辑示例" description="状态一：普通的浏览模式，不区分可编辑行和不可编辑行；<br>状态二：鼠标悬停时，『指针』变为『手型』，编辑区域底色变黄，出现『Tooltips』提示单击编辑；<br>状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">
+<img class="preview-img" align="right" alt="单击编辑示例" description="状态一：普通的浏览模式，不区分可编辑行和不可编辑行；<br>状态二：鼠标悬停时，「指针」变为「手型」，编辑区域底色变黄，出现「Tooltips」提示单击编辑；<br>状态三：鼠标点击后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。" src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">

 单字段行内编辑

-当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。
+当「易读性」远比「易编辑性」重要时，可以使用「单击编辑」。

 <br>

-<img class="preview-img" align="right" alt="文字链/图标编辑示例" description="状态一：在可编辑行附近出现文字链/图标；<br>状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png">
+<img class="preview-img" align="right" alt="文字链/图标编辑示例" description="状态一：在可编辑行附近出现文字链/图标；<br>状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。" src="https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png">

-当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
+当「易读性」为主，同时又要突出操作行的「易编辑性」时，可使用「文字链/图标编辑」。

 <br>

-<img class="preview-img" align="right" alt="多字段行内编辑示例" description="编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。" src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">
+<img class="preview-img" align="right" alt="多字段行内编辑示例" description="编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。" src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">

 多字段行内编辑

-> 注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的[『解释刚刚发生了什么』](../docs/spec/transition#解释刚刚发生了什么)来消除这种视觉影响。
+> 注：在「多字段行内编辑」的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要「巧用过渡」原则中的[「解释刚刚发生了什么」](../docs/spec/transition#解释刚刚发生了什么)来消除这种视觉影响。

 <br>

@ -37,7 +37,7 @@ title: 直截了当

 ## 利用拖放

-<img class="preview-img" align="right" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的『图标』；<br>状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动；<br>状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
+<img class="preview-img" align="right" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的「图标」；<br>状态二：鼠标悬停在该「图标」时，指针变为「手型」，点击即可进行拖动；<br>状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">

 拖放列表

--- a/docs/spec/font.en-US.md
+++ b/docs/spec/font.en-US.md
@ -1,5 +1,5 @@
 ---
-category: Global Style
+category: Global Styles
 order: 3
 title: Font
 ---
--- a/docs/spec/font.zh-CN.md
+++ b/docs/spec/font.zh-CN.md
@ -6,7 +6,7 @@ title: 字体

 字体是体系化界面设计中最基本的构成之一。

-我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。Ant Design 字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出的，再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：
+我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。Ant Design 字体方案，是基于「动态秩序」的设计原则，结合了自然对数以及音律的规则得出的，再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：

 1. 字体家族
 2. 主字体
@ -84,7 +84,7 @@ Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸

 ## 建议

-字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议：
+字体系统的构建，是「动态秩序之美」的第一步。在实际的设计中，我们还有三点建议：

 1. **建立体系化的设计思路：**在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
 1. **少即是多：**在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。
--- a/docs/spec/icon.en-US.md
+++ b/docs/spec/icon.en-US.md
@ -1,5 +1,5 @@
 ---
-category: Global Style
+category: Global Styles
 order: 4
 title: Icons
 ---
--- a/docs/spec/illustration.zh-CN.md
+++ b/docs/spec/illustration.zh-CN.md
@ -1,10 +1,8 @@
 ---
 order: 5
-title: 插画
+title: 图形化
 ---

-# HiTu 图形化
-
 <div style="text-align:center;">
  <img alt="General" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*WzMpTIP8R6gAAAAAAAAAAABkARQnAQ" />
 </div>
@ -30,7 +28,7 @@ title: 插画
 基于科技，确定，自然，未来的四层品牌策略，我们将抽象的概念具象化。代表的技术底层的科技能力为产品，体验和未来提供技术支撑和可能性。所以图例一一对应，我们具象化了人物和产品，体验及未来之间的关系。他们之间不同的组合方式可以满足不同的业务场景诉求。

 <div style="text-align:center;">
-  <img alt="Pyramid model" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*K0AETKiR__EAAAAAAAAAAABkARQnAQ" />
+  <img alt="Pyramid model" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gCoSS5DaCNEAAAAAAAAAAABkARQnAQ" />
 </div>

 ## 颜色
@ -75,7 +73,7 @@ title: 插画

 <img class="preview-img" align="right" alt="HiTu 骨骼系统" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*9-cATIWgPx8AAAAAAAAAAABkARQnAQ" />

-<img class="preview-img" align="right" alt="人物姿态复用" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*F-QpQL91SvYAAAAAAAAAAABkARQnAQ" />
+<img class="preview-img" align="right" alt="人物姿态复用" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*7JLsQ4whNKkAAAAAAAAAAABkARQnAQ" />

 有了基础的人物设计，我们将人物进行分解，然后搭配设计好的骨骼系统。来为人物增加各种姿态动作的复用和延展。

@ -85,7 +83,7 @@ title: 插画

 <img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-LbbSads11EAAAAAAAAAAABkARQnAQ" />

-<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*FcRKRLwPIz4AAAAAAAAAAABkARQnAQ" />
+<img class="preview-img" align="right" alt="根据业务场景设计的元素组件" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*FcRKRLwPIz4AAAAAAAAAAABkARQnAQ" />

 记忆点源于与众不同，专业感源于整齐划一。元素组件指代的是业务场景中一些业务元素，状态元素图形化的世界缤纷多变，我们希望在保持统一性的同时不去限时设计者的创意空间，元素组件的设计上，我们为了保持一定的韵律感，推荐设计师在 1024\*1024 的网格中绘制组件，且圆角的大小保持 8 的倍数关系。

--- a/docs/spec/introduce.en-US.md
+++ b/docs/spec/introduce.en-US.md
@ -10,7 +10,7 @@ title: Introduction

 Ant's enterprise-level products are an enormous and complex system with a large number and complex functions. Designers and developers often need to respond fast due to frequent changes and concurrency. Meanwhile, there are many similar pages and components in these products. Some stable and highly reusable content can obtain through abstraction.

-With the trend of commercialization, more and more enterprise-level products begin to pursue a better user experience. With such an ultimate goal, we (Ant Financial User Experience Department) have gradually polished a design system(Ant Design) for enterprise-level products through a huge quantity of project practices and summaries. Based on the four design values of 『 natural 』, 『certain』, 『meaningful』, and 『growing』, through modular solutions, reduce redundant production costs and allow designers to focus on better user experience.
+With the trend of commercialization, more and more enterprise-level products begin to pursue a better user experience. With such an ultimate goal, we (Ant Financial User Experience Department) have gradually polished a design system(Ant Design) for enterprise-level products through a huge quantity of project practices and summaries. Based on the four design values of 「 natural 」, 「certain」, 「meaningful」, and 「growing」, through modular solutions, reduce redundant production costs and allow designers to focus on better user experience.

 ---

@ -18,8 +18,8 @@ With the trend of commercialization, more and more enterprise-level products beg

 We provide comprehensive design guidelines, best practices, design resources, and design tools to help designers produce high-quality product prototypes.

- [Design value](/docs/spec/values)
- [Design pattern](/docs/spec/overview)
+- [Design values](/docs/spec/values)
+- [Design patterns](/docs/spec/overview)
 - [Visualization](/docs/spec/visual)
 - [Illustration](/docs/spec/illustration)
 - [Design resources](/docs/spec/download)
--- a/docs/spec/introduce.zh-CN.md
+++ b/docs/spec/introduce.zh-CN.md
@ -10,7 +10,7 @@ title: 介绍

 蚂蚁的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。

-随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于『自然』、『确定性』、『意义感』、『生长性』四大[设计价值观](/docs/spec/values)，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
+随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大[设计价值观](/docs/spec/values)，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

 ---

--- a/docs/spec/invitation.zh-CN.md
+++ b/docs/spec/invitation.zh-CN.md
@ -5,13 +5,13 @@ order: 8
 title: 提供邀请
 ---

-很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
+很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。所以「提供邀请」是成功完成人机交互的关键所在。

 邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。

 > ** 意符（Signifiers）** ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》

-> ** 可供性（Affordance）** ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
+> ** 可供性（Affordance）** ：也被翻译成「示能」，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》

 ---

@ -27,13 +27,13 @@ title: 提供邀请

 <img class="preview-img" align="right" alt="未完成邀请示例" src="https://gw.alipayobjects.com/zos/rmsportal/ChvxJAQTwWbqzBnUBLec.png">

-引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。
+引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。常见类型：「文本邀请」、「白板式邀请」、「未完成邀请」。

 <br>

-<img class="preview-img" align="right" alt="漫游探索邀请示例 " description="在用户首次登录时出现少量『探索点』，当用户点击『我知道了』，能快速切换到下一个探索点。" src="https://gw.alipayobjects.com/zos/rmsportal/dMrVeJJiaCLzoYfJrJKe.png">
+<img class="preview-img" align="right" alt="漫游探索邀请示例 " description="在用户首次登录时出现少量「探索点」，当用户点击「我知道了」，能快速切换到下一个探索点。" src="https://gw.alipayobjects.com/zos/rmsportal/dMrVeJJiaCLzoYfJrJKe.png">

-漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。
+漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是「创口贴」，仅通过它不能解决界面交互的真正问题。

 > 注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。

@ -47,15 +47,15 @@ title: 提供邀请

 <br>

-<img class="preview-img" align="right" alt="悬停邀请示例 1" description="鼠标『悬停』整个卡片时，可被点击部分变为蓝色的『文字链』。" src="https://gw.alipayobjects.com/zos/rmsportal/ejvYAogJXLPqoMUqyvIV.png">
+<img class="preview-img" align="right" alt="悬停邀请示例 1" description="鼠标「悬停」整个卡片时，可被点击部分变为蓝色的「文字链」。" src="https://gw.alipayobjects.com/zos/rmsportal/ejvYAogJXLPqoMUqyvIV.png">

-<img class="preview-img" align="right" alt="悬停邀请示例 2" description="鼠标『悬停』时，出现『选择此模板』的按钮。" src="https://gw.alipayobjects.com/zos/rmsportal/umGVwLlIJSmxaQXcjlbh.png">
+<img class="preview-img" align="right" alt="悬停邀请示例 2" description="鼠标「悬停」时，出现「选择此模板」的按钮。" src="https://gw.alipayobjects.com/zos/rmsportal/umGVwLlIJSmxaQXcjlbh.png">

 悬停邀请：在鼠标悬停期间提供邀请。

 <br>

-<img class="preview-img" align="right" alt="推论邀请示例" description="用户点击『赞』后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启『精打细算』的邀请。" src="https://gw.alipayobjects.com/zos/rmsportal/iuLdCuNQWCvYuTxxQUuL.png">
+<img class="preview-img" align="right" alt="推论邀请示例" description="用户点击「赞」后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启「精打细算」的邀请。" src="https://gw.alipayobjects.com/zos/rmsportal/iuLdCuNQWCvYuTxxQUuL.png">

 推论邀请：用于交互期间，合理推断用户可能产生的需求。

--- a/docs/spec/layout.en-US.md
+++ b/docs/spec/layout.en-US.md
@ -1,5 +1,5 @@
 ---
-category: Global Style
+category: Global Styles
 order: 2
 title: Layout
 ---
--- a/docs/spec/layout.zh-CN.md
+++ b/docs/spec/layout.zh-CN.md
@ -4,7 +4,7 @@ order: 2
 title: 布局
 ---

-空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI 界面的布局空间要基于『动态、体系化』的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发，基于『秩序之美』的原则，探索 UI 设计中的动态空间秩序，形成了 Ant Design 的界面布局方式，为设计者构筑具备理性之美的布局空间创造了条件。
+空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI 界面的布局空间要基于「动态、体系化」的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发，基于「秩序之美」的原则，探索 UI 设计中的动态空间秩序，形成了 Ant Design 的界面布局方式，为设计者构筑具备理性之美的布局空间创造了条件。

 在中后台视觉体系中定义布局系统，我们建议从 5 个方面出发：

@ -67,4 +67,4 @@ Ant Design 的设计师通过 4 点来实现设计过程中和工程师的沟通

 ## 是启发，而非限制

-Ant Design 在布局空间上的成果并非要限制设计产出，更多的在于引导设计者如何做到『更好』。8 倍数的双数组通过排列组合的方式可以形成千变万化种可能性，但在无限的可能性之中依然存在着『只是简单的套用数据组合』同『看起来很精妙』的差别。实现合理优雅的界面布局，在对美感的追求之上，还应当结合可用性来看待，对于企业级应用界面布局的探索，我们依然在路上。
+Ant Design 在布局空间上的成果并非要限制设计产出，更多的在于引导设计者如何做到「更好」。8 倍数的双数组通过排列组合的方式可以形成千变万化种可能性，但在无限的可能性之中依然存在着「只是简单的套用数据组合」同「看起来很精妙」的差别。实现合理优雅的界面布局，在对美感的追求之上，还应当结合可用性来看待，对于企业级应用界面布局的探索，我们依然在路上。
--- a/docs/spec/lightweight.zh-CN.md
+++ b/docs/spec/lightweight.zh-CN.md
@ -13,7 +13,7 @@ title: 简化交互

 ## 实时可见工具

-<img class="preview-img" align="right" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标『指针』变为『手型』，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
+<img class="preview-img" align="right" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标「指针」变为「手型」，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">

 如果某个操作非常重要，就应该把它放在界面中，并实时可见。

@ -25,7 +25,7 @@ title: 简化交互

 <img class="preview-img" align="right" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">

-如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
+如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。

 <br>

@ -33,7 +33,7 @@ title: 简化交互

 ## 开关显示工具

-<img class="preview-img" align="right" alt="开关显示工具示例" description="用户点击『修改』后，Table 中『文本』变成『输入框』，开启编辑功能。" src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
+<img class="preview-img" align="right" alt="开关显示工具示例" description="用户点击「修改」后，Table 中「文本」变成「输入框」，开启编辑功能。" src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">

 如果某些操作只需要在特定模式时显示，可以通过开关来实现。

@ -43,7 +43,7 @@ title: 简化交互

 ## 可视区域 ≠ 可点击区域

-<img class="preview-img" align="right" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标『指针』随即变为『手型』，单击即可跳转。" src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
+<img class="preview-img" align="right" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。" src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">

 在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。

--- a/docs/spec/overview.zh-CN.md
+++ b/docs/spec/overview.zh-CN.md
@ -4,7 +4,7 @@ order: 0
 title: 概览
 ---

-在企业级业务中使用设计模式，能大幅度提升研发团队的确定性，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。
+在企业级业务中使用设计模式，能大幅度提升研发团队的确定性，节约无谓的设计且保持系统一致性，让「设计者」把创造力专注在最需要的地方。

 设计模式秉承 Ant Design 设计价值观，针对企业级产品中反复出现的设计问题给出一般解决方案。设计者可直接使用设计模式完成界面设计；也可以设计模式为起点，衍生出更具业务特性的解决方案满足个性化设计需求。

@ -22,7 +22,7 @@ title: 概览
  - 基础组件：构成系统最基础的元素，如按钮、分页器。
  - 业务组件/区块：区块级示例，一般由多个组件构成，如 PageHeader 通用页头；在技术实现上，可能是代码片段，也可能是组件，也可能是先代码片段后变成组件。
 - **通用概念：**
-  - Global Style：通过 Design Token 的方式控制视觉表达，比如：字体、颜色、圆角、阴影等。
+  - Global Styles：通过 Design Token 的方式控制视觉表达，比如：字体、颜色、圆角、阴影等。
  - Guide：一些保证 ETC 体系化的约定，如：排版、文案、Action Placement、必填选项。

 ## 资源
--- a/docs/spec/proximity.en-US.md
+++ b/docs/spec/proximity.en-US.md
@ -13,15 +13,15 @@ When several items are in close proximity to each other, they become one visual

 <img class="preview-img" align="right" alt="Example of the different vertical distance" description="In Ant Design, the three different formats are 8px (small spacing), 16px (middle spacing) and 24px (large spacing)." src="https://gw.alipayobjects.com/zos/rmsportal/goazWUHPXsGEDFIGsNlm.png">

-Divide the hierarchy of information through three formats:『small spacing』, 『middle spacing』and『large spacing』
+Divide the hierarchy of information through three formats:「small spacing」, 「middle spacing」and「large spacing」

 <br>

-<img class="preview-img" align="right" alt="Example of added element" description="To make the hierarchy more apparent through adding 『guides』." src="https://gw.alipayobjects.com/zos/rmsportal/XNFCsupiYDBTJFQkmOmv.png">
+<img class="preview-img" align="right" alt="Example of added element" description="To make the hierarchy more apparent through adding 「guides」." src="https://gw.alipayobjects.com/zos/rmsportal/XNFCsupiYDBTJFQkmOmv.png">

-In the case that the three formats are applicable, the hierarchy of information can be separated clearly through adding or cutting down the multiple of 『basic spacing』, or adding elements.
+In the case that the three formats are applicable, the hierarchy of information can be separated clearly through adding or cutting down the multiple of 「basic spacing」, or adding elements.

-> Note: in Ant Design, y = 8 + 8 \* n, among which, n >= 0, y stands for the vertical spacing and 8 represents 『basic spacing』.
+> Note: in Ant Design, y = 8 + 8 \* n, among which, n >= 0, y stands for the vertical spacing and 8 represents 「basic spacing」.

 ---

--- a/docs/spec/proximity.zh-CN.md
+++ b/docs/spec/proximity.zh-CN.md
@ -13,15 +13,15 @@ title: 亲密性

 <img class="preview-img" align="right" alt="纵向间距示例" description="在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。" src="https://gw.alipayobjects.com/zos/rmsportal/goazWUHPXsGEDFIGsNlm.png">

-通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
+通过「小号间距」、「中号间距」、「大号间距」这三种规格来划分信息层次。

 <br>

-<img class="preview-img" align="right" alt="增加元素示例" description="通过增加『分割线』来拉开层次。" src="https://gw.alipayobjects.com/zos/rmsportal/XNFCsupiYDBTJFQkmOmv.png">
+<img class="preview-img" align="right" alt="增加元素示例" description="通过增加「分割线」来拉开层次。" src="https://gw.alipayobjects.com/zos/rmsportal/XNFCsupiYDBTJFQkmOmv.png">

-在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
+在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。

-> 注：在 Ant Design 中，`y = 8 + 8 * n`。其中，`n >= 0`，y 是纵向间距，8 是『基础间距』。
+> 注：在 Ant Design 中，`y = 8 + 8 * n`。其中，`n >= 0`，y 是纵向间距，8 是「基础间距」。

 ---

--- a/docs/spec/reaction.zh-CN.md
+++ b/docs/spec/reaction.zh-CN.md
@ -5,9 +5,9 @@ order: 10
 title: 即时反应
 ---

-『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在`交互期间`为用户提供视觉反馈；『即时反应』的重要性体现在`交互之后`立即给出反馈。
+「提供邀请」的强大体现在`交互之前`给出反馈，解决易发现性问题；「巧用过渡」的有用体现在它能够在`交互期间`为用户提供视觉反馈；「即时反应」的重要性体现在`交互之后`立即给出反馈。

-就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
+就像「牛顿第三定律」所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。

 虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。

@ -17,17 +17,17 @@ title: 即时反应

 ## 查询模式

-<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词，只会在『话题』、『问题』、『文章』这 3 种类目中出现。" src="https://gw.alipayobjects.com/zos/rmsportal/czfJRLltwXcsTLlTpytV.png">
+<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词，只会在「话题」、「问题」、「文章」这 3 种类目中出现。" src="https://gw.alipayobjects.com/zos/rmsportal/czfJRLltwXcsTLlTpytV.png">

 <img class="preview-img" align="right" alt="不确定类目示例" description="用户所查询的关键词，其所属的类目数量不确定，可能 4 个，可能 5 个，可能更多。" src="https://gw.alipayobjects.com/zos/rmsportal/XlqFYhYiZtWFNImtRElR.png">

-自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
+自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。根据查询结果分类的多少，可以分为「确定类目」、「不确定类目」两种类型。

 <br>

 <img class="preview-img" align="right" alt="实时搜索示例" description="用户输入一个搜索值，系统随即显示查询结果。" src="https://gw.alipayobjects.com/zos/rmsportal/clFLKIWTYfHwIiOCUNbw.png">

-实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。
+实时搜索：随着用户输入，实时显示搜索结果。「自动完成」、「实时建议」的近亲。

 <br>

@ -39,11 +39,11 @@ title: 即时反应

 实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。

-> 注：解决错误最好的办法，就是不让错误发生。而『实时预览』就是有效避免错误的好设计。
+> 注：解决错误最好的办法，就是不让错误发生。而「实时预览」就是有效避免错误的好设计。

 <br>

-渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[『足不出户／渐进式展现』](/docs/spec/stay#流程处理)。
+渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[「足不出户／渐进式展现」](/docs/spec/stay#流程处理)。

 <br>

@ -55,7 +55,7 @@ title: 即时反应

 <img class="preview-img" align="right" alt="页面加载示例" src="https://gw.alipayobjects.com/zos/rmsportal/igxFnUdRHWaBXtTePuFf.png">

-进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。
+进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。常见的进度指示：「按钮加载」、「表格加载」、「富列表加载」、「页面加载」。可根据操作的量级和重要性，展示不同类型的进度指示。

 <br>

@ -65,6 +65,6 @@ title: 即时反应

 <br>

-<img class="preview-img" align="right" alt="定时示例"  description="新增的列表项『高亮』，持续几秒后恢复正常。" src="https://gw.alipayobjects.com/zos/rmsportal/kpUhmRudNWDxNzgUddEp.png">
+<img class="preview-img" align="right" alt="定时示例"  description="新增的列表项「高亮」，持续几秒后恢复正常。" src="https://gw.alipayobjects.com/zos/rmsportal/kpUhmRudNWDxNzgUddEp.png">

 定时刷新：无需用户介入，定时展示新内容。
--- a/docs/spec/reference.zh-CN.md
+++ b/docs/spec/reference.zh-CN.md
@ -6,7 +6,7 @@ title: 致敬

 ## 设计体系

-在 Ant Design 3.0 的改版中，我们汲取顶级设计体系的精华，同时结合我们自身业务特性做了大量优化。我们希望通过不断努力和打磨，成为世界级设计体系的一份子，为『用户』和『设计者』带来极致体验。如果你也想追求卓越，建议去研究这些体系。
+在 Ant Design 3.0 的改版中，我们汲取顶级设计体系的精华，同时结合我们自身业务特性做了大量优化。我们希望通过不断努力和打磨，成为世界级设计体系的一份子，为「用户」和「设计者」带来极致体验。如果你也想追求卓越，建议去研究这些体系。

 - [Fiori Design](https://experience.sap.com/fiori-design-web/)
 - [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/themes/)
--- a/docs/spec/stay.zh-CN.md
+++ b/docs/spec/stay.zh-CN.md
@ -15,25 +15,25 @@ title: 足不出户

 ## 覆盖层

-<img class="preview-img" align="right" alt="推荐示例" description="用户点击『删除』后，直接操作；出现 Message 告知用户操作成功，并提供用户『撤销』的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再『撤销』。" src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png" good>
+<img class="preview-img" align="right" alt="推荐示例" description="用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。" src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png" good>

-<img class="preview-img" align="right" alt="推荐示例" description="特例：在执行某些无法『撤销』的操作时，可以点击『删除』后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png" good>
+<img class="preview-img" align="right" alt="推荐示例" description="特例：在执行某些无法「撤销」的操作时，可以点击「删除」后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png" good>

-<img class="preview-img" align="right" alt="不推荐示例" description="滥用 Modal 进行二次确认，就像『狼来了』一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。" src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" bad>
+<img class="preview-img" align="right" alt="不推荐示例" description="滥用 Modal 进行二次确认，就像「狼来了」一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。" src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" bad>

-二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤销』即可。
+二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可。

 <br>

-<img class="preview-img" align="right" alt="详情覆盖层示例" description="通过『点击』图标查看更多详情信息。" src="https://gw.alipayobjects.com/zos/rmsportal/yagQVxwdzuXOulzqdxEq.png">
+<img class="preview-img" align="right" alt="详情覆盖层示例" description="通过「点击」图标查看更多详情信息。" src="https://gw.alipayobjects.com/zos/rmsportal/yagQVxwdzuXOulzqdxEq.png">

-详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。
+详情覆盖层：一般在列表中，通过用户「悬停」/「点击」某个区块，在当前页加载该条列表项的更多详情信息。

-> 注：使用『悬停』激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层
+> 注：使用「悬停」激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层

 <br>

-<img class="preview-img" align="right" alt="输入覆盖层示例" description="鼠标『点击』图标触发；鼠标『点击』悬浮层以外的其他区块后，直接保存输入结果并退出。" src="https://gw.alipayobjects.com/zos/rmsportal/lLhJKFcaJnIPxFCjvUKY.png">
+<img class="preview-img" align="right" alt="输入覆盖层示例" description="鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。" src="https://gw.alipayobjects.com/zos/rmsportal/lLhJKFcaJnIPxFCjvUKY.png">

 输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。

@ -59,7 +59,7 @@ title: 足不出户

 ## 虚拟页面

-在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。
+在交互过程中，「覆盖层」可以在当前页面上方显示附加内容和交互链接；「嵌入层」可以在页面内部实现同样效果；而「虚拟页面」不局限机械时代的「页面」，可以利用信息时代的特点构建一种新型「页面」。

 <br>

@ -67,7 +67,7 @@ title: 足不出户

 ## 流程处理

-长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些『流程处理』而言，让用户始终待在同一个页面上则更有必要。
+长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些「流程处理」而言，让用户始终待在同一个页面上则更有必要。

 <br>

@ -85,4 +85,4 @@ title: 足不出户

 <img class="preview-img" align="right" alt="弹出框覆盖层示例" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">

-弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。
+弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。
--- a/docs/spec/transition.zh-CN.md
+++ b/docs/spec/transition.zh-CN.md
@ -37,7 +37,7 @@ title: 巧用过渡

 ## 解释刚刚发生了什么

-<video class="transition-video-player" alt="对象增加示例" description="新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" />
+<video class="transition-video-player" alt="对象增加示例" description="新增一条对象时，该行「高亮」告知用户这是新增项；几秒后「高亮」消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" />

 对象增加：在列表/表格中，新增了一个对象。

@ -49,7 +49,7 @@ title: 巧用过渡

 <br>

-<video class="transition-video-player" alt="对象更改示例" description="状态一：用户更改了『详情』中的值；<br>状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；<br>状态三：底色持续几秒后，恢复正常。" src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" />
+<video class="transition-video-player" alt="对象更改示例" description="状态一：用户更改了「详情」中的值；<br>状态二：用户点击「保存」后，详情所在的网格出现「黄底」，表明该对象发生了更改；<br>状态三：底色持续几秒后，恢复正常。" src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" />

 对象更改：在列表/表格中，更改了一个对象。

@ -63,7 +63,7 @@ title: 巧用过渡

 ## 改善感知性能

-当无法有效提升『实际性能』时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能。
+当无法有效提升「实际性能」时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能。

 <br>

--- a/docs/spec/values.en-US.md
+++ b/docs/spec/values.en-US.md
@ -47,8 +47,8 @@ Interfaces are the medium of interaction between users and the system. They are

 A product or function created by the designer is not only the needs of the user but carries a mission from the user. Product design should be based on the perspective of work to promote the achievement of the user's mission. Simultaneously, based on "nature" and "certainty", it regards the user's human needs and creates meaningful human-computer interaction for the work process.

- **Meaning of result:** **Clear goals, immediate feedback.** Understand the objectives, clearly disassemble the sub-objectives according to the use process, and let each interaction revolve around the achievement of the main objectives. Provide appropriate and immediate feedback for each action, so that users can understand the operation results. Besides, emotional design can be used to pacify users' negative emotions and enhance users' positive emotions.
- **Meaning of process:** **Moderate challenge, full devotion.** Adjust the difficulty of work in different scenarios, make the function trigger at the right time to match the user's skill. If not necessary, do not add entities. Do not distract users, let users focus on task achievement, rather than the interface. Let the current work be neither to simple nor too complex. The challenges are moderate, but higher challenges are raised as the user's capabilities grow. It allows users to continue to immerse themselves in the flow of work and gain fulfilling work experience.
+- **Meaning of result: Clear goals, immediate feedback.** Understand the objectives, clearly disassemble the sub-objectives according to the use process, and let each interaction revolve around the achievement of the main objectives. Provide appropriate and immediate feedback for each action, so that users can understand the operation results. Besides, emotional design can be used to pacify users' negative emotions and enhance users' positive emotions.
+- **Meaning of process: Moderate challenge, full devotion.** Adjust the difficulty of work in different scenarios, make the function trigger at the right time to match the user's skill. If not necessary, do not add entities. Do not distract users, let users focus on task achievement, rather than the interface. Let the current work be neither to simple nor too complex. The challenges are moderate, but higher challenges are raised as the user's capabilities grow. It allows users to continue to immerse themselves in the flow of work and gain fulfilling work experience.

 ## Growing

@ -58,5 +58,5 @@ A product or function created by the designer is not only the needs of the user

 The growth of enterprise-level product capabilities is accompanied by the evolution of user system roles. Designers should be responsible for the products they create and improve the discoverability of functions and values. Designers should design with the vision of development and consider the common growth of both ends of humans and computers.

- **Meaning of result:** Clear goals, immediate feedback. Understand the objectives, clearly disassemble the sub-objectives according to the use process, and let each interaction revolve around the achievement of the main objectives. Provide appropriate and immediate feedback for each action, so that users can understand the operation results. Besides, emotional design can be used to pacify users' negative emotions and enhance users' positive emotions.
- **Meaning of process:** Moderate challenge, full devotion. Adjust the difficulty of work in different scenarios, make the function trigger at the right time to match the user's skill. If not necessary, do not add entities. Do not distract users, let users focus on task achievement, rather than the interface. Let the current work be neither to simple nor too complex. The challenges are moderate, but higher challenges are raised as the user's capabilities grow. It allows users to continue to immerse themselves in the flow of work and gain fulfilling work experience.
+- **Value connection:** The growth of products depends on the expansion and deep use of users, while the growth of users depends on the growth of product functions. Designers should establish system design thinking, understand the value of product functions, explore user needs in different scenarios, and establish a connection between value and needs. Let product value be discovered and help users build more effective and efficient ways of working.
+- **Man-Computer Symbiosis:** More connections between product functions and user requirements make human-computer interaction closer and users and system symbiotic. When designing products, users and systems should not be separated from each other. They should be considered as a dynamic group to ensure that they are flexible, inclusive and full of vitality.
--- a/docs/spec/values.zh-CN.md
+++ b/docs/spec/values.zh-CN.md
@ -10,7 +10,7 @@ Ant Design 设计价值观为设计者提供评价设计好坏的内在标准，
  <img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8mRLT7esgZYAAAAAAAAAAABkARQnAQ" alt="总概" />
 </div>

-在『设计价值观』的坚持上，Ant Design 有四点与众不同：
+在「设计价值观」的坚持上，Ant Design 有四点与众不同：

 ## 自然

@ -35,8 +35,8 @@ Ant Design 设计价值观为设计者提供评价设计好坏的内在标准，

 - **设计者确定：**企业级产品都是分工合作的产物，参与者越多合作熵越高，这是一切设计工作低效、产品系统不易维护的来源。通过探索设计规律、模块化设计思路，来为设计者提供足够精简的设计规则、组件、模式等，赋能设计者、降低合作熵。
  - 保持克制： 能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。
-  - 面向对象的方法： 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版。
-  - 模块化设计： 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。
+  - 面向对象的方法： 探索设计规律，并将其抽象成「对象」，增强界面设计的灵活性和可维护性，同时也减少「设计者」的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版。
+  - 模块化设计： 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板，节约无谓的设计且保持系统一致性，让「设计者」把创造力专注在最需要的地方。
 - **用户确定：**用户日常工作是通过诸多企业级产品的协同来完成的，除了考虑单一产品的设计一致性，更应当在跨产品、跨终端、跨系统间保持良好的确定性。一致的外观和交互，保持面向用户的熟悉感，能提升易学行，降低认知和操作成本，提升工作效率。

 ## 意义感
@ -47,8 +47,8 @@ Ant Design 设计价值观为设计者提供评价设计好坏的内在标准，

 一个产品或功能被设计者创造出来不只是用户的需要，而更多是承载用户的某个工作使命。产品设计应充分站在工作视角，促成用户使命的达成；同时，在「自然」、「确定」之上，兼顾用户的人性需求，为工作过程创造富有意义感的人机交互。

- **结果的意义：\*\***明确目标，即时反馈。\*\*洞悉工作目标，根据使用流程拆解明确的子目标，让每个交互行为都围绕着主目标的达成；为每个行为，辅以恰当、即时的反馈，让用户对操作结果了然于胸。此外，可通过情感化设计，适度安抚用户负面情感，强化用户正面情感。
- **过程的意义：\*\***挑战适中，全情投入。\*\*调整不同场景下的工作难度，让功能适时适地触发，以匹配用户能力；如无必要，勿增实体，不分散用户注意力，让用户专注于任务达成，而非界面。让当下的工作既不过于简单，亦不过于复杂，挑战适中，并随着用户能力的成长提出更高的挑战，能让用户持续沉浸在工作的心流中，获得富有成就感的工作体验。
+- **结果的意义：明确目标，即时反馈。**洞悉工作目标，根据使用流程拆解明确的子目标，让每个交互行为都围绕着主目标的达成；为每个行为，辅以恰当、即时的反馈，让用户对操作结果了然于胸。此外，可通过情感化设计，适度安抚用户负面情感，强化用户正面情感。
+- **过程的意义：挑战适中，全情投入。**调整不同场景下的工作难度，让功能适时适地触发，以匹配用户能力；如无必要，勿增实体，不分散用户注意力，让用户专注于任务达成，而非界面。让当下的工作既不过于简单，亦不过于复杂，挑战适中，并随着用户能力的成长提出更高的挑战，能让用户持续沉浸在工作的心流中，获得富有成就感的工作体验。

 ## 生长性

--- a/docs/spec/visual.zh-CN.md
+++ b/docs/spec/visual.zh-CN.md
@ -3,7 +3,7 @@ order: 3
 title: 可视化
 ---

-可视化语言是基于中台设计语言 Ant Design 衍生的一套具有数据可视化特性的设计指导原则，让数据表达更符合用户心理，帮助『设计者』孵化出更具业务特性的可视化解决方案以满足个性化设计需求，屏蔽不必要的设计差异和实现成本，从而解放『设计者』和前端的研发资源，实现全面提高数据图表的研发效率。
+可视化语言是基于中台设计语言 Ant Design 衍生的一套具有数据可视化特性的设计指导原则，让数据表达更符合用户心理，帮助「设计者」孵化出更具业务特性的可视化解决方案以满足个性化设计需求，屏蔽不必要的设计差异和实现成本，从而解放「设计者」和前端的研发资源，实现全面提高数据图表的研发效率。

 同时，这是一份动态更新的设计文档，你的阅读和反馈正是我们不断前进的动力，[GitHub 反馈地址](https://github.com/antvis/site/issues)。

--- a/site/bisheng.config.js
+++ b/site/bisheng.config.js
@ -43,7 +43,7 @@ module.exports = {
    categoryOrder: {
      'Ant Design': 0,
      全局样式: 1,
-      'Global Style': 1,
+      'Global Styles': 1,
      设计模式: 2,
      'Design Patterns': 2,
      其他: 6,
--- a/site/theme/en-US.js
+++ b/site/theme/en-US.js
@ -7,7 +7,7 @@ module.exports = {
    'app.header.menu.home': 'Home',
    'app.header.menu.documentation': 'Documentation',
    'app.header.menu.components': 'Components',
-    'app.header.menu.spec': 'Guidelines',
+    'app.header.menu.spec': 'Design',
    'app.header.menu.resource': 'Resources',
    'app.header.menu.mobile': 'Mobile',
    'app.header.menu.pro.v4': 'Ant Design Pro v4',
@ -38,13 +38,13 @@ module.exports = {
    'app.home.design-and-framework': 'Design language and framework',
    'app.home.design-values': 'Design values',
    'app.home.design-values-description':
-      'This is an internal criterion for Ant Design to evaluate good design. Based on the assumption that "everyone pursues pleasure at work", we have added the two values of "Sense of Meaning" and "Growth" on the basis of "Determinism" and "Nature" to guide each designer to do better Judgment and decision making.',
+      'This is an internal criterion for Ant Design to evaluate good design. Based on the postulate that "everyone pursues pleasure at work", we have added the two values of "Meaningful" and "Growing" on the basis of "Certain" and "Natural" to guide each designer to do better judgment and decision.',
    'app.home.certainty': 'Certain',
    'app.home.meaningful': 'Meaningful',
    'app.home.growth': 'Growing',
    'app.home.natural': 'Natural',
-    'app.home.design-guide': 'Design guide',
-    'app.home.components': 'components',
+    'app.home.design-guide': 'Guidelines',
+    'app.home.components': 'Components',
    'app.home.detail': 'Detail',
    'app.home.global-style': 'Global style',
    'app.home.design-patterns': 'Design patterns',
@ -55,11 +55,11 @@ module.exports = {
    'app.home.product-antv-slogan': 'A new generation of data visualization solution',
    'app.home.product-pro-slogan': 'Out-of-box UI solution for enterprise applications',
    'app.home.product-mobile-slogan': 'Mobile UI components with Ant Design',
-    'app.home.product-hitu': 'Hitu',
+    'app.home.product-hitu': 'HiTu',
    'app.home.product-hitu-slogan': 'A new generation of graphical solutions',
-    'app.home.product-kitchen-slogan': 'A Sketch toolset to enhance designers',
+    'app.home.product-kitchen-slogan': 'A Sketch plugin to enhance designers',
    'app.home.product-icons-slogan': 'A set of premium icons',
-    'app.home.view-more': 'More articles',
+    'app.home.view-more': 'More',
    'app.footer.repo': 'GitHub Repository',
    'app.footer.awesome': 'Awesome Ant Design',
    'app.footer.course': 'Ant Design Practical Tutorial',
--- a/site/theme/static/header.less
+++ b/site/theme/static/header.less
@ -217,4 +217,20 @@
  .github-btn {
    display: none;
  }
+
+  #header.home-header {
+    .ant-row {
+      .ant-col {
+        margin: 0 auto;
+
+        a {
+          padding-right: 0;
+        }
+
+        &:last-child {
+          display: none;
+        }
+      }
+    }
+  }
 }
--- a/site/theme/template/Home/DesignPage/Natural.tsx
+++ b/site/theme/template/Home/DesignPage/Natural.tsx
@ -47,10 +47,10 @@ const shapes: Shape[] = [
    source: CenterLeaf,
    frames: [
      { frame: 0, originY: 1, x: 60, y: 62, rotate: 0 },
-      { frame: 30, rotate: -7 },
-      { frame: 60, rotate: 9 },
-      { frame: 90, rotate: -7 },
-      { frame: 120, rotate: 0 },
+      { frame: 20, rotate: -7 },
+      { frame: 40, rotate: 9 },
+      { frame: 60, rotate: -7 },
+      { frame: 80, rotate: 0 },
    ],
  },
  {
@ -66,22 +66,22 @@ const shapes: Shape[] = [
        cubic: Hitu.CUBIC_EASE_IN_OUT,
      },
      {
-        frame: 30,
-        rotate: -4,
+        frame: 20,
+        rotate: 7,

        cubic: Hitu.CUBIC_EASE_IN_OUT,
      },
      {
-        frame: 60,
-        rotate: 6,
+        frame: 40,
+        rotate: -5,
        cubic: Hitu.CUBIC_EASE_IN_OUT,
      },
      {
-        frame: 90,
-        rotate: -4,
+        frame: 60,
+        rotate: 7,
      },
      {
-        frame: 120,
+        frame: 80,
        rotate: 0,
      },
    ],
@ -98,21 +98,21 @@ const shapes: Shape[] = [
        y: 96,
      },
      {
-        frame: 30,
-        rotate: -4,
+        frame: 20,
+        rotate: -5,
+        cubic: Hitu.CUBIC_EASE_IN_OUT,
+      },
+      {
+        frame: 40,
+        rotate: 7,
        cubic: Hitu.CUBIC_EASE_IN_OUT,
      },
      {
        frame: 60,
-        rotate: 6,
-        cubic: Hitu.CUBIC_EASE_IN_OUT,
+        rotate: -5,
      },
      {
-        frame: 90,
-        rotate: -4,
-      },
-      {
-        frame: 120,
+        frame: 80,
        rotate: 0,
      },
    ],
--- a/site/theme/template/Home/DesignPage/index.less
+++ b/site/theme/template/Home/DesignPage/index.less
@ -86,6 +86,10 @@

@media (min-width: @screen-sm-min) {
  .design-card {
+    &.main-card {
+      padding-right: 0;
+    }
+
    &.sub-card {
      background-image: none !important;
    }
@ -173,3 +177,9 @@
    }
  }
 }
+
+html.en-us {
+  .design-card.main-card {
+    line-height: 22px;
+  }
+}
--- a/site/theme/template/Home/index.less
+++ b/site/theme/template/Home/index.less
@ -11,6 +11,7 @@
  }

  .ant-card-hoverable:hover {
+    border: 1px solid #f0f0f0;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08),
      0 9px 28px 8px rgba(0, 0, 0, 0.05);
  }
--- a/site/theme/template/Layout/Header.jsx
+++ b/site/theme/template/Layout/Header.jsx
@ -252,6 +252,27 @@ class Header extends React.Component {
      </Menu>,
    ];

+    const colProps = isHome
+      ? [{ flex: 'none' }, { flex: 'auto' }]
+      : [
+          {
+            xxl: 4,
+            xl: 5,
+            lg: 5,
+            md: 5,
+            sm: 24,
+            xs: 24,
+          },
+          {
+            xxl: 20,
+            xl: 19,
+            lg: 19,
+            md: 19,
+            sm: 0,
+            xs: 0,
+          },
+        ];
+
    const searchPlaceholder = locale === 'zh-CN' ? '在 ant.design 中搜索' : 'Search in ant.design';
    return (
      <header id="header" className={headerClassName}>
@ -269,7 +290,7 @@ class Header extends React.Component {
          </Popover>
        )}
        <Row>
-          <Col xxl={4} xl={5} lg={5} md={5} sm={24} xs={24}>
+          <Col {...colProps[0]}>
            <h1>
              <Link to={utils.getLocalizedPathname('/', isZhCN)} id="logo">
                <img
@ -280,7 +301,7 @@ class Header extends React.Component {
              </Link>
            </h1>
          </Col>
-          <Col xxl={20} xl={19} lg={19} md={19} sm={0} xs={0}>
+          <Col {...colProps[1]}>
            <div id="search-box">
              <SearchOutlined />
              <Input