mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

Merge pull request #14742 from zy410419243/comma

Browse Source 
docs: fix wrong usage of comma
This commit is contained in:
Wei Zhu 2019-02-11 11:17:17 +08:00 committed by GitHub
commit de212266c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 62 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/avatar/index.en-US.md
View File

@ -16,4 +16,4 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
| src | the address of the image for an image avatar | string | - |
| srcSet | a list of sources to use for different screen resolutions | string | - |
| alt | This attribute defines the alternative text describing the image | string | - |
| onError | handler when img load error，return false to prevent default fallback behavior | () => boolean | - |
| onError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |

2
components/form/index.en-US.md
View File

@ -152,7 +152,7 @@ To mark the returned fields data in `mapPropsToFields`, [demo](#components-form-
### this.props.form.getFieldDecorator(id, options)
After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause:
After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
1. You shouldn't use `onChange` to collect data, but you still can listen to `onChange`(and so on) events.
2. You cannot set value of form control via `value` `defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` instead.

2
components/input/demo/size.md
View File

@ -11,7 +11,7 @@ title:
## en-US
There are three sizes of an Input box: `large` (40px)、`default` (32px) and `small` (24px).
There are three sizes of an Input box: `large` (40px), `default` (32px) and `small` (24px).
````jsx
import { Input } from 'antd';

2
components/layout/index.en-US.md
View File

@ -43,7 +43,7 @@ The first level navigation is inclined left near a logo, and the secondary menu
- **Enlarge the size of the font**
`12px`、`14px` is a standard font size of navigations，`14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
`12px`, `14px` is a standard font size of navigations, `14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
## Component Overview

2
components/mention/index.en-US.md
View File

@ -64,4 +64,4 @@ When need to mention someone or something.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| children | suggestion content | object | {} |
| value | value of suggestion，the value will insert into input filed while selected | string | "" |
| value | value of suggestion, the value will insert into input filed while selected | string | "" |

4
components/slider/index.en-US.md
View File

@ -18,8 +18,8 @@ To input a value in a range.
| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or \[0, 0] |
| disabled | If true, the slider will not be interactable. | boolean | false |
| dots | Whether the thumb can drag over tick only. | boolean | false |
| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max] ，each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
| included | Make effect when `marks` not null, `true` means containment and `false` means coordinative | boolean | true |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
| max | The maximum value the slider can slide to | number | 100 |
| min | The minimum value the slider can slide to. | number | 0 |
| range | dual thumb mode | boolean | false |

2
components/table/index.en-US.md
View File

@ -113,7 +113,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' |
| className | className of this column | string | - |
| colSpan | Span of this column's title | number | |
| dataIndex | Display field of the data record, could be set like `a.b.c`、`a[0].b.c[1]` | string | - |
| dataIndex | Display field of the data record, could be set like `a.b.c`, `a[0].b.c[1]` | string | - |
| defaultSortOrder | Default order of sorted values | 'ascend' \| 'descend' | - |
| filterDropdown | Customized filter overlay | ReactNode | - |
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |

2
components/upload/index.en-US.md
View File

