mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-23 18:50:06 +08:00
docs: fix minor errors and improve readability (#45505)
* docs: fix some grammatical mistakes in values.zh-CN.md Signed-off-by: Tao Zhou <taozhou@umich.edu> * docs: fix punctuation inconsistency and improve readability in icon.zh-CN.md Signed-off-by: Tao Zhou <taozhou@umich.edu> * docs: fix punctuation errors in shadow.zh-CN.md Signed-off-by: Tao Zhou <taozhou@umich.edu> * docs: fix punctuation inconsistency in overview.zh-CN.md Signed-off-by: Tao Zhou <taozhou@umich.edu> * docs: fix an incorrect example in data-format.zh-CN.md Signed-off-by: Tao Zhou <taozhou@umich.edu> * docs: fix punctuation inconsistency and typos in copywriting.zh-CN.md Signed-off-by: Tao Zhou <taozhou@umich.edu> * docs: add spaces around ampersand and fix punctuation inconsistency in buttons.zh-CN.md Signed-off-by: Tao Zhou <taozhou@umich.edu> --------- Signed-off-by: Tao Zhou <taozhou@umich.edu>
This commit is contained in:
Tao Zhou
GitHub
parent
355793c1ec
commit
bc7853eb2d
@ -49,7 +49,7 @@ title: 按钮
|
||||
|
||||
常规按钮类型呈现出不同的**强调程度**，使用者可以据此变化出合适的按钮类型：
|
||||
|
||||
### Do&Don't
|
||||
### Do & Don't
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*di8jS5EWYSIAAAAAAAAAAABkARQnAQ" alt="错误示范" description="不要在一个按钮区放置超过一个主按钮。">
|
||||
@ -201,7 +201,7 @@ title: 按钮
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x7YsTafH5osAAAAAAAAAAABkARQnAQ">
|
||||
</ImagePreview>
|
||||
|
||||
**按主次折叠部分按钮**
|
||||
**按主次折叠部分按钮**：
|
||||
|
||||
<br />
|
||||
|
||||
|
||||
@ -70,8 +70,8 @@ title: 文案
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/sNqQYWEJCAzCxcYCBGYD.png" alt="操作名称和目标页面的标题一致。">
|
||||
</ImagePreview>
|
||||
|
||||
- 描述同一个事物的词汇要保持统一;
|
||||
- 上下文的语法、语种、语序要保持统一;
|
||||
- 描述同一个事物的词汇要保持统一；
|
||||
- 上下文的语法、语种、语序要保持统一；
|
||||
- 操作的名称和目标页面标题的名称保持一致。
|
||||
|
||||
### 重要的信息放在显著位置
|
||||
@ -85,7 +85,7 @@ title: 文案
|
||||
|
||||
> 注：如考虑安全性问题时，隐私信息也可调整为「点击后可见」的方式。
|
||||
|
||||
### 完整、直接得阐述信息
|
||||
### 完整、直接地阐述信息
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/ioBKvBqCNzUwQDyjMiIa.png" alt="正确示范" description="用户可以从中了解了设置后会有什么好处。">
|
||||
@ -192,7 +192,7 @@ title: 文案
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/SiyDiAnuljqDrZgcFiXn.png" alt="正确示范" description="引导用户正确输入内容。">
|
||||
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/ZSgEJWJJeOYBDDsenOuS.png" alt="错误示范" description="不能、不要、请勿都给人命令或强迫的感觉。">
|
||||
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/ZSgEJWJJeOYBDDsenOuS.png" alt="错误示范" description="「不能」、「不要」、「请勿」都给人命令或强迫的感觉。">
|
||||
</ImagePreview>
|
||||
|
||||
多给用户支持与鼓励，不要命令和强迫用户。
|
||||
|
||||
@ -79,7 +79,7 @@ title: 数据格式
|
||||
| 格式 | 如何使用及何时使用 | 例子 |
|
||||
| --- | --- | --- |
|
||||
| 年、月、日 | 中国默认使用 `yyyy-mm-dd` 格式。（[其它国家参考链接）](https://zh.wikipedia.org/wiki/%E5%90%84%E5%9C%B0%E6%97%A5%E6%9C%9F%E5%92%8C%E6%97%B6%E9%97%B4%E8%A1%A8%E7%A4%BA%E6%B3%95)。 | 2019-12-08 |
|
||||
| 专用名词 | 含有月日的专用名词采用阿拉伯数字表示时，应采用间隔号 `·` 将月、日分开，并在数字前后加引号。 | 6.1 儿童节 |
|
||||
| 专用名词 | 含有月日的专用名词采用阿拉伯数字表示时，应采用间隔号 `·` 将月、日分开，并在数字前后加引号。 | “6·1” 儿童节 |
|
||||
| 日期范围 | 在日期或时间范围之间显示一个波浪号 （前后需要空格）。 | 2018-12-08 ～ 2019-12-07 |
|
||||
|
||||
**时间格式**：默认使用二十四小时制：
|
||||
|
||||
@ -6,7 +6,7 @@ title: 图标
|
||||
|
||||
图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。在我们的企业级应用设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上在图形素材极度丰富并且便于获取的今天，在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。Ant Design 相信一整套优质的图标对于设计质量的影响是非常巨大的，这考验着设计师的协作能力，以及对图形塑造的系统性思维，同时也能反映一个团队对于细节的追求。
|
||||
|
||||
Ant Design 在"确定"和"自然"的设计价值观影响之下，对全套的基础系统图标进行了改造，现在大家可以在我们网站上直接查看并使用新版的图标，同时在这里将我们的系统性思路分享给大家，抛砖引玉，期待有更多的设计师参与到这个寂寞的微观世界中来，一起把图形设计这件事做好。
|
||||
Ant Design 在「确定」和「自然」的设计价值观影响之下，对全套的基础系统图标进行了改造，现在大家可以在我们网站上直接查看并使用新版的图标，同时在这里将我们的系统性思路分享给大家，抛砖引玉，期待有更多的设计师参与到这个寂寞的微观世界中来，一起把图形设计这件事做好。
|
||||
|
||||
[查看图标库](/components/icon-cn)
|
||||
|
||||
@ -18,7 +18,7 @@ Ant Design 在"确定"和"自然"的设计价值观影响之下，对全套的
|
||||
|
||||
## 设计原则
|
||||
|
||||
Ant Design 的图标设计原则源自"确定"和"自然"，落实到图标设计领域，一共有四个，他们分别为：
|
||||
Ant Design 的图标设计原则源自「确定」和「自然」，落实到图标设计领域，一共有四个，他们分别为：
|
||||
|
||||
- **准确：** 设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。
|
||||
- **简单：** 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。
|
||||
@ -57,7 +57,7 @@ Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目
|
||||
|
||||
## 图标设计指引
|
||||
|
||||
根据"确定性"和"自然"的价值观，当构图含义明确之后，图标设计所追求的便是秩序之美。Ant Design 的图标主要通过四方面去实现"秩序美"，分别是：形式、韵律、平衡以及辨识。
|
||||
根据「确定性」和「自然」的价值观，当构图含义明确之后，图标设计所追求的便是秩序之美。Ant Design 的图标主要通过四方面去实现「秩序美」，分别是：形式、韵律、平衡以及辨识。
|
||||
|
||||
### 1、形式
|
||||
|
||||
@ -91,7 +91,7 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/EycXTskdagLPlYMTvfdC.png" alt="圆角">
|
||||
</div>
|
||||
|
||||
- **三角：** 新版图标的角度受到美式战斗机 F-14 tomcat 的启发，将常用的角度定在约 76 度。在日常设计中，多数系统图标的角度都可以从 76 度这个数值出发，根据实际情况进行灵活的应用。
|
||||
- **三角：** 新版图标的角度受到美式战斗机 F-14 Tomcat 的启发，将常用的角度定在约 76 度。在日常设计中，多数系统图标的角度都可以从 76 度这个数值出发，根据实际情况进行灵活的应用。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WWnwBEQKIOhIeqbsIHZe.png" alt="三角">
|
||||
@ -154,7 +154,7 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
|
||||
|
||||
### 4、辨识
|
||||
|
||||
辨识度是一套图标具备的可被感知的特色，通常和系统本身的品牌基因相关。Ant Design 的系统图标在这一次除了遵循"确定"和"自然"这两块价值观，在辨识度这一块也做了两处小尝试。
|
||||
辨识度是一套图标具备的可被感知的特色，通常和系统本身的品牌基因相关。Ant Design 的系统图标在这一次除了遵循「确定」和「自然」这两块价值观，在辨识度这一块也做了两处小尝试。
|
||||
|
||||
- **让科技有温度：** 通过对于图形圆角的定义，将过于圆润的圆角（72）调整至（32），在视觉效果上令图标看起来更为坚硬和理性（对应科技感），但又不至于太过尖锐（有温度）。
|
||||
|
||||
@ -198,4 +198,4 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
|
||||
|
||||
## 写在最后
|
||||
|
||||
图标的设计是 UI 设计中非常容易被忽略的环节，建立优秀的图形体系也不是一、二个设计人员的事，需要整个团队在设计前、设计中以及设计后都能够达成共识并且通力合作去完成共建。本次图标的升级，仅仅是一个开始。我们会建议在调用图标时，考虑具体业务对于图形化寄予的期望，以及用户操作时的心智模型等因素，结合实际情况做调用和适当的二次设计。
|
||||
图标的设计是 UI 设计中非常容易被忽略的环节，建立优秀的图形体系也不是一两个设计人员的事，需要整个团队在设计前、设计中以及设计后都能够达成共识并且通力合作去完成共建。本次图标的升级，仅仅是一个开始。我们建议在调用图标时，考虑具体业务对于图形化寄予的期望，以及用户操作时的心智模型等因素，结合实际情况做调用和适当的二次设计。
|
||||
|
||||
@ -31,6 +31,6 @@ title: 概览
|
||||
|
||||
我们与工程师合作，将设计模式转化为可重用的代码，最大限度地提高您的生产力和沟通效率。
|
||||
|
||||
- [Ant Design Pro](https://pro.ant.design/)：具有 20 多个模板和 10 多个业务组件的开箱即用解决方案
|
||||
- [Ant Design Pro](https://pro.ant.design/)：具有 20 多个模板和 10 多个业务组件的开箱即用解决方案。
|
||||
- [React 官方实现](/components/overview-cn)：Ant Design 的 React UI 库拥有 60 多个基础组件。
|
||||
- [Axure 设计库](http://library.ant.design/)：代码中包含 Axure 资源包，使您的原型看起来像一个视觉草稿，包括模板、组件等。
|
||||
|
||||
@ -20,7 +20,7 @@ title: 阴影
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*li3zQbxRuOMAAAAAAAAAAABkARQnAQ" alt="高度">
|
||||
</div>
|
||||
|
||||
**第 1 层**: 物体位于低层级，此时物体被操作(悬停、点击等)触发为悬浮状态，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中，如：卡片 hover 等；
|
||||
**第 1 层**: 物体位于低层级，此时物体被操作（悬停、点击等）触发为悬浮状态，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中，如：卡片 hover 等；
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mXnoSI8MWuEAAAAAAAAAAABkARQnAQ" alt="高度">
|
||||
@ -61,7 +61,7 @@ title: 阴影
|
||||
- 阴影向左：主要应用于右边导航栏、抽屉组件或固定表格栏
|
||||
- 阴影向右：主要应用于左边导航栏、抽屉组件或固定表格栏
|
||||
|
||||
阴影是模拟的真实世界的反馈，Ant Design 为了更符合真实阴影，在 4.0 中采用了三层阴影的表达方式，让阴影更柔和，更符合真实状态
|
||||
阴影是模拟的真实世界的反馈，Ant Design 为了更符合真实阴影，在 4.0 中采用了三层阴影的表达方式，让阴影更柔和，更符合真实状态。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1oijTJh2HEIAAAAAAAAAAABkARQnAQ" alt="阴影值">
|
||||
|
||||
@ -34,7 +34,7 @@ Ant Design 设计价值观为设计者提供评价设计好坏的内在标准，
|
||||
界面是用户与系统交互的媒介，是手段而非目的。在追求「自然」交互基础上，通过 Ant Design 创造的产品界面应是高确定性、低合作熵的状态。
|
||||
|
||||
- **设计者确定**：企业级产品都是分工合作的产物，参与者越多合作熵越高，这是一切设计工作低效、产品系统不易维护的来源。通过探索设计规律、模块化设计思路，来为设计者提供足够精简的设计规则、组件、模式等，赋能设计者、降低合作熵。
|
||||
- 保持克制： 能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。
|
||||
- 保持克制： 能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de Saint-Exupéry 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。
|
||||
- 面向对象的方法： 探索设计规律，并将其抽象成「对象」，增强界面设计的灵活性和可维护性，同时也减少「设计者」的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版。
|
||||
- 模块化设计： 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板，节约无谓的设计且保持系统一致性，让「设计者」把创造力专注在最需要的地方。
|
||||
- **用户确定**：用户日常工作是通过诸多企业级产品的协同来完成的，除了考虑单一产品的设计一致性，更应当在跨产品、跨终端、跨系统间保持良好的确定性。一致的外观和交互，保持面向用户的熟悉感，能提升易学性，降低认知和操作成本，提升工作效率。
|
||||
@ -45,7 +45,7 @@ Ant Design 设计价值观为设计者提供评价设计好坏的内在标准，
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*xOYlR4e8ihIAAAAAAAAAAABkARQnAQ" alt="意义感" />
|
||||
</div>
|
||||
|
||||
一个产品或功能被设计者创造出来不只是用户的需要，而更多是承载用户的某个工作使命。产品设计应充分站在工作视角，促成用户使命的达成；同时，在「自然」、「确定」之上，兼顾用户的人性需求，为工作过程创造富有意义感的人机交互。
|
||||
一个产品或功能被设计者创造出来不只是出于用户的需要，而更多地是承载用户的某个工作使命。产品设计应充分站在工作视角，促成用户使命的达成；同时，在「自然」、「确定」之上，兼顾用户的人性需求，为工作过程创造富有意义感的人机交互。
|
||||
|
||||
- **结果的意义：明确目标，即时反馈**。洞悉工作目标，根据使用流程拆解明确的子目标，让每个交互行为都围绕着主目标的达成；为每个行为，辅以恰当、即时的反馈，让用户对操作结果了然于胸。此外，可通过情感化设计，适度安抚用户负面情感，强化用户正面情感。
|
||||
- **过程的意义：挑战适中，全情投入**。调整不同场景下的工作难度，让功能适时适地触发，以匹配用户能力；如无必要，勿增实体，不分散用户注意力，让用户专注于任务达成，而非界面。让当下的工作既不过于简单，亦不过于复杂，挑战适中，并随着用户能力的成长提出更高的挑战，能让用户持续沉浸在工作的心流中，获得富有成就感的工作体验。
|
||||
@ -58,5 +58,5 @@ Ant Design 设计价值观为设计者提供评价设计好坏的内在标准，
|
||||
|
||||
企业级产品功能的增长与用户系统角色的演变相生相伴。设计者应为自己创造的产品负责，提升功能、价值的可发现性。用发展的眼光做设计，充分考虑人、机两端的共同生长。
|
||||
|
||||
- **价值连接**：产品的增长依赖于用户的群体扩大和深度使用，而用户的成长又依赖于产品功能的壮大。设计者应建立系统设计思维，洞悉产品功能的价值，探索用户在不同场景下的需求，在价值和需求间建立连接。让产品价值被发现，帮助用户建立更有效、更高效的工作方式。
|
||||
- **人机共生**：产品功能和用户需求的更多连接，让人机互动更加紧密，用户和系统共生。产品设计时，不应将用户和系统独立开来，应作为一个动态发展的共同体来思考，确保其足够的灵活、包容，充满生命力。
|
||||
- **价值连接**：产品的增长依赖于用户的群体扩大和深度使用，而用户的成长又依赖于产品功能的完善。设计者应建立系统设计思维，洞悉产品功能的价值，探索用户在不同场景下的需求，在价值和需求间建立连接。让产品价值被发现，帮助用户建立更有效、更高效的工作方式。
|
||||
- **人机共生**：产品功能和用户需求的更多连接，让人机互动更加紧密，用户和系统共生。在进行产品设计时，不应将用户和系统独立开来，而应将两者作为一个动态发展的共同体来思考，确保其足够的灵活、包容，充满生命力。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user