From c979cd19874f7eb598d2f28af18bf332fa75320d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=84=9A=E9=81=93?= Date: Sat, 30 Dec 2017 21:09:33 +0800 Subject: [PATCH 001/211] add date for 3.1.0 change log --- CHANGELOG.en-US.md | 2 ++ CHANGELOG.zh-CN.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index b717236e5e..dcbd43f268 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -17,6 +17,8 @@ timeline: true ## 3.1.0 +`2017-12-29` + - 🐞 Fix ant-spin-container overflow resizing for Spin component. [#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu) - 🐞 Fix extra padding in Table small with fixed columns. [#8724](https://github.com/ant-design/ant-design/issues/8724) - 🐞 Fix Checkbox.Group align issue in Form. [#8739](https://github.com/ant-design/ant-design/issues/8739) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index ce953ce4ec..e4b4d3c231 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -17,6 +17,8 @@ timeline: true ## 3.1.0 +`2017-12-29` + - 🐞 修复组件 Spin 可能出现跳动的问题。[#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu) - 🐞 修复 Table 在设置 `size=small` 的情况下出现多余 padding 的问题。[#8724](https://github.com/ant-design/ant-design/issues/8724) - 🐞 修复 Checkbox.Group 在 Form 中和 label 的对齐问题。[#8739](https://github.com/ant-design/ant-design/issues/8739) From 792cabf9223adffb7497d79100e20293df19a0cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=84=9A=E9=81=93?= Date: Sat, 30 Dec 2017 21:21:58 +0800 Subject: [PATCH 002/211] up change log --- CHANGELOG.en-US.md | 3 +++ CHANGELOG.zh-CN.md | 3 +++ 2 files changed, 6 insertions(+) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index dcbd43f268..673cd63c1c 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -19,10 +19,13 @@ timeline: true `2017-12-29` +Happy 2018 !~ 2018 2018 2018 coming!~~~ + - 🐞 Fix ant-spin-container overflow resizing for Spin component. [#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu) - 🐞 Fix extra padding in Table small with fixed columns. [#8724](https://github.com/ant-design/ant-design/issues/8724) - 🐞 Fix Checkbox.Group align issue in Form. [#8739](https://github.com/ant-design/ant-design/issues/8739) - 🐞 Fix unexpected scrollbar in Affix. [#8606](https://github.com/ant-design/ant-design/issues/8606) +- 🐞 Fix List component "No Data" mixed with loading. [#8647](https://github.com/ant-design/ant-design/issues/8647) - 🌟 Add onKeyUp TypeScript definition to Input component. [#8705](https://github.com/ant-design/ant-design/issues/8705) [@delesseps](https://github.com/delesseps) - 🌟 Add `showArrow` for disabling arrow icon in collapse panel. [#8536](https://github.com/ant-design/ant-design/pull/8536) [@apieceofbart](https://github.com/apieceofbart) - 🌟 Rate add `allowClear` for reset when click again. [#8627](https://github.com/ant-design/ant-design/issues/8627) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index e4b4d3c231..73c3c61888 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -19,10 +19,13 @@ timeline: true `2017-12-29` +新年快乐！~ 2018年了，00后都成年了！少年赶紧提个 PR 给我们吧！~ + - 🐞 修复组件 Spin 可能出现跳动的问题。[#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu) - 🐞 修复 Table 在设置 `size=small` 的情况下出现多余 padding 的问题。[#8724](https://github.com/ant-design/ant-design/issues/8724) - 🐞 修复 Checkbox.Group 在 Form 中和 label 的对齐问题。[#8739](https://github.com/ant-design/ant-design/issues/8739) - 🐞 修复 Affix 组件出现滚动条的问题。[#8606](https://github.com/ant-design/ant-design/issues/8606) +- 🐞 修复组件 List "No Data" 和加载动画重叠的问题. [#8647](https://github.com/ant-design/ant-design/issues/8647) - 🌟 为 Input 添加 onKeyUp。[#8705](https://github.com/ant-design/ant-design/issues/8705) [@delesseps](https://github.com/delesseps) - 🌟 折叠面板 Collapse 添加 `showArrow` 来支持隐藏箭头。[#8536](https://github.com/ant-design/ant-design/pull/8536) [@apieceofbart](https://github.com/apieceofbart) - 🌟 评分 Rate 组件添加 `allowClear`，支持再次点击后重置。[#8627](https://github.com/ant-design/ant-design/issues/8627) From 2690c4dd8642d83eecae4d1c105737244f88362b Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 31 Dec 2017 18:20:24 +0800 Subject: [PATCH 003/211] Fix typo --- components/dropdown/index.en-US.md | 2 +- components/dropdown/index.zh-CN.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index 350f67d1d0..bcf86c10d1 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -20,7 +20,7 @@ If there are too many operations to display, you can wrap them in a `Dropdown`. | getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | | overlay | the dropdown menu | [Menu](/components/menu) | - | | placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | -| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contentMenu`> | `['hover']` | +| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | | visible | whether the dropdown menu is visible | boolean | - | | onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function(visible) | - | diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index c93abc485e..dfd4db502d 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -21,7 +21,7 @@ title: Dropdown | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | | overlay | 菜单 | [Menu](/components/menu) | - | | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | -| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contentMenu`> | `['hover']` | +| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | | visible | 菜单是否显示 | boolean | - | | onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function(visible) | - | @@ -39,7 +39,7 @@ title: Dropdown | overlay | 菜单 | [Menu](/components/menu/) | - | | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | size | 按钮大小，和 [Button](/components/button/) 一致 | string | 'default' | -| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contentMenu`> | `['hover']` | +| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | | type | 按钮类型，和 [Button](/components/button/) 一致 | string | 'default' | | visible | 菜单是否显示 | boolean | - | | onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - | From 557f7a02f699e6cc1947599576e6c6741323df01 Mon Sep 17 00:00:00 2001 From: cjahv Date: Sun, 31 Dec 2017 18:21:06 +0800 Subject: [PATCH 004/211] DropDownProps trigger add contentMenu (#8793) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 下拉菜单的trigger添加contentMenu DropDownProps trigger add contentMenu * fix spelling mistakes --- components/dropdown/dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index 4ae0edd322..65371b0b2a 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -5,7 +5,7 @@ import DropdownButton from './dropdown-button'; import warning from '../_util/warning'; export interface DropDownProps { - trigger?: ('click' | 'hover')[]; + trigger?: ('click' | 'hover'| 'contextMenu')[]; overlay: React.ReactNode; onVisibleChange?: (visible?: boolean) => void; visible?: boolean; From ea28c2f57f22e6fac286e0c95fadc7dbff5e7667 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Jan 2018 15:04:13 +0800 Subject: [PATCH 005/211] remove santa --- site/theme/template/Layout/Header.jsx | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx index 7110ac72fc..a3c6483917 100644 --- a/site/theme/template/Layout/Header.jsx +++ b/site/theme/template/Layout/Header.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Link } from 'bisheng/router'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; -import { Select, Menu, Row, Col, Icon, Popover, AutoComplete, Input, Badge, Button, Tooltip } from 'antd'; +import { Select, Menu, Row, Col, Icon, Popover, AutoComplete, Input, Badge, Button } from 'antd'; import * as utils from '../utils'; import { version as antdVersion } from '../../../../package.json'; @@ -235,21 +235,6 @@ export default class Header extends React.Component { logo Ant Design - -
-
-
-
-
-
-
-
-
-
-
-
-
- From 4e790ad61a623cae6f4ae634b736e734926a3902 Mon Sep 17 00:00:00 2001 From: Spencer Date: Sun, 31 Dec 2017 21:17:02 -1000 Subject: [PATCH 006/211] Fix Alert component documentation - Capitalize "S" and "T" in Success Tips (#8697) Line 26 --- components/alert/demo/icon.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md index 821adba8f3..e1914bff51 100644 --- a/components/alert/demo/icon.md +++ b/components/alert/demo/icon.md @@ -23,7 +23,7 @@ ReactDOM.render( Date: Mon, 1 Jan 2018 15:19:40 +0800 Subject: [PATCH 007/211] update snapshot --- components/alert/__tests__/__snapshots__/demo.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/alert/__tests__/__snapshots__/demo.test.js.snap b/components/alert/__tests__/__snapshots__/demo.test.js.snap index f2a8a22617..d10aa94677 100644 --- a/components/alert/__tests__/__snapshots__/demo.test.js.snap +++ b/components/alert/__tests__/__snapshots__/demo.test.js.snap @@ -301,7 +301,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = ` - success tips + Success Tips Date: Mon, 1 Jan 2018 15:23:40 +0800 Subject: [PATCH 008/211] Fix missing style of Input.Search, close #8700 --- components/input/style/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx index 3a3ab0de59..416ec0177e 100644 --- a/components/input/style/index.tsx +++ b/components/input/style/index.tsx @@ -1,2 +1,5 @@ import '../../style/index.less'; import './index.less'; + +// style dependencies +import '../../button/style'; From 051f1049c57dcb89a1fd2d944d65bc966d02283d Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Jan 2018 17:11:19 +0800 Subject: [PATCH 009/211] Add parcel-antd demo in document --- docs/react/getting-started.en-US.md | 5 ++++- docs/react/getting-started.zh-CN.md | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index 4724b8849e..6d857a64a5 100644 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -167,7 +167,10 @@ If you want to customize your work flow, we recommend using [webpack](http://web Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in the React ecosystem. If you encounter problems, you can use our [webpack config](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) and [modify it](http://ant-tool.github.io/webpack-config.html). -There are some [scaffolds](https://github.com/ant-design/ant-design/issues/129) which have already integrated antd, so you can try and start with one of these, and even contribute. +If you are trying [parcel](https://parceljs.org), here is [a demo repository](https://github.com/ant-design/parcel-antd). + +There are some [scaffolds](http://scaffold.ant.design/) which have already integrated antd, so you can try and start with one of these, and even contribute. + ## Import on Demand diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index 4d6fb311fe..d1fb18fa8b 100644 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -165,7 +165,9 @@ IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016 如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发，如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.html)。 -目前社区也有很多基于 antd 定制的 [脚手架](https://github.com/ant-design/ant-design/issues/129)，欢迎进行试用和贡献。 +如果你使用 [parcel](https://parceljs.org)，这里也有 [一个例子](https://github.com/ant-design/parcel-antd) 可以参考。 + +目前社区也有很多基于 antd 定制的 [脚手架](http://scaffold.ant.design/)，欢迎进行试用和贡献。 ## 按需加载 From 6e6cda5b2e13af383fe1e617bf01345a3541eb8a Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Jan 2018 17:24:21 +0800 Subject: [PATCH 010/211] fix english typo --- site/theme/template/Content/Article.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/theme/template/Content/Article.jsx b/site/theme/template/Content/Article.jsx index 4ae3e57c7a..02b7e65dd5 100644 --- a/site/theme/template/Content/Article.jsx +++ b/site/theme/template/Content/Article.jsx @@ -80,7 +80,7 @@ export default class Article extends React.Component { type="warning" message={( - This article has not been translated yet. Wan't to help us out? + This article has not been translated yet. Wanna help us out?  See this issue on GitHub. )} From 69591195732267c1393497bee07de87dcd395319 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 2 Jan 2018 16:27:59 +0800 Subject: [PATCH 011/211] Fix HOC in Button not inserted space bettween chinese words --- components/button/button.tsx | 25 ++++++++++++++++++++++--- components/button/style/index.less | 9 +++++++++ 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/components/button/button.tsx b/components/button/button.tsx index 468d55dd0a..dd574424a5 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { findDOMNode } from 'react-dom'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import omit from 'omit.js'; @@ -86,9 +87,20 @@ export default class Button extends React.Component { this.state = { loading: props.loading, clicked: false, + hasTwoCNChar: false, }; } + componentDidMount() { + // Fix for HOC usage like + const buttonText = (findDOMNode(this) as HTMLElement).innerText; + if (this.isNeedInserted() && isTwoCNChar(buttonText)) { + this.setState({ + hasTwoCNChar: true, + }); + } + } + componentWillReceiveProps(nextProps: ButtonProps) { const currentLoading = this.props.loading; const loading = nextProps.loading; @@ -125,12 +137,18 @@ export default class Button extends React.Component { } } + isNeedInserted() { + const { loading, icon, children } = this.props; + const iconType = loading ? 'loading' : icon; + return React.Children.count(children) === 1 && (!iconType || iconType === 'loading'); + } + render() { const { type, shape, size, className, htmlType, children, icon, prefixCls, ghost, ...others, } = this.props; - const { loading, clicked } = this.state; + const { loading, clicked, hasTwoCNChar } = this.state; // large => lg // small => sm @@ -155,12 +173,13 @@ export default class Button extends React.Component { [`${prefixCls}-loading`]: loading, [`${prefixCls}-clicked`]: clicked, [`${prefixCls}-background-ghost`]: ghost, + [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar, }); const iconType = loading ? 'loading' : icon; const iconNode = iconType ? : null; - const needInserted = React.Children.count(children) === 1 && (!iconType || iconType === 'loading'); - const kids = children ? React.Children.map(children, child => insertSpace(child, needInserted)) : null; + const kids = children + ? React.Children.map(children, child => insertSpace(child, this.isNeedInserted())) : null; return ( * { + letter-spacing: .34em; + margin-right: -.34em; + } } @keyframes buttonEffect { From c14b13d4acbf0c51f0ef67a93270516ac0572a0a Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 2 Jan 2018 18:12:10 +0800 Subject: [PATCH 012/211] Fix broken link, close #8797 --- components/select/index.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 2e923958b4..c25871f1b5 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -33,7 +33,7 @@ Select component to select value from options. | dropdownStyle | style of dropdown menu | object | - | | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | | firstActiveValue | Value of action option by default | string\|string\[] | - | -| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw01) | function(triggerNode) | () => document.body | +| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | | labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: ReactNode}` | boolean | false | | maxTagCount | Max tag count to show | number | - | | maxTagPlaceholder | Placeholder for not showing tags | ReactNode/function(omittedValues) | - | From 99c8444785f53a698405527eb974b01c77cd6f5f Mon Sep 17 00:00:00 2001 From: niko <644506165@qq.com> Date: Wed, 3 Jan 2018 10:02:52 +0800 Subject: [PATCH 013/211] remove dump flex style in list for ie compatibility fixed: #8784 (#8798) --- components/list/style/index.less | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/components/list/style/index.less b/components/list/style/index.less index 00fe375ad7..11e55b6c9e 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -39,9 +39,9 @@ &-meta { align-items: flex-start; display: flex; + flex: 1; font-size: 0; &-avatar { - flex: 0; margin-right: 16px; } &-content { @@ -107,9 +107,6 @@ display: flex; flex: 1; } - &-extra { - flex: 0; - } } &-header, @@ -165,7 +162,6 @@ } &-extra { margin-left: 58px; - flex: 0; } &-meta { margin-bottom: 16px; From a0e5bb733679189ef97163033178d4b11206391f Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 3 Jan 2018 20:58:31 +0800 Subject: [PATCH 014/211] Fix align issue in chrome --- components/radio/style/index.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/radio/style/index.less b/components/radio/style/index.less index 87f3377b8b..a71288263f 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -147,6 +147,9 @@ span.@{radio-prefix-cls} + * { cursor: pointer; border: @border-width-base @border-style-base @border-color-base; border-left: 0; + // strange align fix for chrome but works + // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif + border-top-width: @border-width-base + 0.02px; background: @radio-button-bg; padding: 0 @padding-md - 1px; position: relative; From 5f5986481e288cfd3be0ecacb263f2ef2f0be784 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 3 Jan 2018 21:09:56 +0800 Subject: [PATCH 015/211] chore: pagination item align --- components/pagination/style/index.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index 917f70e78a..7038797708 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -27,7 +27,7 @@ display: inline-block; vertical-align: middle; height: @pagination-item-size; - line-height: @pagination-item-size; + line-height: @pagination-item-size - 2px; margin-right: 8px; } @@ -37,7 +37,7 @@ user-select: none; min-width: @pagination-item-size; height: @pagination-item-size; - line-height: @pagination-item-size; + line-height: @pagination-item-size - 2px; text-align: center; list-style: none; display: inline-block; @@ -290,7 +290,7 @@ margin: 0; min-width: @pagination-item-size-sm; height: @pagination-item-size-sm; - line-height: @pagination-item-size-sm; + line-height: @pagination-item-size-sm - 2px; } &.mini &-item:not(&-item-active) { From 455b9e40e0a650afe08297eaffd62b322190f187 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 4 Jan 2018 10:09:13 +0800 Subject: [PATCH 016/211] Remove unneccessary reset style of button --- components/button/style/index.less | 1 - components/button/style/mixin.less | 1 - 2 files changed, 2 deletions(-) diff --git a/components/button/style/index.less b/components/button/style/index.less index 2dfb02e160..3e51033613 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -12,7 +12,6 @@ // Button styles // ----------------------------- .@{btn-prefix-cls} { - .reset-component; .btn; .btn-default; diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 28a370a984..d4995fe326 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -139,7 +139,6 @@ // -------------------------------------------------- .btn() { display: inline-block; - margin-bottom: 0; font-weight: @btn-font-weight; text-align: center; touch-action: manipulation; From 4bf675703dac999becee6631ab05c2d85c01abb3 Mon Sep 17 00:00:00 2001 From: "junjing.zhang" Date: Wed, 3 Jan 2018 14:32:32 +0800 Subject: [PATCH 017/211] anchor scroll supports complete href link anchor scroll supports complete href link, e.g. http://www.example.com/#id, not just #id --- components/anchor/Anchor.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index d6c42c3423..8eaff741f3 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -42,9 +42,12 @@ function easeInOutCubic(t: number, b: number, c: number, d: number) { } const reqAnimFrame = getRequestAnimationFrame(); +const sharpMatcherRegx = /#([^#]+)$/; function scrollTo(href: string, offsetTop = 0, target: () => Window | HTMLElement, callback = () => { }) { const scrollTop = getScroll(target(), true); - const targetElement = document.getElementById(href.substring(1)); + const sharpLinkMatch = sharpMatcherRegx.exec(href); + if (!sharpLinkMatch) { return; } + const targetElement = document.getElementById(sharpLinkMatch[1]); if (!targetElement) { return; } @@ -172,7 +175,9 @@ export default class Anchor extends React.Component { const linkSections: Array
= []; this.links.forEach(link => { - const target = document.getElementById(link.substring(1)); + const sharpLinkMatch = sharpMatcherRegx.exec(link.toString()); + if (!sharpLinkMatch) { return; } + const target = document.getElementById(sharpLinkMatch[1]); if (target && getOffsetTop(target) < offsetTop + bounds) { const top = getOffsetTop(target); linkSections.push({ From 0933201652e8717894389cdcdcad0e3426198b23 Mon Sep 17 00:00:00 2001 From: "junjing.zhang" Date: Thu, 4 Jan 2018 16:40:14 +0800 Subject: [PATCH 018/211] anchor scroll supports complete href link - test anchor scroll supports complete href link, e.g. http://www.example.com/#id, not just #id --- components/anchor/__tests__/Anchor.test.js | 44 ++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/components/anchor/__tests__/Anchor.test.js b/components/anchor/__tests__/Anchor.test.js index edddc59968..41da53fe2e 100644 --- a/components/anchor/__tests__/Anchor.test.js +++ b/components/anchor/__tests__/Anchor.test.js @@ -17,4 +17,48 @@ describe('Anchor Render', () => { wrapper.instance().handleScroll(); expect(wrapper.instance().state).not.toBe(null); }); + + it('Anchor render perfectly for complete href - click', () => { + const wrapper = mount( + + + + ); + wrapper.find('a[href="http://www.example.com/#API"]').simulate('click'); + expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API'); + }); + + it('Anchor render perfectly for complete href - scoll', () => { + let root = document.getElementById('root'); + if (!root) { + root = document.createElement('div', { id: 'root' }); + root.id = 'root'; + document.body.appendChild(root); + } + mount(
Hello
, { attachTo: root }); + const wrapper = mount( + + + + ); + wrapper.instance().handleScroll(); + expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API'); + }); + + it('Anchor render perfectly for complete href - scollTo', () => { + let root = document.getElementById('root'); + if (!root) { + root = document.createElement('div', { id: 'root' }); + root.id = 'root'; + document.body.appendChild(root); + } + mount(
Hello
, { attachTo: root }); + const wrapper = mount( + + + + ); + wrapper.instance().handleScrollTo('##API'); + expect(wrapper.instance().state.activeLink).toBe('##API'); + }); }); From 0bfd5ee14dd4de73239b3d7a642d9ae3084fa626 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 4 Jan 2018 20:43:56 +0800 Subject: [PATCH 019/211] Fix notFoundContent not working, close #8809 --- components/select/__tests__/index.test.js | 52 +++++++++++++++++++++++ components/select/demo/multiple.md | 2 +- components/select/index.tsx | 17 +++++--- 3 files changed, 65 insertions(+), 6 deletions(-) diff --git a/components/select/__tests__/index.test.js b/components/select/__tests__/index.test.js index 0b23f86133..4aea8f2944 100644 --- a/components/select/__tests__/index.test.js +++ b/components/select/__tests__/index.test.js @@ -1,6 +1,58 @@ +import React from 'react'; +import { mount } from 'enzyme'; import Select from '..'; import focusTest from '../../../tests/shared/focusTest'; describe('Select', () => { focusTest(Select); + + beforeEach(() => { + jest.useFakeTimers(); + }); + + afterEach(() => { + jest.useRealTimers(); + }); + + it('should have default notFoundContent', () => { + const wrapper = mount( + + ); + wrapper.find('.ant-select').simulate('click'); + jest.runAllTimers(); + const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); + expect(dropdownWrapper.find('MenuItem').length).toBe(0); + }); + + it('should not have default notFoundContent when mode is combobox', () => { + const wrapper = mount( + + ); + wrapper.find('.ant-select').simulate('click'); + jest.runAllTimers(); + const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); + expect(dropdownWrapper.find('MenuItem').length).toBe(1); + expect(dropdownWrapper.find('MenuItem').at(0).text()).toBe('not at all'); + }); }); diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md index 9cee4127c0..8390ef65ec 100644 --- a/components/select/demo/multiple.md +++ b/components/select/demo/multiple.md @@ -34,7 +34,7 @@ ReactDOM.render( defaultValue={['a10', 'c12']} onChange={handleChange} > - {children} + {} , mountNode); ```` diff --git a/components/select/index.tsx b/components/select/index.tsx index d7a239f1f7..d7a76ffb6f 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -109,6 +109,16 @@ export default class Select extends React.Component { this.rcSelect = node; } + getNotFoundContent(locale: SelectLocale) { + const { notFoundContent, mode } = this.props; + const isCombobox = mode === 'combobox'; + if (isCombobox) { + // AutoComplete don't have notFoundContent defaultly + return notFoundContent === undefined ? null : notFoundContent; + } + return notFoundContent === undefined ? locale.notFoundContent : notFoundContent; + } + renderSelect = (locale: SelectLocale) => { const { prefixCls, @@ -122,7 +132,7 @@ export default class Select extends React.Component { [`${prefixCls}-sm`]: size === 'small', }, className); - let { notFoundContent, optionLabelProp } = this.props; + let { optionLabelProp } = this.props; const isCombobox = mode === 'combobox'; if (isCombobox) { // children 带 dom 结构时，无法填入输入框 @@ -135,9 +145,6 @@ export default class Select extends React.Component { combobox: isCombobox, }; - // AutoComplete don't have notFoundContent defaultly - const notFoundContentLocale = isCombobox ? - (notFoundContent || '') : (notFoundContent || locale.notFoundContent); return ( { prefixCls={prefixCls} className={cls} optionLabelProp={optionLabelProp || 'children'} - notFoundContent={notFoundContentLocale} + notFoundContent={this.getNotFoundContent(locale)} ref={this.saveSelect} /> ); From f7d571191ac110ce39ec492a99c7cafc2a8849ac Mon Sep 17 00:00:00 2001 From: Sunny Wong Date: Thu, 4 Jan 2018 20:35:51 +0800 Subject: [PATCH 020/211] Update incorrect signature for onChange --- components/auto-complete/index.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 4b1e17d0b7..3d7c647a3c 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -33,7 +33,7 @@ const dataSource = ['12345', '23456', '34567']; | optionLabelProp | Which prop value of option will render as content of select. | string | `children` | | placeholder | placeholder of input | string | - | | value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | - | -| onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - | +| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - | | onSearch | Called when searching items. | function(value) | - | | onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - | From c6fcc3121758dfe6ac5b50c1b55790eb42b805c5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 5 Jan 2018 10:26:22 +0800 Subject: [PATCH 021/211] More readable font family for chinese quote --- components/style/core/base.less | 6 ++++++ components/style/themes/default.less | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/components/style/core/base.less b/components/style/core/base.less index 7de66b7dd8..171d25aef8 100644 --- a/components/style/core/base.less +++ b/components/style/core/base.less @@ -14,6 +14,12 @@ unicode-range: U+30-39; } +@font-face { + font-family: "Chinese Quote"; + src: local("PingFang SC"), local("SimSun"); + unicode-range: U+201c, U+201d; +} + // HTML & Body reset html, body { .square(100%); diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 581c84c63a..19860ab0fb 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -34,7 +34,7 @@ @body-background : #fff; // Base background color for most components @component-background : #fff; -@font-family-no-number : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-no-number : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family : "Helvetica Neue For Number", @font-family-no-number; @code-family : Consolas, Menlo, Courier, monospace; @heading-color : fade(#000, 85%); From e3f49efb2d6d7702b917d539db3a99fce16c7d77 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 22 Dec 2017 17:49:38 +0800 Subject: [PATCH 022/211] Restruct menu --- docs/resource/github.md | 5 -- docs/spec/cases.en-US.md | 1 + docs/spec/cases.zh-CN.md | 1 + docs/spec/colors.en-US.md | 3 +- docs/spec/colors.zh-CN.md | 3 +- docs/spec/copywriting.md | 1 + docs/spec/data-display.md | 1 + docs/spec/data-entry.md | 1 + docs/{resource => spec}/download.en-US.md | 1 + docs/{resource => spec}/download.zh-CN.md | 3 +- docs/spec/feature.en-US.md | 1 + docs/spec/feature.zh-CN.md | 3 +- docs/spec/feedback.md | 1 + docs/spec/font.md | 3 +- docs/spec/icon.en-US.md | 1 + docs/spec/icon.zh-CN.md | 1 + docs/spec/introduce.en-US.md | 3 +- docs/spec/introduce.zh-CN.md | 3 +- docs/spec/layout.en-US.md | 3 +- docs/spec/layout.zh-CN.md | 3 +- docs/spec/motion.md | 2 +- docs/spec/navigation.en-US.md | 1 + docs/spec/navigation.zh-CN.md | 1 + docs/spec/overview.md | 9 +++ docs/{resource => spec}/reference.en-US.md | 1 + docs/{resource => spec}/reference.zh-CN.md | 3 +- docs/spec/visual.md | 7 ++ docs/{resource => spec}/work-with-us.md | 2 +- site/bisheng.config.js | 12 +++- site/theme/template/Content/MainContent.jsx | 75 +++++++++------------ site/theme/template/Layout/Header.jsx | 10 --- site/theme/template/utils.jsx | 55 ++++++++++----- site/theme/zh-CN.js | 2 +- 33 files changed, 132 insertions(+), 90 deletions(-) delete mode 100644 docs/resource/github.md rename docs/{resource => spec}/download.en-US.md (99%) rename docs/{resource => spec}/download.zh-CN.md (98%) create mode 100644 docs/spec/overview.md rename docs/{resource => spec}/reference.en-US.md (99%) rename docs/{resource => spec}/reference.zh-CN.md (99%) create mode 100644 docs/spec/visual.md rename docs/{resource => spec}/work-with-us.md (99%) diff --git a/docs/resource/github.md b/docs/resource/github.md deleted file mode 100644 index 268707cbe1..0000000000 --- a/docs/resource/github.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -order: 3 -link: //github.com/ant-design/ant-design -title: GitHub ---- diff --git a/docs/spec/cases.en-US.md b/docs/spec/cases.en-US.md index e539248358..479565cbf8 100644 --- a/docs/spec/cases.en-US.md +++ b/docs/spec/cases.en-US.md @@ -1,4 +1,5 @@ --- +category: Ant Design order: 2 title: Cases --- diff --git a/docs/spec/cases.zh-CN.md b/docs/spec/cases.zh-CN.md index 1f1894117f..3f3ad73ccf 100644 --- a/docs/spec/cases.zh-CN.md +++ b/docs/spec/cases.zh-CN.md @@ -1,4 +1,5 @@ --- +category: Ant Design order: 2 title: 实践案例 --- diff --git a/docs/spec/colors.en-US.md b/docs/spec/colors.en-US.md index 1534905469..7b2600efb8 100644 --- a/docs/spec/colors.en-US.md +++ b/docs/spec/colors.en-US.md @@ -1,5 +1,6 @@ --- -order: 3 +category: Visual +order: 0 title: Colors --- diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index df2b040bf4..4d44cf5e60 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -1,5 +1,6 @@ --- -order: 3 +category: 视觉语言 +order: 0 title: 色彩 --- diff --git a/docs/spec/copywriting.md b/docs/spec/copywriting.md index 0d92723c2d..23a47e6303 100644 --- a/docs/spec/copywriting.md +++ b/docs/spec/copywriting.md @@ -1,4 +1,5 @@ --- +category: 模式语言 order: 6 title: zh-CN: 文案 diff --git a/docs/spec/data-display.md b/docs/spec/data-display.md index 6c0df3af72..46cc38586e 100644 --- a/docs/spec/data-display.md +++ b/docs/spec/data-display.md @@ -1,4 +1,5 @@ --- +category: 模式语言 order: 10 title: zh-CN: 数据展示 diff --git a/docs/spec/data-entry.md b/docs/spec/data-entry.md index be64ec5bc2..35bbca3c99 100644 --- a/docs/spec/data-entry.md +++ b/docs/spec/data-entry.md @@ -1,4 +1,5 @@ --- +category: 模式语言 order: 9 title: zh-CN: 数据录入 diff --git a/docs/resource/download.en-US.md b/docs/spec/download.en-US.md similarity index 99% rename from docs/resource/download.en-US.md rename to docs/spec/download.en-US.md index 06c981af47..8c13cc5ad0 100644 --- a/docs/resource/download.en-US.md +++ b/docs/spec/download.en-US.md @@ -1,4 +1,5 @@ --- +category: Resources order: 0 title: Download --- diff --git a/docs/resource/download.zh-CN.md b/docs/spec/download.zh-CN.md similarity index 98% rename from docs/resource/download.zh-CN.md rename to docs/spec/download.zh-CN.md index a934dcd895..5b02492ced 100644 --- a/docs/resource/download.zh-CN.md +++ b/docs/spec/download.zh-CN.md @@ -1,6 +1,7 @@ --- +category: 资源 order: 0 -title: 资源下载 +title: 下载 --- 这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。 diff --git a/docs/spec/feature.en-US.md b/docs/spec/feature.en-US.md index 340952a00b..311092844b 100644 --- a/docs/spec/feature.en-US.md +++ b/docs/spec/feature.en-US.md @@ -1,4 +1,5 @@ --- +category: Ant Design order: 1 title: Features --- diff --git a/docs/spec/feature.zh-CN.md b/docs/spec/feature.zh-CN.md index a5054609df..f670b5659f 100644 --- a/docs/spec/feature.zh-CN.md +++ b/docs/spec/feature.zh-CN.md @@ -1,6 +1,7 @@ --- +category: Ant Design order: 1 -title: 基本理念 +title: 设计价值观 --- 与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』和『开发者』的使用体验，践行『以人为本』的设计理念。 diff --git a/docs/spec/feedback.md b/docs/spec/feedback.md index 8cb1c07b8a..45b7cab348 100644 --- a/docs/spec/feedback.md +++ b/docs/spec/feedback.md @@ -1,4 +1,5 @@ --- +category: 模式语言 order: 11 title: zh-CN: 反馈 diff --git a/docs/spec/font.md b/docs/spec/font.md index e6be5c0a6b..e19e79720b 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -1,5 +1,6 @@ --- -order: 5 +category: Visual +order: 3 title: zh-CN: 字体 en-US: Font diff --git a/docs/spec/icon.en-US.md b/docs/spec/icon.en-US.md index dc4cdb91e1..57e112acfe 100644 --- a/docs/spec/icon.en-US.md +++ b/docs/spec/icon.en-US.md @@ -1,4 +1,5 @@ --- +category: Visual order: 4 title: Icons --- diff --git a/docs/spec/icon.zh-CN.md b/docs/spec/icon.zh-CN.md index e19076e802..db74853e8b 100644 --- a/docs/spec/icon.zh-CN.md +++ b/docs/spec/icon.zh-CN.md @@ -1,4 +1,5 @@ --- +category: 视觉语言 order: 4 title: 图标 --- diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md index 8fa860b915..40fb7e3675 100644 --- a/docs/spec/introduce.en-US.md +++ b/docs/spec/introduce.en-US.md @@ -1,6 +1,7 @@ --- +category: Ant Design order: 0 -title: Ant Design +title: Introduction ---
diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md index 627051e823..351bfc2a8d 100644 --- a/docs/spec/introduce.zh-CN.md +++ b/docs/spec/introduce.zh-CN.md @@ -1,6 +1,7 @@ --- +category: Ant Design order: 0 -title: Ant Design +title: Introduction ---
diff --git a/docs/spec/layout.en-US.md b/docs/spec/layout.en-US.md index f3d3962f83..72f8e97c07 100644 --- a/docs/spec/layout.en-US.md +++ b/docs/spec/layout.en-US.md @@ -1,5 +1,6 @@ --- -order: 7 +category: Visual +order: 2 title: Layout --- diff --git a/docs/spec/layout.zh-CN.md b/docs/spec/layout.zh-CN.md index 4c98b8f834..060c6fee62 100644 --- a/docs/spec/layout.zh-CN.md +++ b/docs/spec/layout.zh-CN.md @@ -1,5 +1,6 @@ --- -order: 7 +category: 视觉语言 +order: 2 title: 布局 --- diff --git a/docs/spec/motion.md b/docs/spec/motion.md index d95efcb962..c7959f4751 100644 --- a/docs/spec/motion.md +++ b/docs/spec/motion.md @@ -1,5 +1,5 @@ --- -order: 12 +order: 5 title: zh-CN: 动效 en-US: Motion diff --git a/docs/spec/navigation.en-US.md b/docs/spec/navigation.en-US.md index a0b576c566..3e74b549ab 100644 --- a/docs/spec/navigation.en-US.md +++ b/docs/spec/navigation.en-US.md @@ -1,4 +1,5 @@ --- +category: 模式语言 order: 8 title: Navigation --- diff --git a/docs/spec/navigation.zh-CN.md b/docs/spec/navigation.zh-CN.md index a901e4e47e..0f26631ea6 100644 --- a/docs/spec/navigation.zh-CN.md +++ b/docs/spec/navigation.zh-CN.md @@ -1,4 +1,5 @@ --- +category: 模式语言 order: 8 title: 导航 --- diff --git a/docs/spec/overview.md b/docs/spec/overview.md new file mode 100644 index 0000000000..91217fed95 --- /dev/null +++ b/docs/spec/overview.md @@ -0,0 +1,9 @@ +--- +category: 模式语言 +order: 0 +title: + zh-CN: 概览 + en-US: Overview +--- + +Coming soon. diff --git a/docs/resource/reference.en-US.md b/docs/spec/reference.en-US.md similarity index 99% rename from docs/resource/reference.en-US.md rename to docs/spec/reference.en-US.md index e7939fe643..6e77247f5b 100644 --- a/docs/resource/reference.en-US.md +++ b/docs/spec/reference.en-US.md @@ -1,4 +1,5 @@ --- +category: Resources order: 1 title: Reference --- diff --git a/docs/resource/reference.zh-CN.md b/docs/spec/reference.zh-CN.md similarity index 99% rename from docs/resource/reference.zh-CN.md rename to docs/spec/reference.zh-CN.md index d07b768a24..4b93fcc9e3 100644 --- a/docs/resource/reference.zh-CN.md +++ b/docs/spec/reference.zh-CN.md @@ -1,6 +1,7 @@ --- +category: 资源 order: 1 -title: 文献素材 +title: 致敬 --- 在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web 表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。 diff --git a/docs/spec/visual.md b/docs/spec/visual.md new file mode 100644 index 0000000000..cd007ea1df --- /dev/null +++ b/docs/spec/visual.md @@ -0,0 +1,7 @@ +--- +order: 4 +title: + zh-CN: 可视化语言 + en-US: Visualization +link: https://antv.alipay.com +--- diff --git a/docs/resource/work-with-us.md b/docs/spec/work-with-us.md similarity index 99% rename from docs/resource/work-with-us.md rename to docs/spec/work-with-us.md index 3cc9e33a19..9efb22e283 100644 --- a/docs/resource/work-with-us.md +++ b/docs/spec/work-with-us.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 7 title: zh-CN: 加入我们 en-US: Work with Us diff --git a/site/bisheng.config.js b/site/bisheng.config.js index 671ca41cf9..d7edebff5d 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -29,8 +29,16 @@ module.exports = { htmlTemplate: './site/theme/static/template.html', themeConfig: { categoryOrder: { - 设计原则: 2, - Principles: 2, + 'Ant Design': 0, + 设计原则: 1, + Principles: 1, + 视觉语言: 2, + Visual: 2, + 模式语言: 3, + Patterns: 3, + 资源: 6, + Resources: 6, + Components: 100, }, typeOrder: { General: 0, diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index b69877cb04..c064e29372 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -33,10 +33,6 @@ function fileNameToPath(filename) { return snippets[snippets.length - 1]; } -function isNotTopLevel(level) { - return level !== 'topLevel'; -} - let isMobile; utils.enquireScreen((b) => { isMobile = b; @@ -123,6 +119,7 @@ export default class MainContent extends React.Component { } getSideBarOpenKeys(nextProps) { + const { themeConfig } = nextProps; const { pathname } = nextProps.location; const prevModule = this.currentModule; this.currentModule = pathname.replace(/^\//).split('/')[1] || 'components'; @@ -132,7 +129,12 @@ export default class MainContent extends React.Component { const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US'; if (prevModule !== this.currentModule) { const moduleData = getModuleData(nextProps); - const shouldOpenKeys = Object.keys(utils.getMenuItems(moduleData, locale)); + const shouldOpenKeys = utils.getMenuItems( + moduleData, + locale, + themeConfig.categoryOrder, + themeConfig.typeOrder + ).map(m => m.title[locale] || m.title); return shouldOpenKeys; } } @@ -140,11 +142,11 @@ export default class MainContent extends React.Component { generateMenuItem(isTop, item) { const { locale } = this.context.intl; const key = fileNameToPath(item.filename); - const text = isTop ? - item.title[locale] || item.title : [ - {item.title}, - {item.subtitle}, - ]; + const title = item.title[locale] || item.title; + const text = isTop ? title : [ + {title}, + {item.subtitle}, + ]; const { disabled } = item; const url = item.filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').toLowerCase(); const child = !item.link ? ( @@ -171,49 +173,34 @@ export default class MainContent extends React.Component { ); } - generateSubMenuItems(obj) { - const { themeConfig } = this.props; - const topLevel = (obj.topLevel || []).map(this.generateMenuItem.bind(this, true)); - const itemGroups = Object.keys(obj).filter(isNotTopLevel) - .sort((a, b) => themeConfig.typeOrder[a] - themeConfig.typeOrder[b]) - .map((type) => { - const groupItems = obj[type].sort((a, b) => { - return a.title.charCodeAt(0) - - b.title.charCodeAt(0); - }).map(this.generateMenuItem.bind(this, false)); - return ( - - {groupItems} - - ); - }); - return [...topLevel, ...itemGroups]; - } - getMenuItems() { const { themeConfig } = this.props; const moduleData = getModuleData(this.props); const menuItems = utils.getMenuItems( - moduleData, this.context.intl.locale + moduleData, + this.context.intl.locale, + themeConfig.categoryOrder, + themeConfig.typeOrder, ); - const categories = Object.keys(menuItems).filter(isNotTopLevel); - const topLevel = this.generateSubMenuItems(menuItems.topLevel); - const result = [...topLevel]; - result.forEach((item, i) => { - const insertCategory = categories.filter( - cat => (themeConfig.categoryOrder[cat] ? themeConfig.categoryOrder[cat] <= i : i === result.length - 1) - )[0]; - if (insertCategory) { - const target = ( - {insertCategory}} key={insertCategory}> - {this.generateSubMenuItems(menuItems[insertCategory])} + return menuItems.map((menuItem) => { + if (menuItem.children) { + return ( + {menuItem.title}} key={menuItem.title}> + {menuItem.children.map((child) => { + if (child.type === 'type') { + return ( + + {child.children.map(leaf => this.generateMenuItem(false, leaf))} + + ); + } + return this.generateMenuItem(false, child); + })} ); - result.splice(i + 1, 0, target); - categories.splice(categories.indexOf(insertCategory), 1); } + return this.generateMenuItem(true, menuItem); }); - return result; } flattenMenu(menu) { diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx index a3c6483917..c55d486383 100644 --- a/site/theme/template/Layout/Header.jsx +++ b/site/theme/template/Layout/Header.jsx @@ -184,16 +184,6 @@ export default class Header extends React.Component { - - - - - - - - - - item.meta); - const menuItems = {}; - menuMeta.sort( - (a, b) => (a.order || 0) - (b.order || 0) - ).forEach((meta) => { - const category = (meta.category && meta.category[locale]) || meta.category || 'topLevel'; - if (!menuItems[category]) { - menuItems[category] = {}; + const menuItems = []; + const sortFn = (a, b) => (a.order || 0) - (b.order || 0); + menuMeta.sort(sortFn).forEach((meta) => { + if (!meta.category) { + menuItems.push(meta); + } else { + const category = meta.category[locale] || meta.category; + let group = menuItems.filter(i => i.title === category)[0]; + if (!group) { + group = { + type: 'category', + title: category, + children: [], + order: categoryOrder[category], + }; + menuItems.push(group); + } + if (meta.type) { + let type = group.children.filter(i => i.title === meta.type)[0]; + if (!type) { + type = { + type: 'type', + title: meta.type, + children: [], + order: typeOrder[meta.type], + }; + group.children.push(type); + } + type.children.push(meta); + } else { + group.children.push(meta); + } } - - const type = meta.type || 'topLevel'; - if (!menuItems[category][type]) { - menuItems[category][type] = []; - } - - menuItems[category][type].push(meta); }); - return menuItems; + return menuItems.map((i) => { + if (i.children) { + i.children = i.children.sort(sortFn); + } + return i; + }).sort(sortFn); } export function isZhCN(pathname) { diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js index d18f363d5d..f7f2266d0e 100644 --- a/site/theme/zh-CN.js +++ b/site/theme/zh-CN.js @@ -9,7 +9,7 @@ module.exports = { 'app.header.menu.practice': '实践', 'app.header.menu.pattern': '模式', 'app.header.menu.components': '组件', - 'app.header.menu.spec': '指引', + 'app.header.menu.spec': '设计语言', 'app.header.menu.resource': '资源', 'app.header.menu.mobile': '移动版', 'app.header.menu.pro': 'PRO', From f9a3d419cdd9a9a91485c9c514f4ff24c9aac3cf Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 22 Dec 2017 17:59:16 +0800 Subject: [PATCH 023/211] Smaller image box --- site/theme/static/preview-img.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less index eb7892e188..3eb5378447 100644 --- a/site/theme/static/preview-img.less +++ b/site/theme/static/preview-img.less @@ -1,7 +1,7 @@ .preview-image-boxes { float: right; margin: 0 0 70px 20px; - width: 608px; + width: 496px; clear: both; &-with-carousel { From 0fbd1b40808da6a2980f77c3276c1172335ec585 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 25 Dec 2017 22:15:35 +0800 Subject: [PATCH 024/211] Add new design guide --- docs/spec/cases.zh-CN.md | 55 ++-------- docs/spec/colors.zh-CN.md | 70 ++++++------ docs/spec/direct.en-US.md | 2 +- docs/spec/feature.zh-CN.md | 106 +++--------------- docs/spec/font.md | 79 ++++++++++---- docs/spec/icon.en-US.md | 2 +- docs/spec/icon.zh-CN.md | 48 ++++---- docs/spec/introduce.zh-CN.md | 12 +- docs/spec/invitation.en-US.md | 4 +- docs/spec/layout.en-US.md | 2 +- docs/spec/layout.zh-CN.md | 115 ++++++-------------- docs/spec/overview.md | 27 ++++- site/theme/static/markdown.less | 1 - site/theme/template/Color/ColorPalettes.jsx | 6 - 14 files changed, 210 insertions(+), 319 deletions(-) diff --git a/docs/spec/cases.zh-CN.md b/docs/spec/cases.zh-CN.md index 3f3ad73ccf..acae0d267e 100644 --- a/docs/spec/cases.zh-CN.md +++ b/docs/spec/cases.zh-CN.md @@ -4,63 +4,32 @@ order: 2 title: 实践案例 --- -从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 400 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。 +从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。 -Ant Design 目前在外部也有 [许多产品实践](https://github.com/ant-design/ant-design/issues/477)，如果你的公司和产品从中受益，欢迎留言。 +Ant Design 目前在外部也有许多产品实践，如果你的公司和产品从中受益，[欢迎留言](https://github.com/ant-design/ant-design/issues/477)。 ## 最佳实践 ---- - -### 金融云 - - - - +### 蚂蚁金融云 金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 -