@ -57,7 +57,7 @@ When uploading state change, it returns:
```js
{
uid: 'uid', // unique identifier，negative is recommend，to prevent interference with internal generated id
uid: 'uid', // unique identifier, negative is recommend, to prevent interference with internal generated id
name: 'xx.png' // file name
status: 'done', // options：uploading, done, error, removed
response: '{"status": "success"}', // response from server

2
docs/react/customize-theme.en-US.md
View File

@ -69,7 +69,7 @@ Note that do not exclude antd package in node_modules when using less-loader.
### Customize in roadhog or Umi
You can easily use `theme` field in [.webpackrc](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18) (roadhog) or [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45) (Umi) file of your project root directory if you are using [roadhog](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/)，which could be a object or a javascript file path.
You can easily use `theme` field in [.webpackrc](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18) (roadhog) or [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45) (Umi) file of your project root directory if you are using [roadhog](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/), which could be a object or a javascript file path.
```js
"theme": {

4
docs/react/introduce.en-US.md
View File

@ -48,7 +48,7 @@ You can subscribe to this feed for new version notifications: https://github.com
### Using npm or yarn
**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
**We recommend using npm or yarn to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
```bash
$ npm install antd --save
@ -58,7 +58,7 @@ $ npm install antd --save
$ yarn add antd
```
If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
### Import in Browser

4
docs/spec/alignment.en-US.md
View File

@ -4,7 +4,7 @@ order: 2
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.
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
@ -32,4 +32,4 @@ Colon alignment(right-align) can encircle the content into a certain range. User
<img class="preview-img good" align="right" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/bIJAZcUmaRxJeFxZJwUp.png">
<img class="preview-img bad" align="right" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/zUmANVIhBanDnlyOhvaH.png">
To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal point; meanwhile all numbers should be right-aligned. 。
To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal point; meanwhile all numbers should be right-aligned.

6
docs/spec/contrast.en-US.md
View File

@ -15,7 +15,7 @@ Contrast is one of the effective ways to add visual interest to your page, and t
<img class="preview-img good" align="right" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/DXDSNzVmrVwVRJCTyaTH.png">
<img class="preview-img bad" align="right" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/tMlELOuJrJrrYtTAbnlu.png">
In order to help user make a quick operation (something like the form，modal), a more important operation or a operation with higher frequency would be emphasized.
In order to help user make a quick operation (something like the form, modal), a more important operation or a operation with higher frequency would be emphasized.
> Notes: ways of emphasizing are not just to intensify the key item. It could also weaken the other items.
@ -23,7 +23,7 @@ In order to help user make a quick operation (something like the form，modal),
<img class="preview-img" align="right" alt="Example of ignoring the primary and secondary sequence" description="Accept and Reject should use default button, for UI should not affect user's decision." src="https://gw.alipayobjects.com/zos/rmsportal/gniiMTPEHagxaelGBjAe.png">
When there’s something needs users to make decision prudently, the system should remain neutral. It shouldn’t make the decision for users or lead them to make judgement.
When there's something needs users to make decision prudently, the system should remain neutral. It shouldn't make the decision for users or lead them to make judgement.
---
@ -41,7 +41,7 @@ Taking advantage of changing the typesetting, the typeface and the size, we high
<img class="preview-img" align="right" alt="Example of static contrast" description="Points with various colors would be used to show different states. " src="https://gw.alipayobjects.com/zos/rmsportal/PMVYKxaLBApJFyXAxkHy.png">
<img class="preview-img" align="right" alt="Example of dynamic contrast" description="When the mouse doesn’t be moved, this item and other items would show different visual effects obviously, which would influence the user’s operation." src="https://gw.alipayobjects.com/zos/rmsportal/WXNjOhgQDMnNoieFrFMP.png">
<img class="preview-img" align="right" alt="Example of dynamic contrast" description="When the mouse doesn't be moved, this item and other items would show different visual effects obviously, which would influence the user's operation." src="https://gw.alipayobjects.com/zos/rmsportal/WXNjOhgQDMnNoieFrFMP.png">
Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better

4
docs/spec/direct.en-US.md
View File

@ -29,7 +29,7 @@ If the priority is given to 『readability』 and the 『editability』 of opera
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

16
docs/spec/icon.en-US.md
View File

@ -13,7 +13,7 @@ An icon is a graphical representation of meaning. Icons can be used to express a
## System Icons
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png" alt="System Icons">
System icons are often used to represent commonly used operations, such as: save, edit, delete. Ant Design also includes icons to represent file types and state.
@ -21,7 +21,7 @@ System icons are often used to represent commonly used operations, such as: save
### Key Contour Lines
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/beTZeZjJBVuhMyTOhebs.png" alt="Ant Design's grid and key contour lines">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/beTZeZjJBVuhMyTOhebs.png" alt="Ant Design's grid and key contour lines" alt="Key Contour Lines">
Contour lines play an important role in making various icons with the same visual effect.
@ -67,13 +67,13 @@ Always keep a simple, flat style. Icons should not have a sense of depth nor a l
### Naming Conventions
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/NFOvbdbVWeeEqOkdUfVB.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/NFOvbdbVWeeEqOkdUfVB.png" alt="Naming Conventions">
Uniform naming conventions make finding icons faster and easier. For example, icons with a surrounding outline have a uniform "-o" suffix.
### Icon Sizing
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jAuedlyhNIDyOIZTqbqN.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jAuedlyhNIDyOIZTqbqN.png" alt="Icon Sizing">
Icons should be scaled according to the text size, according to the Ant Design specification.
@ -81,7 +81,7 @@ For example, icons inline with 12pt font should be 12px in size with 8px of spac
### Color
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LxGLhtnwvCqZWYqGDAAr.png" description="Colors demonstrated - @Black = #000000、@White = #FFFFFF、@Blue-6 = #1890FF">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LxGLhtnwvCqZWYqGDAAr.png" description="Colors demonstrated - @Black = #000000, @White = #FFFFFF, @Blue-6 = #1890FF" alt="Color">
The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly).
@ -89,7 +89,7 @@ The color of the icon should be consistent the color of the surrounding copy, un
## Business Icons
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EADAnRecKSTxvpxPzKoq.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EADAnRecKSTxvpxPzKoq.png" alt="Business Icons">
Business icons, unlike system icons, do not themselves have functional operations, but rather an abstraction that assists with copywriting. Compared to the system icon, the business icon is more rich in the details of the design, the size of the use of relatively large.
@ -97,12 +97,12 @@ Business icons, unlike system icons, do not themselves have functional operation
### Icon Sizing
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uwAgfciGszhdiVlMSBXK.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uwAgfciGszhdiVlMSBXK.png" alt="Icon Sizing">
In normal use, there are 32px (minimum size), 48px and 64px (maximum size) three options.
### Color
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wUxhTxZlHoTxDvneWBWO.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wUxhTxZlHoTxDvneWBWO.png" alt="Color">
There are two kinds of business icon, single-color (neutral color) and double-color (neutral color + primary color), the area of primary color does not exceed 40% of the entire icon.

