diff --git a/docs/spec/alignment.en-US.md b/docs/spec/alignment.en-US.md index 7968665d06..830c95f08a 100644 --- 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 --- diff --git a/docs/spec/alignment.zh-CN.md b/docs/spec/alignment.zh-CN.md index a13b52679e..93f2ad5c65 100644 --- 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 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，「整体不同于其部件的总和」。——摘自「维基百科」 --- diff --git a/docs/spec/cases.zh-CN.md b/docs/spec/cases.zh-CN.md index 5343bdd356..fd8c2cde3f 100644 --- 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) diff --git a/docs/spec/colors.en-US.md b/docs/spec/colors.en-US.md index 9e85783025..60ae0d7470 100644 --- 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 --- diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index 3ad6946817..d3bc1d8b5f 100644 --- 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(, mou ### 数据可视化色板（敬请期待） -数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 『有效、清晰、准确、美』的原则产生的。 +数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 「有效、清晰、准确、美」的原则产生的。 ### 色板生成工具 diff --git a/docs/spec/contrast.en-US.md b/docs/spec/contrast.en-US.md index d6c6da2244..24c4a0f537 100644 --- 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」. diff --git a/docs/spec/contrast.zh-CN.md b/docs/spec/contrast.zh-CN.md index 75583561c3..71c1a50eec 100644 --- a/docs/spec/contrast.zh-CN.md +++ b/docs/spec/contrast.zh-CN.md @@ -22,7 +22,7 @@ title: 对比
-不区分主次的示例 +不区分主次的示例 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。 @@ -46,4 +46,4 @@ title: 对比 通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。 -常见类型有『静态对比』、『动态对比』。 +常见类型有「静态对比」、「动态对比」。 diff --git a/docs/spec/copywriting.md b/docs/spec/copywriting.md index 8e7e160da0..b37720e805 100644 --- a/docs/spec/copywriting.md +++ b/docs/spec/copywriting.md @@ -28,13 +28,13 @@ title: ### 明确表述立足点 正确示范 -错误示范 +错误示范 在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。 既然以用户为中心，文案就应该尽量以用户为主体来写作。 -> 注：当用户向后台反馈问题、提出建议或申诉时，使用『我们』是合理的语境，例如『我们将会审核你的申诉』。 +> 注：当用户向后台反馈问题、提出建议或申诉时，使用「我们」是合理的语境，例如「我们将会审核你的申诉」。 ### 精简语句 @@ -52,12 +52,12 @@ title: 使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。 -间接、暧昧模糊的说法，生僻和过于『文雅』的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。 +间接、暧昧模糊的说法，生僻和过于「文雅」的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。 ### 表述一致 正确示范 -错误示范 +错误示范 正确示范 错误示范 @@ -75,7 +75,7 @@ title: 让用户第一眼看到最重要的内容，不用到段落中寻找。 -> 注：如考虑安全性问题时，隐私信息也可调整为『点击后可见』的方式。 +> 注：如考虑安全性问题时，隐私信息也可调整为「点击后可见」的方式。 ### 完整、直接得阐述信息 @@ -86,8 +86,8 @@ title:
-正确示范 -错误示范 +正确示范 +错误示范 报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。 @@ -100,7 +100,7 @@ title: 错误示范 正确示范 -错误示范 +错误示范 @@ -111,12 +111,12 @@ title: - + - + @@ -136,7 +136,7 @@ title: - +
其他 其它『其他』的应用范围更广「其他」的应用范围更广
抱歉 对不起如果是我们系统造成的结果，可以使用『抱歉』，如果是用户自己造成的结果，不能使用。如果是我们系统造成的结果，可以使用「抱歉」，如果是用户自己造成的结果，不能使用。
验证码
此 该当要表达当前事物时，『此』更加明确。当要表达当前事物时，「此」更加明确。
@@ -153,16 +153,16 @@ title: ### 拉近彼此的距离 正确示范 -错误示范 +错误示范 -直接使用『你』、『我』来和用户对话，与用户建立亲密感。避免使用『您』，让用户感觉太过疏远。 +直接使用「你」、「我」来和用户对话，与用户建立亲密感。避免使用「您」，让用户感觉太过疏远。
正确示范 -错误示范 +错误示范 -> 注：不要在同一个句式中混用『你』和『我』，交互中指代混乱会让用户相当纠结。 +> 注：不要在同一个句式中混用「你」和「我」，交互中指代混乱会让用户相当纠结。 ### 友好、尊重用户 @@ -176,7 +176,7 @@ title: ### 表述不应过于极端 正确示范 -错误示范 +错误示范 不要使用过于绝对的表述，这样会让用户觉得不适。 @@ -242,7 +242,7 @@ title: 感叹号会让文案显得过于激动，容易让气氛变得过于紧张。 -> 注：当向用户表达问候或祝贺时，使用『！』是合理的语境，例如『欢迎回到社区！』。 +> 注：当向用户表达问候或祝贺时，使用「！」是合理的语境，例如「欢迎回到社区！」。 ### 基本标点规范 @@ -276,7 +276,7 @@ title: 省略号 … - 使用半角的『…』为省略号。 + 使用半角的「…」为省略号。 隐藏符号 diff --git a/docs/spec/data-display.en-US.md b/docs/spec/data-display.en-US.md index bdb69b18eb..256042fe78 100644 --- 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 --- diff --git a/docs/spec/data-display.zh-CN.md b/docs/spec/data-display.zh-CN.md index a7bcec49b8..c9185ad63a 100644 --- 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） - + 卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。 > 注： > > 1. 卡片通常根据栅格进行排列，建议一行最多不超过四个 -> 2. 在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如『Ant Design 适用于中台…』 +> 2. 在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如「Ant Design 适用于中台…」 --- @@ -64,7 +65,7 @@ title: 数据展示 -『树形控件』通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。 +「树形控件」通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。 用户可同时浏览与处理多个树状层级的内容。适用于任何需要通过层级组织的信息场景，如文件夹、组织架构、生物分类、国家地区等等。 diff --git a/docs/spec/data-entry.en-US.md b/docs/spec/data-entry.en-US.md index ff6e7b4235..201d57aa85 100644 --- 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 --- diff --git a/docs/spec/data-entry.zh-CN.md b/docs/spec/data-entry.zh-CN.md index c6f3bcbaa9..7a9b9feef6 100644 --- 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）默认放于输入区域的左侧，当文案过长或英文环境下也可放于在上方，但同个系统中需保持统一。 - + @@ -80,14 +77,14 @@ title: -用于切换单个选项的状态。『开关』的内联标签应该显示清楚，例如：禁用/启用，不允许/允许等。 +用于切换单个选项的状态。「开关」的内联标签应该显示清楚，例如：禁用/启用，不允许/允许等。
正确示范 -错误示范 +错误示范 -> 注：当用户切换『开关』按钮将直接触发状态改变。 +> 注：当用户切换「开关」按钮将直接触发状态改变。 ### 选择列表（Dropdown） @@ -110,7 +107,7 @@ title: -> 注：在不要求精准数值的场景下用户使用『连续滑块』可得到更灵活便捷的操作；在用户需要精确数值时，可与『数字输入框』搭配使用。 +> 注：在不要求精准数值的场景下用户使用「连续滑块」可得到更灵活便捷的操作；在用户需要精确数值时，可与「数字输入框」搭配使用。 ### 穿梭框（Transfer） diff --git a/docs/spec/direct.en-US.md b/docs/spec/direct.en-US.md index 7cf68b3326..9a92a02193 100644 --- 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 -Example of click to edit +Example of click to edit 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.
-Example of Text link/Icon Edit -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.
-Example of Multi-Field Inline Edit +Example of Multi-Field Inline Edit 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.
@@ -38,7 +38,7 @@ Multi-Field Inline Edit ## Drag and Drop -Example of Drag and Drop List +Example of Drag and Drop List Drag and Drop List diff --git a/docs/spec/direct.zh-CN.md b/docs/spec/direct.zh-CN.md index 0375816056..a41d52afc0 100644 --- 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：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。 --- ## 页内编辑 -单击编辑示例 +单击编辑示例 单字段行内编辑 -当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。 +当「易读性」远比「易编辑性」重要时，可以使用「单击编辑」。
-文字链/图标编辑示例 +文字链/图标编辑示例 -当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。 +当「易读性」为主，同时又要突出操作行的「易编辑性」时，可使用「文字链/图标编辑」。
-多字段行内编辑示例 +多字段行内编辑示例 多字段行内编辑 -> 注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的[『解释刚刚发生了什么』](../docs/spec/transition#解释刚刚发生了什么)来消除这种视觉影响。 +> 注：在「多字段行内编辑」的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要「巧用过渡」原则中的[「解释刚刚发生了什么」](../docs/spec/transition#解释刚刚发生了什么)来消除这种视觉影响。
@@ -37,7 +37,7 @@ title: 直截了当 ## 利用拖放 -拖放列表示例 +拖放列表示例 拖放列表 diff --git a/docs/spec/font.en-US.md b/docs/spec/font.en-US.md index 86c7c6db33..bffe6d32c4 100644 --- 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 --- diff --git a/docs/spec/font.zh-CN.md b/docs/spec/font.zh-CN.md index 079e9bb820..0a628c4325 100644 --- 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. **少即是多：**在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。 diff --git a/docs/spec/icon.en-US.md b/docs/spec/icon.en-US.md index 35f457859d..f1f6d94515 100644 --- 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 --- diff --git a/docs/spec/illustration.zh-CN.md b/docs/spec/illustration.zh-CN.md index db47ce1d31..d791ffb8bd 100644 --- a/docs/spec/illustration.zh-CN.md +++ b/docs/spec/illustration.zh-CN.md @@ -1,10 +1,8 @@ --- order: 5 -title: 插画 +title: 图形化 --- -# HiTu 图形化 -
General
@@ -30,7 +28,7 @@ title: 插画 基于科技，确定，自然，未来的四层品牌策略，我们将抽象的概念具象化。代表的技术底层的科技能力为产品，体验和未来提供技术支撑和可能性。所以图例一一对应，我们具象化了人物和产品，体验及未来之间的关系。他们之间不同的组合方式可以满足不同的业务场景诉求。
- Pyramid model + Pyramid model
## 颜色 @@ -75,7 +73,7 @@ title: 插画 HiTu 骨骼系统 -人物姿态复用 +人物姿态复用 有了基础的人物设计，我们将人物进行分解，然后搭配设计好的骨骼系统。来为人物增加各种姿态动作的复用和延展。 @@ -85,7 +83,7 @@ title: 插画 - +根据业务场景设计的元素组件 记忆点源于与众不同，专业感源于整齐划一。元素组件指代的是业务场景中一些业务元素，状态元素图形化的世界缤纷多变，我们希望在保持统一性的同时不去限时设计者的创意空间，元素组件的设计上，我们为了保持一定的韵律感，推荐设计师在 1024\*1024 的网格中绘制组件，且圆角的大小保持 8 的倍数关系。 diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md index 011265b869..2833d03b30 100644 --- 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) diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md index 9e0ac5759a..2c10b4a6bd 100644 --- 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)，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。 --- diff --git a/docs/spec/invitation.zh-CN.md b/docs/spec/invitation.zh-CN.md index d2ffd80e8e..1a87a6c22d 100644 --- 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: 提供邀请 未完成邀请示例 -引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。 +引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。常见类型：「文本邀请」、「白板式邀请」、「未完成邀请」。
-漫游探索邀请示例 +漫游探索邀请示例 -漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。 +漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是「创口贴」，仅通过它不能解决界面交互的真正问题。 > 注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。 @@ -47,15 +47,15 @@ title: 提供邀请
-悬停邀请示例 1 +悬停邀请示例 1 -悬停邀请示例 2 +悬停邀请示例 2 悬停邀请：在鼠标悬停期间提供邀请。
-推论邀请示例 +推论邀请示例 推论邀请：用于交互期间，合理推断用户可能产生的需求。 diff --git a/docs/spec/layout.en-US.md b/docs/spec/layout.en-US.md index 5be533409c..1fc8b978ff 100644 --- 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 --- diff --git a/docs/spec/layout.zh-CN.md b/docs/spec/layout.zh-CN.md index c1399a1f10..17b83c8d15 100644 --- 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 倍数的双数组通过排列组合的方式可以形成千变万化种可能性，但在无限的可能性之中依然存在着「只是简单的套用数据组合」同「看起来很精妙」的差别。实现合理优雅的界面布局，在对美感的追求之上，还应当结合可用性来看待，对于企业级应用界面布局的探索，我们依然在路上。 diff --git a/docs/spec/lightweight.zh-CN.md b/docs/spec/lightweight.zh-CN.md index 5875acfb73..d26830f7a7 100644 --- a/docs/spec/lightweight.zh-CN.md +++ b/docs/spec/lightweight.zh-CN.md @@ -13,7 +13,7 @@ title: 简化交互 ## 实时可见工具 -实时可见工具示例 --摘自知乎 +实时可见工具示例 --摘自知乎 如果某个操作非常重要，就应该把它放在界面中，并实时可见。 @@ -25,7 +25,7 @@ title: 简化交互 悬停即现工具示例 -如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 +如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
@@ -33,7 +33,7 @@ title: 简化交互 ## 开关显示工具 -开关显示工具示例 +开关显示工具示例 如果某些操作只需要在特定模式时显示，可以通过开关来实现。 @@ -43,7 +43,7 @@ title: 简化交互 ## 可视区域 ≠ 可点击区域 -文字链热区示例 +文字链热区示例 在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。 diff --git a/docs/spec/overview.zh-CN.md b/docs/spec/overview.zh-CN.md index fe84988563..6835fd49d8 100644 --- 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、必填选项。 ## 资源 diff --git a/docs/spec/proximity.en-US.md b/docs/spec/proximity.en-US.md index f44f6bd244..8742fe1762 100644 --- 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 Example of the different vertical distance -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」
-Example of added element +Example of added element -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」. --- diff --git a/docs/spec/proximity.zh-CN.md b/docs/spec/proximity.zh-CN.md index 8cbafba142..89d93d0935 100644 --- a/docs/spec/proximity.zh-CN.md +++ b/docs/spec/proximity.zh-CN.md @@ -13,15 +13,15 @@ title: 亲密性 纵向间距示例 -通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。 +通过「小号间距」、「中号间距」、「大号间距」这三种规格来划分信息层次。
-增加元素示例 +增加元素示例 -在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。 +在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。 -> 注：在 Ant Design 中，`y = 8 + 8 * n`。其中，`n >= 0`，y 是纵向间距，8 是『基础间距』。 +> 注：在 Ant Design 中，`y = 8 + 8 * n`。其中，`n >= 0`，y 是纵向间距，8 是「基础间距」。 --- diff --git a/docs/spec/reaction.zh-CN.md b/docs/spec/reaction.zh-CN.md index f5d115a6fc..aa6c4cac5f 100644 --- 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: 即时反应 ## 查询模式 -确定类目示例 +确定类目示例 不确定类目示例 -自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。 +自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。根据查询结果分类的多少，可以分为「确定类目」、「不确定类目」两种类型。
实时搜索示例 -实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。 +实时搜索：随着用户输入，实时显示搜索结果。「自动完成」、「实时建议」的近亲。
@@ -39,11 +39,11 @@ title: 即时反应 实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。 -> 注：解决错误最好的办法，就是不让错误发生。而『实时预览』就是有效避免错误的好设计。 +> 注：解决错误最好的办法，就是不让错误发生。而「实时预览」就是有效避免错误的好设计。
-渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[『足不出户／渐进式展现』](/docs/spec/stay#流程处理)。 +渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[「足不出户／渐进式展现」](/docs/spec/stay#流程处理)。
@@ -55,7 +55,7 @@ title: 即时反应 页面加载示例 -进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。 +进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。常见的进度指示：「按钮加载」、「表格加载」、「富列表加载」、「页面加载」。可根据操作的量级和重要性，展示不同类型的进度指示。
@@ -65,6 +65,6 @@ title: 即时反应
-定时示例 +定时示例 定时刷新：无需用户介入，定时展示新内容。 diff --git a/docs/spec/reference.zh-CN.md b/docs/spec/reference.zh-CN.md index 43079cb026..f0b683366b 100644 --- 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/) diff --git a/docs/spec/stay.zh-CN.md b/docs/spec/stay.zh-CN.md index ce65a24a2f..e5cde26611 100644 --- a/docs/spec/stay.zh-CN.md +++ b/docs/spec/stay.zh-CN.md @@ -15,25 +15,25 @@ title: 足不出户 ## 覆盖层 -推荐示例 +推荐示例 -推荐示例 +推荐示例 -不推荐示例 +不推荐示例 -二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤销』即可。 +二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可。
-详情覆盖层示例 +详情覆盖层示例 -详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。 +详情覆盖层：一般在列表中，通过用户「悬停」/「点击」某个区块，在当前页加载该条列表项的更多详情信息。 -> 注：使用『悬停』激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层 +> 注：使用「悬停」激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层
-输入覆盖层示例 +输入覆盖层示例 输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。 @@ -59,7 +59,7 @@ title: 足不出户 ## 虚拟页面 -在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。 +在交互过程中，「覆盖层」可以在当前页面上方显示附加内容和交互链接；「嵌入层」可以在页面内部实现同样效果；而「虚拟页面」不局限机械时代的「页面」，可以利用信息时代的特点构建一种新型「页面」。
@@ -67,7 +67,7 @@ title: 足不出户 ## 流程处理 -长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些『流程处理』而言，让用户始终待在同一个页面上则更有必要。 +长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些「流程处理」而言，让用户始终待在同一个页面上则更有必要。
@@ -85,4 +85,4 @@ title: 足不出户 弹出框覆盖层示例 -弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。 +弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。 diff --git a/docs/spec/transition.zh-CN.md b/docs/spec/transition.zh-CN.md index e45067aa0b..ef58bfd3ad 100644 --- a/docs/spec/transition.zh-CN.md +++ b/docs/spec/transition.zh-CN.md @@ -37,7 +37,7 @@ title: 巧用过渡 ## 解释刚刚发生了什么 -