立即访问

+[立即访问](https://www.cloud.alipay.com) ---- +![蚂蚁金融云](https://gw.alipayobjects.com/zos/rmsportal/KtMLtXsTucsJLWgfwZcw.png) -### OceanBase Cloud Platform - - - - +### OceanBase 云平台 OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 -

立即访问

+[立即访问](http://oceanbase.alipay.com) ---- +![OceanBase 云平台](https://gw.alipayobjects.com/zos/rmsportal/hhtmRPAtPsUhwHpULFuu.png) -### 服务宝体验平台 +### Ant Design Pro - - - - - +Ant Design Pro 是一个企业级中后台前端/设计解决方案，秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 -体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。 +[立即访问](https://pro.ant.design) -

立即访问

- ---- - -更多 [社区案例](https://github.com/ant-design/ant-design/issues/477)。 - - +![Ant Design Pro](https://gw.alipayobjects.com/zos/rmsportal/KZIUjJJZTEqMOgBHQkCb.png) diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index 4d44cf5e60..8c78d19721 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -4,23 +4,23 @@ order: 0 title: 色彩 --- -设计中对色彩的运用不仅应考虑品牌的识别性，还需达到信息传递、操作指引、交互反馈，或是强化和凸显某一个元素的目的。基于操作系统更注重高效、清晰等特点，Ant Design 的用色上更偏向简洁实用一些。在选择色彩时有以下三个注意点： +Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。 -- 色彩应与产品定位相匹配，且符合用户心理认知； -- 视觉层次应清晰分明，为重要行动点或关键信息定义一个主色，并建立视觉连续性； -- 遵守 WCAG 2.0 的 标准，保证足够的对比度，让色彩更容易被视障碍（色盲）用户识别。 +系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。 --- -## 色板 +## 色彩模型 -Ant Design PC 端的色板由 10 个由浅至深的色彩单元格组成，我们为部分色彩格定义了默认使用场景，用户在进行色彩配色时只需根据关键词选择一条色板即可得到一套完整的系统配色方案。在理论上，在 UI 设计中的色彩都应取自这份色板。 +Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。 -经过设计师和程序员的精心调教，总结出一套 [色板生成算法](https://github.com/ant-design/ant-design/blob/244a2fd2da5561dc13a32ea894ba1bdbd13421aa/components/style/color/colorPalette.less)（用以取代 1.x 的 tint/shade 色彩系统和 2.x 的贝塞尔曲线色彩算法）。使用者只需指定主色，便可导出一条完整的渐变色板。 +## 系统级色彩体系 -Ant Design 的色板由 8 种基本色彩组成，每种基本色（第 6 格）又按上述算法衍生出 10 种渐变色。 +Ant Design 系统级色彩体系同样源于『自然』的设计语言。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。 -> 注：在由浅至深的色板里，第 6 格色彩单元格普遍满足 [WCAG 2.0](http://leaverou.github.io/contrast-ratio/) 的 4.5:1 最小对比度（AA 级），我们将其定义为色板的默认品牌色。（黄色用于搭配黑色字体/背景，故不满足和白色的对比度） +### 基础色板 + +Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及它们衍生色。这些颜色基本可以包含中后台设计中对于颜色的需求。 `````__react import ColorPalettes from '../../site/theme/template/Color/ColorPalettes'; @@ -28,7 +28,15 @@ import ColorPalettes from '../../site/theme/template/Color/ColorPalettes'; ReactDOM.render(, mountNode); ````` -为了考虑文本在不同颜色背景下的呈现，我们选择了『White #FFFFFF』和『Black #000000』并配以透明度来区分文本的等级层次。详情请查看 [字体颜色](/docs/spec/font#字体颜色)。 +Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。 + +### 中性色板 + +todo... + +### 数据可视化色板 + +数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 『有效、清晰、准确、美』的原则产生的。数据可视化色板详见[链接](todo...)。 ### 色板生成工具 @@ -42,45 +50,29 @@ ReactDOM.render(, mountNode); --- -## 色彩应用 +## 产品级色彩体系 ### 品牌色的应用 -Ant Design 品牌色常用色值 + -品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需先了解品牌色在界面中的使用场景及选色范围。以 Ant Design 网页组件的默认样式为例，品牌色主要体现在关键行动点及操作状态、重要信息高亮等场景。 +品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅自深的第六个颜色作为主色。 +Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 1890FF，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。 -> 注：图形插画和 logo 可以不必遵循色板，但需保持相近的色系。 +### 功能色 -### 中性色的应用 + -Ant Design 中性色常用色值 +功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图： -灰色作为中性色在 Ant Design 的网页设计中被大量使用到，它的使用有利于关键内容的衬托和功能的引导。这类色彩主要体现在导航框架、背景底色、描边、或次级操作等等。 +### 中性色 -### 功能色的应用 + -Ant Design 功能色卡 +Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结 WCAG 2.0 的 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图： -UI 设计中，比较稳定的色彩除了中性色外还有具备特定含义的功能色，这类色彩起到传递功能信息、代表某种状态等作用。主要应用于消息通知、反馈提醒、表单校验这类场景中的成功、出错、失败、提醒、链接等状态。 +--- -### 视觉层次 +## 企业级产品设计中的色彩应用 -正确示例 - -将品牌色赋予在重要信息或关键主动点上，并衬以大面积的中性色，可以让用户更聚焦到任务本身，从而提高任务的执行效率。 - -
- -错误示例 - -> 注：界面用色建议不超过三种（数据图表和图形类插画除外）。 - -### 色彩的易识别性 - -正确示例 -错误示例 - -Ant Design 的色板颜色遵守 WCAG 2.0 的标准，操作类的色彩搭配都应满足颜色对比值 3:1 的最低标准。 - -- [色彩对比值校验工具](http://leaverou.github.io/contrast-ratio/#%23454545-on-%23fff) +在蚂蚁中后台的设计中，我们对于色彩的态度是克制的。色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率，影响信息的清晰传达的这些原则之上，理性的选择颜色是关键。当然在配图插画以及展示性页面中可以适当打破这一思路。 diff --git a/docs/spec/direct.en-US.md b/docs/spec/direct.en-US.md index 9780887302..7e5b231990 100644 --- a/docs/spec/direct.en-US.md +++ b/docs/spec/direct.en-US.md @@ -10,7 +10,7 @@ As Alan Cooper states：『Where there is output, let there be input』. This is ## In-Page Editing -Example of click to edit +Example of click to edit Single-Field Inline Edit diff --git a/docs/spec/feature.zh-CN.md b/docs/spec/feature.zh-CN.md index f670b5659f..17e8f57d37 100644 --- a/docs/spec/feature.zh-CN.md +++ b/docs/spec/feature.zh-CN.md @@ -3,108 +3,28 @@ category: Ant Design order: 1 title: 设计价值观 --- - 与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』和『开发者』的使用体验，践行『以人为本』的设计理念。 +设计价值观（Design Values）为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。 -
-
- -
微小
-
致力于微小而美好的改变，力求在细节上精益求精，不仅让业务产品更加实用和可靠，而且还能让『用户』感到小惊喜。
-
-
- -
确定
-
制定通俗而科学的设计原则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
-
-
- -
幸福
-
不苛求简单，但是力求让『用户』和『设计者』流畅的完成目标，并带着成功和满足离开。
-
-
+todo... - +在设计价值观坚持上，Ant Design 有三点与众不同： ---- +## 自然 -## 微小 +todo... -### 微创新 +作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。我们已做了部分探索，并将追求『自然』作为我们未来持之以恒的方向。 -数值输入框示例 - -分页示例 - -字数校验框示例 - -『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的更好。 - -### 集成创新 - -填空示例 - -带图表的表格 - -选择合适的组件进行组合和集成，形成优势互补的创新过程，来满足多变的业务需求。 - ---- +- 在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实产品体验。详见视觉语言 +- 在行为的执行中，利用行为分析、人工智能、传感器等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然。 ## 确定 -### 面向对象的方法 +todo... -色值换算工具示例 +『设计者』需要做出更好的设计决策，给予研发团队一种高确定性、低熵值的研发状态。同时，不同设计者在充分理解业务述求后，基于 Ant Design 体系都会有相同且符合当前业务特性的设计产出。 -排版规则示例 - -操作反馈 - 正确示例 - -操作反馈 - 错误示例 - -探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。 - -### 通俗而科学的设计原则 - -详见[『设计原则』](/docs/spec/proximity)。 - ---- - -## 幸福 - -### 用户的幸福 - -用户的幸福示例 - -漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应； - -良好的功能、性能和可用性，使用户在『行为层次』中产生积极反应； - -自我形象、个人满足和美好记忆，使用户在『反思层次』中体验思想和情感的交融。 - -### 设计者的幸福 - -设计者的幸福示例 - -从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。 - -从『有』到『优』时，提供一系列自定义建议，帮助『设计者』塑造产品个性并提升整体体验，服务海量用户。 +- **保持克制：**能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。 +- **面向对象的方法：**探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版 +- **模块化设计：**将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件、模板或者自行抽象可复用的组件、模板，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。 diff --git a/docs/spec/font.md b/docs/spec/font.md index e19e79720b..c6d6d0d1be 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -6,21 +6,22 @@ title: en-US: Font --- -跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。 +字体是体系化界面设计中最基本的构成之一。 -字体是界面设计中最重要的基本构成之一，用户通过文本来消化内容和完成工作，优雅的字体将大大提升用户的阅读体验及工作效率。Ant Design 的字体方案，在满足不同终端始终保持良好的阅读体验的同时，使页面的视觉层次更加清晰。使用时有以下三点需要注意： +我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。Ant Design 字体方案，是基于''动态秩序''的设计原则，结合了自然对数以及音律的规则得出的，再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。 +在中后台视觉体系中定义字体系统，我们建议从 5 几个方面出发： -- 合理的使用不同的字重、字号和颜色来强调界面中最重要的信息； -- 尽可能的使用单种字体，混合使用多种字体会让界面看起来零散和草率； -- 遵循 WCAG 2.0 标准，字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准。 +1. 字体家族 +1. 主字体 +1. 字阶与行高 +1. 字重 +1. 字体颜色 --- ## 字体家族 -字体家族 css 代码如下： - -优秀的字体系统的核心是选择一个好的字体。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下字体始终保持良好的易读性和可读性，体现了友好，稳定和专业的特性。 +优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下字体始终保持良好的易读性和可读性，体现了友好，稳定和专业的特性。此外，考虑到中后台产品常常会有大量的数字对比展示的诉求，我们单独将数字的字体定义为等宽的 Helvatica Neue，以便于提升数字间纵向比较时的阅读体验。 ```css font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, @@ -34,26 +35,66 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, > 技术方案：http://stackoverflow.com/questions/13611420/set-a-font-specifically-for-all-numbers-on-the-page -## 字号 +## 主字体 -Ant Design 使用不同的字号和字重来传递视觉的信息层次。默认字体为 `12pt`，展示型页面可以设置为 `14pt`，其他字体字号相应升级。 +我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）对 Ant Design 的主字体进行了一次升级，从原先的 12 上升至 14，以保证在多数常用显示器上的用户阅读效率最佳。 -![](https://zos.alipayobjects.com/rmsportal/UkvKkdJgvFqlewCWFyQE.png) +
+ +
-## 行高 +## 字阶与行高 -行高会影响阅读的体验，西文的基本行高通常是字号的 `1.2em` 上下，而中文因为字符密实且高度一致，所以一般行高需要更大，`1.5em` 至 `1.8em` 之间是一个比较好的视觉阅读效果，Ant Design 规定默认文案字体行高为 `1.5em`，展示型页面可根据实际情况调整行高。 +字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。 -### 行高公式 +
+ +
- +Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸的字体以及与之相对应的行高。 -字体行高绝对值为『字号 x 1.5倍』。例如：12 号字体的行高为 `18px`，14 号字体的行高为 `21px`。 +
+ +
+ +在 Ant Design 的视觉体系中，我们建议的主要字体为 14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中（展示型页面除外），字阶的选择尽量控制在 3-5 种之间，保持克制的原则。 + +## 字重 + +字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的600。 + +
+
+ +
+
+ +
+
+ +
+
+ + ## 字体颜色 - +文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。 -文本颜色如果和背景颜色太接近就会很难以阅读，这对于深色背景和浅色背景同样适用。 +
+ +
-考虑到无障碍设计的需求，帮助那些弱视和色盲的用户也能轻松识别和阅读屏幕上的文字，我们参考了 WACG 2.0 的标准，文本和背景色之间至少保持最小 4.5:1 的对比度（AA 级），正文内容都保持了 7:1 以上的 AAA 级对比度。 +## 建议 + +字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议： + +1. **建立体系化的设计思路：**在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。 +1. **少即是多：**在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、自重强调视觉重点或对比关系。 +1. **尝试让字体像音符一样跳跃：**在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会另字阶之间产生一种微妙的韵律感。 diff --git a/docs/spec/icon.en-US.md b/docs/spec/icon.en-US.md index 57e112acfe..9f37a09459 100644 --- a/docs/spec/icon.en-US.md +++ b/docs/spec/icon.en-US.md @@ -55,7 +55,7 @@ Icons that follow Ant Design should have rounded corners and edges using a 72px #### Visual correction -Correct example +Correct example Incorrect example In certain special cases (for example, when the icon is too compact), adjustments to line width, outlines, or other subtle changes may be made to increase readability. diff --git a/docs/spec/icon.zh-CN.md b/docs/spec/icon.zh-CN.md index db74853e8b..cef5929799 100644 --- a/docs/spec/icon.zh-CN.md +++ b/docs/spec/icon.zh-CN.md @@ -14,7 +14,7 @@ Ant Design 的图标在设计和使用时有以下两个原则点需要注意： ## 系统图标 - + 系统图标通常用来表示常用的操作，比如：删除、保存、编辑。也可以用来表示一个文件或者状态。 @@ -22,7 +22,7 @@ Ant Design 的图标在设计和使用时有以下两个原则点需要注意： ### 关键轮廓线 -网格和关键轮廓线 +网格和关键轮廓线 根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。 @@ -30,53 +30,51 @@ Ant Design 的图标在设计和使用时有以下两个原则点需要注意： - [制作小技巧](https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png) -正方形外轮廓 -横向矩形外轮廓 +正方形外轮廓 +横向矩形外轮廓 -圆形外轮廓 -纵向矩形外轮廓 +圆形外轮廓 +纵向矩形外轮廓 -### 细节 +### 笔画 -#### 笔画 - -正确示范 -错误示范 +正确示范 +错误示范 一致的笔画权重是保持整个图标系统视觉统一的关键，Ant Design 系统图标的线条统一为 72px 宽度。 -#### 边角 +### 边角 -正确示范 -错误示范 +正确示范 +错误示范 一致的角度半径也是保持整个图标系统视觉统一的重要元素。 Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，icon 内部空间的边角保持直角，笔画的终端为圆角。 -#### 视觉修正 +### 视觉修正 -正确示范 -错误示范 +正确示范 +错误示范 在一些特殊情况下（比如，icon 的形状比较复杂紧凑），可以通过调整线条的粗细或圆角的大小等微妙的变化来增加图标的易读性。 ### 透视角度 -正确示范 -错误示范 +正确示范 +错误示范 始终保持简洁、平面的风格,不要让图标具有多维度空间感，或者充满了细节。 ### 命名规则 - + 统一的命名方式有助于管理图标，也能更快速的找到需要的图标。例如，环绕型的图标统一以「-o」后缀。 ### 图标尺寸 - + 应用于页面时请使用 Ant Design 的规范尺寸，与字体搭配时和字体的尺寸保持一致。 @@ -84,7 +82,7 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico ### 颜色 - + 图标的颜色需要与搭配文案的色值保持一致（表示状态的除外）。 @@ -92,7 +90,7 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico ## 业务图标 - + 业务图标不同于系统图标，本身不带有功能性的操作，而是辅助配合文案的一个抽象化图形。相较于系统图标，业务图标在设计的细节上更为丰富，使用的尺寸也比较大。 @@ -100,12 +98,12 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico ### 图标尺寸 - + 在常规使用中，有 32px（最小尺寸）、48px 和 64px（最大尺寸）三种选择。 ### 颜色 - + 业务图标有单色（中性色）和双色（中性色+主色）两种，主色的面积不超过整个 icon 的 40%。 diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md index 351bfc2a8d..66c7b0d752 100644 --- a/docs/spec/introduce.zh-CN.md +++ b/docs/spec/introduce.zh-CN.md @@ -4,13 +4,13 @@ order: 0 title: Introduction --- -
- +
+
-不同的设计规范和实现方式会给企业中后台产品研发的设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。在大量真实项目研发实践中，我们建设了一套中后台设计体系 Ant Design，旨在统一中后台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。 +在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。 -Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中后台设计语言，利用统一的设计规范、前端实现、设计/研发工具链对产品研发赋能，全面提高中后台产品体验和研发效率。 +Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 --- @@ -19,8 +19,8 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 我们提供完善的设计原则、最佳实践和设计资源文件（Sketch 和 Axure），来帮助业务快速设计出高质量的产品原型。 - [设计原则](/docs/spec/proximity) -- [设计模式](/docs/pattern/navigation) -- [设计资源](/docs/resource/download) +- [设计模式](/docs/spec/overview) +- [设计资源](/docs/spec/download) ## 前端实现 diff --git a/docs/spec/invitation.en-US.md b/docs/spec/invitation.en-US.md index 1a48d1d793..3580687045 100644 --- a/docs/spec/invitation.en-US.md +++ b/docs/spec/invitation.en-US.md @@ -31,7 +31,7 @@ Call to Action Invitations are generally provided as static instructions on the
-example 1 of Tour Invitation +example 1 of Tour Invitation example 2 of Tour Invitation @@ -70,4 +70,4 @@ Inference Invitation: Use visual inferences during interaction to cue users as t More Content Invitation: Indicate that there is more content on the page. -
\ No newline at end of file +
diff --git a/docs/spec/layout.en-US.md b/docs/spec/layout.en-US.md index 72f8e97c07..f0cd8f81a4 100644 --- a/docs/spec/layout.en-US.md +++ b/docs/spec/layout.en-US.md @@ -105,7 +105,7 @@ It is recommended that the number of blocks arranged in the horizontal direction -The `Gutter` value in ant design is fixed. When the width of a browser decrease or increase within a certain range, the width of `grids` will be changed accordingly, but the width of `Gutter` remains unchanged. +The `Gutter` value in Ant Design is fixed. When the width of a browser decrease or increase within a certain range, the width of `grids` will be changed accordingly, but the width of `Gutter` remains unchanged. There are two `Gutter`s in Ant Design diff --git a/docs/spec/layout.zh-CN.md b/docs/spec/layout.zh-CN.md index 060c6fee62..c8d612ffe8 100644 --- a/docs/spec/layout.zh-CN.md +++ b/docs/spec/layout.zh-CN.md @@ -4,110 +4,63 @@ order: 2 title: 布局 --- -布局是页面构成的前提，是后续展开交互和视觉设计的基础。Ant Design 提供了常用的布局模板来保证同类产品间的一致性，设计者在选择布局之前，需要注意以下几点原则： +空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI界面的布局空间要基于『动态、体系化』的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发，基于『秩序之美』的原则，探索 UI 设计中的动态空间秩序，形成了 Ant Design 的界面布局方式，为设计者构筑具备理性之美的布局空间创造了条件。 -- 明确用户在此场景中完成的主要任务和需获取的决策信息。 -- 明确决策信息和操作的优先级及内容特点，选择合理布局。 +在中后台视觉体系中定义布局系统，我们建议从 5 个方面出发： ---- +1. 统一的画板尺寸 +1. 适配方案 +1. 网格单位 +1. 栅格 +1. 常用模度 -## 常用布局 +## 统一画板 -通过大量的中台设计实践，Ant Design 总结了六类常用的页面布局模板：网站展示页、Dashboard、列表页、表格页、详情页、表单页。在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局。 +为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。蚂蚁中台设计设计团队统一的画板尺寸为1440。 -### 网站展示页 +## 适配 - +在设计过程中，设计师还需要建立适配的概念，根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。据统计，使用中台系统的用户的主流分辨率主要为 1920、1440和 1366，个别系统还存在 1280 的显示设备。 - +Ant Design 两种较为典型的适配方案： -网站展示页（即官网页）通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图，简短的产品介绍信息，以及用户登录入口等。在设计时我们建议： +### 一、左右布局的适配方案 -- 明确你要传达的内容，保持简短而清晰的文案。 -- 搭配清晰、直观的产品图片，有助于加深用户对产品的理解和记忆。 +常被用于左右布局的设计方案中，常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。 -### 控制台页 +![左右布局的适配方案](https://gw.alipayobjects.com/zos/rmsportal/xQRlXSOwrRonMOIYXeRZ.png) - +### 二、上下布局的适配方案 - +常被用于上下布局的设计方案中，做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。 -控制台页（Dashboard）集合了大量多样化的信息（如数字，图形，文案等），需要一目了然地将关键信息展示给用户。因此，如何将庞大复杂的信息精简清晰地展示出来，是设计此类页面的关键。在设计时要注意以下几点： +![上下布局的适配方案](https://gw.alipayobjects.com/zos/rmsportal/XzcyeBnPowMqKStoDHMk.png) -- 按照信息的重要程度来组织页面排版，突出展示关键信息。 -- 将数据可视化，让用户可以直观地了解关键信息及整体情况。 -- 合理地使用颜色及栅格排版，减轻用户的视觉负担。 +这里提及的只是非常简单的两种适配的思路，实际设计中一套完美的适配方案需要设计师具备前端视角、平面构图视角以及交互视角。 -### 列表页 +## 网格单位 - +Ant Design 通过网格体系来实现视觉体系的秩序。网格的基数为8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网格的思考方式，还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗。 - +## 关于栅格 -列表设计是并列式展现信息，方便用户能快速查看基本信息及操作。因此，信息的「可阅读性」及「可操作性」是设计的关键。在设计时要注意以下几点： +Ant Design 采用 24 栅格体系。以 1440 上下布局的结构为例，对宽度为 1168 的内容区域 进行 24 栅格的划分设置，如下图所示。我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。 -- 根据用户需求来定义信息展示的等级，仅展示关键信息及操作。 -- 当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。 +![栅格 layout](https://gw.alipayobjects.com/zos/rmsportal/TGgqrjNNHljnktGrafre.png) -## 表格页 +对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中视角的不同就容易造成偏差，最终影响还原度，继而增加沟通成本。 - +Ant Design 的设计师通过 4 点来实现设计过程中和工程师的沟通： - +1. 清晰的定义动态布局范围 +1. 尽量保持偶数思维 +1. 关键数据的交付（Gutter、Column） +1. 区块的定义要从 column 开始到 column 结束 -表格作为多维信息展示的载体，使复杂的信息更易于阅读与理解。它的易读性，便捷性，易操作性对产品的体验起着举足轻重的作用。因此，我们在设计时要注意以下几点： +## 常用模度 -- 构造清晰的表格布局，有利于提升读者对信息的接收速度和理解程度。 -- 更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。 -- 当界面需要在一个很大的多纵行表格中展示数据，或每一横列数据有多行信息时，可以巧妙地运用横向或纵向斑马条，使得信息条目之间更为分明，视觉上更易区分。 +蚂蚁中后台涵盖了大量的不同类型和量级的产品，为了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，Ant Design 提出了 UI 模度的概念。在大量的实践中，我们提取了一组可以用于UI布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。 -### 详情页 +## 是启发，而非限制 - - - - -详情页面一般会承载大量的基本信息，扩展信息，或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息，提高决策效率。这设计时有以下几点需要注意： - -- 清晰的排版格式，易于阅读的文本大小及间距，都是影响用户获取信息效率的关键因素。 -- 图文搭配比单文本展示信息能更好地提高用户的理解。 - -### 表单页 - - - - - -表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程： - -- 考虑用户的浏览方式，提供清晰的用户视线浏览路径； -- 内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）； -- 标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰； -- 醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。 - ---- - -## 栅格 - -我们通过定义网格、间距来呈现产品布局的最佳效果，设计师在设计时可按『页面总宽 1440px，内容区 1208px』来设定，并在此基础上以 24 等分的栅格来划分整个设计建议区域。 - -![](https://os.alipayobjects.com/rmsportal/bohSixChLxFkwsOEiNaF.png) - -建议横向排列的区块数量最多四个，最少一个，以保证视觉层面的舒适感。 - -![](https://os.alipayobjects.com/rmsportal/JmrNLpHxwcLebVpBIGqD.png) - -> 注：图中灰色部分为栅格的列，定义为『Column』，白色部分为栅格的间隔，定义为『Gutter』。 - -### 栅格公式 - - - -我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。 - -在 Ant Design 中，我们定义了两种 Gutter： - -- 网站展示页和 Dashboard 的 Gutter 宽度为 24px。 -- 列表、表格、详情和表单页面的 Gutter 宽度为 16px。 - -> [设置栅格的小技巧](https://zos.alipayobjects.com/rmsportal/cbxeMLaFnqQEvFgmhSTS.png)。 +Ant Design 在布局空间上的成果并非要限制设计产出，更多的在于引导设计者如何做到『更好』。8 倍数的双数组通过排列组合的方式可以形成千变万化种可能性，但在无限的可能性之中依然存在着『只是简单的套用数据组合』同『看起来很精妙』的差别。实现合理优雅的界面布局，在对美感的追求之上，还应当结合可用性来看待，对于企业级应用界面布局的探索，我们依然在路上。 diff --git a/docs/spec/overview.md b/docs/spec/overview.md index 91217fed95..7ffc461ea0 100644 --- a/docs/spec/overview.md +++ b/docs/spec/overview.md @@ -6,4 +6,29 @@ title: en-US: Overview --- -Coming soon. +在企业级业务中使用设计模式，能大幅度提升研发团队的确定性，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。 + +设计模式秉承 Ant Design 设计价值观，针对企业级产品中反复出现的设计问题给出一般解决方案。设计者可直接使用设计模式完成界面设计；也可以设计模式为起点，衍生出更具业务特性的解决方案满足个性化设计需求。 + +同时，这是一份动态更新的设计文档，你的阅读和反馈正是我们不断前进的动力，[Github 反馈地址](https://github.com/ant-design/ant-design/issues)。 + +## 信息框架 + +todo... + +完整的设计模式将会包含 ETC 三大实体部分，以及 Genneral Concepts 这样的黏合剂： + +- **Examples 产品范例：**由多张模板构成，启发用户如何使用和搭建出一个常见系统 +- **Templates 模板：**页面级示例，启发用户如何通过组件搭建出系统中的典型页面，eg：详情页 +- **Components 组件** + - Examples of Components 业务组件/模块：区块级示例，一般由多个组件构成，eg：PageHeader + - Basic Components 基础组件：构成系统最基础的元素，eg：Button、Pagination +- **Genneral Concepts 通用概念：**一些保证 ETC 体系化的约定，eg：文案 + +## 资源 + +我们和工程师通力合作，将设计模式转换为可重用代码，最大程度提升你们的工作效率和沟通效率。 + +- [Ant Design Pro](https://pro.ant.design)：开箱即用的解决方案，包含 20+ 模板以及 10+ 业务组件 +- [Ant Design Components](https://ant.design/docs/react/introduce)：Ant Design 的 React 实现，是风靡全球的组件库，包含 50+ 基础组件 +- [Ant Design Library](http://library.ant.design/)：和代码配套 Axure 资源包，让你的原型精美得像视觉稿，包含模板、组件等元素 diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less index 5d1170d1ac..25f30927c0 100644 --- a/site/theme/static/markdown.less +++ b/site/theme/static/markdown.less @@ -13,7 +13,6 @@ } .markdown p > img { - margin: 2.4em 1em; box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35); } diff --git a/site/theme/template/Color/ColorPalettes.jsx b/site/theme/template/Color/ColorPalettes.jsx index 09614e719f..b2315240b4 100644 --- a/site/theme/template/Color/ColorPalettes.jsx +++ b/site/theme/template/Color/ColorPalettes.jsx @@ -143,12 +143,6 @@ const ColorPalettes = () => { chinese: '法式洋红', description: '明快、感性', }, - { - name: 'grey', - english: 'Grey', - chinese: '灰', - description: '平稳、中性', - }, ]; return (
From bdc40f96b0d9bad2baf55885f1b8d6dddc0189a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 26 Dec 2017 14:13:50 +0800 Subject: [PATCH 025/211] Update feature.zh-CN.md --- docs/spec/feature.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/feature.zh-CN.md b/docs/spec/feature.zh-CN.md index 17e8f57d37..814ffbc04b 100644 --- a/docs/spec/feature.zh-CN.md +++ b/docs/spec/feature.zh-CN.md @@ -6,7 +6,7 @@ title: 设计价值观 与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』和『开发者』的使用体验，践行『以人为本』的设计理念。 设计价值观（Design Values）为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。 -todo... +![](https://os.alipayobjects.com/rmsportal/SyurwytfcvpbNLG.png) 在设计价值观坚持上，Ant Design 有三点与众不同： From 03e3eff01bf1029d41d9a3e25ee591d54500fbff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 26 Dec 2017 14:14:10 +0800 Subject: [PATCH 026/211] Update feature.zh-CN.md --- docs/spec/feature.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/feature.zh-CN.md b/docs/spec/feature.zh-CN.md index 814ffbc04b..17e8f57d37 100644 --- a/docs/spec/feature.zh-CN.md +++ b/docs/spec/feature.zh-CN.md @@ -6,7 +6,7 @@ title: 设计价值观 与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』和『开发者』的使用体验，践行『以人为本』的设计理念。 设计价值观（Design Values）为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。 -![](https://os.alipayobjects.com/rmsportal/SyurwytfcvpbNLG.png) +todo... 在设计价值观坚持上，Ant Design 有三点与众不同： From 600c8c69f06aa1a1efb52fae8cef92341626bf68 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 26 Dec 2017 14:57:49 +0800 Subject: [PATCH 027/211] Tweak color palette --- docs/spec/colors.zh-CN.md | 6 +- site/theme/static/colors.less | 51 ++++++++++ .../theme/template/Color/ColorPaletteTool.jsx | 97 +------------------ site/theme/template/Color/ColorPalettes.jsx | 74 +------------- site/theme/template/Color/ColorPatterns.jsx | 92 ++++++++++++++++++ site/theme/template/Color/Palette.jsx | 74 ++++++++++++++ 6 files changed, 230 insertions(+), 164 deletions(-) create mode 100644 site/theme/template/Color/ColorPatterns.jsx create mode 100644 site/theme/template/Color/Palette.jsx diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index 8c78d19721..355d88d53e 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -32,7 +32,11 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序 ### 中性色板 -todo... +`````__react +import Palette from '../../site/theme/template/Color/Palette'; + +ReactDOM.render(, mountNode); +````` ### 数据可视化色板 diff --git a/site/theme/static/colors.less b/site/theme/static/colors.less index 7240251f49..28d0fe295f 100644 --- a/site/theme/static/colors.less +++ b/site/theme/static/colors.less @@ -81,6 +81,57 @@ } } +.color-palette-horizontal { + width: 100%; + + .main-color { + display: flex; + + &-item { + flex: 1; + position: relative; + padding: 0; + margin-right: 0; + border-radius: 0; + height: 86px; + text-align: center; + padding-top: 37px; + line-height: normal; + + .main-color-text { + float: none; + } + + &:hover { + margin-top: -10px; + height: 96px; + border-radius: 4px 4px 0 0; + } + } + + &-value { + position: absolute; + text-align: center; + width: 100%; + left: 0; + bottom: 0; + float: none; + transform-origin: unset; + } + + &:hover { + .main-color-item { + padding-top: 8px; + } + + .main-color-value { + opacity: 0.7; + bottom: 8px; + } + } + } +} + .make-palatte(@color, @index: 1) when (@index <= 10) { .palatte-@{color}-@{index} { @background: "@{color}-@{index}"; diff --git a/site/theme/template/Color/ColorPaletteTool.jsx b/site/theme/template/Color/ColorPaletteTool.jsx index 28aa372ec2..c34f140edf 100644 --- a/site/theme/template/Color/ColorPaletteTool.jsx +++ b/site/theme/template/Color/ColorPaletteTool.jsx @@ -1,112 +1,25 @@ import React, { Component } from 'react'; -import Color from 'color-standalone'; import { FormattedMessage } from 'react-intl'; -import ColorBlock from './ColorBlock'; import ColorPicker from './ColorPicker'; - -const hueStep = 2; // 色相阶梯 -const saturationStep = 16; // 饱和度阶梯，浅色部分 -const saturationStep2 = 5; // 饱和度阶梯，深色部分 -const brightnessStep1 = 5; // 亮度阶梯，浅色部分 -const brightnessStep2 = 15; // 亮度阶梯，深色部分 -const lightColorCount = 5; // 浅色数量，主色上 -const darkColorCount = 4; // 深色数量，主色下 +import ColorPalettes from './ColorPatterns'; // eslint-disable-next-line export default class ColorPaletteTool extends Component { state = { primaryColor: '#1890ff', }; + handleChangeColor = (e) => { const value = e.target ? e.target.value : e; this.setState({ primaryColor: value, }); } - // eslint-disable-next-line - getHue(hsv, i, light) { - let hue; - // 根据色相不同，色相转向不同 - if (hsv.h >= 60 && hsv.h <= 240) { - hue = light ? hsv.h - (hueStep * i) : hsv.h + (hueStep * i); - } else { - hue = light ? hsv.h + (hueStep * i) : hsv.h - (hueStep * i); - } - if (hue < 0) { - hue += 360; - } else if (hue >= 360) { - hue -= 360; - } - return hue; - } - // eslint-disable-next-line - getSaturation(hsv, i, light) { - let saturation; - if (light) { - saturation = hsv.s - (saturationStep * i); - } else if (i === darkColorCount) { - saturation = hsv.s + (saturationStep); - } else { - saturation = hsv.s + (saturationStep2 * i); - } - // 边界值修正 - if (saturation > 100) { - saturation = 100; - } - // 第一格的 s 限制在 6-10 之间 - if (light && i === lightColorCount && saturation > 10) { - saturation = 10; - } - if (saturation < 6) { - saturation = 6; - } - return saturation; - } - // eslint-disable-next-line - getValue(hsv, i, light) { - if (light) { - return hsv.v + (brightnessStep1 * i); - } - return hsv.v - (brightnessStep2 * i); - } - renderColorPatterns() { - const patterns = []; - const pColor = Color(this.state.primaryColor); - let index = 0; - for (let i = lightColorCount; i > 0; i -= 1) { - const hsv = pColor.clone().hsv(); - const colorString = Color({ - h: this.getHue(hsv, i, true), - s: this.getSaturation(hsv, i, true), - v: this.getValue(hsv, i, true), - }).hexString(); - index += 1; - patterns.push( - - ); - } - index += 1; - patterns.push( - - ); - for (let i = 1; i <= darkColorCount; i += 1) { - const hsv = pColor.clone().hsv(); - const colorString = Color({ - h: this.getHue(hsv, i), - s: this.getSaturation(hsv, i), - v: this.getValue(hsv, i), - }).hexString(); - index += 1; - patterns.push( - - ); - } - return patterns; - } + render() { return (
-
+
@@ -119,7 +32,7 @@ export default class ColorPaletteTool extends Component {
- {this.renderColorPatterns()} +
diff --git a/site/theme/template/Color/ColorPalettes.jsx b/site/theme/template/Color/ColorPalettes.jsx index b2315240b4..2449275093 100644 --- a/site/theme/template/Color/ColorPalettes.jsx +++ b/site/theme/template/Color/ColorPalettes.jsx @@ -1,73 +1,5 @@ -import React, { Component } from 'react'; -import CopyToClipboard from 'react-copy-to-clipboard'; -import { message } from 'antd'; - -const rgbToHex = (rgbString) => { - const rgb = rgbString.match(/\d+/g); - let r = parseInt(rgb[0], 10).toString(16); - let g = parseInt(rgb[1], 10).toString(16); - let b = parseInt(rgb[2], 10).toString(16); - r = r.length === 1 ? `0${r}` : r; - g = g.length === 1 ? `0${g}` : g; - b = b.length === 1 ? `0${b}` : b; - return `#${r}${g}${b}`; -}; - -class Palette extends Component { - componentDidMount() { - this.hexColors = {}; - Object.keys(this.colorNodes).forEach((key) => { - const computedColor = getComputedStyle(this.colorNodes[key])['background-color']; - if (computedColor.indexOf('rgba') >= 0) { - this.hexColors[key] = computedColor; - } else { - this.hexColors[key] = rgbToHex(computedColor); - } - }); - this.forceUpdate(); - } - render() { - this.colorNodes = this.colorNodes || {}; - const { name, description, english, chinese } = this.props.color; - const colors = []; - const colorName = `${english} / ${chinese}`; - for (let i = 1; i <= 10; i += 1) { - const colorText = `${name}-${i}`; - colors.push( - message.success(`@${colorText} copied: ${this.hexColors[colorText]}`)} - key={colorText} - > -
{ this.colorNodes[`${name}-${i}`] = node; }} - className={`main-color-item palatte-${name}-${i}`} - style={{ - color: (name === 'yellow' ? i > 6 : i > 5) ? '#fff' : 'unset', - fontWeight: i === 6 ? 'bold' : 'normal', - }} - title="click to copy color" - > - {colorText} - {this.hexColors - ? {this.hexColors[colorText]} - : null} -
- - ); - } - return ( -
-
- {colorName} - {description} -
-
{colors}
-
- ); - } -} +import React from 'react'; +import Palette from './Palette'; const ColorPalettes = () => { const colors = [ @@ -146,7 +78,7 @@ const ColorPalettes = () => { ]; return (
- {colors.map(color => )} + {colors.map(color => )}
); }; diff --git a/site/theme/template/Color/ColorPatterns.jsx b/site/theme/template/Color/ColorPatterns.jsx new file mode 100644 index 0000000000..f7cb8a4349 --- /dev/null +++ b/site/theme/template/Color/ColorPatterns.jsx @@ -0,0 +1,92 @@ +import React from 'react'; +import Color from 'color-standalone'; +import ColorBlock from './ColorBlock'; + +const hueStep = 2; // 色相阶梯 +const saturationStep = 16; // 饱和度阶梯，浅色部分 +const saturationStep2 = 5; // 饱和度阶梯，深色部分 +const brightnessStep1 = 5; // 亮度阶梯，浅色部分 +const brightnessStep2 = 15; // 亮度阶梯，深色部分 +const lightColorCount = 5; // 浅色数量，主色上 +const darkColorCount = 4; // 深色数量，主色下 + +function getHue(hsv, i, light) { + let hue; + // 根据色相不同，色相转向不同 + if (hsv.h >= 60 && hsv.h <= 240) { + hue = light ? hsv.h - (hueStep * i) : hsv.h + (hueStep * i); + } else { + hue = light ? hsv.h + (hueStep * i) : hsv.h - (hueStep * i); + } + if (hue < 0) { + hue += 360; + } else if (hue >= 360) { + hue -= 360; + } + return hue; +} + +function getSaturation(hsv, i, light) { + let saturation; + if (light) { + saturation = hsv.s - (saturationStep * i); + } else if (i === darkColorCount) { + saturation = hsv.s + (saturationStep); + } else { + saturation = hsv.s + (saturationStep2 * i); + } + // 边界值修正 + if (saturation > 100) { + saturation = 100; + } + // 第一格的 s 限制在 6-10 之间 + if (light && i === lightColorCount && saturation > 10) { + saturation = 10; + } + if (saturation < 6) { + saturation = 6; + } + return saturation; +} + +function getValue(hsv, i, light) { + if (light) { + return hsv.v + (brightnessStep1 * i); + } + return hsv.v - (brightnessStep2 * i); +} + +export default function ColorPatterns({ color }) { + const patterns = []; + const pColor = Color(color); + let index = 0; + for (let i = lightColorCount; i > 0; i -= 1) { + const hsv = pColor.clone().hsv(); + const colorString = Color({ + h: getHue(hsv, i, true), + s: getSaturation(hsv, i, true), + v: getValue(hsv, i, true), + }).hexString(); + index += 1; + patterns.push( + + ); + } + index += 1; + patterns.push( + + ); + for (let i = 1; i <= darkColorCount; i += 1) { + const hsv = pColor.clone().hsv(); + const colorString = Color({ + h: getHue(hsv, i), + s: getSaturation(hsv, i), + v: getValue(hsv, i), + }).hexString(); + index += 1; + patterns.push( + + ); + } + return patterns; +} diff --git a/site/theme/template/Color/Palette.jsx b/site/theme/template/Color/Palette.jsx new file mode 100644 index 0000000000..6db0f294b1 --- /dev/null +++ b/site/theme/template/Color/Palette.jsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { message } from 'antd'; +import CopyToClipboard from 'react-copy-to-clipboard'; + +const rgbToHex = (rgbString) => { + const rgb = rgbString.match(/\d+/g); + let r = parseInt(rgb[0], 10).toString(16); + let g = parseInt(rgb[1], 10).toString(16); + let b = parseInt(rgb[2], 10).toString(16); + r = r.length === 1 ? `0${r}` : r; + g = g.length === 1 ? `0${g}` : g; + b = b.length === 1 ? `0${b}` : b; + return `#${r}${g}${b}`; +}; + +export default class Palette extends React.Component { + componentDidMount() { + this.hexColors = {}; + Object.keys(this.colorNodes).forEach((key) => { + const computedColor = getComputedStyle(this.colorNodes[key])['background-color']; + if (computedColor.indexOf('rgba') >= 0) { + this.hexColors[key] = computedColor; + } else { + this.hexColors[key] = rgbToHex(computedColor); + } + }); + this.forceUpdate(); + } + render() { + this.colorNodes = this.colorNodes || {}; + const { showTitle, direction } = this.props; + const { name, description, english, chinese } = this.props.color; + const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette'; + const colors = []; + const colorName = `${english} / ${chinese}`; + for (let i = 1; i <= 10; i += 1) { + const colorText = `${name}-${i}`; + colors.push( + message.success(`@${colorText} copied: ${this.hexColors[colorText]}`)} + key={colorText} + > +
{ this.colorNodes[`${name}-${i}`] = node; }} + className={`main-color-item palatte-${name}-${i}`} + style={{ + color: (name === 'yellow' ? i > 6 : i > 5) ? '#fff' : 'unset', + fontWeight: i === 6 ? 'bold' : 'normal', + }} + title="click to copy color" + > + {colorText} + {this.hexColors + ? {this.hexColors[colorText]} + : null} +
+ + ); + } + return ( +
+ {showTitle && ( +
+ {colorName} + {description} +
+ )} +
{colors}
+
+ ); + } +} From 35c36fc77eed975f5fab9018b58559bf8ce640ee Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 26 Dec 2017 23:20:28 +0800 Subject: [PATCH 028/211] More docs --- docs/spec/download.zh-CN.md | 87 ++++++++++++-------- docs/spec/font.md | 20 +++-- docs/spec/motion.md | 22 +++++- docs/spec/reference.zh-CN.md | 135 ++++++++++++++++++-------------- docs/spec/visual.md | 25 +++++- site/theme/static/resource.less | 34 ++++---- 6 files changed, 202 insertions(+), 121 deletions(-) diff --git a/docs/spec/download.zh-CN.md b/docs/spec/download.zh-CN.md index 5b02492ced..0d5b55a432 100644 --- a/docs/spec/download.zh-CN.md +++ b/docs/spec/download.zh-CN.md @@ -7,39 +7,58 @@ title: 下载 这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
- - - - Desktop Components - 桌面组件 Sketch 模板 + +
+ +
+
+ Desktop Components + 桌面组件 Sketch 模板 +
+ + +
+ +
+
+ Mobile Components + 移动组件 Sketch 模板 +
+ + +
+ +
+
+ Ant Design Library + 一套强大的 Ant Design 的 Axure 部件库 +
+ + +
+ +
+
+ Kitchen（敬请期待） + 一个为设计师提效的 Sketch 工具集，让你的设计秀色可餐 +
- - - - - Mobile Components - 移动组件 Sketch 模板 - - - - - - Ant Design Library - 一套强大的 Ant Design 的 Axure 部件库 - - - - - - Web Font - 网络字体图标的本地文件包 - - - - - - Ant UX - 一套页面逻辑原型库，帮你梳理页面逻辑 - - + +
+ +
+
+ Ant UX + 一套页面逻辑原型库，帮你梳理页面逻辑 +
+ + +
+ +
+
+ Web Font + 网络字体图标的本地文件包 +
+
diff --git a/docs/spec/font.md b/docs/spec/font.md index c6d6d0d1be..576889e376 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -63,23 +63,21 @@ Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸 字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的600。 -
-
- +
+
+
-
- +
+
-
- +
+
diff --git a/docs/spec/motion.md b/docs/spec/motion.md index c7959f4751..23975eb4bf 100644 --- a/docs/spec/motion.md +++ b/docs/spec/motion.md @@ -3,5 +3,25 @@ order: 5 title: zh-CN: 动效 en-US: Motion -link: http://motion.ant.design --- + +Ant Motion 是 Ant Design 中提炼出来的动效语言。他不仅仅是动效语言，同时也是一套 React 框架动效解决方案，可以帮助开发者，更容易的在项目中使用动效。 我们提供了单项，组合动画，以及整套解决方案。 + +你可以通过 React 标签，以简单的配置即可完成想要的动画，可以快速的实现不同组合的动画效果，更好的提高你的工作效率，pGithub 反馈地址](https://github.com/ant-design/ant-motion/issues) + +## 设计资源 + +Ant Motion 在界面里主要是来加强体验舒适度、描述层级关系、增加界面活力、反馈与意向等功能性的动效。并提供了完整的一套遵从 Ant Design 的视觉规范来完成的 demo 页面，可灵活又快速的配置出你想要的首页模板。 + +- [动效语言](https://motion.ant.design/language/basic) +- [首页的解决方案](https://motion.ant.design/edit/#t%3Dnav_0_0%2Ccontent_0_0%2Ccontent_2_0%2Ccontent_3_0%2Ccontent_4_0%2Cfooter_0_0) + +## 前端实现 + +我们提供完善的动效语言 & 动效组件 & 动效模板，此外还提供了一整套首页的解决方案，来帮助用户快速设计出高质量的动效。资源在不断优化更新中，你的阅读和反馈正是我们不断前进的动力。 + +- [单元素动效执行组件](https://motion.ant.design/components/tween-one) +- [样式进出场组件](https://motion.ant.design/components/animate) +- [队列进出场组件](https://motion.ant.design/components/queue-anim) +- [随滚动执行效果组件](https://motion.ant.design/components/scroll-anim) +- [切换效果组件](https://motion.ant.design/components/banner-anim) diff --git a/docs/spec/reference.zh-CN.md b/docs/spec/reference.zh-CN.md index 4b93fcc9e3..ffba5011f2 100644 --- a/docs/spec/reference.zh-CN.md +++ b/docs/spec/reference.zh-CN.md @@ -4,63 +4,84 @@ order: 1 title: 致敬 --- -在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web 表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。 +## 设计体系 + +在 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/) +- [Lightning Design System](https://lightningdesignsystem.com/getting-started/) +- [Material Design](https://material.io/)
- - - - About Face 4 - 作者: Alan.cooper - 出版社: 电子工业出版社 - - - - - - Web 界面设计 - 作者: Bill Scott / Theresa Neil - 出版社: 电子工业出版社 - - - - - - 界面设计模式 - 作者: Tidwell,J. - 出版社: 电子工业出版社 - - - - - - 写给大家看的设计书 - 作者: Robin Williams - 出版社: 人民邮电出版社 - - - - - - 设计心理学 1 - 作者: 唐纳德•A•诺曼 - 出版社: 中信出版社 - - - - - - 设计心理学 3 - 作者: 唐纳德•A•诺曼 - 出版社: 中信出版社 - - - - - - Web 表单设计：点石成金的艺术 - 作者: Luke Wroblewski - 出版社: 清华大学出版社 - - + +
+ +
+
+ About Face 4 + 作者: Alan.cooper + 出版社: 电子工业出版社 +
+ + +
+ +
+
+ Web 界面设计 + 作者: Bill Scott / Theresa Neil + 出版社: 电子工业出版社 +
+ + +
+ +
+
+ 界面设计模式 + 作者: Tidwell,J. + 出版社: 电子工业出版社 +
+ + +
+ +
+
+ 写给大家看的设计书 + 作者: Robin Williams + 出版社: 人民邮电出版社 +
+ + +
+ +
+
+ 设计心理学 1 + 作者: 唐纳德•A•诺曼 + 出版社: 中信出版社 +
+ + +
+ +
+
+ 设计心理学 3 + 作者: 唐纳德•A•诺曼 + 出版社: 中信出版社 +
+ + +
+ +
+
+ Web 表单设计 + 作者: Luke Wroblewski + 出版社: 清华大学出版社 +
+
diff --git a/docs/spec/visual.md b/docs/spec/visual.md index cd007ea1df..2804c73427 100644 --- a/docs/spec/visual.md +++ b/docs/spec/visual.md @@ -3,5 +3,28 @@ order: 4 title: zh-CN: 可视化语言 en-US: Visualization -link: https://antv.alipay.com --- + +todo + +可视化语言是基于中台设计语言 Ant Design 衍生的一套具有数据可视化特性的设计指导原则，让数据表达更符合用户心理，帮助『设计者』孵化出更具业务特性的可视化解决方案以满足个性化设计需求，屏蔽不必要的设计差异和实现成本，从而解放『设计者』和前端的研发资源，实现全面提高数据图表的研发效率。 + +同时，这是一份动态更新的设计文档，你的阅读和反馈正是我们不断前进的动力，[Github 反馈地址](https://github.com/antvis/site/issues)。 + +## 设计资源 + +我们提供完善的设计原则 & 指引和设计资源文件（Sketch），此外还提供了一份完整的图表用法说明，来帮助用户快速理解图表并设计出高质量的可视化图表。 + +- [设计原则](https://antv.alipay.com/zh-cn/vis/design/color.html) +- [设计资源](https://antv.alipay.com/zh-cn/vis/resource/index.html) +- [图表用法](https://antv.alipay.com/zh-cn/vis/chart/index.html) + +## 前端实现 + +我们基于原生 JavaScipt 封装了一套 AntV 的组件库，其包含高交互基础图表库 G2，专注解决流程与关系分析的图表库 G6，适于移动端应用的图表库 F2 等，也欢迎社区其他框架的实现版本。 + +- [G2（官方实现）](https://antv.alipay.com/zh-cn/g2/3.x/index.html) +- [G6（官方实现）](https://antv.alipay.com/zh-cn/g6/1.x/index.html) +- [F2（官方实现）](https://antv.alipay.com/zh-cn/f2/3.x/index.html) +- [BizCharts (React)](https://alibaba.github.io/BizCharts/) +- [Viser (React / Vue / Angular)](https://viserjs.github.io/) diff --git a/site/theme/static/resource.less b/site/theme/static/resource.less index 74226c6ba5..e6f7237c93 100644 --- a/site/theme/static/resource.less +++ b/site/theme/static/resource.less @@ -1,17 +1,19 @@ .resource-cards { + display: flex; + flex-flow: wrap; width: 100%; } .resource-card { - max-width: 350px; + display: flex; + max-width: 420px; width: 40%; min-width: 300px; height: 130px; - border: 1px solid #e9e9e9; + border: 1px solid #ced4d9; border-radius: @border-radius-base; font-size: 12px; color: #777; - display: inline-block; margin: 20px 40px 10px 0; vertical-align: middle; transition: all 0.3s ease; @@ -33,23 +35,21 @@ pointer-events: none; } -.resource-card img { - display: inline-block; - vertical-align: middle; - width: 50px; - margin: 0 20px 0 24px; - position: absolute; - top: 50%; - transform: translateY(-50%); +.resource-card-cover, .resource-card-icon { + display: flex; + align-items: center; + justify-content: center; + width: 130px; +} + +.resource-card-cover img { + width: 68px; } .resource-card-content { - display: inline-block; - vertical-align: middle; - position: absolute; - top: 50%; - transform: translateY(-50%); - margin-left: 92px; + display: flex; + flex-flow: column; + justify-content: center; } .resource-card-title { From 8437cf9e2fcef37e7499072c1592142bd0cef675 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 26 Dec 2017 23:41:48 +0800 Subject: [PATCH 029/211] Typo --- docs/spec/motion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/motion.md b/docs/spec/motion.md index 23975eb4bf..43a3db2c95 100644 --- a/docs/spec/motion.md +++ b/docs/spec/motion.md @@ -7,7 +7,7 @@ title: Ant Motion 是 Ant Design 中提炼出来的动效语言。他不仅仅是动效语言，同时也是一套 React 框架动效解决方案，可以帮助开发者，更容易的在项目中使用动效。 我们提供了单项，组合动画，以及整套解决方案。 -你可以通过 React 标签，以简单的配置即可完成想要的动画，可以快速的实现不同组合的动画效果，更好的提高你的工作效率，pGithub 反馈地址](https://github.com/ant-design/ant-motion/issues) +你可以通过 React 标签，以简单的配置即可完成想要的动画，可以快速的实现不同组合的动画效果，更好的提高你的工作效率，[Github 反馈地址](https://github.com/ant-design/ant-motion/issues) ## 设计资源 From bafca6933184efd9efa48ec72843e7471f2ce657 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Wed, 27 Dec 2017 17:57:59 +0800 Subject: [PATCH 030/211] Update English version --- docs/spec/cases.en-US.md | 59 +++-------- docs/spec/colors.en-US.md | 75 +++++++------- docs/spec/colors.zh-CN.md | 6 +- docs/spec/download.en-US.md | 87 +++++++++------- docs/spec/feature.en-US.md | 110 --------------------- docs/spec/font.md | 4 +- docs/spec/icon.en-US.md | 78 +++++++-------- docs/spec/icon.zh-CN.md | 3 +- docs/spec/introduce.en-US.md | 4 +- docs/spec/layout.en-US.md | 115 ---------------------- docs/spec/{layout.zh-CN.md => layout.md} | 14 ++- docs/spec/{feature.zh-CN.md => values.md} | 9 +- site/theme/static/page-nav.less | 1 - 13 files changed, 163 insertions(+), 402 deletions(-) delete mode 100644 docs/spec/feature.en-US.md delete mode 100644 docs/spec/layout.en-US.md rename docs/spec/{layout.zh-CN.md => layout.md} (87%) rename docs/spec/{feature.zh-CN.md => values.md} (79%) diff --git a/docs/spec/cases.en-US.md b/docs/spec/cases.en-US.md index 479565cbf8..f0716dbeff 100644 --- a/docs/spec/cases.en-US.md +++ b/docs/spec/cases.en-US.md @@ -4,72 +4,39 @@ order: 2 title: Cases --- -Starting in April 2015, more and more products of Ant Financial follow Ant Design specification, covering multiple business lines and more than 400 applications. -Designed for enterprise-like complex UIs, used by both professional and non-professional designers, -Ant Design has a low learning curve that helps you getting started fast and achieve rapid results. +Starting in April 2015, more and more products of Ant Financial follow Ant Design specification, covering multiple business lines and more than 80 applications. Designed for enterprise-class complex UIs, used by both professional and non-professional designers, Ant Design has a low learning curve that helps you getting started fast and achieve rapid results. -With a strong focus on proof-based design and user experience, -Ant Design provides a complete front-end development solution that can greatly enhance the design and development efficiency. - -Currently, there are many products and sites using Ant Design. -References to some of these implementations can be found [here](https://github.com/ant-design/ant-design/issues/477). -If your solutions are using Ant Design, please leave us a message. +Currently, there are many products and sites using Ant Design. If your solutions are using Ant Design, please [leave us a message](https://github.com/ant-design/ant-design/issues/477). ## Best Practices --- -### Financial Cloud - - - - +### Ant Financial Cloud Cloud-oriented financial services, used by financial institutions that benefit from customized business cloud computing services. It assists financial institutions to upgrade to a new financial restructuring, promotion of capacity platforms, data and technology. -