42
docs/spec/icon.zh-CN.md
View File

@ -30,13 +30,13 @@ Ant Design 的图标设计原则源自"确定"和"自然"，落实到图标设
- **Artboard：** Ant Design 的系统图标都是按照 1024 x 1024 的画板进行制作的：
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/mrrFTiCWOyCsVOgAIBqg.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/mrrFTiCWOyCsVOgAIBqg.png" alt="设计规格">
</div>
- **出血位：** 在图标的设计过程中预留出血位的做法，可以预防某些造型的图标在具体应用时出现边缘被切掉的风险；同时在设计过程中，也为设计师把握图标间平衡留下了进退的余地。新版的设计规格在图形的外围预留了 64px 的出血位，多数的图标在设计中我们都不建议超过这个区域。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/FNXMpWnyvYfydiSnPCYg.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/FNXMpWnyvYfydiSnPCYg.png" alt="出血位">
</div>
## 分层
@ -44,7 +44,7 @@ Ant Design 的图标设计原则源自"确定"和"自然"，落实到图标设
Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目的除了让设计师实现有序的文档管理之外，更多的是便于团队间文档的传递，统一的设计框架像是无形的共识，可以让彼此间的理解得到进一步的提升。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/bVtUZqDRbGuaoVbwYqua.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/bVtUZqDRbGuaoVbwYqua.png" alt="分层">
</div>
## 轮廓线与模版
@ -52,7 +52,7 @@ Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目
我们对设计模版进行了优化，根据出血位的尺寸，调整轮廓线的宽高，同时增加两个等边三角形和一个圆，这些都是图标设计中最常用的基本形式，设计师可以快速的调用并在此基础上做变形。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ycDkLxfAqjnRsWZuHvik.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ycDkLxfAqjnRsWZuHvik.png" alt="轮廓线与模版">
</div>
## 图标设计指引
@ -64,7 +64,7 @@ Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目
形式，是构成一个图形最初始的结构。Ant Design 整套基础图标基本上都是由圆、方、三角这样的图形演变而成的。追求图形初始结构的理性，而非直觉式的设计，是秩序之美的第一步。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/HpESYoDACMTUWLEqtBRb.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/HpESYoDACMTUWLEqtBRb.png" alt="形式">
</div>
### 2、韵律
@ -76,31 +76,31 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
- **点：** 点是很多图形中都会出现的元素。Ant Design 会在一套图标中挖掘同一元素的规律，同时对其进行克制的运用。我们对于点的尺寸选择上会保持 16 的倍数这一原则。比如，在点的选择中，新版的图标最常用的是四种尺寸的点，分别为 80、96、112、128。当出现特殊尺寸的需求时，会按照 16 的倍数进行延展。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/qOHVVNiWAiQoHRjkuntb.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/qOHVVNiWAiQoHRjkuntb.png" alt="点">
</div>
- **线：** 线条也是非常通用的元素之一。新版图标在线条之间的关系采用 8 倍数原则，从小到大以 8 的规律递增。常用的规格也是 4 种，分别为 56、64、72、80。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WqaPFOssksoRsfSEMYgc.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WqaPFOssksoRsfSEMYgc.png" alt="线">
</div>
- **圆角：** 圆角的规格采取的也是 8 倍数原则，最常用的是 3 种，分别是 8，16、32，它们之间是两倍数的关系。而图标内部空间的圆角则保持直角的处理方式。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/EycXTskdagLPlYMTvfdC.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/EycXTskdagLPlYMTvfdC.png" alt="圆角">
</div>
- **三角：** 新版图标的角度受到美式战斗机 F-14 tomcat 的启发，将常用的角度定在约 76 度。在日常设计中，多数系统图标的角度都可以从 76 度这个数值出发，根据实际情况进行灵活的应用。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WWnwBEQKIOhIeqbsIHZe.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WWnwBEQKIOhIeqbsIHZe.png" alt="三角">
</div>
除了定义角度，我们对新图标中实心箭头的规格也做了收敛，在顶角大约保持 76 度的基础上，最常用的为 4 种，他们的宽度保持 8 倍数的原则，间隔为 24 ：
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jOZvfCdFTfpFxSkJwiMF.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jOZvfCdFTfpFxSkJwiMF.png" alt="实心箭头">
</div>
基本元素在使用上的规格可以用下面的表格来总结，建议设计师在一套图标的设计中尽量保持克制的态度。
@ -121,13 +121,13 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
- 保持类似图标在构造上的一致性也是建立图标体系节奏感的一种方法。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jpsoohmwvVgwSsblgPbc.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jpsoohmwvVgwSsblgPbc.png" alt="节奏感">
</div>
- 此外，在单个图标的设计过程中，也建议适当理性的看待各元素间的比例关系，而非直觉式的开展绘制。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/XorcLWyrefyAmYagUpgY.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/XorcLWyrefyAmYagUpgY.png" alt="元素间的比例关系">
</div>
### 3、平衡
@ -137,19 +137,19 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
- **弯曲的线条会比竖直的线条看起来细**。 因此在圆形的外边框上我们会适当的对 72px 的规格进行 4 px 的微调。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/GsrZFQbjQXwQoDRMnhKX.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/GsrZFQbjQXwQoDRMnhKX.png" alt="弯曲的线条会比竖直的线条看起来细">
</div>
- **倾斜的线条也会比竖直的线条看起来细**。 因此倾斜的线条也会进行 4 px 的微调。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/wfRqkxabWTKdQgiVSzKh.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/wfRqkxabWTKdQgiVSzKh.png" alt="倾斜的线条也会比竖直的线条看起来细">
</div>
- **图形的留白空间也是值得推敲的课题**。 当某些图形的留白不足时，可以通过调节线条的粗细来达到视觉重量上的平衡。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/fVyyVdYqEXyjmxlWLtVw.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/fVyyVdYqEXyjmxlWLtVw.png" alt="图形的留白空间也是值得推敲的课题">
</div>
### 4、辨识
@ -159,13 +159,13 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
- **让科技有温度：** 通过对于图形圆角的定义，将过于圆润的圆角（72）调整至（32），在视觉效果上令图标看起来更为坚硬和理性（对应科技感），但又不至于太过尖锐（有温度）。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/aPRvNTmHNYxBoOeijhTM.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/aPRvNTmHNYxBoOeijhTM.png" alt="让科技有温度">
</div>
- **让图形有生命：** 在部分图标设计中，会适度的注入拟人化的元素，令图标具备生命力。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/scJOuEdiwCgPONdiCZYZ.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/scJOuEdiwCgPONdiCZYZ.png" alt="让图形有生命">
</div>
## 给设计师的一些建议
@ -175,25 +175,25 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
- 干掉多余的节点，保持图形的整洁。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/GTrZirSrsMIawXVjwoDI.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/GTrZirSrsMIawXVjwoDI.png" alt="保持图形的整洁">
</div>
- 合并图形，便于输出。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/CIKruspXHoWevGWpoXJO.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/CIKruspXHoWevGWpoXJO.png" alt="合并图形">
</div>
- 对小数点以及奇数进行最后一遍的走查与修正。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ySgIPVZBqPOWXOmTHTzT.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ySgIPVZBqPOWXOmTHTzT.png" alt="走查与修正">
</div>
- 整洁的图层管理。
<div>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/zxExIlRfcDTAowrkesHD.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/zxExIlRfcDTAowrkesHD.png" alt="图层管理">
</div>
## 写在最后

