mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
chore: add remark lint (#23457)
* 💄 Add remark lint for markdown files * 💄 Add remark lint for markdown files * 💄 Add remark lint for markdown files
This commit is contained in:
parent
1163d8e23d
commit
db97c5788e
9
.remarkrc.js
Normal file
9
.remarkrc.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: [
|
||||||
|
'remark-preset-lint-recommended',
|
||||||
|
['remark-lint-list-item-indent', 'space'],
|
||||||
|
['remark-lint-no-literal-urls', false],
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = config;
|
@ -34,7 +34,7 @@ This Code of Conduct applies both within project spaces and in public spaces whe
|
|||||||
|
|
||||||
## Enforcement
|
## Enforcement
|
||||||
|
|
||||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at xingmin.zhu@alipay.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [xingmin.zhu@alipay.com.](mailto:xingmin.zhu@alipay.com.) The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||||
|
|
||||||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
||||||
|
|
||||||
|
@ -32,8 +32,6 @@ An enterprise-class UI design language and React UI library.
|
|||||||
[download-url]: https://npmjs.org/package/antd
|
[download-url]: https://npmjs.org/package/antd
|
||||||
[lgtm-image]: https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design
|
[lgtm-image]: https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design
|
||||||
[lgtm-url]: https://lgtm.com/projects/g/ant-design/ant-design/alerts/
|
[lgtm-url]: https://lgtm.com/projects/g/ant-design/ant-design/alerts/
|
||||||
[lgtm-image]: https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design
|
|
||||||
[lgtm-url]: https://lgtm.com/projects/g/ant-design/ant-design/alerts/
|
|
||||||
[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
|
[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
|
||||||
[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
|
[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
|
||||||
[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
|
[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
|
||||||
|
@ -146,7 +146,7 @@ Added in `4.1.0`.
|
|||||||
| allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | |
|
| allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | |
|
||||||
| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||||
| defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | |
|
| defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | |
|
||||||
| disabled | disable start or end | [boolean, boolean] | - | |
|
| disabled | disable start or end | `[boolean, boolean]` | - | |
|
||||||
| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment], partial: `'start'|'end'`) | - | |
|
| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment], partial: `'start'|'end'`) | - | |
|
||||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD HH:mm:ss" | |
|
| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD HH:mm:ss" | |
|
||||||
| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
|
| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
|
||||||
|
@ -148,7 +148,7 @@ import 'moment/locale/zh-cn';
|
|||||||
| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | |
|
| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | |
|
||||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
||||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
||||||
| disabled | 禁用起始项 | [boolean, boolean] | 无 | |
|
| disabled | 禁用起始项 | `[boolean, boolean]` | 无 | |
|
||||||
| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `'start'|'end'`) | 无 | |
|
| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `'start'|'end'`) | 无 | |
|
||||||
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" | |
|
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" | |
|
||||||
| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | 无 | |
|
| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | 无 | |
|
||||||
|
@ -25,7 +25,7 @@ When a numeric value needs to be provided.
|
|||||||
| decimalSeparator | decimal separator | string | |
|
| decimalSeparator | decimal separator | string | |
|
||||||
| size | height of input box | `large` \| `middle` \| `small` | |
|
| size | height of input box | `large` \| `middle` \| `small` | |
|
||||||
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
|
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
|
||||||
| type | HTML inputs can have a type of `number`, and this can be added to aid [mobile] broswer keyboards to show the number keybaord, as well as limit inputs to numbers only [0-9 and e], but will not guaruntee client and server side validation. | string - ie 'number' | |
|
| type | HTML inputs can have a type of `number`, and this can be added to aid mobile broswer keyboards to show the number keybaord, as well as limit inputs to numbers only `0-9` and `e`, but will not guaruntee client and server side validation. | string - ie 'number' | |
|
||||||
| value | current value | number | |
|
| value | current value | number | |
|
||||||
| onChange | The callback triggered when the value is changed. | function(value: number \| string) | |
|
| onChange | The callback triggered when the value is changed. | function(value: number \| string) | |
|
||||||
| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | |
|
| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | |
|
||||||
|
@ -23,7 +23,7 @@ title: InputNumber
|
|||||||
| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | |
|
| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | |
|
||||||
| max | 最大值 | number | Infinity |
|
| max | 最大值 | number | Infinity |
|
||||||
| min | 最小值 | number | -Infinity |
|
| min | 最小值 | number | -Infinity |
|
||||||
| parser | 指定从 formatter 里转换回数字的方式,和 formatter 搭配使用 | function( string): number | |
|
| parser | 指定从 `formatter` 里转换回数字的方式,和 `formatter` 搭配使用 | function(string): number | |
|
||||||
| precision | 数值精度 | number | |
|
| precision | 数值精度 | number | |
|
||||||
| decimalSeparator | 小数点 | string | |
|
| decimalSeparator | 小数点 | string | |
|
||||||
| size | 输入框大小 | `large` \| `middle` \| `small` | 无 |
|
| size | 输入框大小 | `large` \| `middle` \| `small` | 无 |
|
||||||
|
@ -76,7 +76,7 @@ Add `antd/dist/antd.css` at the top of `src/App.css`.
|
|||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
Ok, reboot with `yarn start`, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide ](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
Ok, reboot with `yarn start`, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at it's [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
||||||
|
|
||||||
## Advanced Guides
|
## Advanced Guides
|
||||||
|
|
||||||
@ -196,7 +196,7 @@ You can also follow instructions in [Use in create-react-app](/docs/react/use-wi
|
|||||||
And you can use [react-scripts-ts-antd](https://www.npmjs.com/package/react-scripts-ts-antd) which includes ts-import-plugin, react-app-rewired, scss, less and etc. You can create a new project that without any configurations by running just one command.
|
And you can use [react-scripts-ts-antd](https://www.npmjs.com/package/react-scripts-ts-antd) which includes ts-import-plugin, react-app-rewired, scss, less and etc. You can create a new project that without any configurations by running just one command.
|
||||||
|
|
||||||
- [Create React apps (with Typescript and antd) with no build configuration](https://github.com/SZzzzz/react-scripts-ts-antd)
|
- [Create React apps (with Typescript and antd) with no build configuration](https://github.com/SZzzzz/react-scripts-ts-antd)
|
||||||
- [react-app-rewire-typescript][https://github.com/lwd-technology/react-app-rewire-typescript]
|
- [react-app-rewire-typescript](https://github.com/lwd-technology/react-app-rewire-typescript)
|
||||||
- [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin)
|
- [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin)
|
||||||
- [create-react-app Adding TypeScript](https://facebook.github.io/create-react-app/docs/adding-typescript)
|
- [create-react-app Adding TypeScript](https://facebook.github.io/create-react-app/docs/adding-typescript)
|
||||||
- [Migrating from create-react-app-typescript to Create React App](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/)
|
- [Migrating from create-react-app-typescript to Create React App](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/)
|
||||||
|
@ -194,7 +194,7 @@ module.exports = override(
|
|||||||
你也可以使用 [react-scripts-ts-antd](https://www.npmjs.com/package/react-scripts-ts-antd),其中包括了 ts-import-plugin,react-app-rewired,scss,less 等插件。你可以通过只运行一个命令来创建一个没有任何配置的新项目。
|
你也可以使用 [react-scripts-ts-antd](https://www.npmjs.com/package/react-scripts-ts-antd),其中包括了 ts-import-plugin,react-app-rewired,scss,less 等插件。你可以通过只运行一个命令来创建一个没有任何配置的新项目。
|
||||||
|
|
||||||
- [Create React apps (with Typescript and antd) with no build configuration](https://github.com/SZzzzz/react-scripts-ts-antd)
|
- [Create React apps (with Typescript and antd) with no build configuration](https://github.com/SZzzzz/react-scripts-ts-antd)
|
||||||
- [react-app-rewire-typescript][https://github.com/lwd-technology/react-app-rewire-typescript]
|
- [react-app-rewire-typescript](https://github.com/lwd-technology/react-app-rewire-typescript)
|
||||||
- [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin)
|
- [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin)
|
||||||
- [create-react-app Adding TypeScript](https://facebook.github.io/create-react-app/docs/adding-typescript)
|
- [create-react-app Adding TypeScript](https://facebook.github.io/create-react-app/docs/adding-typescript)
|
||||||
- [Migrating from create-react-app-typescript to Create React App](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/)
|
- [Migrating from create-react-app-typescript to Create React App](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/)
|
||||||
|
@ -84,7 +84,7 @@ Add `antd/dist/antd.css` at the top of `src/App.css`.
|
|||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide ](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
||||||
|
|
||||||
We are successfully running antd components now, go build your own application!
|
We are successfully running antd components now, go build your own application!
|
||||||
|
|
||||||
|
@ -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.
|
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
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@ title: 对齐
|
|||||||
|
|
||||||
正如「格式塔学派」中的连续律(Law of Continuity)所描述的,在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。
|
正如「格式塔学派」中的连续律(Law of Continuity)所描述的,在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。
|
||||||
|
|
||||||
> ** 格式塔学派(德语:Gestalttheorie)** :是心理学重要流派之一,兴起于 20 世纪初的德国,又称为完形心理学;主张人脑的运作原理是整体的,「整体不同于其部件的总和」。——摘自「维基百科」
|
> **格式塔学派(德语:Gestalttheorie)**:是心理学重要流派之一,兴起于 20 世纪初的德国,又称为完形心理学;主张人脑的运作原理是整体的,「整体不同于其部件的总和」。——摘自「维基百科」
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -43,8 +43,8 @@ title: 数据展示
|
|||||||
|
|
||||||
> 注:
|
> 注:
|
||||||
>
|
>
|
||||||
> 1. 卡片通常根据栅格进行排列,建议一行最多不超过四个
|
> 1. 卡片通常根据栅格进行排列,建议一行最多不超过四个
|
||||||
> 2. 在有限的卡片空间内需注意信息之间的间距,若信息过长可做截断处理。例如『Ant Design 适用于中台…』
|
> 2. 在有限的卡片空间内需注意信息之间的间距,若信息过长可做截断处理。例如『Ant Design 适用于中台…』
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -9,9 +9,9 @@ A common problem with many of these rich interactions (e.g. Drag and Drop, Inlin
|
|||||||
|
|
||||||
Invitations are the prompts and cues that lead users through an interaction. They often include just-in-time tips or visual affordances that hint at what will happen next in the interface.
|
Invitations are the prompts and cues that lead users through an interaction. They often include just-in-time tips or visual affordances that hint at what will happen next in the interface.
|
||||||
|
|
||||||
> ** Signifiers ** are signals, communication devices. These signs tell you about the possible actions; what to do, and where to do it. Signifiers are often visible, audible or tangible, from the Design of Everyday Things.
|
> **Signifiers** are signals, communication devices. These signs tell you about the possible actions; what to do, and where to do it. Signifiers are often visible, audible or tangible, from the Design of Everyday Things.
|
||||||
|
|
||||||
> ** Affordances ** are the relationships (read: possible actions) between an object and an entity (most often a person). The presence of an affordance is determined by the properties of the object and of the abilities of the entity who's interacting with the object, from the Design of Everyday Things.
|
> **Affordances** are the relationships (read: possible actions) between an object and an entity (most often a person). The presence of an affordance is determined by the properties of the object and of the abilities of the entity who's interacting with the object, from the Design of Everyday Things.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -9,9 +9,9 @@ title: 提供邀请
|
|||||||
|
|
||||||
邀请就是引导用户进入下一个交互层次的提醒和暗示,通常包括意符(eg:实时的提示信息)和可供性,以表明在下一个界面可以做什么。当可供性中可感知的部分(Perceived Affordance)表现为意符时,人机交互的过程往往更加自然、顺畅。
|
邀请就是引导用户进入下一个交互层次的提醒和暗示,通常包括意符(eg:实时的提示信息)和可供性,以表明在下一个界面可以做什么。当可供性中可感知的部分(Perceived Affordance)表现为意符时,人机交互的过程往往更加自然、顺畅。
|
||||||
|
|
||||||
> ** 意符(Signifiers)** :一种额外的提示,告诉用户可以采取什么行为,以及应该怎么操作;必须是可感知(eg:视觉、听觉、触觉等)。——摘自《设计心理学 1 》
|
> **意符(Signifiers)**:一种额外的提示,告诉用户可以采取什么行为,以及应该怎么操作;必须是可感知(eg:视觉、听觉、触觉等)。——摘自《设计心理学 1 》
|
||||||
|
|
||||||
> ** 可供性(Affordance)** :也被翻译成「示能」,由 James J. Gibson 提出,定义为物品的特性与决定物品用途的主体能力之间的关系;其中部分可感知(此部分定义为 Perceived Affordance),部分不可感知。——摘自《设计心理学 1 》
|
> **可供性(Affordance)**:也被翻译成「示能」,由 James J. Gibson 提出,定义为物品的特性与决定物品用途的主体能力之间的关系;其中部分可感知(此部分定义为 Perceived Affordance),部分不可感知。——摘自《设计心理学 1 》
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -8,7 +8,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" />
|
> <img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />
|
||||||
> ** Fitts's Law **: The time to acquire a target is a function of the distance to and size of the target. It is proportional to the distance to the target and inversely proportional to the width of the target.
|
> **Fitts's Law**: The time to acquire a target is a function of the distance to and size of the target. It is proportional to the distance to the target and inversely proportional to the width of the target.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@ title: 简化交互
|
|||||||
|
|
||||||
根据费茨法则(Fitts's Law)所描述的,如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互。
|
根据费茨法则(Fitts's Law)所描述的,如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互。
|
||||||
|
|
||||||
> ** 费茨法则 ** :到达目标的时间是到达目标的距离与目标大小的函数,具体:<img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />。其中:1.设备当前位置和目标位置的距离(D);2.目标的大小(W)。距离越长,所用时间越长;目标越大,所用时间越短。
|
> **费茨法则** :到达目标的时间是到达目标的距离与目标大小的函数,具体:<img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />。其中:1.设备当前位置和目标位置的距离(D);2.目标的大小(W)。距离越长,所用时间越长;目标越大,所用时间越短。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -11,7 +11,7 @@ While we can't literally extend Newton's law to the world of user interfaces, we
|
|||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -11,7 +11,7 @@ title: 即时反应
|
|||||||
|
|
||||||
虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。
|
虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。
|
||||||
|
|
||||||
> ** 牛顿第三定律 ** :当两个物体互相作用时,彼此施加于对方的力,其大小相等、方向相反。——摘自《维基百科》
|
> **牛顿第三定律** :当两个物体互相作用时,彼此施加于对方的力,其大小相等、方向相反。——摘自《维基百科》
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -7,9 +7,9 @@ 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
|
> **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
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -7,9 +7,9 @@ title: 足不出户
|
|||||||
|
|
||||||
能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。
|
能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。
|
||||||
|
|
||||||
> ** 变化盲视(Change Blindness)** :指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物,眼球运动、地点的变化,或者是缺乏注意力等。——摘自《维基百科》
|
> **变化盲视(Change Blindness)**:指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物,眼球运动、地点的变化,或者是缺乏注意力等。——摘自《维基百科》
|
||||||
|
|
||||||
> ** 心流(Flow)** :也有别名以化境 (Zone) 表示,亦有人翻译为神驰状态,定义是一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
|
> **心流(Flow)**:也有别名以化境 (Zone) 表示,亦有人翻译为神驰状态,定义是一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -104,7 +104,6 @@ AntV 提供了一套默认的图表颜色,包括颜色的用法,
|
|||||||
|
|
||||||
对当前的一组数据进行的内容标注。
|
对当前的一组数据进行的内容标注。
|
||||||
|
|
||||||
|
|
||||||
#### 提示信息
|
#### 提示信息
|
||||||
|
|
||||||
<img class="preview-img no-padding" align="right" description="提示信息的元素" src="https://gw.alipayobjects.com/zos/basement_prod/f9683e72-81a4-47cc-a208-6570187cce11.svg" />
|
<img class="preview-img no-padding" align="right" description="提示信息的元素" src="https://gw.alipayobjects.com/zos/basement_prod/f9683e72-81a4-47cc-a208-6570187cce11.svg" />
|
||||||
@ -139,9 +138,9 @@ AntV 提供了一套默认的图表颜色,包括颜色的用法,
|
|||||||
|
|
||||||
在数据可视化中,我们根据用户的意识层次及每层次对应的目标,将交互动作拆解成“数据获取、信息加工、知识流转”三层。其匹配“概览第一,聚焦过滤,再按需查看详情”的可视化信息检索箴言。亦符合人类寻求信息的基本逻辑:先大体,再局部,然后聚焦兴趣点进行探索,这是一个由表及里的过程。
|
在数据可视化中,我们根据用户的意识层次及每层次对应的目标,将交互动作拆解成“数据获取、信息加工、知识流转”三层。其匹配“概览第一,聚焦过滤,再按需查看详情”的可视化信息检索箴言。亦符合人类寻求信息的基本逻辑:先大体,再局部,然后聚焦兴趣点进行探索,这是一个由表及里的过程。
|
||||||
|
|
||||||
更多交互式图表内容请前往 [ AntV -- 设计语言 -- 交互](https://antv.vision/zh/docs/specification/principles/interact)
|
更多交互式图表内容请前往 [AntV -- 设计语言 -- 交互](https://antv.vision/zh/docs/specification/principles/interact)
|
||||||
|
|
||||||
## 设计资源
|
## 设计资源
|
||||||
|
|
||||||
- 最新的图表资产已登陆 「AntDesign 官网 -- 资源 -- AntDesign Chart 资源包」
|
- 最新的图表资产已登陆 「AntDesign 官网 -- 资源 -- AntDesign Chart 资源包」
|
||||||
- 也可以访问 [Kitchen](https://kitchen.alipay.com/) 官网下载 Sketch 插件,除了可以直接使用源文件之外,还可以使用 Kitchen「📈图表生成器」,用保真数据动态生成图表。
|
- 也可以访问 [Kitchen](https://kitchen.alipay.com/) 官网下载 Sketch 插件,除了可以直接使用源文件之外,还可以使用 Kitchen「📈 图表生成器」,用保真数据动态生成图表。
|
||||||
|
@ -56,14 +56,14 @@
|
|||||||
"deploy": "bisheng gh-pages --push-only --dotfiles",
|
"deploy": "bisheng gh-pages --push-only --dotfiles",
|
||||||
"deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages",
|
"deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages",
|
||||||
"dist": "antd-tools run dist",
|
"dist": "antd-tools run dist",
|
||||||
"lint": "npm run lint:tsc && npm run lint:script && npm run lint:demo && npm run lint:style && npm run lint:deps",
|
"lint": "npm run lint:tsc && npm run lint:script && npm run lint:demo && npm run lint:style && npm run lint:deps && npm run lint:md",
|
||||||
"lint-fix": "npm run lint-fix:script && npm run lint-fix:demo && npm run lint-fix:style",
|
"lint-fix": "npm run lint-fix:script && npm run lint-fix:demo && npm run lint-fix:style",
|
||||||
"lint-fix:demo": "eslint-tinker ./components/*/demo/*.md",
|
"lint-fix:demo": "eslint-tinker ./components/*/demo/*.md",
|
||||||
"lint-fix:script": "npm run lint:script -- --fix",
|
"lint-fix:script": "npm run lint:script -- --fix",
|
||||||
"lint-fix:style": "npm run lint:style -- --fix",
|
"lint-fix:style": "npm run lint:style -- --fix",
|
||||||
"lint:demo": "eslint components/*/demo/*.md",
|
"lint:demo": "eslint components/*/demo/*.md",
|
||||||
"lint:deps": "antd-tools run deps-lint",
|
"lint:deps": "antd-tools run deps-lint",
|
||||||
"lint:md": "remark components/",
|
"lint:md": "remark . -f -q",
|
||||||
"lint:script": "eslint . --ext '.js,.jsx,.ts,.tsx'",
|
"lint:script": "eslint . --ext '.js,.jsx,.ts,.tsx'",
|
||||||
"lint:style": "stylelint '{site,components}/**/*.less' --syntax less",
|
"lint:style": "stylelint '{site,components}/**/*.less' --syntax less",
|
||||||
"lint:tsc": "npm run tsc -- --noEmit",
|
"lint:tsc": "npm run tsc -- --noEmit",
|
||||||
@ -241,6 +241,10 @@
|
|||||||
"react-text-loop": "^2.3.0",
|
"react-text-loop": "^2.3.0",
|
||||||
"react-virtualized": "~9.21.1",
|
"react-virtualized": "~9.21.1",
|
||||||
"react-window": "^1.8.5",
|
"react-window": "^1.8.5",
|
||||||
|
"remark": "^12.0.0",
|
||||||
|
"remark-cli": "^8.0.0",
|
||||||
|
"remark-lint": "^7.0.0",
|
||||||
|
"remark-preset-lint-recommended": "^4.0.0",
|
||||||
"reqwest": "^2.0.5",
|
"reqwest": "^2.0.5",
|
||||||
"rimraf": "^3.0.0",
|
"rimraf": "^3.0.0",
|
||||||
"scrollama": "^2.0.0",
|
"scrollama": "^2.0.0",
|
||||||
|
Loading…
Reference in New Issue
Block a user