Website

+[Visit](https://www.cloud.alipay.com) + +![Ant Financial Cloud](https://gw.alipayobjects.com/zos/rmsportal/KtMLtXsTucsJLWgfwZcw.png) --- ### OceanBase Cloud Platform - - - +OceanBase Cloud is a distributed relational database in a real sense, and OceanBase Cloud Platform is the OceanBase cloud-based database service that can help users quickly create and use OceanBase service. -OceanBase Cloud is a distributed relational database in a real sense, but OceanBase Cloud Platform is the OceanBase cloud-based database service that can help users quickly create and use OceanBase service. +[Visit](http://oceanbase.alipay.com) -

Website

+![OceanBase Cloud Platform](https://gw.alipayobjects.com/zos/rmsportal/hhtmRPAtPsUhwHpULFuu.png) --- -### Service Experience Platform +### Ant Design Pro - - - - - +Based on Ant Design's design values, Ant Design Pro is an enterprise-class frontend/design solution that continues to build up and refine typical template/business components/ancillary design resources based on design specifications and foundation components, Further enhance the experience of "users" and "designers" in the design and development of enterprise-class product design. -Experience Platform is used for collecting all the points of contact and information of the user (including microblogging and other channels). -Through data mining, it exposes the users's experience and it helps the company's internal business team / product managers, facilitating the experience problem solving, in order to achieve healthy functioning streams. +[Visit](https://pro.ant.design) -

Website

- ---- - -[More cases](https://github.com/ant-design/ant-design/issues/477) from community. - - +![Ant Design Pro](https://gw.alipayobjects.com/zos/rmsportal/KZIUjJJZTEqMOgBHQkCb.png) diff --git a/docs/spec/colors.en-US.md b/docs/spec/colors.en-US.md index 7b2600efb8..16c81bd4ac 100644 --- a/docs/spec/colors.en-US.md +++ b/docs/spec/colors.en-US.md @@ -4,23 +4,23 @@ order: 0 title: Colors --- -Not only is color an effective way to create brand recognition, but it also plays an important role in conveying information, providing interactive feedback, and bringing attention to a particular element. Ant Design makes using color simple and practical through an emphasis on efficiency, clarity, and user experience. Please note the following three points when choosing colors: +Ant Design interprets the color system into two levels: a system-level color system and a product-level color system. -- Color usage and positioning should respect cognitive psychology (stay user-focused) -- Visual hierarchy should be clear-cut, and color should establish visual continuity -- Color usage should be in compliance with the [WCAG 2.0 standards](https://www.w3.org/WAI/WCAG20/glance/ "Web Content Accessibility Guidelines") by using sufficient contrast to ensure accessibility +The system-level color system mainly defines the basic color palette, neutral color palette and data visualization color palette in the design of Ant Financial. The product-level color system is in the specific design process, based on the color of the system to further define the tone of the product in accordance with the requirements and function of the color. --- -## Color Palettes +## Color Model -Ant Design's color palettes consist of 10 shallow-to-deep color swatches, and default palettes are defined for certain hues. Users can select a swatch from the color scheme using keywords. In theory, all colors used in the design should be taken from a color palette. +Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams. -After hard working of designers and programmers, we got a great [color palette generation algorithm](https://github.com/ant-design/ant-design/blob/244a2fd2da5561dc13a32ea894ba1bdbd13421aa/components/style/color/colorPalette.less) which can be used to generate a whole new palette based on an input color you specify, replacing our original tint / shade color system). +## System-level Color System -Ant Design's default theme consists of eight basic colors, each of which is derived from the above algorithm. +Ant Design system-level color system also comes from the "natural" design language. Designers abstract the natural scenes through the capture, combined with the technical gene of Ant Financial, forming a unique 12 colors. Further through a large number of observations, to capture the different colors of natural light under the law of change, with the art of drawing ideas, the 12 colors were derived. The definition of neutral color palette is balanced with readability, aesthetics and usability. -> Note: In these shallow-to-deep palettes, the 6th color cell [generally satisfies WCAG 2.0](https://leaverou.github.io/contrast-ratio/)'s 4.5:1 minimum contrast ratio (AA level), and is used as the default for the palette（Yellow color don't follow WCAG in white color because it is designed to be used with dark font/background). +### Base Color Palettes + +Ant Design's base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design. `````__react import ColorPalettes from '../../site/theme/template/Color/ColorPalettes'; @@ -28,7 +28,19 @@ import ColorPalettes from '../../site/theme/template/Color/ColorPalettes'; ReactDOM.render(, mountNode); ````` -In order to provide contrast against different background shades, we chose `White #FFFFFF` and `Black #000000` with varying transparency to distinguish foreground text. For details, please see [font color](/docs/spec/font#font-color). +Ant Design's color palette also has the ability to further extend. After careful elaboration by designers and programmers, we have come up with a set of color generation tools that combine the natural variation of colors. When there is a need for further color design, designers simply define the primary colors according to certain rules and will get a complete range of derived colors automatically . + +### Neutral Color Palette + +`````__react +import Palette from '../../site/theme/template/Color/Palette'; + +ReactDOM.render(, mountNode); +````` + +### Data Visualization Color Palette (Coming soon) + +Data visualization color palette is based on the basic color palette and neutral color palette, and based on the principle that AntV's "effective, clear, accurate and beautiful". ### Palette Generation Tool @@ -42,45 +54,28 @@ ReactDOM.render(, mountNode); --- -## Color application +## Product-level Color System -### Brand color application +### Brand Color -Ant Design's commonly used brand color values + -The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. Taking the default styles of an Ant Design web component as an example, the brand color is mainly reflected in key actions and when highlighting important information. +The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is 1890FF, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes. -> Note: Images and logos can not automatically adhere to the color palette, but should be compatible. +### Functional Color -### Neutral color application + -Ant Design's neutral color values +Functional color represents a clear message as well as status, such as success, error, failure, reminder, link and so on. Functional color selection need to comply with the user's basic understanding of color. We suggest that the functional colors should be kept as consistent as possible under a set of product systems. Do not have too much customization to interfere with the user's cognitive experience. Ant Design's functional color palette is shown on the right: -Gray as a neutral color is used extensively in Ant Design's web design, and its use facilitates the targeting and functional guidance of key content. This color is mainly seen in the navigation frame, backgrounds, secondary operations, and so on. +### Neutral Color -### Functional color application + -Ant Design's functional color card +Neutral color is mainly used in a large part of the text interface, in addition to the background, borders, dividing lines, and other scenes are also very common. Neutral color definition needs to consider the difference between dark background and light background, while incorporating the WCAG 2.0 standard. The neutral color of Ant Design is based on transparency, as shown on the right: -Functional colors are colors that are used to convey state. These are mainly used in notifications, form validations, status messages, etc. Green indicates success, yellow indicates alerts / warnings, red indicates errors, gray indicates skipped / disabled. +--- -### Visual hierarchy +## Color Application In Enterprise Product Design -Good example - -Use the brand color to convey important information or to highlight important actions while surrounding it with large areas of neutral color. This allows users to focus more on the task itself, improving efficiency. - -
- -Bad example - -> Note: We suggest using no more than three colors in the user interface (except for within data charts and graphic illustrations) - -### Color contrast - -Good example -Bad example - -Ant Design's color palette conforms to the WCAG 2.0 standard. The foreground and background colors should always meet the minimum standard of a 3:1 contrast ratio. - -- [Contrast ratio tool](https://leaverou.github.io/contrast-ratio/#%23454545-on-%23fff) +In the design of background applications of Ant Financial, our attitude towards color is restrained. Color is used more based on information delivery, operational guidance and interactive feedback purposes. Above these principles that do not undermine operational efficiency and affect the clear communication of information, a rational choice of color is key. Of course, with illustrations and display page can be properly broken this idea. diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index 355d88d53e..b56f9b20ef 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -38,9 +38,9 @@ import Palette from '../../site/theme/template/Color/Palette'; ReactDOM.render(, mountNode); ````` -### 数据可视化色板 +### 数据可视化色板（敬请期待） -数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 『有效、清晰、准确、美』的原则产生的。数据可视化色板详见[链接](todo...)。 +数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 『有效、清晰、准确、美』的原则产生的。 ### 色板生成工具 @@ -73,7 +73,7 @@ Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 1890FF，应用 -Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结 WCAG 2.0 的 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图： +Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图： --- diff --git a/docs/spec/download.en-US.md b/docs/spec/download.en-US.md index 8c13cc5ad0..1099f5debd 100644 --- a/docs/spec/download.en-US.md +++ b/docs/spec/download.en-US.md @@ -7,39 +7,58 @@ title: Download Please find below some of the design resources and tools about Ant Design that we consider valuable. More of this is still being collected.
- - - - Desktop Components - Sketch Template for Desktop + +
+ +
+
+ Desktop Components + Sketch Template for Desktop +
+ + +
+ +
+
+ Mobile Components + Sketch Template for Mobile +
+ + +
+ +
+
+ Ant Design Library + A powerful Axure library of Ant Design +
+ + +
+ +
+
+ Kitchen（coming soon） + A Sketch plugin for designers，make your design beautiful +
- - - - - Mobile Components - Sketch Template for Mobile - - - - - - Ant Design Library - A powerful Axure library of Ant Design - - - - - - Web Font - Icon font package for your local reference - - - - - - Ant UX - A series prototypes that help creating application structure and user flow - - + +
+ +
+
+ Ant UX + A series prototypes that help creating application structure and user flow +
+ + +
+ +
+
+ Web Font + Icon font package for your local reference +
+
diff --git a/docs/spec/feature.en-US.md b/docs/spec/feature.en-US.md deleted file mode 100644 index 311092844b..0000000000 --- a/docs/spec/feature.en-US.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -category: Ant Design -order: 1 -title: Features ---- - -Unlike other design specifications, Ant Design pursues not only user experience, but also experience of designers and developers, which practice a humanist design idea. - -
-
- -
Subtleties
-
By devoted to create tiny and beautiful change, make efforts in details, we could not only make products more solid and reliable, but also bring good suprises for users.
-
-
- -
Definiteness
-
Create an atmosphere of high definiteness and lower entropy, by making simple and scientific design patterns and using the same communicate channel.
-
-
- -
Happiness
-
Don't design for minimalism，design for getting job done and whatever makes designer happy and satisfied.
-
-
- - - ---- - -## Subtleties - -### Micro innovation - -Number Input Sample - -Pagination Sample - -Charactor Count Sample - -"Difference" is not always "better", but "better" is always different. Pursuing "better" in every details make our components is different, and also better naturally. - -### Compositive innovation - -Input inside text - -Table with charts - -Compose different components for more powerful functions, it is a good path to meet varies of different bussiness requirements. - ---- - -## Definiteness - -### Object oriented - -Color Sample - -Typography Sample - -Feedback - Good - -Feedback - Bad - -We create a object-oriented design method and abstract UI patterns. That help us to do our jobs with continuity. - -### Scientific design principles - -See more at [『Ant Design Principles』](/docs/spec/proximity). - ---- - -## Happiness - -### Happiness of user - -User Happiess Levels - -Beatuful looks, tide typography and smooth animation produce positive reaction at instinct level. - -Good functions, performance and usability produce positive reaction at behavious level. - -Self-image, satisfaction, and good memories bring user a combining experience of thoughts and emotions at learning level. - -### Happiness of designer - -Designer Happiess - -From 0 to 1, Ant Design help designers to implement a quick prototype for trial and error. - -From 1 to 100, Ant Design provide a complete UI solution, help designers to create their own product personality and improve user experience. diff --git a/docs/spec/font.md b/docs/spec/font.md index 576889e376..0ce57f1d08 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -1,5 +1,7 @@ --- -category: Visual +category: + zh-CN: 视觉语言 + en-US: Visual order: 3 title: zh-CN: 字体 diff --git a/docs/spec/icon.en-US.md b/docs/spec/icon.en-US.md index 9f37a09459..513dbe5943 100644 --- a/docs/spec/icon.en-US.md +++ b/docs/spec/icon.en-US.md @@ -11,71 +11,69 @@ An icon is a graphical representation of meaning. Icons can be used to express a --- -## System icons +## System Icons - + -System icons are often used to represent commonly used operations, such as: save, edit, delete. The library also includes icons to represent file types and state. +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. -- [View the icon library](/components/icon/#Application-Icons) +- [View the icon](/components/icon/) -### Key contour lines +### Key Contour Lines -Ant Design's grid and key contour lines +Ant Design's grid and key contour lines -Contour lines play an important role in making various icons with the same visual effect. We recommend using a template following Ant Design's contour lines when creating new icons. +Contour lines play an important role in making various icons with the same visual effect. Please make all icons in the 1024×1024 resolution (16×16 64 times). - [Illustrator tips](https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png) -Square contour -Horizontal rectangle contour +Square contour +Horizontal rectangle contour -Circular contour -Vertical rectangle contour +Circular contour +Vertical rectangle contour -### Design details +### Stroke Weight -#### Stroke weight - -Correct example -Incorrect example +Correct example +Incorrect example Consistent stroke weight is the key to maintaining the visual unity of the entire icon system. Ant Design's icons have a consistent line width of 72px. -#### Corners +### Corners -Correct example -Incorrect example +Correct example +Incorrect example Consistent rounding of corners and sizing of angles is also an important element in maintaining visual unity. -Icons that follow Ant Design should have rounded corners and edges using a 72px radius. Angles should be a multiple of 45°. +Icons that follow Ant Design should have rounded corners and edges using a 72px radius. -#### Visual correction +### Visual Correction -Correct example -Incorrect example +Correct example +Incorrect example In certain special cases (for example, when the icon is too compact), adjustments to line width, outlines, or other subtle changes may be made to increase readability. ### Perspective -Correct example -Incorrect example +Correct example +Incorrect example Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail. -### Naming conventions +### 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 +### Icon Sizing - + Icons should be scaled according to the text size, according to the Ant Design specification. @@ -83,28 +81,28 @@ For example, icons inline with 12pt font should be 12px in size with 8px of spac ### 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). --- -## Pictographs +## Business Icons - + -While certain icons may be used to express an action or to communicate state, other icons may act as pictographs which can be used to either communicate meaning or to help a user remember an abstract concept. +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. -> Note: The design principles for system icons (stroke weight, etc.) also apply to pictographs. +> Note: Business icons design principles and system icons are basically the same, the details of the processing (such as stroke weight, fillet size, etc.) depending on the specific scene may be. -### Pictograph sizing +### Icon Sizing - + -Conventionally, we recommend storing pictograph icons in three sizes: 32px, 48px, and 64px. That said, the physical dimensions of an icon should match the dimensions of where it is used. +In normal use, there are 32px (minimum size), 48px and 64px (maximum size) three options. -### Colors +### Color - + -Pictographs should either be monochrome (using a neutral color) or consist of two colors (the neutral color + primary color), with the primary color not exceeding 40% of the pictograph's area. +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. diff --git a/docs/spec/icon.zh-CN.md b/docs/spec/icon.zh-CN.md index cef5929799..42cede3543 100644 --- a/docs/spec/icon.zh-CN.md +++ b/docs/spec/icon.zh-CN.md @@ -4,8 +4,7 @@ order: 4 title: 图标 --- -图标是具有指代意义的图形，也是一种标识。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致， -Ant Design 的图标在设计和使用时有以下两个原则点需要注意： +图标是具有指代意义的图形，也是一种标识。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致，Ant Design 的图标在设计和使用时有以下两个原则点需要注意： - 简单的图形语言以及高辨识度。清晰、直观的图标更能明确指代含义便于识别记忆； - 保持图标之间一致的风格和表现方式。界面中的所有图标都应该在细节设计、透视和笔画权重上保持一致。 diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md index 40fb7e3675..2c3f6f8492 100644 --- a/docs/spec/introduce.en-US.md +++ b/docs/spec/introduce.en-US.md @@ -4,8 +4,8 @@ order: 0 title: Introduction --- -
- +
+
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development. diff --git a/docs/spec/layout.en-US.md b/docs/spec/layout.en-US.md deleted file mode 100644 index f0cd8f81a4..0000000000 --- a/docs/spec/layout.en-US.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -category: Visual -order: 2 -title: Layout ---- - -Layout is the prerequisite for a webpage. It's also the foundation of follow-up interactive and visual design. In order to guarantee consistency among similar products, Ant Design provides some common layout templates. Before choosing one of these templates, you need to have a clear mind about: - -- The main tasks that a user needs to accomplish and all necessary information for making such decisions. -- The priorities and features of those tasks and information, so as to select a reasonable layout - ---- - -## Commonly used layout - -Through a large number of practices, Ant Design summarized six commonly used layout templates. There are home page, dashboard, list page, table page, details page and form page. Knowing these templates helps to find out a suitable layout for your product quickly. - -### Home page - - - - - - -Home page is usually the first step for a user to understand a website or the products. Generally, home page consists of product drawings, brief product introductions, and user login interfaces. In the design, we recommend you to: - -- Keep the copywriting clear and simply, which helps you better express the ideas. -- Use intuitive pictures for a product, which helps to deepen a user's understanding and impression. - -### Dashboard - - - - - -Dashboard collects a variety of information, such as digitals, graphics, copywriting, etc. Key information should be clearly represented and easily understood. Thus, displaying the complex information in a clear way is important in the design. For this propose, we recommend you to: - -- Organize the page layout according to the importance of information, so as to highlight key points. -- Visualize the data, which allows users to understand key information as well as the overall situation in an intuitive way. -- Use color and grid layout logically, which helps to reduce a user's visual fatigue. - - -### List page - - - - - -List is a way to display information in parallel. A well designed list can be helpful for users to read basic information and perform corresponding operations quickly. Therefore, the "readability" and "operability" of a list are the keys to the design. For this propose, we recommend you to: - -- Identify the importance of information accordingly and show nothing but key information as well as the corresponding operations. -- Fold secondary information or put it into the details page. It allows a user to access information in a progressive way when the content is too complex. - -### Table page - - - - - -Table is a carrier for multi-dimensional information. It can make complex information to be read and understood easily. Its readability, convenience and operability play an essential role in the user experience. Therefore, we should pay attention to the following points in the design: - -- Construct a clear table layout. It can be helpful for a user to receive and understand information. -- Highlight key information through some visual adjustments. -- Use the horizontal or vertical zebra strip smartly when there is a large multi-row table or there are multiple columns in each row. By doing so, information is more distinguishable and easier to be understood. - -### Details page - - - - - -Details page usually carries a large amount of basic information, extended information as well as status information. It's important to identify priorities of the information. A clear layout can be helpful for a user to get key information at a glance and make decisions efficiently. In the design, it's worth noting that: - -- Layout format, text size and text spacing, are the key factors that affect a user's efficiency to access information. -- Text with graphic can be better understood than pure text. - -### Form page - - - - - -Form page is often used for tasks such as login, register, booking, comment, etc. Form page is indispensable when you need to record the user information. Therefore, a well designed form page can guide the user to complete the data recording workflow behind the form efficiently. We recommended you to: - -- Provide a clear user's view path, in consideration of how a user will browse the information; -- Simplify the content of a form (try to avoid redundant inputs) -- Name the tags that can be easy to read and understand. Avoid confusions caused by ambiguous descriptions; -- Place eye-catching submit buttons on the end of a user's view path, which makes it more conducive for a user to complete all the operations. - ---- - -## Grid - -There are `Grid` and `Gutter` in AntD layout. During the design, you can make an assumption that the "total page width is 1440px, and the "content area width is 1208px". Based on this assumption, you can design the page in 24 evenly divided columns. - -![](https://os.alipayobjects.com/rmsportal/bohSixChLxFkwsOEiNaF.png) - -It is recommended that the number of blocks arranged in the horizontal direction be at most four, at least one, so as to guarantee the comfort of view. - -![](https://os.alipayobjects.com/rmsportal/JmrNLpHxwcLebVpBIGqD.png) - -> Note: The gray parts are called "Column", and the white parts are called "Gutter". - -### Grid formula - - - -The `Gutter` value in Ant Design is fixed. When the width of a browser decrease or increase within a certain range, the width of `grids` will be changed accordingly, but the width of `Gutter` remains unchanged. - -There are two `Gutter`s in Ant Design - -- 24px width `Gutter`, which is used in home page and Dashboard -- 16px width `Gutter`, which is used in list Page, table page, details page and form page. - -> [tips for setting the grid ](https://zos.alipayobjects.com/rmsportal/cbxeMLaFnqQEvFgmhSTS.png). diff --git a/docs/spec/layout.zh-CN.md b/docs/spec/layout.md similarity index 87% rename from docs/spec/layout.zh-CN.md rename to docs/spec/layout.md index c8d612ffe8..f987b98d13 100644 --- a/docs/spec/layout.zh-CN.md +++ b/docs/spec/layout.md @@ -1,7 +1,11 @@ --- -category: 视觉语言 +category: + zh-CN: 视觉语言 + en-US: Visual order: 2 -title: 布局 +title: + zh-CN: 布局 + en-US: Layout --- 空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI界面的布局空间要基于『动态、体系化』的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发，基于『秩序之美』的原则，探索 UI 设计中的动态空间秩序，形成了 Ant Design 的界面布局方式，为设计者构筑具备理性之美的布局空间创造了条件。 @@ -16,11 +20,11 @@ title: 布局 ## 统一画板 -为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。蚂蚁中台设计设计团队统一的画板尺寸为1440。 +为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。蚂蚁中台设计团队统一的画板尺寸为 1440。 ## 适配 -在设计过程中，设计师还需要建立适配的概念，根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。据统计，使用中台系统的用户的主流分辨率主要为 1920、1440和 1366，个别系统还存在 1280 的显示设备。 +在设计过程中，设计师还需要建立适配的概念，根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。据统计，使用中台系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。 Ant Design 两种较为典型的适配方案： @@ -40,7 +44,7 @@ Ant Design 两种较为典型的适配方案： ## 网格单位 -Ant Design 通过网格体系来实现视觉体系的秩序。网格的基数为8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网格的思考方式，还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗。 +Ant Design 通过网格体系来实现视觉体系的秩序。网格的基数为 8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网格的思考方式，还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗。 ## 关于栅格 diff --git a/docs/spec/feature.zh-CN.md b/docs/spec/values.md similarity index 79% rename from docs/spec/feature.zh-CN.md rename to docs/spec/values.md index 17e8f57d37..47737a7c79 100644 --- a/docs/spec/feature.zh-CN.md +++ b/docs/spec/values.md @@ -1,10 +1,13 @@ --- category: Ant Design order: 1 -title: 设计价值观 +title: + zh-CN: 设计价值观 + en-US: Design Values --- -与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』和『开发者』的使用体验，践行『以人为本』的设计理念。 -设计价值观（Design Values）为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。 + +设计价值观为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。 + todo... diff --git a/site/theme/static/page-nav.less b/site/theme/static/page-nav.less index 291f158683..44c1489823 100644 --- a/site/theme/static/page-nav.less +++ b/site/theme/static/page-nav.less @@ -3,7 +3,6 @@ bottom: 0; left: 0; width: ~"calc(100% - 194px - 64px)"; - margin-left: 64px; overflow: hidden; font-size: 14px; border-top: 1px solid @site-border-color-split; From 8447afad0944f2ddbecac05b01b8a300a2d5df8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:21:25 +0800 Subject: [PATCH 031/211] Update alignment.zh-CN.md --- docs/spec/alignment.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/alignment.zh-CN.md b/docs/spec/alignment.zh-CN.md index 4a613b9dce..1c3c0f22aa 100644 --- a/docs/spec/alignment.zh-CN.md +++ b/docs/spec/alignment.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 设计原则 +category: 原则 order: 2 title: 对齐 --- From 823dc31719e3d292f5dad8defbfe2ec9cfd8c501 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:22:44 +0800 Subject: [PATCH 032/211] Update colors.zh-CN.md --- docs/spec/colors.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index b56f9b20ef..3203a4fd04 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 视觉语言 +category: 视觉 order: 0 title: 色彩 --- From f133da5e55387496acaf4b54471770ccf351db43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:23:05 +0800 Subject: [PATCH 033/211] Update contrast.zh-CN.md --- docs/spec/contrast.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/contrast.zh-CN.md b/docs/spec/contrast.zh-CN.md index 257bf8240a..3cc2549dcc 100644 --- a/docs/spec/contrast.zh-CN.md +++ b/docs/spec/contrast.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 设计原则 +category: 原则 order: 3 title: 对比 --- From 203b3ff9658abd0b59043d16161e8b5742290090 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:25:40 +0800 Subject: [PATCH 034/211] Update copywriting.md --- docs/spec/copywriting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/copywriting.md b/docs/spec/copywriting.md index 23a47e6303..2412ce5af6 100644 --- a/docs/spec/copywriting.md +++ b/docs/spec/copywriting.md @@ -1,5 +1,5 @@ --- -category: 模式语言 +category: 模式 order: 6 title: zh-CN: 文案 From 72ef5019016253879ad9eecf2d35d8f0031b5fab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:26:00 +0800 Subject: [PATCH 035/211] Update data-display.md --- docs/spec/data-display.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/data-display.md b/docs/spec/data-display.md index 46cc38586e..57bb12e6e0 100644 --- a/docs/spec/data-display.md +++ b/docs/spec/data-display.md @@ -1,5 +1,5 @@ --- -category: 模式语言 +category: 模式 order: 10 title: zh-CN: 数据展示 From 8e8d78c687f19ea83955fdf9ae71284e8d2d780b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:26:12 +0800 Subject: [PATCH 036/211] Update data-entry.md --- docs/spec/data-entry.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/data-entry.md b/docs/spec/data-entry.md index 35bbca3c99..b5b2a63a25 100644 --- a/docs/spec/data-entry.md +++ b/docs/spec/data-entry.md @@ -1,5 +1,5 @@ --- -category: 模式语言 +category: 模式 order: 9 title: zh-CN: 数据录入 From 22ad81035c3161085004b161450e127ae8839ec3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:26:23 +0800 Subject: [PATCH 037/211] Update direct.zh-CN.md --- docs/spec/direct.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/direct.zh-CN.md b/docs/spec/direct.zh-CN.md index 294d113b42..35a142b5fa 100644 --- a/docs/spec/direct.zh-CN.md +++ b/docs/spec/direct.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 设计原则 +category: 原则 order: 5 title: 直截了当 --- From b82a66e557db2be61035e109cec3228dbb952e68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:26:43 +0800 Subject: [PATCH 038/211] Update feedback.md --- docs/spec/feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/feedback.md b/docs/spec/feedback.md index 45b7cab348..86594f1ac8 100644 --- a/docs/spec/feedback.md +++ b/docs/spec/feedback.md @@ -1,5 +1,5 @@ --- -category: 模式语言 +category: 模式 order: 11 title: zh-CN: 反馈 From 10526838e1cc8ec2cc5b9c93ff36cd91cdf95a06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:26:55 +0800 Subject: [PATCH 039/211] Update font.md --- docs/spec/font.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/font.md b/docs/spec/font.md index 0ce57f1d08..cb5671014b 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -1,6 +1,6 @@ --- category: - zh-CN: 视觉语言 + zh-CN: 视觉 en-US: Visual order: 3 title: From 59ad5fd09209ec275ddca5647905ede2340377df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:27:05 +0800 Subject: [PATCH 040/211] Update icon.zh-CN.md --- docs/spec/icon.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/icon.zh-CN.md b/docs/spec/icon.zh-CN.md index 42cede3543..bf3fab3b40 100644 --- a/docs/spec/icon.zh-CN.md +++ b/docs/spec/icon.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 视觉语言 +category: 视觉 order: 4 title: 图标 --- From 91b72c6d9c7234135f8ea93ec6a166482a7c926b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:27:21 +0800 Subject: [PATCH 041/211] Update invitation.zh-CN.md --- docs/spec/invitation.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/invitation.zh-CN.md b/docs/spec/invitation.zh-CN.md index 18a02821bc..4337ea562d 100644 --- a/docs/spec/invitation.zh-CN.md +++ b/docs/spec/invitation.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 设计原则 +category: 原则 order: 8 title: 提供邀请 --- From 9aaa6d63d3ba3792a9214e80d1f5b31d4f0b3266 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:27:31 +0800 Subject: [PATCH 042/211] Update layout.md --- docs/spec/layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/layout.md b/docs/spec/layout.md index f987b98d13..e7c83f92b8 100644 --- a/docs/spec/layout.md +++ b/docs/spec/layout.md @@ -1,6 +1,6 @@ --- category: - zh-CN: 视觉语言 + zh-CN: 视觉 en-US: Visual order: 2 title: From 9dddf3b607efc6137deb8a2f640e3029c58a87d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:27:42 +0800 Subject: [PATCH 043/211] Update lightweight.zh-CN.md --- docs/spec/lightweight.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/lightweight.zh-CN.md b/docs/spec/lightweight.zh-CN.md index a1fd65a3b3..9f06f63ee8 100644 --- a/docs/spec/lightweight.zh-CN.md +++ b/docs/spec/lightweight.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 设计原则 +category: 原则 order: 6 title: 简化交互 --- From 7b7bfc418085316062148f9fea3d4aad0a2da578 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:27:57 +0800 Subject: [PATCH 044/211] Update navigation.zh-CN.md --- docs/spec/navigation.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/navigation.zh-CN.md b/docs/spec/navigation.zh-CN.md index 0f26631ea6..170c4abfcf 100644 --- a/docs/spec/navigation.zh-CN.md +++ b/docs/spec/navigation.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 模式语言 +category: 模式 order: 8 title: 导航 --- From 7e14e8a22a2e0219f64e4f93c8892668dc7dae7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:28:12 +0800 Subject: [PATCH 045/211] Update overview.md --- docs/spec/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/overview.md b/docs/spec/overview.md index 7ffc461ea0..70add35402 100644 --- a/docs/spec/overview.md +++ b/docs/spec/overview.md @@ -1,5 +1,5 @@ --- -category: 模式语言 +category: 模式 order: 0 title: zh-CN: 概览 From 8a289999360e31c7181657b62db15114f91155c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:28:25 +0800 Subject: [PATCH 046/211] Update proximity.zh-CN.md --- docs/spec/proximity.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/proximity.zh-CN.md b/docs/spec/proximity.zh-CN.md index 2148d198d7..fc3eb560c0 100644 --- a/docs/spec/proximity.zh-CN.md +++ b/docs/spec/proximity.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 设计原则 +category: 原则 order: 1 title: 亲密性 --- From 5379be5c5b50db916cd5a9f754717e584817d842 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:28:36 +0800 Subject: [PATCH 047/211] Update reaction.zh-CN.md --- docs/spec/reaction.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/reaction.zh-CN.md b/docs/spec/reaction.zh-CN.md index 4a20416e91..ac0d9cfb33 100644 --- a/docs/spec/reaction.zh-CN.md +++ b/docs/spec/reaction.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 设计原则 +category: 原则 order: 10 title: 即时反应 --- From 8f146d3eba0f904e65a75d2ddb6dfaa39fdaf4a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:28:59 +0800 Subject: [PATCH 048/211] Update repetition.zh-CN.md --- docs/spec/repetition.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/repetition.zh-CN.md b/docs/spec/repetition.zh-CN.md index 7a3aee420c..1a083533d7 100644 --- a/docs/spec/repetition.zh-CN.md +++ b/docs/spec/repetition.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 设计原则 +category: 原则 order: 4 title: 重复 --- From 2746a8fa1ca047afef056d3ebaf1755363c677b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:29:08 +0800 Subject: [PATCH 049/211] Update stay.zh-CN.md --- docs/spec/stay.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/stay.zh-CN.md b/docs/spec/stay.zh-CN.md index 99af1b2ba5..82c8353440 100644 --- a/docs/spec/stay.zh-CN.md +++ b/docs/spec/stay.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 设计原则 +category: 原则 order: 6 title: 足不出户 --- From 66807fdbacbbf5c46125b67566572627229436c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:29:19 +0800 Subject: [PATCH 050/211] Update transition.zh-CN.md --- docs/spec/transition.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/transition.zh-CN.md b/docs/spec/transition.zh-CN.md index acdb6b4b1c..5c1950a715 100644 --- a/docs/spec/transition.zh-CN.md +++ b/docs/spec/transition.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 设计原则 +category: 原则 order: 9 title: 巧用过渡 --- From 403be020486299ab9b57b98a0e5006cebe22606f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 28 Dec 2017 10:29:33 +0800 Subject: [PATCH 051/211] Update visual.md --- docs/spec/visual.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/visual.md b/docs/spec/visual.md index 2804c73427..652f5e63e2 100644 --- a/docs/spec/visual.md +++ b/docs/spec/visual.md @@ -1,7 +1,7 @@ --- order: 4 title: - zh-CN: 可视化语言 + zh-CN: 可视化 en-US: Visualization --- From 1190f0b009ab9609bfd12bca9cc4348a6889cd72 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 29 Dec 2017 12:02:22 +0800 Subject: [PATCH 052/211] Add algolia search --- package.json | 1 + site/theme/static/docsearch.less | 22 +++++ site/theme/static/header.less | 11 +-- site/theme/static/index.less | 1 + site/theme/static/style.js | 1 + site/theme/template/Layout/Header.jsx | 112 ++++++++++---------------- 6 files changed, 70 insertions(+), 78 deletions(-) create mode 100644 site/theme/static/docsearch.less diff --git a/package.json b/package.json index 5f5515e94f..6f44db68a3 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,7 @@ "css-split-webpack-plugin": "^0.2.3", "dekko": "^0.2.0", "delegate": "^3.1.2", + "docsearch.js": "^2.5.2", "dora-plugin-upload": "^0.3.1", "enzyme": "^3.1.0", "enzyme-adapter-react-16": "^1.0.0", diff --git a/site/theme/static/docsearch.less b/site/theme/static/docsearch.less new file mode 100644 index 0000000000..47b53d945e --- /dev/null +++ b/site/theme/static/docsearch.less @@ -0,0 +1,22 @@ +.algolia-autocomplete { + .ds-dropdown-menu { + border: none; + box-shadow: @box-shadow-base; + + [class^="ds-dataset-"] { + border: none; + } + + &:before { + display: none; + } + } + + .algolia-docsearch-suggestion--title { + color: @site-text-color; + } + + .algolia-docsearch-suggestion--highlight { + color: @primary-color; + } +} diff --git a/site/theme/static/header.less b/site/theme/static/header.less index e227c1e928..466485c4f4 100644 --- a/site/theme/static/header.less +++ b/site/theme/static/header.less @@ -62,20 +62,13 @@ top: 0.5px; } -#search-box .ant-select { +#search-box input { font-size: 14px; margin-top: -5px; width: 200px; -} - -#search-box .ant-select-selection { - border: 0; - box-shadow: none; -} - -#search-box .ant-input { border: 0; box-shadow: none; + background: transparent; } .header-lang-button, diff --git a/site/theme/static/index.less b/site/theme/static/index.less index bac04d6634..7e4cfb2e41 100644 --- a/site/theme/static/index.less +++ b/site/theme/static/index.less @@ -20,3 +20,4 @@ @import './responsive'; @import './theme'; @import './santa'; +@import './docsearch'; diff --git a/site/theme/static/style.js b/site/theme/static/style.js index 7df10ee158..2cb026b53b 100644 --- a/site/theme/static/style.js +++ b/site/theme/static/style.js @@ -1,3 +1,4 @@ import 'react-github-button/assets/style.css'; import 'rc-drawer-menu/assets/index.css'; +import 'docsearch.js/dist/cdn/docsearch.css'; import './index.less'; diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx index c55d486383..bcf0c5101b 100644 --- a/site/theme/template/Layout/Header.jsx +++ b/site/theme/template/Layout/Header.jsx @@ -3,13 +3,46 @@ import PropTypes from 'prop-types'; import { Link } from 'bisheng/router'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; -import { Select, Menu, Row, Col, Icon, Popover, AutoComplete, Input, Badge, Button } from 'antd'; +import { Select, Menu, Row, Col, Icon, Popover, Input, Badge, Button } from 'antd'; import * as utils from '../utils'; import { version as antdVersion } from '../../../../package.json'; -const { Option } = AutoComplete; -const searchEngine = 'Google'; -const searchLink = 'https://www.google.com/#q=site:ant.design+'; +const { Option } = Select; + +let docsearch; +if (typeof window !== 'undefined') { + docsearch = require('docsearch.js'); // eslint-disable-line +} + +function initDocSearch(locale) { + if (!docsearch) { + return; + } + const lang = locale === 'zh-CN' ? 'cn' : 'en'; + docsearch({ + apiKey: '60ac2c1a7d26ab713757e4a081e133d0', + indexName: 'ant_design', + inputSelector: '#search-box input', + algoliaOptions: { facetFilters: [`tags:${lang}`] }, + transformData(hits) { + if (lang === 'cn') { + const categories = { + Components: '组件', + Documentation: '文档', + }; + return hits.map((hit) => { + const category = categories[hit.hierarchy.lvl0]; + hit.hierarchy.lvl0 = category; + hit._highlightResult.hierarchy.lvl0.value = category; // eslint-disable-line + hit._highlightResult.hierarchy_camel[0].lvl0.value = category; // eslint-disable-line + return hit; + }); + } + return hits; + }, + debug: false, // Set debug to true if you want to inspect the dropdown + }); +} export default class Header extends React.Component { static contextTypes = { @@ -18,13 +51,13 @@ export default class Header extends React.Component { } state = { - inputValue: '', menuVisible: false, menuMode: 'horizontal', }; componentDidMount() { - this.context.router.listen(this.handleHideMenu); + const { intl, router } = this.context; + router.listen(this.handleHideMenu); const { searchInput } = this; /* eslint-disable global-require */ require('enquire.js') @@ -41,30 +74,10 @@ export default class Header extends React.Component { searchInput.focus(); } }); + initDocSearch(intl.locale); /* eslint-enable global-require */ } - handleSearch = (value) => { - if (value === searchEngine) { - window.location.href = `${searchLink}${this.state.inputValue}`; - return; - } - - const { intl, router } = this.context; - this.setState({ - inputValue: '', - }, () => { - router.push({ pathname: utils.getLocalizedPathname(`${value}/`, intl.locale === 'zh-CN') }); - this.searchInput.blur(); - }); - } - - handleInputChange = (value) => { - this.setState({ - inputValue: value, - }); - } - handleShowMenu = () => { this.setState({ menuVisible: true, @@ -83,12 +96,6 @@ export default class Header extends React.Component { }); } - handleSelectFilter = (value, option) => { - const optionValue = option.props['data-label']; - return optionValue === searchEngine || - optionValue.indexOf(value.toLowerCase()) > -1; - } - handleVersionChange = (url) => { const currentUrl = window.location.href; const currentPathname = window.location.pathname; @@ -112,14 +119,13 @@ export default class Header extends React.Component { } render() { - const { inputValue, menuMode, menuVisible } = this.state; + const { menuMode, menuVisible } = this.state; const { - location, picked, themeConfig, + location, themeConfig, } = this.props; const docVersions = { ...themeConfig.docVersions, [antdVersion]: antdVersion }; const versionOptions = Object.keys(docVersions) .map(version => ); - const { components } = picked; const module = location.pathname.replace(/(^\/|\/$)/g, '').split('/').slice(0, -1).join('/'); let activeMenuItem = module || 'home'; if (activeMenuItem === 'components' || location.pathname === 'changelog') { @@ -128,26 +134,6 @@ export default class Header extends React.Component { const { locale } = this.context.intl; const isZhCN = locale === 'zh-CN'; - const excludedSuffix = isZhCN ? 'en-US.md' : 'zh-CN.md'; - const options = components - .filter(({ meta }) => !meta.filename.endsWith(excludedSuffix)) - .map(({ meta }) => { - const pathSnippet = meta.filename.split('/')[1]; - const url = `/components/${pathSnippet}`; - const { subtitle } = meta; - return ( - - ); - }); - - options.push( - - ); const headerClassName = classNames({ clearfix: true, @@ -230,19 +216,7 @@ export default class Header extends React.Component { {menuMode === 'horizontal' ? menu : null} From 7210bde371cb33bab74c40e6b6701428d05fb6eb Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 29 Dec 2017 15:24:55 +0800 Subject: [PATCH 053/211] Tweak style --- site/bisheng.config.js | 6 +++--- site/theme/static/common.less | 4 ++-- site/theme/static/header.less | 6 +++++- site/theme/static/markdown.less | 5 +++-- site/theme/static/preview-img.less | 2 +- site/theme/static/resource.less | 2 +- site/theme/template/Layout/Header.jsx | 2 +- 7 files changed, 16 insertions(+), 11 deletions(-) diff --git a/site/bisheng.config.js b/site/bisheng.config.js index d7edebff5d..e0bf310f12 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -30,11 +30,11 @@ module.exports = { themeConfig: { categoryOrder: { 'Ant Design': 0, - 设计原则: 1, + 原则: 1, Principles: 1, - 视觉语言: 2, + 视觉: 2, Visual: 2, - 模式语言: 3, + 模式: 3, Patterns: 3, 资源: 6, Resources: 6, diff --git a/site/theme/static/common.less b/site/theme/static/common.less index 24c3c43a29..1e8241cf8f 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -29,11 +29,10 @@ a { .main-container { padding: 0 170px 144px 64px; - margin-left: -1px; background: #fff; min-height: 500px; overflow: hidden; - border-left: 1px solid #e9e9e9; + border-left: 1px solid @site-border-color-split; position: relative; } @@ -44,6 +43,7 @@ a { .aside-container { padding-bottom: 50px; font-family: Lato, @font-family; + border: none; &.ant-menu-inline .ant-menu-submenu-title h4, &.ant-menu-inline > .ant-menu-item, diff --git a/site/theme/static/header.less b/site/theme/static/header.less index 466485c4f4..e8ab25a396 100644 --- a/site/theme/static/header.less +++ b/site/theme/static/header.less @@ -48,7 +48,7 @@ } #search-box { - border-left: 1px solid #ebedee; + border-left: 1px solid @site-border-color-split; float: left; height: 22px; line-height: 22px; @@ -69,6 +69,10 @@ border: 0; box-shadow: none; background: transparent; + + &::placeholder { + color: #a3b1bf; + } } .header-lang-button, diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less index 25f30927c0..76970bb45b 100644 --- a/site/theme/static/markdown.less +++ b/site/theme/static/markdown.less @@ -13,6 +13,7 @@ } .markdown p > img { + margin: 34px 0; box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35); } @@ -55,8 +56,8 @@ .markdown hr { height: 1px; border: 0; - background: #e9e9e9; - margin: 16px 0; + background: @site-border-color-split; + margin: 72px 0; clear: both; } diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less index 3eb5378447..60d8e105a1 100644 --- a/site/theme/static/preview-img.less +++ b/site/theme/static/preview-img.less @@ -1,6 +1,6 @@ .preview-image-boxes { float: right; - margin: 0 0 70px 20px; + margin: 0 0 64px 20px; width: 496px; clear: both; diff --git a/site/theme/static/resource.less b/site/theme/static/resource.less index e6f7237c93..86ac51c85e 100644 --- a/site/theme/static/resource.less +++ b/site/theme/static/resource.less @@ -65,6 +65,6 @@ .resource-card-description { display: block; - color: #999; + color: #697b8c; padding-right: 8px; } diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx index bcf0c5101b..c8afe61719 100644 --- a/site/theme/template/Layout/Header.jsx +++ b/site/theme/template/Layout/Header.jsx @@ -210,7 +210,7 @@ export default class Header extends React.Component { logo - Ant Design + Ant Design From fb68c2e54dc70b64b9da8e1a548a5457cb2474ef Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 29 Dec 2017 15:31:21 +0800 Subject: [PATCH 054/211] Fix category --- docs/spec/copywriting.md | 4 +++- docs/spec/data-display.md | 4 +++- docs/spec/data-entry.md | 4 +++- docs/spec/feedback.md | 4 +++- docs/spec/navigation.en-US.md | 2 +- docs/spec/overview.md | 4 +++- 6 files changed, 16 insertions(+), 6 deletions(-) diff --git a/docs/spec/copywriting.md b/docs/spec/copywriting.md index 2412ce5af6..35140d96de 100644 --- a/docs/spec/copywriting.md +++ b/docs/spec/copywriting.md @@ -1,5 +1,7 @@ --- -category: 模式 +category: + zh-CN: 模式 + en-US: Pattern order: 6 title: zh-CN: 文案 diff --git a/docs/spec/data-display.md b/docs/spec/data-display.md index 57bb12e6e0..7914918a62 100644 --- a/docs/spec/data-display.md +++ b/docs/spec/data-display.md @@ -1,5 +1,7 @@ --- -category: 模式 +category: + zh-CN: 模式 + en-US: Pattern order: 10 title: zh-CN: 数据展示 diff --git a/docs/spec/data-entry.md b/docs/spec/data-entry.md index b5b2a63a25..de57251cb9 100644 --- a/docs/spec/data-entry.md +++ b/docs/spec/data-entry.md @@ -1,5 +1,7 @@ --- -category: 模式 +category: + zh-CN: 模式 + en-US: Pattern order: 9 title: zh-CN: 数据录入 diff --git a/docs/spec/feedback.md b/docs/spec/feedback.md index 86594f1ac8..b9c8953974 100644 --- a/docs/spec/feedback.md +++ b/docs/spec/feedback.md @@ -1,5 +1,7 @@ --- -category: 模式 +category: + zh-CN: 模式 + en-US: Pattern order: 11 title: zh-CN: 反馈 diff --git a/docs/spec/navigation.en-US.md b/docs/spec/navigation.en-US.md index 3e74b549ab..00ff1ba728 100644 --- a/docs/spec/navigation.en-US.md +++ b/docs/spec/navigation.en-US.md @@ -1,5 +1,5 @@ --- -category: 模式语言 +category: Pattern order: 8 title: Navigation --- diff --git a/docs/spec/overview.md b/docs/spec/overview.md index 70add35402..83ab20b8ca 100644 --- a/docs/spec/overview.md +++ b/docs/spec/overview.md @@ -1,5 +1,7 @@ --- -category: 模式 +category: + zh-CN: 模式 + en-US: Pattern order: 0 title: zh-CN: 概览 From bd54e5db05d6f310d9810c1053ae5137d1619636 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 29 Dec 2017 15:33:46 +0800 Subject: [PATCH 055/211] Fix category --- docs/spec/copywriting.md | 2 +- docs/spec/data-display.md | 2 +- docs/spec/data-entry.md | 2 +- docs/spec/feedback.md | 2 +- docs/spec/navigation.en-US.md | 2 +- docs/spec/overview.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/spec/copywriting.md b/docs/spec/copywriting.md index 35140d96de..343c1d9f1d 100644 --- a/docs/spec/copywriting.md +++ b/docs/spec/copywriting.md @@ -1,7 +1,7 @@ --- category: zh-CN: 模式 - en-US: Pattern + en-US: Patterns order: 6 title: zh-CN: 文案 diff --git a/docs/spec/data-display.md b/docs/spec/data-display.md index 7914918a62..46dba2e77a 100644 --- a/docs/spec/data-display.md +++ b/docs/spec/data-display.md @@ -1,7 +1,7 @@ --- category: zh-CN: 模式 - en-US: Pattern + en-US: Patterns order: 10 title: zh-CN: 数据展示 diff --git a/docs/spec/data-entry.md b/docs/spec/data-entry.md index de57251cb9..c78a33e202 100644 --- a/docs/spec/data-entry.md +++ b/docs/spec/data-entry.md @@ -1,7 +1,7 @@ --- category: zh-CN: 模式 - en-US: Pattern + en-US: Patterns order: 9 title: zh-CN: 数据录入 diff --git a/docs/spec/feedback.md b/docs/spec/feedback.md index b9c8953974..7ed6d58bd5 100644 --- a/docs/spec/feedback.md +++ b/docs/spec/feedback.md @@ -1,7 +1,7 @@ --- category: zh-CN: 模式 - en-US: Pattern + en-US: Patterns order: 11 title: zh-CN: 反馈 diff --git a/docs/spec/navigation.en-US.md b/docs/spec/navigation.en-US.md index 00ff1ba728..1ad7bb5997 100644 --- a/docs/spec/navigation.en-US.md +++ b/docs/spec/navigation.en-US.md @@ -1,5 +1,5 @@ --- -category: Pattern +category: Patterns order: 8 title: Navigation --- diff --git a/docs/spec/overview.md b/docs/spec/overview.md index 83ab20b8ca..9c60b1c002 100644 --- a/docs/spec/overview.md +++ b/docs/spec/overview.md @@ -1,7 +1,7 @@ --- category: zh-CN: 模式 - en-US: Pattern + en-US: Patterns order: 0 title: zh-CN: 概览 From 2e6e4f234515fe0a8dcfa9f53ad97c5ad61a1a8b Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 29 Dec 2017 15:59:45 +0800 Subject: [PATCH 056/211] Tweak image margin --- site/theme/static/preview-img.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less index 60d8e105a1..70c6cba653 100644 --- a/site/theme/static/preview-img.less +++ b/site/theme/static/preview-img.less @@ -1,6 +1,6 @@ .preview-image-boxes { float: right; - margin: 0 0 64px 20px; + margin: 0 0 70px 64px; width: 496px; clear: both; @@ -20,7 +20,6 @@ .preview-image-box { width: 100%; float: left; - padding: 0 8px; } .preview-image-wrapper { From 4e2476a9cf7eed768e3fedb76724aef0c51f2f32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Mon, 1 Jan 2018 14:57:47 +0800 Subject: [PATCH 057/211] Update copywriting.md --- docs/spec/copywriting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/copywriting.md b/docs/spec/copywriting.md index 343c1d9f1d..6321360755 100644 --- a/docs/spec/copywriting.md +++ b/docs/spec/copywriting.md @@ -25,8 +25,8 @@ title: ### 明确表述立足点 -正确示范 -错误示范 +正确示范 +错误示范 在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。 From d40dfea59b0cf4fb7408a2a55aedc9a9de49190d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Mon, 1 Jan 2018 17:40:02 +0800 Subject: [PATCH 058/211] Update icon.zh-CN.md --- docs/spec/icon.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/icon.zh-CN.md b/docs/spec/icon.zh-CN.md index bf3fab3b40..c0f3e105fc 100644 --- a/docs/spec/icon.zh-CN.md +++ b/docs/spec/icon.zh-CN.md @@ -103,6 +103,6 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico ### 颜色 - + 业务图标有单色（中性色）和双色（中性色+主色）两种，主色的面积不超过整个 icon 的 40%。 From 18193b575d2cfd6f85b196bd0442201522039658 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Mon, 1 Jan 2018 17:46:22 +0800 Subject: [PATCH 059/211] Update navigation.zh-CN.md --- docs/spec/navigation.zh-CN.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/spec/navigation.zh-CN.md b/docs/spec/navigation.zh-CN.md index 170c4abfcf..013c7bcc7e 100644 --- a/docs/spec/navigation.zh-CN.md +++ b/docs/spec/navigation.zh-CN.md @@ -18,13 +18,13 @@ title: 导航 ### 顶部导航菜单 - + 顶部导航菜单的形式就是把超链接连成一行，信息内容层级比较简单明了，适用在浏览性强的门户性质以及比较前台化的应用。一级类目建议在 2-7 个以内。标题长度 4-15 个字符长度为好，中文字长 2-6 个。 ### 侧边导航菜单 - + 垂直导航较横向的导航更灵活，易于向下扩展， 且允许的标签长度较长。类目数量不限，可配合滚动条使用，适合信息层级多、操作切换频率高的管理性质的应用。 @@ -36,7 +36,7 @@ title: 导航 面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系。 - + > 注意事项： > 1. 层级过深时，建议做隐藏处理，页面显示保持在三级以内，最多不宜超过五级； @@ -50,25 +50,25 @@ title: 导航 ### 基本样式 - + 引领整个页面的内容，用于主功能切换。 ### 卡片样式 - + 用于页面中局部展示，包裹型容器能很好的和其它内容隔离。 ### 胶囊型样式 - + 用于卡片内的选项切换，经常和其它组件结合使用，让用户快速切换对应内容。 ### 竖状样式 - + 用于分类较多的选项，可以不限制分类数量，具备更好的扩展性。 @@ -80,13 +80,13 @@ title: 导航 ### 横向流程步骤条 - + 步骤多于 2 步时使用, 但建议不超过 5 步，每阶段文字长度保持在 12 个字符以内。 ### 竖向流程步骤条 - + 一般居页面左侧，悬浮固定，可追加多行文字描述，适合较多步骤或步骤数动态变化时使用，例如：时间步骤跟踪描述。 @@ -98,18 +98,18 @@ title: 导航 ### 标准样式 - + 当信息条目较多的时候，可以允许用户自定义每页的行数，以提高用户查看和检索信息的效率和灵活性，常与表格、卡片搭配使用。 ### 迷你样式 - + 一般用于卡片或者浮层。 ### 简易样式 - + 一般用于卡片或者统计类表格展示，在 10 页之内。 From e858ddec3b36bb62fec6a2d7812e406cfc01717a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Mon, 1 Jan 2018 17:53:16 +0800 Subject: [PATCH 060/211] Update feedback.md --- docs/spec/feedback.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/spec/feedback.md b/docs/spec/feedback.md index 7ed6d58bd5..0994693438 100644 --- a/docs/spec/feedback.md +++ b/docs/spec/feedback.md @@ -23,7 +23,7 @@ title: #### 警告提示（Alert） - + 是一种非阻碍式的信息展示，它不打断用户的当前操作，一般停留至页面某个位置（优先顶部），非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。 @@ -33,13 +33,13 @@ title: #### 通知提醒（Notification） - + 系统主动推送的重要的全局性通知信息，在系统右上角显示。 #### 徽标数（Badge） - + 用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。 @@ -49,7 +49,7 @@ title: #### 气泡卡片（Popover） - + 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。 @@ -57,7 +57,7 @@ title: #### 文字提示（Tooltip） - + 用于精确地描述被指向的对象，例如图标、图形、链接等，鼠标移入则显示提示，移出消失，不承载复杂文本和操作。 @@ -69,19 +69,19 @@ title: ### 加载状态进度反馈 - + 在操作需要一段时间（一般为超过2秒）完成时系统应即时给予提醒，明确告知加载的状态或加载进度条，保持与用户的沟通。
- + > 注：若加载时间较长，应提供取消操作。 ### 录入反馈 - + 操作过程中可通过不同的校验规则和形式，让用户及时发现并纠正错误。 @@ -89,7 +89,7 @@ title: #### 气泡确认框（Popconfirm） - + 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。 @@ -101,20 +101,20 @@ title: ### 顶部全局提示反馈（Message） - + 通过一个操作引发的反馈浮层位于顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
-正确示例 -错误示例 +正确示例 +错误示例 由于反馈浮层的展示时长较短（默认 4.5s），对于比较重要的失败通知，建议改用对话框的形式进行通知，以避免用户遗漏信息。 ### 对话框反馈 - + 通过一个操作引发的反馈浮层位于页面中心，反馈内容可通过确认或取消按钮进行关闭，用户在反馈层出现时不可进行任何的操作，用于重要的反馈。 From 59470bb166bfffcb5ff4f53e36c99f8652dab0af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Mon, 1 Jan 2018 17:58:54 +0800 Subject: [PATCH 061/211] Update data-entry.md --- docs/spec/data-entry.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/docs/spec/data-entry.md b/docs/spec/data-entry.md index c78a33e202..5228b8cca6 100644 --- a/docs/spec/data-entry.md +++ b/docs/spec/data-entry.md @@ -21,7 +21,7 @@ title: ### 文本框（Input） - + 输入较少的字符总数，使用单行的输入形式。 @@ -29,25 +29,25 @@ title: ### 文本域（Textarea） - + 录入长篇幅的单一的文本使用多行的文本区域。 ### 提示与帮助 -基本样式 +基本样式 为提升数据录入效率，通常可以在输入框内增加暗提示以帮助提醒用户。 > 注：输入框通常与标签（label）搭配使用，标签（label）默认放于输入区域的左侧，当文案过长或英文环境下也可放于在上方，但同个系统中需保持统一。 - + - + ### 搜索（Search） - + 搜索可以让用户在巨大的信息池中缩小目标范围，并快速获取需要的信息。 @@ -59,7 +59,7 @@ title: #### 单选框（Radio Button） - + 单选按钮允许用户从多个选项中选择一个选项。Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。 @@ -67,7 +67,7 @@ title: ### 复选框（Checkbox） - + 复选框用于在一组可选项中进行多项选择时。 @@ -77,20 +77,20 @@ title: ### 开关（Switch） - + 用于切换单个选项的状态。『开关』的内联标签应该显示清楚，例如：禁用/启用，不允许/允许等。
-正确示范 -错误示范 +正确示范 +错误示范 > 注：当用户切换『开关』按钮将直接触发状态改变。 ### 选择列表（Dropdown） - + 选择列表（通常称为下拉菜单）允许用户从列表中选择一个选项或多个选项，为用户在选项的数量上提供了更多的灵活性。 @@ -100,25 +100,25 @@ title: ### 滑块选择（Slider） - + 滑块选择可以在连续或间断的区间内，通过滑动锚点来选择一个合适的数值。这种交互特性使得它在设置诸如音量，亮度，色彩饱和度等需要反映强度等级的选项时是一种极好的选择。
- + > 注：在不要求精准数值的场景下用户使用『连续滑块』可得到更灵活便捷的操作；在用户需要精确数值时，可与『数字输入框』搭配使用。 ### 穿梭框（Transfer） - + 穿梭框用直观的方式在两栏中移动元素，完成选择行为。 ### 日期选择器（DatePicker） - + 日期选择器为用户提供了一种可视化的方式去浏览和选择一个日期或者日期范围。 @@ -130,19 +130,19 @@ title: ### 简单点击上传 - + 一般用于单个上传且不需要预览效果的文件上传，点击按钮弹出文件选择框。 ### 显示缩略图上传 - + 一般用于图片文件上传，用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。 ### 拖拽上传 - + 把文件拖入指定区域，完成上传，同样支持点击上传。 From 12232e62b038ac72e6d3103468188d825c95dec1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Mon, 1 Jan 2018 18:04:17 +0800 Subject: [PATCH 062/211] Update data-display.md --- docs/spec/data-display.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/spec/data-display.md b/docs/spec/data-display.md index 46dba2e77a..99f86112ee 100644 --- a/docs/spec/data-display.md +++ b/docs/spec/data-display.md @@ -17,7 +17,7 @@ title: ## 表格（Table） - + 表格被公认为是展现数据最为清晰、高效的形式之一。它常和排序、搜索、筛选、分页等其他界面元素一起协同，适用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。它结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。 @@ -27,7 +27,7 @@ title: ## 折叠面板（Collapse） - + 折叠面板通过对信息的分组和收纳，指引用户递进式的获取信息，使界面保持整洁的同时增加空间的有效利用率。 @@ -40,7 +40,7 @@ title: ## 卡片（Card） - + 卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。 @@ -52,7 +52,7 @@ title: ## 走马灯（Carousel） - + 作为一组平级内容的并列展示模式，常用于图片或卡片轮播，可由用户主动触发或者系统自动轮播。适合用于官网首页、产品介绍页等展示型区块。 @@ -64,7 +64,7 @@ title: ## 树形控件（Tree） - + 『树形控件』通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。 @@ -74,7 +74,7 @@ title: ## 时间轴（Timeline） - + 垂直展示的时间流信息，一般按照时间倒叙记录事件，追踪用户当下以及过去做了什么。 From 5997b6e2d6c5af21017c225564eeb72337347fa7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Mon, 1 Jan 2018 18:15:55 +0800 Subject: [PATCH 063/211] Update copywriting.md --- docs/spec/copywriting.md | 90 ++++++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/docs/spec/copywriting.md b/docs/spec/copywriting.md index 6321360755..a8764b8c1b 100644 --- a/docs/spec/copywriting.md +++ b/docs/spec/copywriting.md @@ -25,8 +25,8 @@ title: ### 明确表述立足点 -正确示范 -错误示范 +正确示范 +错误示范 在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。 @@ -36,8 +36,8 @@ title: ### 精简语句 -正确示范 -错误示范 +正确示范 +错误示范 省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。 @@ -45,8 +45,8 @@ title: ### 使用用户熟悉的语言 -正确示范 -错误示范 +正确示范 +错误示范 使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。 @@ -54,13 +54,13 @@ title: ### 表述一致 -正确示范 -错误示范 +正确示范 +错误示范 -正确示范 -错误示范 +正确示范 +错误示范 - + - 描述同一个事物的词汇要保持统一; - 上下文的语法、语种、语序要保持统一; @@ -68,8 +68,8 @@ title: ### 重要的信息放在显著位置 -正确示范 -错误示范 +正确示范 +错误示范 让用户第一眼看到最重要的内容，不用到段落中寻找。 @@ -77,28 +77,28 @@ title: ### 完整、直接得阐述信息 -正确示范 -错误示范 +正确示范 +错误示范 当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。
-正确示范 -错误示范 +正确示范 +错误示范 报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。 ### 用词精准完整 -正确示范 -错误示范 +正确示范 +错误示范 -正确示范 -错误示范 +正确示范 +错误示范 -正确示范 -错误示范 +正确示范 +错误示范 @@ -150,22 +150,22 @@ title: ### 拉近彼此的距离 -正确示范 -错误示范 +正确示范 +错误示范 直接使用『你』、『我』来和用户对话，与用户建立亲密感。避免使用『您』，让用户感觉太过疏远。
-正确示范 -错误示范 +正确示范 +错误示范 > 注：不要在同一个句式中混用『你』和『我』，交互中指代混乱会让用户相当纠结。 ### 友好、尊重用户 -正确示范 -错误示范 +正确示范 +错误示范 多给用户支持与鼓励，不要命令和强迫用户。 @@ -173,8 +173,8 @@ title: ### 表述不应过于极端 -正确示范 -错误示范 +正确示范 +错误示范 不要使用过于绝对的表述，这样会让用户觉得不适。 @@ -182,8 +182,8 @@ title: ### 英文名词大小写规范 -正确示范 -错误示范 +正确示范 +错误示范 产品名称全称，首字母大写。产品名称缩写需要全部大写，如：ESC、SLB 等； @@ -191,29 +191,29 @@ title:
-正确示范 -错误示范 +正确示范 +错误示范 正确使用专有名词的大小写规范。
-正确示范 -错误示范 +正确示范 +错误示范 全英文的标题，标签，菜单项等等都要遵循英文句式中首字母大写的规范。 ### 统计数据使用阿拉伯数字 -正确示范 -错误示范 +正确示范 +错误示范 这也是常见问题，用户对于数字的感知速度更快，使用数字而非文字表述会更加有效。 ### 省略不必要的标点 -正确示范 -错误示范 +正确示范 +错误示范 为了帮助用户更加高效得扫视文本内容，可以省略不必要的断句点。 @@ -225,8 +225,8 @@ title: - 悬停文本中的提示 - 表格中的句子 -正确示范 -错误示范 +正确示范 +错误示范 以下元素单独出现时需要加上标点： @@ -235,8 +235,8 @@ title: ### 谨慎使用感叹号 -正确示范 -错误示范 +正确示范 +错误示范 感叹号会让文案显得过于激动，容易让气氛变得过于紧张。 From 958433a8d707454d094cf5968ef9da2a4e7b409a Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 2 Jan 2018 00:03:55 +0800 Subject: [PATCH 064/211] Fix preview image box margin --- site/theme/static/preview-img.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less index 70c6cba653..e5245d781d 100644 --- a/site/theme/static/preview-img.less +++ b/site/theme/static/preview-img.less @@ -1,4 +1,5 @@ .preview-image-boxes { + display: flex; float: right; margin: 0 0 70px 64px; width: 496px; @@ -22,6 +23,10 @@ float: left; } +.preview-image-box + .preview-image-box { + margin-left: 24px; +} + .preview-image-wrapper { background: #f7f7f7; padding: 16px; From fdcc2ca1c3143479475de168c4561e2904570ea4 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 2 Jan 2018 10:46:52 +0800 Subject: [PATCH 065/211] Update style --- site/theme/static/preview-img.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less index e5245d781d..05410b0dd3 100644 --- a/site/theme/static/preview-img.less +++ b/site/theme/static/preview-img.less @@ -28,7 +28,7 @@ } .preview-image-wrapper { - background: #f7f7f7; + background: #f2f4f5; padding: 16px; display: inline-block; text-align: center; From 8985cd1657d9f460c64666b6ae2502c6d75c1d42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 12:27:18 +0800 Subject: [PATCH 066/211] Update stay.zh-CN.md --- docs/spec/stay.zh-CN.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/spec/stay.zh-CN.md b/docs/spec/stay.zh-CN.md index 82c8353440..6f075baa48 100644 --- a/docs/spec/stay.zh-CN.md +++ b/docs/spec/stay.zh-CN.md @@ -14,17 +14,17 @@ title: 足不出户 ## 覆盖层 -推荐示例 +推荐示例 -推荐示例 +推荐示例 -不推荐示例 +不推荐示例 二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。
-详情覆盖层示例 +详情覆盖层示例 详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。 @@ -32,7 +32,7 @@ title: 足不出户
-输入覆盖层示例 +输入覆盖层示例 输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。 @@ -42,13 +42,13 @@ title: 足不出户 ## 嵌入层 -列表嵌入层示例 +列表嵌入层示例 列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
-标签页示例 +标签页示例 标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。 @@ -74,18 +74,18 @@ title: 足不出户
-渐进式展现示例 +渐进式展现示例 渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
-配置程序示例 +配置程序示例 配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
-弹出框覆盖层示例 +弹出框覆盖层示例 弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。 From 97c7f48f011516ccd6ac08eea0e47d95ce8ac031 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 12:32:00 +0800 Subject: [PATCH 067/211] Update invitation.zh-CN.md --- docs/spec/invitation.zh-CN.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/docs/spec/invitation.zh-CN.md b/docs/spec/invitation.zh-CN.md index 4337ea562d..24052083b2 100644 --- a/docs/spec/invitation.zh-CN.md +++ b/docs/spec/invitation.zh-CN.md @@ -21,20 +21,18 @@ title: 提供邀请
-文本邀请示例 +文本邀请示例 -白板式邀请示例 +白板式邀请示例 -未完成邀请示例 +未完成邀请示例 引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。 常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。
-漫游探索邀请示例 1 - -漫游探索邀请示例 2 +漫游探索邀请示例 漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。 @@ -51,16 +49,16 @@ title: 提供邀请
-悬停邀请示例 1 +悬停邀请示例 1 -悬停邀请示例 2 +悬停邀请示例 2 悬停邀请：在鼠标悬停期间提供邀请。
-推论邀请示例 +推论邀请示例 推论邀请：用于交互期间，合理推断用户可能产生的需求。 From 568a15490bda245941552cb1d45c82264944b6c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 12:36:39 +0800 Subject: [PATCH 068/211] Update reaction.zh-CN.md --- docs/spec/reaction.zh-CN.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/spec/reaction.zh-CN.md b/docs/spec/reaction.zh-CN.md index ac0d9cfb33..681e3db223 100644 --- a/docs/spec/reaction.zh-CN.md +++ b/docs/spec/reaction.zh-CN.md @@ -16,16 +16,16 @@ title: 即时反应 ## 查询模式 -确定类目示例 +确定类目示例 -不确定类目示例 +不确定类目示例 自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
-实时搜索示例 +实时搜索示例 实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。 @@ -39,7 +39,7 @@ title: 即时反应 ## 反馈模式 -实时预览示例 +实时预览示例 实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。 @@ -51,13 +51,13 @@ title: 即时反应
-按钮加载示例 +按钮加载示例 -表格加载示例 +表格加载示例 -富列表加载示例 +富列表加载示例 -页面加载示例 +页面加载示例 进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。 @@ -65,12 +65,12 @@ title: 即时反应
-点击刷新示例 +点击刷新示例 点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
-定时示例 +定时示例 定时刷新：无需用户介入，定时展示新内容。 From 6b640611211c2ac90a63f9690043b6bbafe8fe62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 14:33:33 +0800 Subject: [PATCH 069/211] Update colors.zh-CN.md --- docs/spec/colors.zh-CN.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index 3203a4fd04..677fc3490f 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -58,20 +58,20 @@ ReactDOM.render(, mountNode); ### 品牌色的应用 - + 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅自深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 1890FF，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。 ### 功能色 - + 功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图： ### 中性色 - + Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图： From 44ae5b7b6cd1aaf74e9e840a930d76d85e70c943 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 14:37:02 +0800 Subject: [PATCH 070/211] Update layout.md --- docs/spec/layout.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/layout.md b/docs/spec/layout.md index e7c83f92b8..85b8af5809 100644 --- a/docs/spec/layout.md +++ b/docs/spec/layout.md @@ -32,13 +32,13 @@ Ant Design 两种较为典型的适配方案： 常被用于左右布局的设计方案中，常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。 -![左右布局的适配方案](https://gw.alipayobjects.com/zos/rmsportal/xQRlXSOwrRonMOIYXeRZ.png) +![左右布局的适配方案](https://gw.alipayobjects.com/zos/rmsportal/vSqMhPolCtINKLvVVdLt.png) ### 二、上下布局的适配方案 常被用于上下布局的设计方案中，做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。 -![上下布局的适配方案](https://gw.alipayobjects.com/zos/rmsportal/XzcyeBnPowMqKStoDHMk.png) +![上下布局的适配方案](https://gw.alipayobjects.com/zos/rmsportal/VQEiJqtZfvvdyZSKcEsE.png) 这里提及的只是非常简单的两种适配的思路，实际设计中一套完美的适配方案需要设计师具备前端视角、平面构图视角以及交互视角。 From a4eb22c0119d05073293980b0369bdb1960fd7b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 14:38:23 +0800 Subject: [PATCH 071/211] Update font.md --- docs/spec/font.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/font.md b/docs/spec/font.md index cb5671014b..3259bed3ad 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -56,7 +56,7 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸的字体以及与之相对应的行高。
- +
在 Ant Design 的视觉体系中，我们建议的主要字体为 14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中（展示型页面除外），字阶的选择尽量控制在 3-5 种之间，保持克制的原则。 @@ -88,7 +88,7 @@ Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸 文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。
- +
## 建议 From f97abce5060d3cfab238d61797f38b8c2abf8322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 14:40:01 +0800 Subject: [PATCH 072/211] Update icon.zh-CN.md --- docs/spec/icon.zh-CN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/icon.zh-CN.md b/docs/spec/icon.zh-CN.md index c0f3e105fc..e52b42158f 100644 --- a/docs/spec/icon.zh-CN.md +++ b/docs/spec/icon.zh-CN.md @@ -81,7 +81,7 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico ### 颜色 - + 图标的颜色需要与搭配文案的色值保持一致（表示状态的除外）。 @@ -103,6 +103,6 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico ### 颜色 - + 业务图标有单色（中性色）和双色（中性色+主色）两种，主色的面积不超过整个 icon 的 40%。 From 74fb66ba3e91425c129f3c1588c2924aaa56e854 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 14:44:45 +0800 Subject: [PATCH 073/211] Update navigation.zh-CN.md --- docs/spec/navigation.zh-CN.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/spec/navigation.zh-CN.md b/docs/spec/navigation.zh-CN.md index 013c7bcc7e..fc6da5c577 100644 --- a/docs/spec/navigation.zh-CN.md +++ b/docs/spec/navigation.zh-CN.md @@ -36,7 +36,7 @@ title: 导航 面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系。 - + > 注意事项： > 1. 层级过深时，建议做隐藏处理，页面显示保持在三级以内，最多不宜超过五级； @@ -50,25 +50,25 @@ title: 导航 ### 基本样式 - + 引领整个页面的内容，用于主功能切换。 ### 卡片样式 - + 用于页面中局部展示，包裹型容器能很好的和其它内容隔离。 ### 胶囊型样式 - + 用于卡片内的选项切换，经常和其它组件结合使用，让用户快速切换对应内容。 ### 竖状样式 - + 用于分类较多的选项，可以不限制分类数量，具备更好的扩展性。 @@ -98,7 +98,7 @@ title: 导航 ### 标准样式 - + 当信息条目较多的时候，可以允许用户自定义每页的行数，以提高用户查看和检索信息的效率和灵活性，常与表格、卡片搭配使用。 From 0031d58ceddf18de71797732885db1d7d39a6a9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 14:47:01 +0800 Subject: [PATCH 074/211] Update data-entry.md --- docs/spec/data-entry.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/spec/data-entry.md b/docs/spec/data-entry.md index 5228b8cca6..19afae92cf 100644 --- a/docs/spec/data-entry.md +++ b/docs/spec/data-entry.md @@ -43,7 +43,7 @@ title: - + ### 搜索（Search） @@ -77,7 +77,7 @@ title: ### 开关（Switch） - + 用于切换单个选项的状态。『开关』的内联标签应该显示清楚，例如：禁用/启用，不允许/允许等。 @@ -118,7 +118,7 @@ title: ### 日期选择器（DatePicker） - + 日期选择器为用户提供了一种可视化的方式去浏览和选择一个日期或者日期范围。 @@ -130,19 +130,19 @@ title: ### 简单点击上传 - + 一般用于单个上传且不需要预览效果的文件上传，点击按钮弹出文件选择框。 ### 显示缩略图上传 - + 一般用于图片文件上传，用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。 ### 拖拽上传 - + 把文件拖入指定区域，完成上传，同样支持点击上传。 From e551f1722d63431d1e405b07ac494ae51298ff4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 14:49:14 +0800 Subject: [PATCH 075/211] Update feedback.md --- docs/spec/feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/feedback.md b/docs/spec/feedback.md index 0994693438..829d781d1f 100644 --- a/docs/spec/feedback.md +++ b/docs/spec/feedback.md @@ -81,7 +81,7 @@ title: ### 录入反馈 - + 操作过程中可通过不同的校验规则和形式，让用户及时发现并纠正错误。 From c7f1747fb81b74e0681e2a9bf596a9786fb7fbd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 15:16:39 +0800 Subject: [PATCH 076/211] Update visual.md --- docs/spec/visual.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/spec/visual.md b/docs/spec/visual.md index 652f5e63e2..68924cb26f 100644 --- a/docs/spec/visual.md +++ b/docs/spec/visual.md @@ -5,8 +5,6 @@ title: en-US: Visualization --- -todo - 可视化语言是基于中台设计语言 Ant Design 衍生的一套具有数据可视化特性的设计指导原则，让数据表达更符合用户心理，帮助『设计者』孵化出更具业务特性的可视化解决方案以满足个性化设计需求，屏蔽不必要的设计差异和实现成本，从而解放『设计者』和前端的研发资源，实现全面提高数据图表的研发效率。 同时，这是一份动态更新的设计文档，你的阅读和反馈正是我们不断前进的动力，[Github 反馈地址](https://github.com/antvis/site/issues)。 From 84895eca77ca8dd29af25dacb1c498ed4e2a6e70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 22:22:14 +0800 Subject: [PATCH 077/211] Update proximity.zh-CN.md --- docs/spec/proximity.zh-CN.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/spec/proximity.zh-CN.md b/docs/spec/proximity.zh-CN.md index fc3eb560c0..69f162d1ce 100644 --- a/docs/spec/proximity.zh-CN.md +++ b/docs/spec/proximity.zh-CN.md @@ -10,13 +10,13 @@ title: 亲密性 ## 纵向间距关系 -纵向间距示例 +纵向间距示例 通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
-增加元素示例 +增加元素示例 在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。 @@ -26,12 +26,12 @@ title: 亲密性 ## 横向间距关系 -组合排布示例 +组合排布示例 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
-复选框内示例 +复选框内示例 在一个组件内部，元素的横向间距也应该有所不同。 From 202ad6eada7e093795a6fb8b693e6c86bf7a25e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 22:24:05 +0800 Subject: [PATCH 078/211] Update alignment.zh-CN.md --- docs/spec/alignment.zh-CN.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/spec/alignment.zh-CN.md b/docs/spec/alignment.zh-CN.md index 1c3c0f22aa..8bed2fdcff 100644 --- a/docs/spec/alignment.zh-CN.md +++ b/docs/spec/alignment.zh-CN.md @@ -12,8 +12,8 @@ title: 对齐 ## 文案类对齐 -推荐示例 -不推荐示例 +推荐示例 +不推荐示例 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 @@ -21,7 +21,7 @@ title: 对齐 ## 表单类对齐 -冒号对齐示例 +冒号对齐示例 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 @@ -31,7 +31,7 @@ title: 对齐 ## 数字类对齐 -正确示例 -错误示例 +正确示例 +错误示例 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。 From cb52149a9953818eb614bbb08237b280e23d5c89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 22:26:03 +0800 Subject: [PATCH 079/211] Update contrast.zh-CN.md --- docs/spec/contrast.zh-CN.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/spec/contrast.zh-CN.md b/docs/spec/contrast.zh-CN.md index 3cc2549dcc..068da2b918 100644 --- a/docs/spec/contrast.zh-CN.md +++ b/docs/spec/contrast.zh-CN.md @@ -12,8 +12,8 @@ title: 对比 ## 主次关系对比 -正确示例 -错误示例 +正确示例 +错误示例 为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。 @@ -21,7 +21,7 @@ title: 对比
-不区分主次的示例 +不区分主次的示例 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。 @@ -29,9 +29,9 @@ title: 对比 ## 总分关系对比 -总分关系示例 1 +总分关系示例 1 -总分关系示例 2 +总分关系示例 2 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。 @@ -39,9 +39,9 @@ title: 对比 ## 状态关系对比 -静态对比示例 +静态对比示例 -动态对比示例 +动态对比示例 通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。 From 5e4842ee45e1bf5b24431f328741ab94ced50cf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 22:28:01 +0800 Subject: [PATCH 080/211] Update repetition.zh-CN.md --- docs/spec/repetition.zh-CN.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/spec/repetition.zh-CN.md b/docs/spec/repetition.zh-CN.md index 1a083533d7..1afbefb69d 100644 --- a/docs/spec/repetition.zh-CN.md +++ b/docs/spec/repetition.zh-CN.md @@ -10,10 +10,10 @@ title: 重复 ## 重复元素 -线框重复示例 +线框重复示例 -设计要素重复示例 +设计要素重复示例 -文案格式重复示例 +文案格式重复示例 重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。 From 87369fbfb4f1af9146b102a25d7940d397865980 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Tue, 2 Jan 2018 22:33:00 +0800 Subject: [PATCH 081/211] Update overview.md --- docs/spec/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/overview.md b/docs/spec/overview.md index 9c60b1c002..3f3a9bae11 100644 --- a/docs/spec/overview.md +++ b/docs/spec/overview.md @@ -16,7 +16,7 @@ title: ## 信息框架 -todo... +![结构图](https://gw.alipayobjects.com/zos/rmsportal/NyWYOFQxJYElAwtUfSdv.png) 完整的设计模式将会包含 ETC 三大实体部分，以及 Genneral Concepts 这样的黏合剂： From ed46179c222df34a2cd169228eb7d4b12fa25a61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Wed, 3 Jan 2018 11:53:57 +0800 Subject: [PATCH 082/211] Update direct.zh-CN.md --- docs/spec/direct.zh-CN.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/spec/direct.zh-CN.md b/docs/spec/direct.zh-CN.md index 35a142b5fa..73b1b20075 100644 --- a/docs/spec/direct.zh-CN.md +++ b/docs/spec/direct.zh-CN.md @@ -10,7 +10,7 @@ title: 直截了当 ## 页内编辑 -单击编辑示例 +单击编辑示例 单字段行内编辑 @@ -18,13 +18,13 @@ title: 直截了当
-文字链/图标编辑示例 +文字链/图标编辑示例 当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
-多字段行内编辑示例 +多字段行内编辑示例 多字段行内编辑 @@ -40,7 +40,7 @@ title: 直截了当 ## 利用拖放 -拖放列表示例 +拖放列表示例 拖放列表 @@ -48,7 +48,7 @@ title: 直截了当
-拖放图片/文件示例 +拖放图片/文件示例 拖放图片/文件 From 15aa3d6c6b8675415b4ae2df950b5ea7bbbd9f39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Wed, 3 Jan 2018 11:56:22 +0800 Subject: [PATCH 083/211] Update lightweight.zh-CN.md --- docs/spec/lightweight.zh-CN.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/spec/lightweight.zh-CN.md b/docs/spec/lightweight.zh-CN.md index 9f06f63ee8..a9825836b6 100644 --- a/docs/spec/lightweight.zh-CN.md +++ b/docs/spec/lightweight.zh-CN.md @@ -12,7 +12,7 @@ title: 简化交互 ## 实时可见工具 -实时可见工具示例 --摘自知乎 +实时可见工具示例 --摘自知乎 如果某个操作非常重要，就应该把它放在界面中，并实时可见。 @@ -23,7 +23,7 @@ title: 简化交互 ## 悬停即现工具 -悬停即现工具示例 +悬停即现工具示例 如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 @@ -33,7 +33,7 @@ title: 简化交互 ## 开关显示工具 -开关显示工具示例 +开关显示工具示例 如果某些操作只需要在特定模式时显示，可以通过开关来实现。 @@ -43,11 +43,11 @@ title: 简化交互 ## 交互中的工具 -推荐示例 +推荐示例 -推荐示例 +推荐示例 -不推荐示例 +不推荐示例 如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。 @@ -59,13 +59,13 @@ title: 简化交互 ## 可视区域 ≠ 可点击区域 -文字链热区示例 +文字链热区示例 在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
-按钮热区示例 +按钮热区示例 当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。 From d1cdb9175c59c417b4ce14cba389c632caced6c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Wed, 3 Jan 2018 22:31:29 +0800 Subject: [PATCH 084/211] Update colors.zh-CN.md --- docs/spec/colors.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index 677fc3490f..9e3a1b9ff4 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -16,7 +16,7 @@ Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模 ## 系统级色彩体系 -Ant Design 系统级色彩体系同样源于『自然』的设计语言。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。 +Ant Design 系统级色彩体系同样源于『自然』的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。 ### 基础色板 From 026fc6b1475cb8f4b8b1981059c08c44ce3919aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Wed, 3 Jan 2018 22:41:17 +0800 Subject: [PATCH 085/211] Update layout.md --- docs/spec/layout.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/spec/layout.md b/docs/spec/layout.md index 85b8af5809..68511a9f92 100644 --- a/docs/spec/layout.md +++ b/docs/spec/layout.md @@ -65,6 +65,10 @@ Ant Design 的设计师通过 4 点来实现设计过程中和工程师的沟通 蚂蚁中后台涵盖了大量的不同类型和量级的产品，为了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，Ant Design 提出了 UI 模度的概念。在大量的实践中，我们提取了一组可以用于UI布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。 +![双数组](https://gw.alipayobjects.com/zos/rmsportal/ZBeDQMLMHLRfmUlUaaII.png) + +![常用](https://gw.alipayobjects.com/zos/rmsportal/QWsZUeuqYGQJqJxIPHOx.png) + ## 是启发，而非限制 Ant Design 在布局空间上的成果并非要限制设计产出，更多的在于引导设计者如何做到『更好』。8 倍数的双数组通过排列组合的方式可以形成千变万化种可能性，但在无限的可能性之中依然存在着『只是简单的套用数据组合』同『看起来很精妙』的差别。实现合理优雅的界面布局，在对美感的追求之上，还应当结合可用性来看待，对于企业级应用界面布局的探索，我们依然在路上。 From f1e6255fe15caede46c9a2973311f8f5d11b7382 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Wed, 3 Jan 2018 22:43:02 +0800 Subject: [PATCH 086/211] Update overview.md --- docs/spec/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/overview.md b/docs/spec/overview.md index 3f3a9bae11..a14178241d 100644 --- a/docs/spec/overview.md +++ b/docs/spec/overview.md @@ -20,7 +20,7 @@ title: 完整的设计模式将会包含 ETC 三大实体部分，以及 Genneral Concepts 这样的黏合剂： -- **Examples 产品范例：**由多张模板构成，启发用户如何使用和搭建出一个常见系统 +- **Examples 功能范例：**由多张模板构成，启发用户如何使用和搭建出一个常见功能 - **Templates 模板：**页面级示例，启发用户如何通过组件搭建出系统中的典型页面，eg：详情页 - **Components 组件** - Examples of Components 业务组件/模块：区块级示例，一般由多个组件构成，eg：PageHeader From 666dd40933f7b2bd02dfe21290d30376c8c77117 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Wed, 3 Jan 2018 22:44:18 +0800 Subject: [PATCH 087/211] Update overview.md --- docs/spec/overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/spec/overview.md b/docs/spec/overview.md index a14178241d..920f712e8e 100644 --- a/docs/spec/overview.md +++ b/docs/spec/overview.md @@ -20,12 +20,12 @@ title: 完整的设计模式将会包含 ETC 三大实体部分，以及 Genneral Concepts 这样的黏合剂： -- **Examples 功能范例：**由多张模板构成，启发用户如何使用和搭建出一个常见功能 -- **Templates 模板：**页面级示例，启发用户如何通过组件搭建出系统中的典型页面，eg：详情页 +- **Examples 功能范例：** 由多张模板构成，启发用户如何使用和搭建出一个常见功能 +- **Templates 模板：** 页面级示例，启发用户如何通过组件搭建出系统中的典型页面，eg：详情页 - **Components 组件** - Examples of Components 业务组件/模块：区块级示例，一般由多个组件构成，eg：PageHeader - Basic Components 基础组件：构成系统最基础的元素，eg：Button、Pagination -- **Genneral Concepts 通用概念：**一些保证 ETC 体系化的约定，eg：文案 +- **Genneral Concepts 通用概念：** 一些保证 ETC 体系化的约定，eg：文案 ## 资源 From 5b6304997fb7966049ed54ec05beb653b14d7b55 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Thu, 4 Jan 2018 10:19:36 +0800 Subject: [PATCH 088/211] Fix margin --- site/theme/static/page-nav.less | 1 + 1 file changed, 1 insertion(+) diff --git a/site/theme/static/page-nav.less b/site/theme/static/page-nav.less index 44c1489823..291f158683 100644 --- a/site/theme/static/page-nav.less +++ b/site/theme/static/page-nav.less @@ -3,6 +3,7 @@ bottom: 0; left: 0; width: ~"calc(100% - 194px - 64px)"; + margin-left: 64px; overflow: hidden; font-size: 14px; border-top: 1px solid @site-border-color-split; From 02775662056925afff00b7c7bd8b6b4cb9a9bcce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 4 Jan 2018 11:24:30 +0800 Subject: [PATCH 089/211] Update introduce.zh-CN.md --- docs/spec/introduce.zh-CN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md index 66c7b0d752..b9e7da352a 100644 --- a/docs/spec/introduce.zh-CN.md +++ b/docs/spec/introduce.zh-CN.md @@ -8,9 +8,9 @@ title: Introduction -在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。 +蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。 -Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 +随着商业化的趋势，越来越多的企业级产品对“更好的用户体验“有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和『自然』的设计价值观，通过模块化的解决方案，解放重复的生产成本，让设计者专注于"更好的用户体验"。 --- From 6547e1b44bc4bb0f7b3cb1f25e408368bb3b65a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 4 Jan 2018 13:44:20 +0800 Subject: [PATCH 090/211] Update values.md --- docs/spec/values.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/values.md b/docs/spec/values.md index 47737a7c79..44b34cbdcf 100644 --- a/docs/spec/values.md +++ b/docs/spec/values.md @@ -11,7 +11,7 @@ title: todo... -在设计价值观坚持上，Ant Design 有三点与众不同： +「在设计价值观的坚持上」，Ant Design 有两点与众不同： ## 自然 @@ -19,7 +19,7 @@ todo... 作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。我们已做了部分探索，并将追求『自然』作为我们未来持之以恒的方向。 -- 在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实产品体验。详见视觉语言 +- 在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实的产品体验。详见视觉语言 - 在行为的执行中，利用行为分析、人工智能、传感器等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然。 ## 确定 From 81013890a36e294afacef17f1bba529dbd52471d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 4 Jan 2018 14:04:11 +0800 Subject: [PATCH 091/211] Update values.md --- docs/spec/values.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/values.md b/docs/spec/values.md index 44b34cbdcf..ddb8023f1c 100644 --- a/docs/spec/values.md +++ b/docs/spec/values.md @@ -9,7 +9,7 @@ title: 设计价值观为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。 -todo... +![总概](https://gw.alipayobjects.com/zos/rmsportal/lHrHyPcxgEBLdchFEpxX.png) 「在设计价值观的坚持上」，Ant Design 有两点与众不同： From 07cc5eaea5ba7562ae71c2479e4a827a086a6006 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 4 Jan 2018 14:10:31 +0800 Subject: [PATCH 092/211] Update colors.zh-CN.md --- docs/spec/colors.zh-CN.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index 9e3a1b9ff4..9e1c2834dc 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -32,6 +32,8 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序 ### 中性色板 +中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中心色板一共包含了从白到黑的 14 个颜色。 + `````__react import Palette from '../../site/theme/template/Color/Palette'; From 863f87b7a7205527def143f1b9c2ea5be7e50b61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 4 Jan 2018 14:51:29 +0800 Subject: [PATCH 093/211] Update font.md --- docs/spec/font.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/font.md b/docs/spec/font.md index 3259bed3ad..5bc26ec02d 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -23,7 +23,7 @@ title: ## 字体家族 -优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下字体始终保持良好的易读性和可读性，体现了友好，稳定和专业的特性。此外，考虑到中后台产品常常会有大量的数字对比展示的诉求，我们单独将数字的字体定义为等宽的 Helvatica Neue，以便于提升数字间纵向比较时的阅读体验。 +优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。此外，考虑到中后台产品常常会有大量的数字对比展示的诉求，我们单独将数字的字体定义为等宽的 Helvatica Neue，以便于提升数字间纵向比较时的阅读体验。 ```css font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, @@ -97,4 +97,4 @@ Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸 1. **建立体系化的设计思路：**在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。 1. **少即是多：**在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、自重强调视觉重点或对比关系。 -1. **尝试让字体像音符一样跳跃：**在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会另字阶之间产生一种微妙的韵律感。 +1. **尝试让字体像音符一样跳跃：**在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。 From 633870aafec43d3e8e8659cf05d5715be7ac4316 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 4 Jan 2018 16:51:02 +0800 Subject: [PATCH 094/211] Update values.md --- docs/spec/values.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/values.md b/docs/spec/values.md index ddb8023f1c..ad6b325b95 100644 --- a/docs/spec/values.md +++ b/docs/spec/values.md @@ -15,7 +15,7 @@ title: ## 自然 -todo... +![自然](https://gw.alipayobjects.com/zos/rmsportal/cdaxgaTMQCGTqjdlwwgt.png) 作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。我们已做了部分探索，并将追求『自然』作为我们未来持之以恒的方向。 From 55a2c48d74cb851cbe8107951148367a5dbf01e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 4 Jan 2018 17:14:00 +0800 Subject: [PATCH 095/211] Update values.md --- docs/spec/values.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/values.md b/docs/spec/values.md index ad6b325b95..440d27763b 100644 --- a/docs/spec/values.md +++ b/docs/spec/values.md @@ -9,7 +9,7 @@ title: 设计价值观为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。 -![总概](https://gw.alipayobjects.com/zos/rmsportal/lHrHyPcxgEBLdchFEpxX.png) +![总概](https://gw.alipayobjects.com/zos/rmsportal/bIJZFjriQqeMPYyUkSev.png) 「在设计价值观的坚持上」，Ant Design 有两点与众不同： From 3217468ac15d0ddf43bca82b57b299b17ec29e0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Thu, 4 Jan 2018 17:21:27 +0800 Subject: [PATCH 096/211] Update values.md --- docs/spec/values.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/spec/values.md b/docs/spec/values.md index 440d27763b..fd464980ef 100644 --- a/docs/spec/values.md +++ b/docs/spec/values.md @@ -28,6 +28,6 @@ todo... 『设计者』需要做出更好的设计决策，给予研发团队一种高确定性、低熵值的研发状态。同时，不同设计者在充分理解业务述求后，基于 Ant Design 体系都会有相同且符合当前业务特性的设计产出。 -- **保持克制：**能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。 -- **面向对象的方法：**探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版 -- **模块化设计：**将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件、模板或者自行抽象可复用的组件、模板，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。 +- **保持克制：** 能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。 +- **面向对象的方法：** 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版 +- **模块化设计：** 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件、模板或者自行抽象可复用的组件、模板，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。 From 717ae6329a5476b827fc39ba737ace34d8cc7bfc Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 5 Jan 2018 10:57:09 +0800 Subject: [PATCH 097/211] Update --- docs/spec/overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/overview.md b/docs/spec/overview.md index 920f712e8e..03404b328a 100644 --- a/docs/spec/overview.md +++ b/docs/spec/overview.md @@ -23,8 +23,8 @@ title: - **Examples 功能范例：** 由多张模板构成，启发用户如何使用和搭建出一个常见功能 - **Templates 模板：** 页面级示例，启发用户如何通过组件搭建出系统中的典型页面，eg：详情页 - **Components 组件** - - Examples of Components 业务组件/模块：区块级示例，一般由多个组件构成，eg：PageHeader - - Basic Components 基础组件：构成系统最基础的元素，eg：Button、Pagination + - Examples of Components 业务组件/模块：区块级示例，一般由多个组件构成，eg：PageHeader + - Basic Components 基础组件：构成系统最基础的元素，eg：Button、Pagination - **Genneral Concepts 通用概念：** 一些保证 ETC 体系化的约定，eg：文案 ## 资源 From 7fda4057eef021476f4fc854927ee6bf473e3836 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 5 Jan 2018 11:04:17 +0800 Subject: [PATCH 098/211] Update --- docs/spec/copywriting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/copywriting.md b/docs/spec/copywriting.md index a8764b8c1b..ea669ccf1d 100644 --- a/docs/spec/copywriting.md +++ b/docs/spec/copywriting.md @@ -100,7 +100,7 @@ title: 正确示范 错误示范 -
+
@@ -244,7 +244,7 @@ title: ### 基本标点规范 -
使用 不使用
+
From 37fc8906529f993fff1ecb6a9744fd00d503e584 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 5 Jan 2018 11:06:54 +0800 Subject: [PATCH 099/211] Update --- docs/spec/data-display.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/data-display.md b/docs/spec/data-display.md index 99f86112ee..55756db3d2 100644 --- a/docs/spec/data-display.md +++ b/docs/spec/data-display.md @@ -46,7 +46,7 @@ title: > 注： > 1. 卡片通常根据栅格进行排列，建议一行最多不超过四个 -> 2. 在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如『Ant Design 适用用于中台…』 +> 2. 在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如『Ant Design 适用于中台…』 --- From c8ffe92a9a3426627d67915c692ccf8763dda3df Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 5 Jan 2018 11:14:55 +0800 Subject: [PATCH 100/211] Update --- site/theme/static/resource.less | 1 + 1 file changed, 1 insertion(+) diff --git a/site/theme/static/resource.less b/site/theme/static/resource.less index 86ac51c85e..9c21a429c1 100644 --- a/site/theme/static/resource.less +++ b/site/theme/static/resource.less @@ -39,6 +39,7 @@ display: flex; align-items: center; justify-content: center; + flex-shrink: 0; width: 130px; } From 3c67586e1db789e4991dd33a361152bec2287e65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Fri, 5 Jan 2018 11:17:41 +0800 Subject: [PATCH 101/211] Update overview.md --- docs/spec/overview.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/spec/overview.md b/docs/spec/overview.md index 03404b328a..a85fd94828 100644 --- a/docs/spec/overview.md +++ b/docs/spec/overview.md @@ -18,14 +18,14 @@ title: ![结构图](https://gw.alipayobjects.com/zos/rmsportal/NyWYOFQxJYElAwtUfSdv.png) -完整的设计模式将会包含 ETC 三大实体部分，以及 Genneral Concepts 这样的黏合剂： +完整的设计模式将会包含示例、模板、组件（ETC）三大实体部分，以及通用概念这样的黏合剂： -- **Examples 功能范例：** 由多张模板构成，启发用户如何使用和搭建出一个常见功能 -- **Templates 模板：** 页面级示例，启发用户如何通过组件搭建出系统中的典型页面，eg：详情页 -- **Components 组件** - - Examples of Components 业务组件/模块：区块级示例，一般由多个组件构成，eg：PageHeader - - Basic Components 基础组件：构成系统最基础的元素，eg：Button、Pagination -- **Genneral Concepts 通用概念：** 一些保证 ETC 体系化的约定，eg：文案 +- **功能范例：** 由多张模板构成，启发用户如何使用和搭建出一个常见功能。 +- **模板：** 页面级示例，启发用户如何通过组件搭建出系统中的典型页面，如：详情页。 +- **组件** + - 基础组件：构成系统最基础的元素，如按钮、分页器。 + - 业务组件/模块：区块级示例，一般由多个组件构成，如 PageHeader 通用页头。 +- **通用概念：** 一些保证 ETC 体系化的约定，如：排版、字体、文案。 ## 资源 From f11b842809d76bf4db91ca10231741265fc79f5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Fri, 5 Jan 2018 11:44:28 +0800 Subject: [PATCH 102/211] Update font.md --- docs/spec/font.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/font.md b/docs/spec/font.md index 5bc26ec02d..44c84b5500 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -50,13 +50,13 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。
- +
Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸的字体以及与之相对应的行高。
- +
在 Ant Design 的视觉体系中，我们建议的主要字体为 14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中（展示型页面除外），字阶的选择尽量控制在 3-5 种之间，保持克制的原则。 From 2dbc0a7d520b88d5629fbc36748af9d9d937a61f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Fri, 5 Jan 2018 11:47:17 +0800 Subject: [PATCH 103/211] Update feedback.md --- docs/spec/feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/feedback.md b/docs/spec/feedback.md index 829d781d1f..a62b12e579 100644 --- a/docs/spec/feedback.md +++ b/docs/spec/feedback.md @@ -110,7 +110,7 @@ title: 正确示例 错误示例 -由于反馈浮层的展示时长较短（默认 4.5s），对于比较重要的失败通知，建议改用对话框的形式进行通知，以避免用户遗漏信息。 +由于反馈浮层的展示时长较短（默认 3s），对于比较重要的失败通知，建议改用对话框的形式进行通知，以避免用户遗漏信息。 ### 对话框反馈 From 2ee05babdce3ad1dd0422882415ca77af4f68327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Fri, 5 Jan 2018 11:56:18 +0800 Subject: [PATCH 104/211] Update values.md --- docs/spec/values.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/values.md b/docs/spec/values.md index fd464980ef..ca9e01855b 100644 --- a/docs/spec/values.md +++ b/docs/spec/values.md @@ -24,7 +24,7 @@ title: ## 确定 -todo... +![确定](https://gw.alipayobjects.com/zos/rmsportal/ZxgRAMzXNrxHTcvMLchq.png) 『设计者』需要做出更好的设计决策，给予研发团队一种高确定性、低熵值的研发状态。同时，不同设计者在充分理解业务述求后，基于 Ant Design 体系都会有相同且符合当前业务特性的设计产出。 From 49393f0502bbdd9afd5155da339f92c63c1ba953 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 5 Jan 2018 12:40:54 +0800 Subject: [PATCH 105/211] Update english version image --- docs/spec/alignment.en-US.md | 12 ++-- docs/spec/alignment.zh-CN.md | 2 - docs/spec/contrast.en-US.md | 14 ++-- docs/spec/direct.en-US.md | 15 ++-- docs/spec/direct.zh-CN.md | 4 -- docs/spec/icon.en-US.md | 4 +- docs/spec/invitation.en-US.md | 17 ++--- docs/spec/lightweight.en-US.md | 16 ++--- docs/spec/navigation.en-US.md | 24 +++---- docs/spec/proximity.en-US.md | 14 ++-- docs/spec/reaction.en-US.md | 24 +++---- docs/spec/reaction.zh-CN.md | 4 -- docs/spec/reference.en-US.md | 126 ++++++++++++++++++--------------- docs/spec/repetition.en-US.md | 6 +- docs/spec/stay.en-US.md | 26 +++---- docs/spec/stay.zh-CN.md | 4 -- 16 files changed, 147 insertions(+), 165 deletions(-) diff --git a/docs/spec/alignment.en-US.md b/docs/spec/alignment.en-US.md index 56c479ccbe..8919115b1b 100644 --- a/docs/spec/alignment.en-US.md +++ b/docs/spec/alignment.en-US.md @@ -12,8 +12,8 @@ As is described in the Law of Continuity of Gestalt psychology, in the perceptua ## Text Alignment -good example - +good example + If the paragraphs or the length of the words are too short or too loose, then a unified visual starting point is needed. @@ -21,17 +21,15 @@ If the paragraphs or the length of the words are too short or too loose, then a ## Form Alignment -example of colon alignment +example of colon alignment Colon alignment(right-align) can encircle the content into a certain range. Users can infer where the chart is through the regular arranged colon so that the speed of filling in the chart can be speeded up. -More ways of aligning，please visit [(/docs/pattern/form#对齐方式)](/docs/pattern/form#对齐方式)。 - --- ## Numbers Alignment -good example -bad example +good example +bad example 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. 。 diff --git a/docs/spec/alignment.zh-CN.md b/docs/spec/alignment.zh-CN.md index 8bed2fdcff..78f11cb80a 100644 --- a/docs/spec/alignment.zh-CN.md +++ b/docs/spec/alignment.zh-CN.md @@ -25,8 +25,6 @@ title: 对齐 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 -更多对齐方式，请查看[『模式／表单／规格／对齐方式』](/docs/pattern/form#对齐方式)。 - --- ## 数字类对齐 diff --git a/docs/spec/contrast.en-US.md b/docs/spec/contrast.en-US.md index 5f62415c8a..a5071a02a4 100644 --- a/docs/spec/contrast.en-US.md +++ b/docs/spec/contrast.en-US.md @@ -12,8 +12,8 @@ Contrast is one of the effective ways to add visual interest to your page, and t ## The Contrast of major and minor relationship -good example -bad example +good example +bad example 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. @@ -21,7 +21,7 @@ In order to help user make a quick operation (something like the form，modal),
-Example of ignoring the primary and secondary sequence +Example of ignoring the primary and secondary sequence 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. @@ -29,9 +29,9 @@ When there’s something needs users to make decision prudently, the system shou ## Contrast of whole and part -Example of whole and part 1 +Example of whole and part 1 -Example of whole and part 2 +Example of whole and part 2 Taking advantage of changing the typesetting, the typeface and the size, we highlight the different levels and differentiate the ensemble and the part, which would make the page be more flexible and rhythmic. @@ -39,9 +39,9 @@ Taking advantage of changing the typesetting, the typeface and the size, we high ## Contrast of the state relation -Example of static contrast +Example of static contrast -Example of dynamic contrast +Example of dynamic contrast Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better diff --git a/docs/spec/direct.en-US.md b/docs/spec/direct.en-US.md index 7e5b231990..2be20429e1 100644 --- a/docs/spec/direct.en-US.md +++ b/docs/spec/direct.en-US.md @@ -10,7 +10,7 @@ As Alan Cooper states：『Where there is output, let there be input』. This is ## In-Page Editing -Example of click to edit +Example of click to edit Single-Field Inline Edit @@ -19,31 +19,26 @@ If 『readability』 is more important than 『editability』, 『click to edit
Example of Text link/Icon Edit +" src="https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png"> If the priority is given to 『readability』 and the 『editability』 of operation lines need to be highlighted at the same time, 『text link/icon edit』can be used.
-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. -
- -More mode of 『In-page Edit』 ，please visit [『Mode／Table／Interaction』](/docs/pattern/table#模块编辑) - -
--- ## Drag and Drop -Example of Drag and Drop List +Example of Drag and Drop List Drag and Drop List @@ -51,7 +46,7 @@ Drag and Drop can only limited in one dimension（upper/down or left/right）
-Example of Drag and Drop picture/file +Example of Drag and Drop picture/file Drag and Drop picture/file diff --git a/docs/spec/direct.zh-CN.md b/docs/spec/direct.zh-CN.md index 73b1b20075..d96e32d7fd 100644 --- a/docs/spec/direct.zh-CN.md +++ b/docs/spec/direct.zh-CN.md @@ -32,10 +32,6 @@ title: 直截了当
-更多有关『页内编辑』的模式，可查看[『模式／表格／交互』](/docs/pattern/table#模块编辑)中的内容。 - -
- --- ## 利用拖放 diff --git a/docs/spec/icon.en-US.md b/docs/spec/icon.en-US.md index 513dbe5943..0298483586 100644 --- a/docs/spec/icon.en-US.md +++ b/docs/spec/icon.en-US.md @@ -81,7 +81,7 @@ For example, icons inline with 12pt font should be 12px in size with 8px of spac ### 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). @@ -103,6 +103,6 @@ In normal use, there are 32px (minimum size), 48px and 64px (maximum size) three ### 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. diff --git a/docs/spec/invitation.en-US.md b/docs/spec/invitation.en-US.md index 3580687045..048c072043 100644 --- a/docs/spec/invitation.en-US.md +++ b/docs/spec/invitation.en-US.md @@ -21,25 +21,22 @@ By providing cues for interaction directly on the page we can statically indicat
-example of Text Invitation +example of Text Invitation -example of Blank Slate Invitation +example of Blank Slate Invitation -example of Unfinished Invitation +example of Unfinished Invitation Call to Action Invitations are generally provided as static instructions on the page. But visually they can be provided in many different ways such as Text Invitation, Blank Slate Invitation and Unfinished Invitation.
-example 1 of Tour Invitation - -example 2 of Tour Invitation +example 1 of Tour Invitation Tour invitation can be a nice way to explain design changes to a web application, especially for a well-designed interface. But providing tours will not solve the real problems an interface may have during interaction. >Note that make Tour Invitations short and simple, easy to exit, and clear to restart. -
--- @@ -50,16 +47,16 @@ Dynamic Invitations engage users at the point of the interaction and guide them
-example 1 of Hover Invitation +example 1 of Hover Invitation -example 2 of Hover Invitation +example 2 of Hover Invitation Hover Invitation: Provide an invitation during mouse hover.
-example of Inference Invitation +example of Inference Invitation Inference Invitation: Use visual inferences during interaction to cue users as to what the system has inferred about their intent. diff --git a/docs/spec/lightweight.en-US.md b/docs/spec/lightweight.en-US.md index 4bc133dd98..b6606acabb 100644 --- a/docs/spec/lightweight.en-US.md +++ b/docs/spec/lightweight.en-US.md @@ -14,7 +14,7 @@ Fitts’s Law is an ergonomic principle that ties the size of a target and its c ## Always-Visible Tools -example of Always-Visible Tools, from Zhihu +example of Always-Visible Tools, from Zhihu If an action is critical, expose it directly in the interface and keep it always visible. @@ -25,7 +25,7 @@ If an action is critical, expose it directly in the interface and keep it always ## Hover-Reveal Tools -example of Hover-Reveal Tools +example of Hover-Reveal Tools Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object. @@ -35,7 +35,7 @@ Instead of making Contextual Tools always visible, we can show them on demand. O ## Toggle-Reveal Tools -example of Toggle-Reveal Tools +example of Toggle-Reveal Tools Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle. @@ -45,11 +45,11 @@ Toggle a tool mode for an area or page when the actions are not the main flow. T ## Interaction in Context -good example +good example -good example +good example -bad example +bad example If the actions are secondary or alternative, hide Contextual Tools in the user flow, in order to keep visual clutter to a minimum, reduce the load of cognition burden and bring a surprise. @@ -61,13 +61,13 @@ Some relative knowledge of [Providing an Invitation](/docs/spec/invitation) can ## Visible Area ≠ Clickable Area -example of hypertext hot spot +example of hypertext hot spot The clickable area of hypertext is affected by the length of the string in a cell. The whole cell can be set to a hot spot in order to be triggered easier.
-example of button hot spot +example of button hot spot Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button. diff --git a/docs/spec/navigation.en-US.md b/docs/spec/navigation.en-US.md index 1ad7bb5997..3beaae8235 100644 --- a/docs/spec/navigation.en-US.md +++ b/docs/spec/navigation.en-US.md @@ -18,13 +18,13 @@ Navigation menu is an effective and user-friendly way for reprensenting site str ### Top Navigation - + Top navigation menu put hyperlinks in a row and present information in a simple and straightforward way. It is suitable for landing pages and consumer facing web apps. The number of first level menu items should be between 2 and 7. Title for each menu item should contain less than 15 characters. ### Side Navigation - + Vertical navigation is more flexible than horizontal one, menu items are easily extensible downward, and longer labels can be allowed. With help from a scrollbar, unlimited number of menu items can be supported. It is suitable for multi-level, operation intensive and dashboard-like web apps. @@ -36,7 +36,7 @@ Vertical navigation is more flexible than horizontal one, menu items are easily Breadcrumb tell users where they are now among page hierarchy, and parent-child relationships between pages. - + > Notes: > 1. When hierarchy is deep, it is recommended to hide certain pages. Depth of pages shown should at best be lower than 3, and should not exceed 5. @@ -50,25 +50,25 @@ Tabs categorize content, in order to present large amount of information in a li ### Basic - + Control content of the entire page. Usually used for switching among core functionalities. ### Card - + Control part of page content. Bordered container naturally separate it from other parts of the page. ### Pill - + Switch among options in a card. Usually used along with other types of tabs, so that user can navigate to intended content via quick tab switching. ### Vertical - + Used for large number of tab options. It can be easily extended to contain an unlimited number of categories. @@ -80,13 +80,13 @@ Steps is a navigation bar guiding users to perform a task following a predefined ### Horizontal - + Used for more than 2 but less than 5 steps. Title for each step should contain less than 12 characters. ### Vertical - + Usually float at the left side of pages, in a fixed position. Multi-line description can be attached to each step. Suitable for large or dynamic number of steps, i.e. time-based steps with dynamic descriptions. @@ -98,18 +98,18 @@ Used for paginating large amount of content. Users can clearly know the total am ### Basic - + When there is a large number of rows, page size can be made customizable by users, so that users can query and browse information more flexibly and effectively. ### Mini - + Commonly used in a Card or a floating layer. ### Simple - + Commonly used in a Card or a data table, for no more than 10 pages. diff --git a/docs/spec/proximity.en-US.md b/docs/spec/proximity.en-US.md index c20f79cb4f..3ad16f40f7 100644 --- a/docs/spec/proximity.en-US.md +++ b/docs/spec/proximity.en-US.md @@ -10,28 +10,28 @@ When several items are in close proximity to each other, they become one visual ## The relation of vertical spacing -Example of the different vertical distance +Example of the different vertical distance 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』. --- -## Relationship of horizontal spacing +## Relationship of horizontal spacing -Example of combination and configuration +Example of combination and configuration -To adapt to screens of different sizes, in the horizontal direction, use grid layout to arrange the components to ensure the flexibility of the layout. +To adapt to screens of different sizes, in the horizontal direction, use grid layout to arrange the components to ensure the flexibility of the layout.
-Example of checkbox +Example of checkbox In the inner of a component, the horizontal spacing of elements should differ too. diff --git a/docs/spec/reaction.en-US.md b/docs/spec/reaction.en-US.md index 78c724b0e2..d8f036ab97 100644 --- a/docs/spec/reaction.en-US.md +++ b/docs/spec/reaction.en-US.md @@ -16,30 +16,26 @@ While there is a possibility of too much feedback (or, more accurately, too much ## Lookup Patterns -example of Certain Category +example of Certain Category -example of Uncertain Category +example of Uncertain Category Auto Complete: As the user types input into a field, a drop-down menu of matching values is displayed. Depending on the categories of search results, it can be divided into two types, Certain Category and Uncertain Category.
-example of Live Search +example of Live Search Live Suggest: Live Suggest provides real-time search term suggestions for creating a search.
-Refining Search: Refining Search provides a set of live filters that allow the search results to be tuned in real time. Learn more on [Pattern/Advanced Search](/docs/pattern/advanced-search). - -
- --- ## Live Suggest -example of Live Preview +example of Live Preview Live Preview: A Live Preview gives the users a glimpse beforehand of how the application will interpret their input once submitted. @@ -51,25 +47,25 @@ Progressive Disclosure: When users are faced with a series of steps, it is often
-example of Loading Button +example of Loading Button -example of Loading Table +example of Loading Table -example of Loading List +example of Loading List -example of Loading Page +example of Loading Page Progress Indicator: Progress Indicators keep a conversation going with the user when the rest of the interface is currently unavailable. Common Progress Indicators, such as Loading Button, Loading Table, Loading List and Loading Page, can be displayed respectively according to the frequency and importance of operation.
-example of Click Refresh +example of Click Refresh Click Refresh: Click Refresh notifies the user of fresh content and provides button or tool to refresh.
-example of Periodic Refresh +example of Periodic Refresh Periodic Refresh: Periodic Refresh brings in fresh content on a periodic basis without direct user interaction. diff --git a/docs/spec/reaction.zh-CN.md b/docs/spec/reaction.zh-CN.md index 681e3db223..76df58a542 100644 --- a/docs/spec/reaction.zh-CN.md +++ b/docs/spec/reaction.zh-CN.md @@ -31,10 +31,6 @@ title: 即时反应
-微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式／高级搜索』](/docs/pattern/advanced-search)。 - -
- --- ## 反馈模式 diff --git a/docs/spec/reference.en-US.md b/docs/spec/reference.en-US.md index 6e77247f5b..70061ad004 100644 --- a/docs/spec/reference.en-US.md +++ b/docs/spec/reference.en-US.md @@ -7,60 +7,74 @@ title: Reference Please find below the books that inspired us, saved our time and helped us to overcome difficulties when designing components and patterns. If you want to know more about UI design, we recommend you these awesome books.
- - - - About Face - Author: Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel - Publisher: Wiley - - - - - - Designing Web Interfaces - Author: Bill Scott, Theresa Neil - Publisher: O'Reilly Media - - - - - - Designing Interfaces - Author: Jenifer Tidwell - Publisher: O'Reilly Media - - - - - - Non-Designer's Design Book - Author: Robin Williams - Publisher: Peachpit Press - - - - - - The Design of Everyday Things - Author: Don Norman - Publisher: Basic Books, A Member of the Perseus Books Group - - - - - - Emotional Design - Author: Don Norman - Publisher: Basic Books, A Member of the Perseus Books Group - - - - - - Web Form Design - Author: Luke Wroblewski - Publisher: Rosenfeld Media - - + +
+ +
+
+ About Face + Author: Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel + Publisher: Wiley +
+ + +
+ +
+
+ Designing Web Interfaces + Author: Bill Scott, Theresa Neil + Publisher: O'Reilly Media +
+ + +
+ +
+
+ Designing Interfaces + Author: Jenifer Tidwell + Publisher: O'Reilly Media +
+ + +
+ +
+
+ Non-Designer's Design Book + Author: Robin Williams + Publisher: Peachpit Press +
+ + +
+ +
+
+ The Design of Everyday Things + Author: Don Norman + Publisher: Basic Books, A Member of the Perseus Books Group +
+ + +
+ +
+
+ Emotional Design + Author: Don Norman + Publisher: Basic Books, A Member of the Perseus Books Group +
+ + +
+ +
+
+ Web Form Design + Author: Luke Wroblewski + Publisher: Rosenfeld Media +
+
diff --git a/docs/spec/repetition.en-US.md b/docs/spec/repetition.en-US.md index cbcc9e4dbb..a9025c2e42 100644 --- a/docs/spec/repetition.en-US.md +++ b/docs/spec/repetition.en-US.md @@ -10,10 +10,10 @@ The same elements keep repeating in the whole interface, which not only could lo ## Repetitive elements -Example of repetitive wireframe +Example of repetitive wireframe -Example of repetitive design elements +Example of repetitive design elements -Example of repetitive of formats +Example of repetitive of formats The repetitive element may be a thick rule(line), a wireframe， color, design elements, particular format, spatial relationships, etc. diff --git a/docs/spec/stay.en-US.md b/docs/spec/stay.en-US.md index fac1fe758a..ea868e9dbc 100644 --- a/docs/spec/stay.en-US.md +++ b/docs/spec/stay.en-US.md @@ -14,18 +14,18 @@ Solve most of problems on the same page and avoid a new one, because the page re ## Overlays -good example +good example -good example (special case) +good example (special case) bad example +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.
-example of Detail Overlay +example of Detail Overlay Detail Overlay: Allows an overlay to present additional information when the user clicks or hovers over a link or section of content. @@ -34,7 +34,7 @@ Detail Overlay: Allows an overlay to present additional information when the use
-example of Input Overlay +example of Input Overlay Input Overlay: Let the user enter small amounts of text on the overlay. @@ -44,13 +44,13 @@ Input Overlay: Let the user enter small amounts of text on the overlay. ## Inlays -example of List Inlay +example of List Inlay List Inlay: Works as an effective way to hide detail until needed — while at the same time preserving space on the page for high-level overview information.
-example of Tabs +example of Tabs Tabs: Provides additional panels of information accessible by tab controls. @@ -60,11 +60,7 @@ Tabs: Provides additional panels of information accessible by tab controls. ## Virtual Pages -In the process of interaction design, Overlays allow you to bring additional interactions or content in a layer above the cur- rent page. Inlays allow you to do this within the page itself. However, another powerful approach to keeping users engaged on the current page is to create a virtual page. That is to say, we create the illusion of a larger virtual page. - -Virtual Scrolling and Pagination, more on [Patterns／Lists／Show Long Lists](/docs/pattern/list#显示长列表) - -Carousel, more on [Patterns／Lists／Show Images](/docs/pattern/list#显示图片) +In the process of interaction design, Overlays allow you to bring additional interactions or content in a layer above the cur- rent page. Inlays allow you to do this within the page itself. However, another powerful approach to keeping users engaged on the current page is to create a virtual page. That is to say, we create the illusion of a larger virtual page.
@@ -76,19 +72,19 @@ It has long been common practice on the Web to turn each step into a separate pa
-example of Responsive Disclosure +example of Responsive Disclosure Responsive Disclosure: Make the experience for selecting painless by providing disclosures as quickly as possible, and doing it all in a single-page interface.
-example of Configurator Process +example of Configurator Process Configurator Process: Provides a configurator that allows users to help them accomplish the task or build their own product.
-example of Dialog Overlay Process +example of Dialog Overlay Process 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. diff --git a/docs/spec/stay.zh-CN.md b/docs/spec/stay.zh-CN.md index 6f075baa48..eb1bc1e9bd 100644 --- a/docs/spec/stay.zh-CN.md +++ b/docs/spec/stay.zh-CN.md @@ -60,10 +60,6 @@ title: 足不出户 在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。 -无限加载和分页器，详见[『模式／列表／显示长列表』](/docs/pattern/list#显示长列表) - -走马灯，详见[『模式／列表／显示图片』](/docs/pattern/list#显示图片) -
--- From 72ad9a3d49f30e7fc65c37b030fe92c650f02d4d Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 5 Jan 2018 14:19:50 +0800 Subject: [PATCH 106/211] Add English version design values --- docs/spec/values.en-US.md | 30 ++++++++++++++++++++++++ docs/spec/{values.md => values.zh-CN.md} | 5 +--- 2 files changed, 31 insertions(+), 4 deletions(-) create mode 100644 docs/spec/values.en-US.md rename docs/spec/{values.md => values.zh-CN.md} (97%) diff --git a/docs/spec/values.en-US.md b/docs/spec/values.en-US.md new file mode 100644 index 0000000000..ab3c97c87c --- /dev/null +++ b/docs/spec/values.en-US.md @@ -0,0 +1,30 @@ +--- +category: Ant Design +order: 1 +title: Design Values +--- + +For designers of Ant Design and designers who used Ant Design for product design, it provides the criteria for evaluation. At the same time, it inspires and inspires design principles and design patterns to provide guidance and general solutions to specific design issues + +![Overview](https://gw.alipayobjects.com/zos/rmsportal/bIJZFjriQqeMPYyUkSev.png) + +About Design Values, Ant Design has something different: + +## Nature + +![Nature](https://gw.alipayobjects.com/zos/rmsportal/cdaxgaTMQCGTqjdlwwgt.png) + +As a part of nature, it will have deep influence on user behavior, and designers should draw inspiration from it and apply it to current design work. We have done some exploration and will pursue "nature" as our future direction. + +- In the perception and cognition, the visual system plays the most important role. By refining the objective laws in nature and applying it to the interface design, a more layered product experience is created. At the same time, hearing systems and tactile systems are added timely, Create more dimensions, more real product experience. See visual language. +- In the course of behavior, a series of methods such as behavior analysis, artificial intelligence and sensors are used to assist users to make effective decisions and reduce extra operations of users, so as to save users' mental and physical resources and make human-computer interaction more natural. + +## Determine + +![Determine](https://gw.alipayobjects.com/zos/rmsportal/ZxgRAMzXNrxHTcvMLchq.png) + +The "designer" needs to make better design decisions and give the R & D team a high-definition, low-entropy R & D status. At the same time, different designers, based on a complete understanding of the business requirements, will have the same design output that is consistent with the current business characteristics based on the Ant Design system. + +- **Keep restraint:** you can do it, but you know you do not have to do it. Designers should focus on the valuable product features polished, and use minimal design elements to express. As Antoine de St.Exupery said: Perfection is not to be added, but rather that there is no excuse to be removed, and nothing is done. +- **The object-oriented method:** Explore design rules and abstract them into "objects" to enhance the flexibility and maintainability of interface design while reducing "designer's" subjective interference and reducing system uncertainty. For example: color value conversion, spacing typesetting. +- **Modular Design:** Packaging complex or recurring parts locally, providing limited interfaces to interact with other modules, ultimately reducing overall system complexity, resulting in increased reliability and maintainability. Designers can use existing components, templates or abstract their own reusable components, templates, save unnecessary design and maintain system consistency, so that "designers" to focus on creativity where most needed. diff --git a/docs/spec/values.md b/docs/spec/values.zh-CN.md similarity index 97% rename from docs/spec/values.md rename to docs/spec/values.zh-CN.md index ca9e01855b..7670b6178c 100644 --- a/docs/spec/values.md +++ b/docs/spec/values.zh-CN.md @@ -1,14 +1,11 @@ --- category: Ant Design order: 1 -title: - zh-CN: 设计价值观 - en-US: Design Values +title: 设计价值观 --- 设计价值观为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。 - ![总概](https://gw.alipayobjects.com/zos/rmsportal/bIJZFjriQqeMPYyUkSev.png) 「在设计价值观的坚持上」，Ant Design 有两点与众不同： From ff6fab360fdd6418b2f732838400daadc37fd9b4 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 5 Jan 2018 14:53:00 +0800 Subject: [PATCH 107/211] Remove shadow --- docs/spec/values.en-US.md | 12 +++++++++--- docs/spec/values.zh-CN.md | 12 +++++++++--- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/spec/values.en-US.md b/docs/spec/values.en-US.md index ab3c97c87c..4337442625 100644 --- a/docs/spec/values.en-US.md +++ b/docs/spec/values.en-US.md @@ -6,13 +6,17 @@ title: Design Values For designers of Ant Design and designers who used Ant Design for product design, it provides the criteria for evaluation. At the same time, it inspires and inspires design principles and design patterns to provide guidance and general solutions to specific design issues -![Overview](https://gw.alipayobjects.com/zos/rmsportal/bIJZFjriQqeMPYyUkSev.png) +
+ Overview +
About Design Values, Ant Design has something different: ## Nature -![Nature](https://gw.alipayobjects.com/zos/rmsportal/cdaxgaTMQCGTqjdlwwgt.png) +
+ Nature +
As a part of nature, it will have deep influence on user behavior, and designers should draw inspiration from it and apply it to current design work. We have done some exploration and will pursue "nature" as our future direction. @@ -21,7 +25,9 @@ As a part of nature, it will have deep influence on user behavior, and designers ## Determine -![Determine](https://gw.alipayobjects.com/zos/rmsportal/ZxgRAMzXNrxHTcvMLchq.png) +
+ Determine +
The "designer" needs to make better design decisions and give the R & D team a high-definition, low-entropy R & D status. At the same time, different designers, based on a complete understanding of the business requirements, will have the same design output that is consistent with the current business characteristics based on the Ant Design system. diff --git a/docs/spec/values.zh-CN.md b/docs/spec/values.zh-CN.md index 7670b6178c..9df72f4cee 100644 --- a/docs/spec/values.zh-CN.md +++ b/docs/spec/values.zh-CN.md @@ -6,13 +6,17 @@ title: 设计价值观 设计价值观为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。 -![总概](https://gw.alipayobjects.com/zos/rmsportal/bIJZFjriQqeMPYyUkSev.png) +
+ 总概 +
「在设计价值观的坚持上」，Ant Design 有两点与众不同： ## 自然 -![自然](https://gw.alipayobjects.com/zos/rmsportal/cdaxgaTMQCGTqjdlwwgt.png) +
+ 自然 +
作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。我们已做了部分探索，并将追求『自然』作为我们未来持之以恒的方向。 @@ -21,7 +25,9 @@ title: 设计价值观 ## 确定 -![确定](https://gw.alipayobjects.com/zos/rmsportal/ZxgRAMzXNrxHTcvMLchq.png) +
+ 确定 +
『设计者』需要做出更好的设计决策，给予研发团队一种高确定性、低熵值的研发状态。同时，不同设计者在充分理解业务述求后，基于 Ant Design 体系都会有相同且符合当前业务特性的设计产出。 From 6cda29532a9df852fff47066bc86cfd2a0cc1de9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Fri, 5 Jan 2018 14:56:20 +0800 Subject: [PATCH 108/211] Update values.en-US.md --- docs/spec/values.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/values.en-US.md b/docs/spec/values.en-US.md index 4337442625..abac1ec8d9 100644 --- a/docs/spec/values.en-US.md +++ b/docs/spec/values.en-US.md @@ -7,7 +7,7 @@ title: Design Values For designers of Ant Design and designers who used Ant Design for product design, it provides the criteria for evaluation. At the same time, it inspires and inspires design principles and design patterns to provide guidance and general solutions to specific design issues
- Overview +
About Design Values, Ant Design has something different: From 391fee78d0f22360b84503821ded32313e338db3 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 5 Jan 2018 15:08:38 +0800 Subject: [PATCH 109/211] Update --- docs/spec/values.en-US.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/spec/values.en-US.md b/docs/spec/values.en-US.md index abac1ec8d9..f75e01b9c1 100644 --- a/docs/spec/values.en-US.md +++ b/docs/spec/values.en-US.md @@ -4,13 +4,13 @@ order: 1 title: Design Values --- -For designers of Ant Design and designers who used Ant Design for product design, it provides the criteria for evaluation. At the same time, it inspires and inspires design principles and design patterns to provide guidance and general solutions to specific design issues +Ant Design provides a practical evaluation of better design for both designers of Ant Design and designers who are using it. At the same time, it build a foundation for design principles and design patterns which could provide guideline and general solutions for specified design goal.
-About Design Values, Ant Design has something different: +Here is our design values: ## Nature @@ -18,10 +18,10 @@ About Design Values, Ant Design has something different: Nature -As a part of nature, it will have deep influence on user behavior, and designers should draw inspiration from it and apply it to current design work. We have done some exploration and will pursue "nature" as our future direction. +As a part of nature, it will have deep influence on user behavior, and designers should draw inspiration from it and apply it to our daily design work. We have started exploring and will pursue nature as our future direction. -- In the perception and cognition, the visual system plays the most important role. By refining the objective laws in nature and applying it to the interface design, a more layered product experience is created. At the same time, hearing systems and tactile systems are added timely, Create more dimensions, more real product experience. See visual language. -- In the course of behavior, a series of methods such as behavior analysis, artificial intelligence and sensors are used to assist users to make effective decisions and reduce extra operations of users, so as to save users' mental and physical resources and make human-computer interaction more natural. +- The visual system plays the most important role in human perception and cognition. By refining the objective laws in nature and applying it to the interface design, a more layered product experience is created. In addition, hearing systems or tactile systems could be added in future to bring more dimensions and more real product experience. See visual language. +- In the real product design, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, so as to save users' mental and physical resources and make human-computer interaction more natural. ## Determine @@ -29,8 +29,8 @@ As a part of nature, it will have deep influence on user behavior, and designers Determine -The "designer" needs to make better design decisions and give the R & D team a high-definition, low-entropy R & D status. At the same time, different designers, based on a complete understanding of the business requirements, will have the same design output that is consistent with the current business characteristics based on the Ant Design system. +The "designer" needs to make better design decisions and give the R&D team a high-definition, low-entropy R & D status. At the same time, different designers, based on a complete understanding of the business requirements, will have the same design output that is consistent with the current business characteristics based on the Ant Design system. - **Keep restraint:** you can do it, but you know you do not have to do it. Designers should focus on the valuable product features polished, and use minimal design elements to express. As Antoine de St.Exupery said: Perfection is not to be added, but rather that there is no excuse to be removed, and nothing is done. -- **The object-oriented method:** Explore design rules and abstract them into "objects" to enhance the flexibility and maintainability of interface design while reducing "designer's" subjective interference and reducing system uncertainty. For example: color value conversion, spacing typesetting. -- **Modular Design:** Packaging complex or recurring parts locally, providing limited interfaces to interact with other modules, ultimately reducing overall system complexity, resulting in increased reliability and maintainability. Designers can use existing components, templates or abstract their own reusable components, templates, save unnecessary design and maintain system consistency, so that "designers" to focus on creativity where most needed. +- **Object-oriented:** Explore design rules and abstract them as "objects" to enhance the flexibility and maintainability of user interface design while reducing "designer's" subjective interference and reducing system uncertainty. For example: color value conversion, spacing typesetting. +- **Modular:** Packaging complex or recurring parts locally, providing limited interfaces to interact with other modules, ultimately reducing overall system complexity, resulting in increased reliability and maintainability. Designers can use existing components, templates or abstract their own reusable components, templates, save unnecessary design and maintain system consistency, so that "designers" to focus on creativity where most needed. From f948b9fb54ca9eaad3ef2ddba4b3e57750384ad7 Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 4 Jan 2018 20:00:38 +0800 Subject: [PATCH 110/211] add 3.0 landing page --- .eslintrc.js | 1 + package.json | 9 +- site/theme/en-US.js | 24 +- site/theme/static/common.less | 5 + site/theme/static/header.less | 2 +- site/theme/static/home.less | 461 ++++++++++++-------- site/theme/static/responsive.less | 222 +++++++--- site/theme/template/Content/MainContent.jsx | 23 +- site/theme/template/Home/Banner.jsx | 111 ++--- site/theme/template/Home/BannerImage.jsx | 137 ++++++ site/theme/template/Home/Page1.jsx | 244 +++++++++-- site/theme/template/Home/Page2.jsx | 165 +++++-- site/theme/template/Home/Page3.jsx | 93 ++-- site/theme/template/Home/Page4.jsx | 29 -- site/theme/template/Home/index.jsx | 49 ++- site/theme/template/Home/util.jsx | 56 +++ site/theme/template/Layout/Footer.jsx | 12 +- site/theme/template/Layout/Header.jsx | 26 +- site/theme/template/Layout/index.jsx | 22 + site/theme/template/utils.jsx | 33 -- site/theme/zh-CN.js | 24 +- 21 files changed, 1243 insertions(+), 505 deletions(-) create mode 100644 site/theme/template/Home/BannerImage.jsx delete mode 100644 site/theme/template/Home/Page4.jsx create mode 100644 site/theme/template/Home/util.jsx diff --git a/.eslintrc.js b/.eslintrc.js index e2f3c0ec5d..7ff6d797c7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -41,6 +41,7 @@ const eslintrc = { 'jsx-a11y/anchor-has-content': 0, 'jsx-a11y/click-events-have-key-events': 0, 'jsx-a11y/anchor-is-valid': 0, + 'jsx-a11y/alt-text': 0, 'react/no-danger': 0, 'comma-dangle': ['error', 'always-multiline'], 'function-paren-newline': 0, diff --git a/package.json b/package.json index 6f44db68a3..4f336b33da 100644 --- a/package.json +++ b/package.json @@ -109,6 +109,7 @@ "delegate": "^3.1.2", "docsearch.js": "^2.5.2", "dora-plugin-upload": "^0.3.1", + "enquire-js": "^0.1.1", "enzyme": "^3.1.0", "enzyme-adapter-react-16": "^1.0.0", "enzyme-to-json": "^3.1.2", @@ -134,10 +135,10 @@ "preact": "^8.2.5", "preact-compat": "^3.17.0", "querystring": "^0.2.0", - "rc-drawer-menu": "^0.3.0", - "rc-queue-anim": "^1.0.1", - "rc-scroll-anim": "^2.0.2", - "rc-tween-one": "^1.1.2", + "rc-drawer-menu": "^0.5.3", + "rc-queue-anim": "^1.4.1", + "rc-scroll-anim": "^2.2.1", + "rc-tween-one": "^1.7.1", "react": "^16.0.0", "react-color": "^2.11.7", "react-copy-to-clipboard": "^5.0.0", diff --git a/site/theme/en-US.js b/site/theme/en-US.js index 97fd228d99..c33dfe1fa0 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -23,17 +23,19 @@ module.exports = { 'app.demo.codesandbox': 'Open in CodeSandbox', 'app.demo.riddle': 'Open in Riddle', 'app.home.slogan': 'A UI Design Language', - 'app.home.introduce': 'Introduce', - 'app.home.start': 'Get Started', - 'app.home.best-practice': 'Best Practice', - 'app.home.experience': 'Designed by experienced team, and showcase dozens of inspiring projects.', - 'app.home.design-pattern': 'Design Pattern', - 'app.home.pattern': 'Provide solutions for usual problems that may be encountered while developing enterprise-like complex UIs.', - 'app.home.reusable-components': 'Dozens of UI Components', - 'app.home.components-intro': 'Dozens of flexible and practical reusable components that increase your productivity.', - 'app.home.learn-more': 'Learn more', - 'app.home.sub-slogan': 'A Little Happiness in Hand', - 'app.home.vision': 'This is a design language dedicated to improve the user and design experience.', + 'app.home.introduce': '一个服务于企业级产品的设计体系。基于『确定』和『自然』的设计价值观，通过模块化的解决方案，让设计者专注于 “更好的用户体验“。', + 'app.home.design-language': '设计语言', + 'app.home.solution': '解决方案', + 'app.home.components-explain': '基于 Ant Design 设计语言，我们提供了一套开箱即用的高质量 React 组件，用于开发和服务于企业级中后台产品，除官方的 React 实现，还有 Angular、Vue 的实现', + 'app.home.product-pro-slogan': '开箱即用的中台前端/设计解决方案', + 'app.home.product-mobile-slogan': 'antd-mobile 是 Ant Design 的移动规范的 React 实现', + 'app.home.product-antv-slogan': '简单、专业、拥有无限可能的数据可视化解决方案', + 'app.home.tool-package-title': 'Ant Design 资源包', + 'app.home.tool-package-content': 'Ant Design 相关设计资源下载', + 'app.home.tool-library-title': 'AntD Library', + 'app.home.tool-library-content': '一套精美得像视觉稿的 Axure 组件库', + 'app.home.tool-kitchen-title': 'Kitchen(敬请期待)', + 'app.home.tool-kitchen-content': '一个为设计师提效的 Sketch 工具集', 'app.footer.repo': 'GitHub Repository', 'app.footer.awesome': 'Awesome Ant Design', 'app.footer.chinamirror': 'China Mirror 🇨🇳', diff --git a/site/theme/static/common.less b/site/theme/static/common.less index 1e8241cf8f..b765c5da8f 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -114,6 +114,11 @@ a { #react-content { transition: transform .3s @ease-in-out-circ; } +.page-wrapper { + overflow: hidden; + padding: 0; + width: 100%; +} .drawer-content { padding: 40px 0; diff --git a/site/theme/static/header.less b/site/theme/static/header.less index e8ab25a396..174771cc99 100644 --- a/site/theme/static/header.less +++ b/site/theme/static/header.less @@ -7,7 +7,7 @@ box-shadow: 0 2px 8px rgba(240, 241, 242, 65); position: relative; z-index: 10; - + max-width: 100%; &.home-nav-bottom { background: rgba(255, 255, 255, 0.9); border-bottom-color: #ebedee; diff --git a/site/theme/static/home.less b/site/theme/static/home.less index 3424b860cf..c97e700f6f 100644 --- a/site/theme/static/home.less +++ b/site/theme/static/home.less @@ -1,188 +1,293 @@ -.banner-wrapper { - position: relative; +@home-bg-color: #2f54eb; +@home-text-color: #314659; +.home-page-wrapper { width: 100%; + padding: 0; overflow: hidden; - background: url("https://gw.alipayobjects.com/zos/rmsportal/UuWvfiYyEArxEECAKvRt.png") no-repeat center / cover; -} -.banner-text-wrapper { - position: absolute; - right: 9%; - top: 55%; - color: @heading-color; -} -.banner-text-wrapper h2 { - font-size: 56px; - line-height: 64px; - font-weight: 500; - color: @heading-color; - font-family: "Helvetica Neue", sans-serif; - margin: 0; -} -.banner-text-wrapper h2 p { - color: #f9323f; - display: inline-block; - margin: 0; -} -.banner-text-wrapper .line { - width: 2px; - height: 96px; - position: absolute; - background: #d7dce0; - top: 16px; - left: -25px; -} -.banner-text-wrapper > p { - margin: 20px auto 32px; - font-size: 20px; - color: @text-color; -} - -.banner-text-wrapper .start-button { - margin-bottom: 24px; - .ant-btn { - height: 40px; - border-radius: 100px; - margin-right: 16px; - font-size: 16px; - min-width: 114px; - text-align: center; - a { - text-decoration: none; + position: relative; + will-change: transform; + color: @home-text-color; + font-family: 'SF UI Display', "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + .page { + width: 100%; + max-width: 1200px; + margin: auto; + position: relative; + padding: 0 24px; + h2 { + font-size: 38px; + line-height: 46px; + color: @home-text-color; + text-align: center; + font-weight: 400; + margin: 140px auto 100px; } } } -.banner-text-wrapper .github-btn { - line-height: 14px; - a:hover { - color: #333; - } -} - -.down { - text-align: center; - position: absolute; - bottom: 30px; - left: 50%; - margin-left: -7px; - color: @text-color-secondary; - animation: upDownMove 1.2s ease-in-out infinite alternate; -} - -.page { - min-height: 700px; - height: 100vh; -} - -.content-wrapper { - width: 100%; - max-width: 1500px; - margin: auto; - overflow: hidden; - background: #fff; - - .image-wrapper { - width: 60%; - float: left; - position: relative; - } - - .text-wrapper { - width: 40%; - float: left; - position: relative; - top: 50%; - transform: translateY(-50%); - left: 110px; - font-family: Lato, @font-family; - z-index: 1; - min-height: 194px; - } - .text-wrapper h2, - .text-wrapper-bottom h2 { - font-size: 38px; - color: @heading-color; - line-height: 46px; - font-weight: 500; - white-space: nowrap; - } - .text-wrapper p { - margin: 20px 0 40px; - font-size: 16px; - line-height: 24px; - color: @text-color; - } - .left-text { - padding-left: 10%; - left: 0; - } -} - -#page3 .text-wrapper { - left: -30px; -} - -.image1 { - background: url("https://t.alipayobjects.com/images/T1Ch8kXfpdXXXXXXXX.png") no-repeat right / 841px; - height: 511px; - top: 50%; - margin-top: -256px; -} -.image2 { - background: url("https://t.alipayobjects.com/images/T1r5RkXotXXXXXXXXX.png") no-repeat left / 800px; - height: 474px; - top: 50%; - margin-top: -266px; -} -.image3 { - padding-right: 10%; - background: url("https://t.alipayobjects.com/images/T1nx0kXdFfXXXXXXXX.png") no-repeat right / 639px; - background-origin: content-box; - height: 500px; - top: 50%; - margin-top: -250px; -} -.image4 { - background: url("https://t.alipayobjects.com/images/T1lyJkXg4aXXXXXXXX.png") no-repeat center / 615px; - height: 364px; - margin: auto; -} - -.text-wrapper-bottom { - text-align: center; - margin: 10% auto 40px; -} -.text-wrapper-bottom p { - margin: 20px auto; - font-size: 16px; - line-height: 24px; - color: @text-color; -} - -@keyframes upDownMove { - to { - transform: translateY(10px); - } -} - -.promote-banner { - position: relative; - display: none; - padding-top: 64px; - img { - max-width: 100%; - } - .anticon-cross { +.banner-bg { + &-wrapper { + width: 100%; + height: 100%; position: absolute; - font-size: 24px; - cursor: pointer; - right: 24px; - top: 64px + 24px; - color: #fff; - transition: all .3s; - opacity: 0; + top: 0; + left: 0; + overflow: hidden; } - &:hover .anticon-cross { - opacity: 1; + width: 120%; + height: 200px; + background: @home-bg-color; + position: absolute; + bottom: -200px; + left: 0%; + transform-origin: 0; + transform: rotate(-4deg); +} + +.banner { + display: flex; + align-items: center; + height: 576px; + &-wrapper { + overflow: initial; + position: relative; + z-index: 1; + } + .text-wrapper { + width: 54%; + max-width: 600px; + min-height: 320px; + color: #0d1a26; + h1 { + font-size: 68px; + font-weight: 600; + line-height: 76px; + margin: 8px 0 28px; + letter-spacing: 0; + font-family: "Avenir-Heavy", 'SF UI Display', "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + } + p { + font-size: 20px; + line-height: 40px; + color: @home-text-color; + } + } + .img-wrapper { + width: 46%; + max-width: 482px; + position: absolute; + right: 0; + bottom: 26px; + } +} + +svg { + display: block; + g { + transform-origin: 50%; + transform-box: fill-box; + } +} + +/** page1 **/ + +.page1 { + min-height: 784px; + background: @home-bg-color; + background: linear-gradient(to bottom, rgba(47, 84, 235, 1) 0%, rgba(58, 64, 212, 1) 100%); + h2 { + color: #fff !important; + } + &-block { + max-width: 160px; + text-align: center; + margin: auto; + display: block; + position: relative; + z-index: 1; + h3 { + color: #fff; + font-size: 20px; + font-weight: 400; + } + p { + color: #fff; + } + &:hover .page1-image { + transform: translateY(-4px); + box-shadow: 0 6px 10px rgba(5, 26, 180, .35); + } + } + &-image { + width: 120px; + height: 120px; + background: #fff; + border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 46px auto 32px; + transition: transform .45s @ease-out, box-shadow .45s @ease-out; + img { + display: block; + } + } + &-point-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + margin: auto; + overflow: inherit !important; + } +} + +/** page2 **/ + +.page2 { + background: #eff3f6; + min-height: 1110px; + overflow: initial; + padding-top: 1px; + .page { + position: relative; + z-index: 1; + h2 { + margin-bottom: 142px; + } + } + &-content { + box-shadow: 0 12px 20px #d8e0e6; + background: @home-bg-color; + } + &-components, + &-product { + min-height: 554px; + } + &-components { + background: @home-bg-color; + padding: 56px; + color: #fff; + line-height: 32px; + h3 { + font-size: 28px; + margin: 0 auto 32px; + color: #fff; + } + .components-button-wrapper { + position: absolute; + bottom: 48px; + left: 56px; + a { + display: block; + color: #fff; + line-height: 1.5em; + margin-top: 16px; + } + } + } + &-product { + background: #fff; + padding: 48px 56px; + .product-block { + margin-bottom: 34px; + &:last-child { + margin-bottom: 0; + .block-text-wrapper { + padding-bottom: 0; + border-bottom: none; + } + } + .block-text-wrapper { + padding-bottom: 35px; + position: relative; + border-bottom: 1px solid #ebedf0; + h4 { + font-size: 20px; + line-height: 28px; + margin-bottom: 8px; + } + p { + line-height: 24px; + margin-bottom: 24px; + } + a { + display: inline-block; + line-height: 22px; + color: @home-bg-color; + vertical-align: top; + i { + font-size: 12px; + vertical-align: middle; + } + } + } + .block-image-wrapper { + height: 104px; + display: flex; + align-items: center; + img { + display: block; + max-width: 80%; + } + &.right { + float: right; + justify-content: flex-end; + } + } + } + } +} + +.parallax-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2; + pointer-events: none; + &.bottom { + z-index: 0; + } + &.top { + margin-top: 220px; + display: flex; + justify-content: center; + svg { + overflow: inherit; + } + } +} + +/** page3 **/ + +.page3 { + min-height: 556px; + &-block { + display: flex; + justify-content: center; + padding: 24px 32px; + } + &-img-wrapper, + &-text-wrapper { + display: inline-block; + } + &-img-wrapper { + margin-top: 8px; + } + &-text-wrapper { + max-width: 182px; + margin-left: 32px; + line-height: 24px; + h3 { + font-size: 20px; + line-height: 28px; + margin-bottom: 4px; + } + } + .parallax-bg.top { + margin: 0; } } diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less index 382cf85723..9f845cd98a 100644 --- a/site/theme/static/responsive.less +++ b/site/theme/static/responsive.less @@ -44,7 +44,13 @@ } } -@media only screen and (max-width: @screen-lg) { +@media only screen and (max-width: @screen-md) { + #header { + text-align: center; + #logo { + float: initial; + } + } #search-box { display: none; } @@ -62,59 +68,10 @@ margin: 10px 0; } - .banner-entry { - position: relative; - top: 30px; - left: 0; - text-align: center; - } - .image-wrapper { display: none; } - .banner-wrapper { - background-position: 40%; - } - - .content-wrapper .text-wrapper { - float: none; - text-align: center; - left: 0 !important; - width: 100%; - padding: 0; - > p { - max-width: 100% !important; - padding: 0 40px; - } - } - - .content-wrapper.page { - min-height: 300px; - height: 300px; - } - - .banner-text-wrapper { - left: 50%; - transform: translateX(-50%); - text-align: center; - width: 100%; - .start-button { - text-align: center; - > a { - margin: 0 4px; - } - } - .github-btn { - text-align: center; - float: none; - display: inline-block; - } - .line { - display: none; - } - } - div.version { display: block; margin: 29px auto 16px; @@ -208,6 +165,17 @@ text-align: center; .footer-wrap { padding: 40px; + .ant-row { + >div { + &:nth-child(2), + &:nth-child(4) { + display: none; + } + a { + font-weight: 300; + } + } + } } .footer-center { text-align: center; @@ -222,6 +190,12 @@ text-align: center; margin-bottom: 16px; } + > div > span { + display: block; + &:nth-child(1), &:nth-child(2) { + display: none; + } + } } } @@ -241,4 +215,152 @@ #_hj_feedback_container { display: none; } + /** home 区块 **/ + .home-page-wrapper { + .page { + h2 { + margin: 80px auto 64px; + } + } + .parallax-bg { + display: none; + } + } + .banner { + display: block; + height: 632px; + &-bg-wrapper { + display: none; + } + .img-wrapper, + .text-wrapper { + width: 100%; + display: inline-block; + text-align: center; + margin: auto; + } + .img-wrapper { + position: initial; + margin-top: 48px; + svg { + width: 100%; + height: auto; + } + } + .text-wrapper { + margin-top: 48px; + min-height: 200px; + padding: 0 16px; + h1 { + display: none; + } + p { + font-size: 14px; + line-height: 28px; + color: @home-text-color; + } + } + } + .page1 { + min-height: 1538px; + .ant-row { + margin: 24px auto 64px; + >div { + margin-bottom: 48px; + } + } + } + .page2 { + min-height: 840px; + background: #fff; + &-content { + box-shadow: none; + } + &-components { + display: none; + } + &-product { + min-height: auto; + padding: 0 16px; + .product-block { + padding-bottom: 35px; + margin-bottom: 34px; + border-bottom: 1px solid #ebedf0; + &:last-child { + margin-bottom: 32px; + border-bottom: none; + .block-text-wrapper { + height: auto; + } + } + .block-image-wrapper { + height: 88px; + img { + height: 100%; + } + } + .block-text-wrapper { + border-bottom: none; + padding-bottom: 0; + h4 { + font-size: 18px; + line-height: 24px; + margin-bottom: 4px; + } + p { + font-size: 12px; + margin-bottom: 8px; + line-height: 20px; + } + a { + line-height: 20px; + } + .components-button-wrapper { + font-size: 12px; + margin-top: 16px; + a { + display: block; + } + } + } + } + } + } + .page3 { + min-height: 688px; + background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg') no-repeat; + background-size: cover; + .ant-row { + margin: 0 8px; + } + .page3-block { + padding: 24px; + background: #fff; + border-radius: 4px; + box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3); + margin-bottom: 32px; + &:nth-child(2) { + .page3-img-wrapper img { + width: 70%; + margin: auto; + display: block; + } + } + p { + font-size: 12px; + } + .page3-img-wrapper { + width: 20%; + img { + width: 100%; + } + } + .page3-text-wrapper { + width: 80%; + margin: 0; + max-width: initial; + padding-left: 16px; + } + } + } } diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index c064e29372..e43e60b1ed 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Link } from 'bisheng/router'; import { Row, Col, Menu, Icon } from 'antd'; import classNames from 'classnames'; -import MobileMenu from 'rc-drawer-menu'; +import MoblieMenu from 'rc-drawer-menu'; import Article from './Article'; import ComponentDoc from './ComponentDoc'; import * as utils from '../utils'; @@ -33,31 +33,21 @@ function fileNameToPath(filename) { return snippets[snippets.length - 1]; } -let isMobile; -utils.enquireScreen((b) => { - isMobile = b; -}); - export default class MainContent extends React.Component { static contextTypes = { intl: PropTypes.object.isRequired, + isMoblie: PropTypes.bool.isRequired, } constructor(props) { super(props); this.state = { openKeys: this.getSideBarOpenKeys(props) || [], - isMobile, }; } componentDidMount() { this.componentDidUpdate(); - utils.enquireScreen((b) => { - this.setState({ - isMobile: !!b, - }); - }); } componentWillReceiveProps(nextProps) { @@ -228,6 +218,7 @@ export default class MainContent extends React.Component { render() { const { props } = this; + const { isMoblie } = this.context; const activeMenuItem = getActiveMenuItem(props); const menuItems = this.getMenuItems(); const { prev, next } = this.getFooterNav(menuItems, activeMenuItem); @@ -249,14 +240,14 @@ export default class MainContent extends React.Component { return (
- {this.state.isMobile ? ( - , ]} - key="mobile-menu" + key="moblie-menu" wrapperClassName="drawer-wrapper" > {menuChild} - ) : ( + ) : (
{menuChild} diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx index 3fc6f62f8a..58bf554077 100644 --- a/site/theme/template/Home/Banner.jsx +++ b/site/theme/template/Home/Banner.jsx @@ -1,55 +1,68 @@ import React from 'react'; -import { Link } from 'bisheng/router'; -import { FormattedMessage } from 'react-intl'; -import ScrollElement from 'rc-scroll-anim/lib/ScrollElement'; -import GitHubButton from 'react-github-button'; -import { Icon, Button } from 'antd'; +import PropTypes from 'prop-types'; +import TweenOne from 'rc-tween-one'; import QueueAnim from 'rc-queue-anim'; -import * as utils from '../utils'; +import ScrollParallax from 'rc-scroll-anim/lib/ScrollParallax'; +import { FormattedMessage } from 'react-intl'; +import BannerImage from './BannerImage'; -function typeFunc(a) { - if (a.key === 'line') { - return 'left'; - } else if (a.key === 'button') { - return 'bottom'; +const loop = { + duration: 3000, + yoyo: true, + repeat: -1, +}; + +class Banner extends React.PureComponent { + static propTypes = { + className: PropTypes.string, + } + static defaultProps = { + className: 'banner', + } + render() { + const { className, isMoblie } = this.props; + return ( + + ); } - return 'right'; } -export default function Banner({ location }) { - const isZhCN = utils.isZhCN(location.pathname); - return ( -
- -
- ); -} +export default Banner; diff --git a/site/theme/template/Home/BannerImage.jsx b/site/theme/template/Home/BannerImage.jsx new file mode 100644 index 0000000000..08ff2b6eaa --- /dev/null +++ b/site/theme/template/Home/BannerImage.jsx @@ -0,0 +1,137 @@ +import React from 'react'; +import TweenOne from 'rc-tween-one'; +import PathPlugin from 'rc-tween-one/lib/plugin/PathPlugin'; + +TweenOne.plugins.push(PathPlugin); +const duration = 7000; +const ease = 'easeInOutSine'; +const p = 'M123.5,89.5 C148,82.5 239.5,48.5 230,17.5 C220.5,-13.5 127,6 99.5,13.5 C72,21 -9.5,56.5 1.5,84.5 C12.5,112.5 99,96.5 123.5,89.5 Z'; +const loop = { + yoyo: true, + repeat: -1, + duration, + ease, +}; +const animate = { + path: { + path: { x: p, y: p }, + duration: 5000, + repeat: -1, + ease: 'linear', + }, + rotate: { + ...loop, + rotate: 15, + }, + rotateR: { + ...loop, + rotate: -15, + }, + yGroup: { + ...loop, + y: 24, + }, + track: { + ...loop, + rotate: 15, + }, + rotateY: { + ...loop, + y: 24, + rotate: 15, + }, + y: { + ...loop, + y: 15, + duration: 3000, + }, + yR: { + ...loop, + y: -15, + duration: 3000, + }, +}; + +function TweenOneG(props) { + return ; +} + +export default function BannerImage() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +// diff --git a/site/theme/template/Home/Page1.jsx b/site/theme/template/Home/Page1.jsx index 726968ffdc..280512dafb 100644 --- a/site/theme/template/Home/Page1.jsx +++ b/site/theme/template/Home/Page1.jsx @@ -1,33 +1,223 @@ import React from 'react'; +import { TweenOneGroup } from 'rc-tween-one'; +import QueueAnim from 'rc-queue-anim'; +import { Row, Col } from 'antd'; +import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; import { Link } from 'bisheng/router'; import { FormattedMessage } from 'react-intl'; -import TweenOne from 'rc-tween-one'; -import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; -import { Icon, Button } from 'antd'; -import QueueAnim from 'rc-queue-anim'; -import * as utils from '../utils'; -export default function Page1({ location }) { - return ( - - - -

-

-
- - - + +const page1Data = [ + { + img: 'https://gw.alipayobjects.com/zos/rmsportal/URIeCOKLMAbRXaeXoNqN.svg', + name: '设计价值观', + nameEn: 'Design Values', + svgBg: ( + + + + + + + + + + + + + + + + + ), + }, + { + img: 'https://gw.alipayobjects.com/zos/rmsportal/qXncdwwUTTgUFnsbCNCE.svg', + name: '视觉', + nameEn: 'Visual', + svgBg: ( + + + + + + + + + + + + + + + ), + }, + { + img: 'https://gw.alipayobjects.com/zos/rmsportal/YFXXZocxAgjReehpPNbX.svg', + name: '可视化', + nameEn: 'Visualisation', + svgBg: ( + + + + + + + + + + + + + + + ), + }, + { + img: 'https://gw.alipayobjects.com/zos/rmsportal/VPuetGsvJuYBwoDkZWFW.svg', + name: '动效', + nameEn: 'Animation', + svgBg: ( + + + + + + + + + + + + + + + ), + }, +]; + +const getTransformXY = (t) => { + const s = t.replace(/[a-z|(|)]/g, '').split(','); + return { + x: s[0], + y: s[1], + }; +}; + +const svgToXY = page1Data.map((item) => { + const c = item.svgBg.props.children; + return c.map((child) => { + const p = child.props; + const trnasformXY = p.transform ? getTransformXY(p.transform) : {}; + return { + x: parseFloat(p.x || p.cx || trnasformXY.x), + y: parseFloat(p.y || p.cy || trnasformXY.y), + }; + }); +}); + +export default class Page1 extends React.PureComponent { + state = { + hoverKey: null, + } + onMouseOver = (key) => { + this.setState({ + hoverKey: key, + }); + } + onMouseOut = () => { + this.setState({ + hoverKey: null, + }); + } + getEnter = (i, e) => { + const ii = e.index; + const r = (Math.random() * 2) - 1; + const y = (Math.random() * 10) + 10; + const delay = Math.round(Math.random() * (ii * 30)); + const pos = svgToXY[i][ii]; + return [ + { x: 100, y: 150, duration: 0 }, + { + delay, opacity: 1, x: pos.x, y: pos.y, ease: 'easeOutBack', duration: 300, + }, + { + y: r > 0 ? `+=${y}` : `-=${y}`, + duration: (Math.random() * 1000) + 2000, + yoyo: true, + repeat: -1, + }, + ]; + }; + getSvgChild = child => child.map((item, i) => { + const props = { ...item.props }; + if (item.type === 'g') { + props.transform = null; + } else { + ['x', 'y', 'cx', 'cy'].forEach((str) => { + if (str in props) { + props[str] = null; + } + }); + } + return ( + + {React.cloneElement(item, props)} + + ); + }); + leave = { + opacity: 0, duration: 300, x: 100, y: 150, ease: 'easeInBack', + }; + render() { + const children = page1Data.map((item, i) => { + const isHover = item.nameEn === this.state.hoverKey; + return ( +
+ this.getEnter(i, e)} + leave={this.leave} + {...item.svgBg.props} + component="svg" + resetStyleBool={false} + > + {(this.props.isMoblie || isHover) && this.getSvgChild(item.svgBg.props.children)} + + { this.onMouseOver(item.nameEn); }} + onMouseLeave={this.onMouseOut} + > +
+ +
+

{item.name}

+

{item.nameEn}

+ + + ); + }); + return ( +
+
+

+ + + {children} + +
- - - ); +
+ ); + } } diff --git a/site/theme/template/Home/Page2.jsx b/site/theme/template/Home/Page2.jsx index bd4d532a08..8b946cdda2 100644 --- a/site/theme/template/Home/Page2.jsx +++ b/site/theme/template/Home/Page2.jsx @@ -1,41 +1,136 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Link } from 'bisheng/router'; -import TweenOne from 'rc-tween-one'; -import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; -import { Icon, Button } from 'antd'; +import { Row, Col, Icon } from 'antd'; import QueueAnim from 'rc-queue-anim'; -import * as utils from '../utils'; +import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; -export default function Page2({ location }) { +import { FormattedMessage } from 'react-intl'; + +import svgBgToParallax from './util'; + +const page2Data = [ + { + img: 'https://gw.alipayobjects.com/zos/rmsportal/eYNnmGagLWdrkdMHVUuA.svg', + name: 'Ant Design Components', + }, + { + img: 'https://gw.alipayobjects.com/zos/rmsportal/EPaPtDVGnJhyqyBAUZMl.svg', + name: 'Ant Design Pro', + slogan: (), + }, + { + img: 'https://gw.alipayobjects.com/zos/rmsportal/GobRAKexhfTSJdLFzDFY.svg', + name: 'Ant Design Mobile', + slogan: (), + }, + { + img: 'https://gw.alipayobjects.com/zos/rmsportal/slVtnOCcgeAcLEPwtewY.svg', + name: 'AntV', + slogan: (), + }, +]; + +const svgBgChild = [ + ( + + + + + + + + + + + + + ), + ( + + + + + + + + + + + + + + ), +]; + +const svgBgChildArray = svgBgChild.map((item, i) => { + const { props } = item; + return React.cloneElement(item, { children: svgBgToParallax(props.children, i) }); +}); +export default function Page2({ isMoblie }) { + const componentButton = ( + + ); + const children = page2Data.map((item, i) => { + if (!isMoblie && !i) { + return null; + } + const content = isMoblie && !i ? componentButton : [ +

{item.slogan}

, + learn more , + ]; + return ( + + + + + +

{item.name}

+ {content} + + + ); + }); return ( - - -

-

-
- - - -
- - - +
+
+

+ + +

Ant Design Components

+

+ {componentButton} + + + {children} + + +
+
+ {svgBgChildArray[0]} +
+
+ {svgBgChildArray[1]} +
+
); } diff --git a/site/theme/template/Home/Page3.jsx b/site/theme/template/Home/Page3.jsx index 9d83b95659..c8b9007e76 100644 --- a/site/theme/template/Home/Page3.jsx +++ b/site/theme/template/Home/Page3.jsx @@ -1,37 +1,68 @@ import React from 'react'; -import { Link } from 'bisheng/router'; -import { FormattedMessage } from 'react-intl'; -import TweenOne from 'rc-tween-one'; -import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; -import { Icon, Button } from 'antd'; +import { Row, Col } from 'antd'; import QueueAnim from 'rc-queue-anim'; -import * as utils from '../utils'; +import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; +import { FormattedMessage } from 'react-intl'; +import svgBgToParallax from './util'; -export default function Page3({ location }) { +const page3Data = [ + { + title: , + content: , + img: 'https://gw.alipayobjects.com/zos/rmsportal/qggKjIGNFlVmMpwDUXPU.svg', + }, + { + title: , + content: , + img: 'https://gw.alipayobjects.com/zos/rmsportal/dgjVqwkJvptQEtlfctvk.svg', + }, + { + title: , + content: , + img: 'https://gw.alipayobjects.com/zos/rmsportal/vUxYuDdsbBBcMDxSGmwc.svg', + }, +]; + +const svgBg = [ + , + , + , + , + , + , + , + , + , + , +]; +const svgChildren = svgBgToParallax(svgBg); +const children = page3Data.map((item, i) => ( + +
+ +
+
+

{item.title}

+

{item.content}

+
+ +)); +export default function Page3() { return ( - - - -

-

-
- - - -
- - +
+
+ + {svgChildren} + +
+
+

工具&资源

+ + + {children} + + +
+
); } diff --git a/site/theme/template/Home/Page4.jsx b/site/theme/template/Home/Page4.jsx deleted file mode 100644 index b5a8027db0..0000000000 --- a/site/theme/template/Home/Page4.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import TweenOne from 'rc-tween-one'; -import { FormattedMessage } from 'react-intl'; -import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; -import QueueAnim from 'rc-queue-anim'; - -export default function Page4() { - return ( - - -

-

- - - - ); -} diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx index 6cc7b96b42..a325cbec51 100644 --- a/site/theme/template/Home/index.jsx +++ b/site/theme/template/Home/index.jsx @@ -1,12 +1,12 @@ import React from 'react'; import { injectIntl } from 'react-intl'; import DocumentTitle from 'react-document-title'; +import PropTypes from 'prop-types'; import { Icon } from 'antd'; import Banner from './Banner'; import Page1 from './Page1'; import Page2 from './Page2'; import Page3 from './Page3'; -import Page4 from './Page4'; // To store style which is only for Home and has conflicts with others. function getStyle() { return ` @@ -15,20 +15,54 @@ function getStyle() { } #header { box-shadow: none; + max-width: 1200px; width: 100%; - position: absolute; + margin: 20px auto 0; + padding: 0 24px; } #header, #header .ant-select-selection, #header .ant-menu { background: transparent; } + #header #logo { + padding: 0; + } + #header .ant-row > div:last-child, #header .nav-phone-icon{ + display: none; + } + footer .footer-wrap{ + width: 100%; + padding: 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.25); + } + footer .footer-wrap .ant-row{ + width: 100%; + max-width: 1200px; + padding: 86px 24px 93px 24px; + margin: auto; + + } + footer .bottom-bar{ + margin: auto; + max-width: 1200px; + padding: 16px 24px; + border-top: none; + } + @media only screen and (max-width: 768px) { + footer .footer-wrap .ant-row{ + padding: 0; + } + } `; } const promoteBannerImageUrl = 'https://gw.alipayobjects.com/zos/rmsportal/qVVhewfLyIYZnqrBvfhy.png'; class Home extends React.Component { + static contextTypes = { + isMoblie: PropTypes.bool.isRequired, + } constructor(props) { super(props); const adBannerClosed = typeof window === 'undefined' ? true : ( @@ -50,6 +84,8 @@ class Home extends React.Component { } } render() { + const { isMoblie } = this.context; + const childProps = { ...this.props, isMoblie }; const promoteBanner = this.state.adBannerClosed ? null : (
{promoteBanner} - - - - - + + + +
标点名称 字符