2
docs/spec/layout.en-US.md
View File

@ -54,7 +54,7 @@ Ant Design's designers keep the following 4 things in mind in the communication
1. Clear definition of dynamic layout area
2. Try to always use even numbers
3. Delivery of critical numbers (Gutter、Column)
3. Delivery of critical numbers (Gutter, Column)
4. Always use beginning column and ending column to define blocks.
## Common Scales

2
docs/spec/lightweight.en-US.md
View File

@ -4,7 +4,7 @@ order: 7
title: Keep it Lightweight
---
Fitts’s Law is an ergonomic principle that ties the size of a target and its contextual proximity to ease of use.In other words, if a tool is close at hand and large enough to target, then we can improve the user’s interaction. Putting tools in context makes for lightweight interaction.
Fitts's Law is an ergonomic principle that ties the size of a target and its contextual proximity to ease of use.In other words, if a tool is close at hand and large enough to target, then we can improve the user's interaction. Putting tools in context makes for lightweight interaction.
> <img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />

2
docs/spec/proximity.en-US.md
View File

@ -20,7 +20,7 @@ Divide the hierarchy of information through three formats:『small spacing』,
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』.
---

2
docs/spec/proximity.zh-CN.md
View File

@ -20,7 +20,7 @@ title: 亲密性
在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
> 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。
> 注：在 Ant Design 中，`y = 8 + 8 * n`。其中，`n >= 0`，y 是纵向间距，8 是『基础间距』。
---

6
docs/spec/reaction.en-US.md
View File

@ -4,13 +4,13 @@ order: 10
title: React Immediately
---
Invitations are powerful because they directly address discoverability and provide feedback before an interaction happens. Transitions are useful because they provide visual feedback during an interaction. But another class of feedback exists. It is the feedback that happens immediately after each interaction with the system, an immediate reaction paired with the user’s action.
Invitations are powerful because they directly address discoverability and provide feedback before an interaction happens. Transitions are useful because they provide visual feedback during an interaction. But another class of feedback exists. It is the feedback that happens immediately after each interaction with the system, an immediate reaction paired with the user's action.
While we can’t literally extend Newton’s law to the world of user interfaces, we certainly can apply this principle to the way we should interact with users. When users click on a button, they expect the button to depress. When they type in a field, they expect to see characters show up in the text box. When they make a mistake, they want the application to tell them where they goofed.
While we can't literally extend Newton's law to the world of user interfaces, we certainly can apply this principle to the way we should interact with users. When users click on a button, they expect the button to depress. When they type in a field, they expect to see characters show up in the text box. When they make a mistake, they want the application to tell them where they goofed.
While there is a possibility of too much feedback (or, more accurately, too much of the wrong feedback—a concept we will discuss in the upcoming chapters), a system with little or no feedback feels sluggish and thickheaded.
> ** Newton’s Third Law of Motion **: For every action, there is an equal and opposite reaction, from Wikipedia.
> ** Newton's Third Law of Motion **: For every action, there is an equal and opposite reaction, from Wikipedia.
---

4
docs/spec/repetition.en-US.md
View File

@ -4,7 +4,7 @@ order: 4
title: Repetition
---
The same elements keep repeating in the whole interface, which not only could lower the user’s learning cost effectively, but also help user recognize the relevance between these elements.
The same elements keep repeating in the whole interface, which not only could lower the user's learning cost effectively, but also help user recognize the relevance between these elements.
---
@ -16,4 +16,4 @@ The same elements keep repeating in the whole interface, which not only could lo
<img class="preview-img" align="right" alt="Example of repetitive of formats" src="https://gw.alipayobjects.com/zos/rmsportal/DYDGrgkbdFEbcVRuJcjH.png">
The repetitive element may be a thick rule(line), a wireframe， color, design elements, particular format, spatial relationships, etc.
The repetitive element may be a thick rule(line), a wireframe, color, design elements, particular format, spatial relationships, etc.

8
docs/spec/stay.en-US.md
View File

@ -4,9 +4,9 @@ order: 6
title: Stay on the Page
---
Solve most of problems on the same page and avoid a new one, because the page refresh and forwarding can lead to change blindness, in addition to disrupting the user’s mental flow.
Solve most of problems on the same page and avoid a new one, because the page refresh and forwarding can lead to change blindness, in addition to disrupting the user's mental flow.
> ** Change Blindness** is a surprising perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it. People's poor ability to detect changes has been argued to reflect fundamental limitations of human attention，from the term of Change blindness, Wikipedia.
> ** Change Blindness** is a surprising perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it. People's poor ability to detect changes has been argued to reflect fundamental limitations of human attention, from the term of Change blindness, Wikipedia.
> ** Flow**, also known as the zone, is the mental state of operation in which a person performing an activity is fully immersed in a feeling of energized focus, full involvement, and enjoyment in the process of the activity, from the term of Flow, Wikipedia
@ -19,7 +19,7 @@ Solve most of problems on the same page and avoid a new one, because the page re
<img class="preview-img" align="right" alt="good example (special case)" description="If the undo operation is invalid, the Popconfirm is displayed after clicking the delete button. The user can stay on the page to double confirm." src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png" good>
<img class="preview-img" align="right" alt="bad example" description="
Abusing the Modal can neither bring the context into the popup, which is prone to interrupt the user’s flow, nor allow the user to undo the change." src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" bad>
Abusing the Modal can neither bring the context into the popup, which is prone to interrupt the user's flow, nor allow the user to undo the change." src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" bad>
Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.
@ -86,5 +86,5 @@ Configurator Process: Provides a configurator that allows users to help them acc
<img class="preview-img" align="right" alt="example of Dialog Overlay Process" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">
Dialog Overlay Process: Any page switch is an interruption to the user’s mental flow. In addition, any context switch is a chance for a user to leave the site. But sometimes the step-by-step flow is necessary.
Dialog Overlay Process: Any page switch is an interruption to the user's mental flow. In addition, any context switch is a chance for a user to leave the site. But sometimes the step-by-step flow is necessary.

2
docs/spec/transition.en-US.md
View File

@ -63,7 +63,7 @@ Calling out an Object: Click the page element and call out a new object.
## Improve Perceived Performance
If actual performance can hardly improved, there is a difference between actual performance and perceived performance. Diverting the user’s attention is a good way to improve the perceived time an operation takes.
If actual performance can hardly improved, there is a difference between actual performance and perceived performance. Diverting the user's attention is a good way to improve the perceived time an operation takes.
---