mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

docs: preview images in markdown (#39739)

Browse Source 
* feat: site previewImage

* feat: site previewImage

* feat: use image

* feat: update doc

* feat: delete align="right"

* feat: update doc

* feat: delete css

* feat: update doc

* feat: delete align="right"

* feat: update doc
This commit is contained in:
黑雨 2022-12-24 18:11:43 +08:00 committed by GitHub
parent c7feef28f2
commit 2b947d0480
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
56 changed files with 1698 additions and 817 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
.dumi/theme/builtins/ImagePreview/index.tsx
View File

@ -1,6 +1,11 @@
import React from 'react';
import classNames from 'classnames';
import { Modal, Carousel } from 'antd';
import { Image } from 'antd';
import toArray from 'rc-util/lib/Children/toArray';
interface ImagePreviewProps {
children: React.ReactNode[];
}
function isGood(className: string): boolean {
return /\bgood\b/i.test(className);
@ -22,153 +27,80 @@ function isCompareImg(imgMeta: any): boolean {
return isGoodBadImg(imgMeta) || imgMeta.inline;
}
interface PreviewImageBoxProps {
coverMeta: any;
cover: React.ReactNode;
imgs: React.ReactNode[];
style: React.CSSProperties;
previewVisible: boolean;
comparable: boolean;
onClick: () => void;
onCancel: () => void;
}
const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
const { children } = props;
const imgs = toArray(children).filter((ele) => ele.type === 'img');
const PreviewImageBox: React.FC<PreviewImageBoxProps> = (props) => {
const { cover, coverMeta, imgs, style, previewVisible, comparable, onClick, onCancel } = props;
const onlyOneImg = comparable || imgs.length === 1;
const imageWrapperClassName = classNames('preview-image-wrapper', {
good: coverMeta.isGood,
bad: coverMeta.isBad,
const imgsMeta = imgs.map((img) => {
const { alt, description, src, className } = img.props;
return {
className,
alt,
description,
src,
isGood: isGood(className),
isBad: isBad(className),
inline: isInline(className),
};
});
return (
<div className="preview-image-box" style={style}>
<div onClick={onClick} className={imageWrapperClassName}>
<img className={coverMeta.className} src={coverMeta.src} alt={coverMeta.alt} />
const imagesList = imgsMeta.map<React.ReactNode>((meta, index) => {
const metaCopy = { ...meta };
delete metaCopy.description;
delete metaCopy.isGood;
delete metaCopy.isBad;
return (
<div key={index}>
<div className="image-modal-container">
<img {...metaCopy} src={meta.src} alt={meta.alt} />
</div>
</div>
<div className="preview-image-title">{coverMeta.alt}</div>
<div
className="preview-image-description"
dangerouslySetInnerHTML={{ __html: coverMeta.description }}
/>
<Modal
className="image-modal"
width={960}
visible={previewVisible}
title={null}
footer={null}
onCancel={onCancel}
>
<Carousel
className={`${onlyOneImg ? 'image-modal-single' : ''}`}
draggable={!onlyOneImg}
adaptiveHeight
>
{comparable ? cover : imgs}
</Carousel>
<div className="preview-image-title">{coverMeta.alt}</div>
</Modal>
);
});
const comparable =
(imgs.length === 2 && imgsMeta.every(isCompareImg)) ||
(imgs.length >= 2 && imgsMeta.every(isGoodBadImg));
const style: React.CSSProperties = comparable
? { width: `${(100 / imgs.length).toFixed(3)}%` }
: {};
const hasCarousel = imgs.length > 1 && !comparable;
const previewClassName = classNames({
'preview-image-boxes': true,
clearfix: true,
'preview-image-boxes-compare': comparable,
'preview-image-boxes-with-carousel': hasCarousel,
});
return (
<div className={previewClassName}>
{imagesList.map((_, index) => {
if (!comparable && index !== 0) {
return null;
}
const coverMeta = imgsMeta[index];
const imageWrapperClassName = classNames('preview-image-wrapper', {
good: coverMeta.isGood,
bad: coverMeta.isBad,
});
return (
<div className="preview-image-box" style={style} key={index}>
<div className={imageWrapperClassName}>
<Image className={coverMeta.className} src={coverMeta.src} alt={coverMeta.alt} />
</div>
<div className="preview-image-title">{coverMeta.alt}</div>
<div
className="preview-image-description"
dangerouslySetInnerHTML={{ __html: coverMeta.description }}
/>
</div>
);
})}
</div>
);
};
interface ImagePreviewProps {
imgs: any[];
}
interface ImagePreviewStates {
previewVisible?: Record<PropertyKey, boolean>;
}
class ImagePreview extends React.Component<ImagePreviewProps, ImagePreviewStates> {
constructor(props: ImagePreviewProps) {
super(props);
this.state = {
previewVisible: {},
};
}
handleClick = (index: number) => {
this.setState({
previewVisible: { [index]: true },
});
};
handleCancel = () => {
this.setState({
previewVisible: {},
});
};
render() {
const { imgs } = this.props;
const imgsMeta = imgs.map((img) => {
const { alt, description, src } = img;
const imgClassName = img.class;
return {
className: imgClassName,
alt,
description,
src,
isGood: isGood(imgClassName),
isBad: isBad(imgClassName),
inline: isInline(imgClassName),
};
});
const imagesList = imgsMeta.map<React.ReactNode>((meta, index) => {
const metaCopy = { ...meta };
delete metaCopy.description;
delete metaCopy.isGood;
delete metaCopy.isBad;
return (
<div key={index}>
<div className="image-modal-container">
<img {...metaCopy} alt={meta.alt} />
</div>
</div>
);
});
const comparable =
(imgs.length === 2 && imgsMeta.every(isCompareImg)) ||
(imgs.length >= 2 && imgsMeta.every(isGoodBadImg));
const style: React.CSSProperties = comparable
? { width: `${(100 / imgs.length).toFixed(3)}%` }
: {};
const hasCarousel = imgs.length > 1 && !comparable;
const previewClassName = classNames({
'preview-image-boxes': true,
clearfix: true,
'preview-image-boxes-compare': comparable,
'preview-image-boxes-with-carousel': hasCarousel,
});
return (
<div className={previewClassName}>
{imagesList.map((_, index) => {
if (!comparable && index !== 0) {
return null;
}
return (
<PreviewImageBox
key={index}
style={style}
comparable={comparable}
previewVisible={!!this.state.previewVisible?.[index]}
cover={imagesList[index]}
coverMeta={imgsMeta[index]}
imgs={imagesList}
onCancel={this.handleCancel}
onClick={() => {
this.handleClick(index);
}}
/>
);
})}
</div>
);
}
}
export default ImagePreview;

47
.dumi/theme/common/styles/PreviewImage.tsx
View File

@ -54,6 +54,7 @@ export default () => {
padding: 16px;
text-align: center;
background: #f2f4f5;
box-sizing: border-box;
}
.preview-image-wrapper.video {
@ -115,6 +116,7 @@ export default () => {
}
.preview-image-box img {
box-sizing: border-box;
max-width: 100%;
padding: 12px;
background: ${token.colorBgContainer};
@ -138,51 +140,6 @@ export default () => {
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
}
.preview-img {
float: right;
clear: both;
max-width: 496px !important;
margin: 0 0 70px 64px;
padding: 16px;
background-color: #f2f4f5;
}
.image-modal {
text-align: center;
&-container {
position: relative;
text-align: center;
}
.ant-carousel {
.slick-slider {
padding-bottom: 24px;
img {
display: inline;
max-width: 100%;
}
}
.slick-dots {
bottom: 4px;
li button {
background: #888;
}
}
}
.image-modal-single.slick-slider {
padding-bottom: 0;
}
.image-modal-single .slick-dots {
display: none !important;
}
}
.transition-video-player,
.motion-video-min {
float: right;

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

@ -13,8 +13,10 @@ As is described in the Law of Continuity of Gestalt psychology, in the perceptua
## Text Alignment
<img class="preview-img good" align="right" alt="good example" description="Align the title and text to the left; use one visual starting point." src="https://gw.alipayobjects.com/zos/rmsportal/lVDlIgxvuXSMQvJJVMnu.png">
<img class="preview-img bad" align="right" alt="bad example" description="The tile and the text start in different visual point. This is not recommended except the differences between title and text are emphasized. " src="https://gw.alipayobjects.com/zos/rmsportal/DAhkAEIoXYdljmxsJTjl.png">
<ImagePreview>
<img class="preview-img good" alt="good example" description="Align the title and text to the left; use one visual starting point." src="https://gw.alipayobjects.com/zos/rmsportal/lVDlIgxvuXSMQvJJVMnu.png">
<img class="preview-img bad" alt="bad example" description="The tile and the text start in different visual point. This is not recommended except the differences between title and text are emphasized. " src="https://gw.alipayobjects.com/zos/rmsportal/DAhkAEIoXYdljmxsJTjl.png">
</ImagePreview>
If the paragraphs or the length of the words are too short or too loose, then a unified visual starting point is needed.
@ -22,7 +24,9 @@ If the paragraphs or the length of the words are too short or too loose, then a
## Form Alignment
<img class="preview-img" align="right" alt="example of colon alignment" src="https://gw.alipayobjects.com/zos/rmsportal/OaTkwGfGxRSFsvAlzZMq.png">
<ImagePreview>
<img class="preview-img" alt="example of colon alignment" src="https://gw.alipayobjects.com/zos/rmsportal/OaTkwGfGxRSFsvAlzZMq.png">
</ImagePreview>
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.
@ -30,7 +34,9 @@ Colon alignment(right-align) can encircle the content into a certain range. User
## Numbers Alignment
<img class="preview-img good" align="right" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/bIJAZcUmaRxJeFxZJwUp.png">
<img class="preview-img bad" align="right" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/zUmANVIhBanDnlyOhvaH.png">
<ImagePreview>
<img class="preview-img good" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/bIJAZcUmaRxJeFxZJwUp.png">
<img class="preview-img bad" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/zUmANVIhBanDnlyOhvaH.png">
</ImagePreview>
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.

16
docs/spec/alignment.zh-CN.md
View File

@ -13,8 +13,10 @@ title: 对齐
## 文案类对齐
<img class="preview-img good" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" src="https://gw.alipayobjects.com/zos/rmsportal/lVDlIgxvuXSMQvJJVMnu.png">
<img class="preview-img bad" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" src="https://gw.alipayobjects.com/zos/rmsportal/DAhkAEIoXYdljmxsJTjl.png">
<ImagePreview>
<img class="preview-img good" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" src="https://gw.alipayobjects.com/zos/rmsportal/lVDlIgxvuXSMQvJJVMnu.png">
<img class="preview-img bad" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" src="https://gw.alipayobjects.com/zos/rmsportal/DAhkAEIoXYdljmxsJTjl.png">
</ImagePreview>
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
@ -22,7 +24,9 @@ title: 对齐
## 表单类对齐
<img class="preview-img" align="right" alt="冒号对齐示例" src="https://gw.alipayobjects.com/zos/rmsportal/OaTkwGfGxRSFsvAlzZMq.png">
<ImagePreview>
<img class="preview-img" alt="冒号对齐示例" src="https://gw.alipayobjects.com/zos/rmsportal/OaTkwGfGxRSFsvAlzZMq.png">
</ImagePreview>
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
@ -30,7 +34,9 @@ title: 对齐
## 数字类对齐
<img class="preview-img good" align="right" alt="正确示例" src="https://gw.alipayobjects.com/zos/rmsportal/bIJAZcUmaRxJeFxZJwUp.png">
<img class="preview-img bad" align="right" alt="错误示例" src="https://gw.alipayobjects.com/zos/rmsportal/zUmANVIhBanDnlyOhvaH.png">
<ImagePreview>
<img class="preview-img good" alt="正确示例" src="https://gw.alipayobjects.com/zos/rmsportal/bIJAZcUmaRxJeFxZJwUp.png">
<img class="preview-img bad" alt="错误示例" src="https://gw.alipayobjects.com/zos/rmsportal/zUmANVIhBanDnlyOhvaH.png">
</ImagePreview>
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

82
docs/spec/buttons.en-US.md
View File

@ -43,33 +43,48 @@ Provides supplementary meaning to the button.
### Emphasis
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*guusTZ6ZPxkAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*guusTZ6ZPxkAAAAAAAAAAABkARQnAQ">
</ImagePreview>
Common button types could be used to showcase to different **emphasis**.
### Do & Don't
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*di8jS5EWYSIAAAAAAAAAAABkARQnAQ" alt="Don't" description="Don't put more than 1 primary button in the same group.">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ" alt="Do" description="1. Emphasiz on the primary action. <br/>2. If there is no primary action, then default buttons is the safest choice.">
<ImagePreview>
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*di8jS5EWYSIAAAAAAAAAAABkARQnAQ" alt="Don't" description="Don't put more than 1 primary button in the same group.">
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ" alt="Do" description="1. Emphasiz on the primary action. <br/>2. If there is no primary action, then default buttons is the safest choice.">
</ImagePreview>
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zBtTRq2xbTYAAAAAAAAAAABkARQnAQ" alt="Don't" description="Put 2 icons in the same button.">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EpwSTpaGPBgAAAAAAAAAAABkARQnAQ" alt="Do" description="1. Should place the buttons in the order of importance. <br/>2. The less important actions should be place on right or at bottom.">
<ImagePreview>
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zBtTRq2xbTYAAAAAAAAAAABkARQnAQ" alt="Don't" description="Put 2 icons in the same button.">
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EpwSTpaGPBgAAAAAAAAAAABkARQnAQ" alt="Do" description="1. Should place the buttons in the order of importance. <br/>2. The less important actions should be place on right or at bottom.">
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ" alt="Do" description="1. Emphasiz on the primary action. <br/>2. If there is no primary action, then default buttons is the safest choice.">
</ImagePreview>
### Special Button Types
#### Dashed Button
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gPmNQ6_YCcoAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gPmNQ6_YCcoAAAAAAAAAAABkARQnAQ">
</ImagePreview>
Guide users to add content in an area.
#### Danger Button
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OvNaQJrmqVMAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OvNaQJrmqVMAAAAAAAAAAABkARQnAQ">
</ImagePreview>
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ujcXTqJ_IwwAAAAAAAAAAABkARQnAQ" alt="Do" description="If user's intention is to delete, use danger button to warn this action has risks.">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ujcXTqJ_IwwAAAAAAAAAAABkARQnAQ" alt="Do" description="If user's intention is to delete, use danger button to warn this action has risks.">
</ImagePreview>
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o7EySrBPX9oAAAAAAAAAAABkARQnAQ" alt="Do" description="When system does not recommend the deletion action, we could set 'Cancel' as the primary action.">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o7EySrBPX9oAAAAAAAAAAABkARQnAQ" alt="Do" description="When system does not recommend the deletion action, we could set 'Cancel' as the primary action.">
</ImagePreview>
Warns users that there are risks involved in the action.
@ -77,17 +92,23 @@ Warns users that there are risks involved in the action.
Used in the dark or colored background.
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-wORTrNJ6YUAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-wORTrNJ6YUAAAAAAAAAAABkARQnAQ">
</ImagePreview>
#### Call to Action
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*32zdRqTjDhYAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*32zdRqTjDhYAAAAAAAAAAABkARQnAQ">
</ImagePreview>
Usually appeared alone and intend to used as a command. For example, it is used in the landing page or welcome banner. It could be as wide as its parent container. It is recommend to have just 1 "Call to Action" button in 1 screen.
## Placement
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*B8D0RJnirLkAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*B8D0RJnirLkAAAAAAAAAAABkARQnAQ">
</ImagePreview>
Place buttons in the users' reading pattern for the ease of discovery, such as the "F-Shaped Reading Pattern" and "Z-Shaped Reading Pattern".
@ -95,7 +116,9 @@ Place buttons in the users' reading pattern for the ease of discovery, such as t
#### Page/Card/Section presents a subject, where it could be broken into 3 areas:
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iVZpRpdN_2AAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iVZpRpdN_2AAAAAAAAAAAABkARQnAQ">
</ImagePreview>
- Header: subject's heading, summary and navigation
- Body: detailed content
@ -105,7 +128,9 @@ Place buttons in different areas could have different meanings.
### When to Put Buttons in the Footer?
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KGGWQLCBfm0AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KGGWQLCBfm0AAAAAAAAAAABkARQnAQ">
</ImagePreview>
- Body section has collapsed or hidden content, such as it could not show the entire content in one screen;
- Body section has complex content. For example, it has multiple subgroups and each subgroup has its own actions. Now it is needed to separate "Complete" action from body section to avoid confusion.
@ -116,7 +141,9 @@ In short, footer's purpose is to have a separation from body.
### Button Ordering
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NcPDQI3IX8YAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NcPDQI3IX8YAAAAAAAAAAABkARQnAQ">
</ImagePreview>
Recommend to start from the reading flow, collapsed content should always be on the right.
@ -127,9 +154,10 @@ Recommend to start from the reading flow, collapsed content should always be on
### Button Group
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tK-AQaE5h1YAAAAAAAAAAABkARQnAQ" alt="Do">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_gU7ToHiZz4AAAAAAAAAAABkARQnAQ" alt="Don't" description="When button group has no space in between, it is easy to confuse it with Toggle Button.">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tK-AQaE5h1YAAAAAAAAAAABkARQnAQ" alt="Do">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_gU7ToHiZz4AAAAAAAAAAABkARQnAQ" alt="Don't" description="When button group has no space in between, it is easy to confuse it with Toggle Button.">
</ImagePreview>
When multiple buttons form a group, align buttons in one line with spaces in between.
@ -137,22 +165,30 @@ When multiple buttons form a group, align buttons in one line with spaces in bet
When there are too many buttons on the screen, we could group relevant buttons together and use similar design for that group. If one of the buttons is primary action, we could still use emphasis.
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x7YsTafH5osAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x7YsTafH5osAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**Collapse buttons in the order of importance**
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qn-mQKxaQ5kAAAAAAAAAAABkARQnAQ" alt="Do">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3bUZRbPiVBEAAAAAAAAAAABkARQnAQ" alt="Don't" description="If buttons are in the same group, no need to add dividers between them.">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qn-mQKxaQ5kAAAAAAAAAAABkARQnAQ" alt="Do">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3bUZRbPiVBEAAAAAAAAAAABkARQnAQ" alt="Don't" description="If buttons are in the same group, no need to add dividers between them.">
</ImagePreview>
**Flat display of all the buttons**: could separate different groups using space; or use divider to group similar buttons.
## Label
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*33KsR66zTY8AAAAAAAAAAABkARQnAQ" alt="Do">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*33KsR66zTY8AAAAAAAAAAABkARQnAQ" alt="Do">
</ImagePreview>
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*238RTb4kaPwAAAAAAAAAAABkARQnAQ" alt="Don't" description="Should use verb">
<ImagePreview>
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*238RTb4kaPwAAAAAAAAAAABkARQnAQ" alt="Don't" description="Should use verb">
</ImagePreview>
Labels should clearly indicate to users what would happen when buttons got clicked.

98
docs/spec/buttons.zh-CN.md
View File

@ -43,33 +43,47 @@ title: 按钮
### 按钮强调
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*guusTZ6ZPxkAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*guusTZ6ZPxkAAAAAAAAAAABkARQnAQ">
</ImagePreview>
常规按钮类型呈现出不同的**强调程度**，使用者可以据此变化出合适的按钮类型：
### Do&Don't
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*di8jS5EWYSIAAAAAAAAAAABkARQnAQ" alt="错误示范" description="不要在一个按钮区放置超过一个主按钮。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ" alt="正确示范" description="1、强调一个主要操作；<br/>2、操作无主次，次按钮是最安全的选择。">
<ImagePreview>
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*di8jS5EWYSIAAAAAAAAAAABkARQnAQ" alt="错误示范" description="不要在一个按钮区放置超过一个主按钮。">
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ" alt="正确示范" description="1、强调一个主要操作；<br/>2、操作无主次，次按钮是最安全的选择。">
</ImagePreview>
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zBtTRq2xbTYAAAAAAAAAAABkARQnAQ" alt="错误示范" description="不要在按钮中放置两个图标。">
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EpwSTpaGPBgAAAAAAAAAAABkARQnAQ" alt="正确示范" description="1、1按照主次展示全部操作。<br/>2、将次要操作收纳至右侧下拉按钮中。">
<ImagePreview>
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zBtTRq2xbTYAAAAAAAAAAABkARQnAQ" alt="错误示范" description="不要在按钮中放置两个图标。">
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EpwSTpaGPBgAAAAAAAAAAABkARQnAQ" alt="正确示范" description="1、1按照主次展示全部操作。<br/>2、将次要操作收纳至右侧下拉按钮中。">
</ImagePreview>
### 特殊按钮
#### 虚线按钮  Dashed button
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gPmNQ6_YCcoAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gPmNQ6_YCcoAAAAAAAAAAABkARQnAQ">
</ImagePreview>
用于引导用户在一个区域中添加内容。
#### 危险按钮 Danger button
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OvNaQJrmqVMAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OvNaQJrmqVMAAAAAAAAAAABkARQnAQ">
</ImagePreview>
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ujcXTqJ_IwwAAAAAAAAAAABkARQnAQ" alt="正确示范" description="用户的主要意图是删除，通过红色警示该操作存在风险。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ujcXTqJ_IwwAAAAAAAAAAABkARQnAQ" alt="正确示范" description="用户的主要意图是删除，通过红色警示该操作存在风险。">
</ImagePreview>
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o7EySrBPX9oAAAAAAAAAAABkARQnAQ" alt="正确示范" description="当系统不推荐用户执行删除操作时，可将取消按钮设置为主按钮。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o7EySrBPX9oAAAAAAAAAAABkARQnAQ" alt="正确示范" description="当系统不推荐用户执行删除操作时，可将取消按钮设置为主按钮。">
</ImagePreview>
警示用户该操作存在风险。
@ -77,41 +91,51 @@ title: 按钮
置于复杂或较深的背景中，避免按钮突兀地破坏背景的整体性。该场景下可灵活定制样式。
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-wORTrNJ6YUAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-wORTrNJ6YUAAAAAAAAAAABkARQnAQ">
</ImagePreview>
#### 行动号召按钮 Call to action
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*32zdRqTjDhYAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*32zdRqTjDhYAAAAAAAAAAABkARQnAQ">
</ImagePreview>
经常独立出现，行动号召按钮就像是电脑在对用户大声说“跟我来吧”，有点命令用户点击的意味，通常出现于 landing page 或者 一些引导性场景。最大可以将按钮放宽到与父区域等宽。一个屏幕空间中，建议只有一个行动号召按钮。
## 位置
### 按钮区
<img class="preview-img no-padding" align="right" src="https://img.alicdn.com/imgextra/i1/O1CN01Wd9Dbh1z6A5MQwEnh_!!6000000006664-2-tps-930-290.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://img.alicdn.com/imgextra/i1/O1CN01Wd9Dbh1z6A5MQwEnh_!!6000000006664-2-tps-930-290.png">
</ImagePreview>
按钮区是用于放置按钮的区域，一个按钮区内可以有多个按钮。
### 跟随内容的按钮区
<img class="preview-img no-padding" align="right" src="https://img.alicdn.com/imgextra/i4/O1CN01OVOv5G27z8YLYdWED_!!6000000007867-2-tps-928-342.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://img.alicdn.com/imgextra/i4/O1CN01OVOv5G27z8YLYdWED_!!6000000007867-2-tps-928-342.png">
</ImagePreview>
按钮区跟随受控内容。将按钮区放置于用户浏览路径中，便于被用户发现。
### 工具栏中的按钮区
<img class="preview-img no-padding" align="right" src="https://img.alicdn.com/imgextra/i2/O1CN01aAZHoi1uZrgx1C3zR_!!6000000006052-2-tps-928-332.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://img.alicdn.com/imgextra/i2/O1CN01aAZHoi1uZrgx1C3zR_!!6000000006052-2-tps-928-332.png">
</ImagePreview>
工具栏中的按钮区，靠右放置。控制工具栏控制的内容范围。
### 如何确定按钮区的放置位置？
#### 页面/卡片/一组信息都能够呈现一个主题，主题的描述可以抽象为三个区域：
<img class="preview-img no-padding" align="right" src="https://img.alicdn.com/imgextra/i2/O1CN017b7PRO1TEnquClCYx_!!6000000002351-2-tps-928-622.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://img.alicdn.com/imgextra/i2/O1CN017b7PRO1TEnquClCYx_!!6000000002351-2-tps-928-622.png">
</ImagePreview>
- Header：主题的标题和摘要信息内容区的导航等
- Body：具体内容
@ -123,9 +147,12 @@ title: 按钮
### 什么时候需要在 Footer 中放置按钮区？
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KGGWQLCBfm0AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KGGWQLCBfm0AAAAAAAAAAABkARQnAQ">
</ImagePreview>
为避免页脚工具栏滥用，我们不推荐使用页脚工具栏，仅建议以下两种场景使用：
- 1）对象详情页，「推进」对象的进展，例如审批流「通过」「驳回」。
- 2）异常复杂的表单页，表单的内容复杂到需要切分为多张卡片。
@ -133,7 +160,9 @@ title: 按钮
### 按钮顺序
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NcPDQI3IX8YAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NcPDQI3IX8YAAAAAAAAAAABkARQnAQ">
</ImagePreview>
推荐操作是阅读的起点，折叠内容始终在最右侧。
@ -144,15 +173,18 @@ title: 按钮
### 按钮组
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tK-AQaE5h1YAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_gU7ToHiZz4AAAAAAAAAAABkARQnAQ" alt="错误示范" description="连在一起的按钮组在外观上易与 Toggle Button 切换按钮混淆。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tK-AQaE5h1YAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_gU7ToHiZz4AAAAAAAAAAABkARQnAQ" alt="错误示范" description="连在一起的按钮组在外观上易与 Toggle Button 切换按钮混淆。">
</ImagePreview>
多个按钮形成一组时，将按钮排列在一起即可。
### 有很多按钮组，如何确定顺序
<img class="preview-img no-padding" align="right" src="https://img.alicdn.com/imgextra/i1/O1CN010Q6SBR1vSMpV0jdjX_!!6000000006171-2-tps-928-466.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://img.alicdn.com/imgextra/i1/O1CN010Q6SBR1vSMpV0jdjX_!!6000000006171-2-tps-928-466.png">
</ImagePreview>
工具栏中的操作类型很多，我们会倾向于将变化较少的内容位置固化。以表格工具栏举例，排列逻辑如下：
@ -161,27 +193,31 @@ title: 按钮
- 其他：刷新、分享、设置等；
- 溢出：被折叠的操作，若进行响应式设计，从右往左折叠至溢出操作。
### 按钮分组
当需要布置的按钮数量过多，可以把相关的动作组成一组，并采用相似的视觉设计。当某一个按钮是首要动作时仍可使用主按钮强调。
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x7YsTafH5osAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x7YsTafH5osAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**按主次折叠部分按钮**
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qn-mQKxaQ5kAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3bUZRbPiVBEAAAAAAAAAAABkARQnAQ" alt="错误示范" description="无需分组时不要使用短竖线分割">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qn-mQKxaQ5kAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3bUZRbPiVBEAAAAAAAAAAABkARQnAQ" alt="错误示范" description="无需分组时不要使用短竖线分割">
</ImagePreview>
**平铺每个按钮**：优先推荐通过间距来区隔分组，也可以使用分割线来区隔视觉相似的按钮组。
## 文案
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*33KsR66zTY8AAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*238RTb4kaPwAAAAAAAAAAABkARQnAQ" alt="错误示范" description="应使用动词">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*33KsR66zTY8AAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*238RTb4kaPwAAAAAAAAAAABkARQnAQ" alt="错误示范" description="应使用动词">
</ImagePreview>
文案需清楚传达用户按下按钮时系统将执行的操作。

12
docs/spec/colors.en-US.md
View File

@ -66,19 +66,25 @@ We provide JavaScript usage for developers.
### Brand Color
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
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.
### Functional Color
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QY4JRa92gHQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QY4JRa92gHQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
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:
### Neutral Color
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/8yMmB1lcD%24/colors.jpg">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/8yMmB1lcD%24/colors.jpg">
</ImagePreview>
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:

12
docs/spec/colors.zh-CN.md
View File

@ -74,19 +74,25 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序
### 品牌色的应用
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 `#1890FF`，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
### 功能色
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QY4JRa92gHQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QY4JRa92gHQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图：
### 中性色
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/8yMmB1lcD%24/colors.jpg">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/8yMmB1lcD%24/colors.jpg">
</ImagePreview>
Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图：

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

@ -13,8 +13,10 @@ Contrast is one of the effective ways to add visual interest to your page, and t
## The Contrast of major and minor relationship
<img class="preview-img good" align="right" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/DXDSNzVmrVwVRJCTyaTH.png">
<img class="preview-img bad" align="right" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/tMlELOuJrJrrYtTAbnlu.png">
<ImagePreview>
<img class="preview-img good" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/DXDSNzVmrVwVRJCTyaTH.png">
<img class="preview-img bad" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/tMlELOuJrJrrYtTAbnlu.png">
</ImagePreview>
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.
@ -22,7 +24,9 @@ In order to help user make a quick operation (something like the form, modal), a
<br>
<img class="preview-img" align="right" alt="Example of ignoring the primary and secondary sequence" description="Accept and Reject should use default button, for UI should not affect user's decision." src="https://gw.alipayobjects.com/zos/rmsportal/gniiMTPEHagxaelGBjAe.png">
<ImagePreview>
<img class="preview-img" alt="Example of ignoring the primary and secondary sequence" description="Accept and Reject should use default button, for UI should not affect user's decision." src="https://gw.alipayobjects.com/zos/rmsportal/gniiMTPEHagxaelGBjAe.png">
</ImagePreview>
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.
@ -30,9 +34,13 @@ When there's something needs users to make decision prudently, the system should
## Contrast of whole and part
<img class="preview-img" align="right" alt="Example of whole and part 1" src="https://gw.alipayobjects.com/zos/rmsportal/mGCufzQKHZvViwxAVPPY.png">
<ImagePreview>
<img class="preview-img" alt="Example of whole and part 1" src="https://gw.alipayobjects.com/zos/rmsportal/mGCufzQKHZvViwxAVPPY.png">
</ImagePreview>
<img class="preview-img" align="right" alt="Example of whole and part 2" src="https://gw.alipayobjects.com/zos/rmsportal/vQrVvLzKbGXbZotcaMVg.png">
<ImagePreview>
<img class="preview-img" alt="Example of whole and part 2" src="https://gw.alipayobjects.com/zos/rmsportal/vQrVvLzKbGXbZotcaMVg.png">
</ImagePreview>
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.
@ -40,9 +48,13 @@ Taking advantage of changing the typesetting, the typeface and the size, we high
## Contrast of the state relation
<img class="preview-img" align="right" alt="Example of static contrast" description="Points with various colors would be used to show different states. " src="https://gw.alipayobjects.com/zos/rmsportal/PMVYKxaLBApJFyXAxkHy.png">
<ImagePreview>
<img class="preview-img" alt="Example of static contrast" description="Points with various colors would be used to show different states. " src="https://gw.alipayobjects.com/zos/rmsportal/PMVYKxaLBApJFyXAxkHy.png">
</ImagePreview>
<img class="preview-img" align="right" alt="Example of dynamic contrast" description="When the mouse doesn't be moved, this item and other items would show different visual effects obviously, which would influence the user's operation." src="https://gw.alipayobjects.com/zos/rmsportal/WXNjOhgQDMnNoieFrFMP.png">
<ImagePreview>
<img class="preview-img" alt="Example of dynamic contrast" description="When the mouse doesn't be moved, this item and other items would show different visual effects obviously, which would influence the user's operation." src="https://gw.alipayobjects.com/zos/rmsportal/WXNjOhgQDMnNoieFrFMP.png">
</ImagePreview>
Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better

26
docs/spec/contrast.zh-CN.md
View File

@ -13,8 +13,10 @@ title: 对比
## 主次关系对比
<img class="preview-img good" align="right" alt="正确示例" src="https://gw.alipayobjects.com/zos/rmsportal/DXDSNzVmrVwVRJCTyaTH.png">
<img class="preview-img bad" align="right" alt="错误示例" src="https://gw.alipayobjects.com/zos/rmsportal/tMlELOuJrJrrYtTAbnlu.png">
<ImagePreview>
<img class="preview-img good" alt="正确示例" src="https://gw.alipayobjects.com/zos/rmsportal/DXDSNzVmrVwVRJCTyaTH.png">
<img class="preview-img bad" alt="错误示例" src="https://gw.alipayobjects.com/zos/rmsportal/tMlELOuJrJrrYtTAbnlu.png">
</ImagePreview>
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
@ -22,7 +24,9 @@ title: 对比
<br>
<img class="preview-img" align="right" alt="不区分主次的示例" description="「通过」和「驳回」都使用次按钮，系统保持中立。" src="https://gw.alipayobjects.com/zos/rmsportal/gniiMTPEHagxaelGBjAe.png">
<ImagePreview>
<img class="preview-img" alt="不区分主次的示例" description="「通过」和「驳回」都使用次按钮，系统保持中立。" src="https://gw.alipayobjects.com/zos/rmsportal/gniiMTPEHagxaelGBjAe.png">
</ImagePreview>
在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
@ -30,9 +34,13 @@ title: 对比
## 总分关系对比
<img class="preview-img" align="right" alt="总分关系示例 1" src="https://gw.alipayobjects.com/zos/rmsportal/mGCufzQKHZvViwxAVPPY.png">
<ImagePreview>
<img class="preview-img" alt="总分关系示例 1" src="https://gw.alipayobjects.com/zos/rmsportal/mGCufzQKHZvViwxAVPPY.png">
</ImagePreview>
<img class="preview-img" align="right" alt="总分关系示例 2" src="https://gw.alipayobjects.com/zos/rmsportal/vQrVvLzKbGXbZotcaMVg.png">
<ImagePreview>
<img class="preview-img" alt="总分关系示例 2" src="https://gw.alipayobjects.com/zos/rmsportal/vQrVvLzKbGXbZotcaMVg.png">
</ImagePreview>
通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
@ -40,9 +48,13 @@ title: 对比
## 状态关系对比
<img class="preview-img" align="right" alt="静态对比示例" description="用不同颜色点，来表明不同状态。" src="https://gw.alipayobjects.com/zos/rmsportal/PMVYKxaLBApJFyXAxkHy.png">
<ImagePreview>
<img class="preview-img" alt="静态对比示例" description="用不同颜色点，来表明不同状态。" src="https://gw.alipayobjects.com/zos/rmsportal/PMVYKxaLBApJFyXAxkHy.png">
</ImagePreview>
<img class="preview-img" align="right" alt="动态对比示例" description="鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。" src="https://gw.alipayobjects.com/zos/rmsportal/WXNjOhgQDMnNoieFrFMP.png">
<ImagePreview>
<img class="preview-img" alt="动态对比示例" description="鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。" src="https://gw.alipayobjects.com/zos/rmsportal/WXNjOhgQDMnNoieFrFMP.png">
</ImagePreview>
通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。

112
docs/spec/copywriting.en-US.md
View File

@ -21,8 +21,10 @@ In the interface, copywriting is the basis of our communication with users. Ther
### Articulate foothold
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/Ik0zIDUblJ/85996a34-3add-481b-b164-fc82e0b10bba.png">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/3hg1I8dJ%24W/6765f193-ae21-463e-be9a-609fafc76c8d.png">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/Ik0zIDUblJ/85996a34-3add-481b-b164-fc82e0b10bba.png">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/3hg1I8dJ%24W/6765f193-ae21-463e-be9a-609fafc76c8d.png">
</ImagePreview>
When expressing content, the focus should be on users -- what they can do with your product? Not what you and your product are doing for them. The foothold of content representation is very important. Since it is user-centred design, copywriting should be user-centred as much as possible.
@ -30,24 +32,32 @@ When expressing content, the focus should be on users -- what they can do with y
### Concise statement
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/Xz2N2QXNz1/d4c43668-06d5-4dca-8c54-49402dfde7b7.png">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/3To5rdNTVQ/1ebf6213-a8d7-401a-ae69-f99bf2b294f0.png">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/Xz2N2QXNz1/d4c43668-06d5-4dca-8c54-49402dfde7b7.png">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/3To5rdNTVQ/1ebf6213-a8d7-401a-ae69-f99bf2b294f0.png">
</ImagePreview>
Omit useless words and do not repeat facts known to users. In the most situations, there is no need for the interface to describe all the details. Try to provide short and accessible content.
### Use words familiar to the user
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/OdDMiTnRII/fb2c6dcc-881b-42ac-b83e-4d3a90ff88bc.png">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/qnPRlCpzZz/388f7772-d962-49ee-a103-582e3ff6c0ca.png" description="Stand from the user's point of view and say what the user is familiar with.">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/OdDMiTnRII/fb2c6dcc-881b-42ac-b83e-4d3a90ff88bc.png">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/qnPRlCpzZz/388f7772-d962-49ee-a103-582e3ff6c0ca.png" description="Stand from the user's point of view and say what the user is familiar with.">
</ImagePreview>
Use simple, direct and easy-to-understand words. Indirect, ambiguous, obscure, and overly "refined" copywrite will increase user's cognitive load.
### Express consistently
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/OP88j1SDf6/ef562312-9a51-456b-8e53-a127c9f25e80.png" description="The word order is the same on the same page and in the same area.">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/9DiXkPap0V/6e03b9cc-f594-4bf3-9c15-913980c6175a.png" description="Inconsistent word orders will take users' more effort to comprehend.">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/OP88j1SDf6/ef562312-9a51-456b-8e53-a127c9f25e80.png" description="The word order is the same on the same page and in the same area.">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/9DiXkPap0V/6e03b9cc-f594-4bf3-9c15-913980c6175a.png" description="Inconsistent word orders will take users' more effort to comprehend.">
</ImagePreview>
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/3zhhAZYGSc/ba1c9133-abb3-4f67-b116-544e9ad0cbad.png" alt="The operation name and the target page title should be the same.">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/3zhhAZYGSc/ba1c9133-abb3-4f67-b116-544e9ad0cbad.png" alt="The operation name and the target page title should be the same.">
</ImagePreview>
- Use consistent words that describe the same thing;
- Use consistent grammar, language and word orders of the context;
@ -55,8 +65,10 @@ Use simple, direct and easy-to-understand words. Indirect, ambiguous, obscure, a
### Place important information in a prominent position
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/ivTpE4BgSU/16dc61e6-f85c-43d1-9abd-86b046730a6a.png" description="Put important information first in a limited space (or make it more visibale with highlights, blank space, etc.).">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/X%24DPUktJbT/a19e0548-1bdd-49f0-ab93-5358b5cf1a4c.png" description="The content that the user cares most is hidden in the paragraph, which is not easy to find out.">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/ivTpE4BgSU/16dc61e6-f85c-43d1-9abd-86b046730a6a.png" description="Put important information first in a limited space (or make it more visibale with highlights, blank space, etc.).">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/X%24DPUktJbT/a19e0548-1bdd-49f0-ab93-5358b5cf1a4c.png" description="The content that the user cares most is hidden in the paragraph, which is not easy to find out.">
</ImagePreview>
Let users see the most important content at first glance.
@ -64,29 +76,37 @@ Let users see the most important content at first glance.
### Express completely and directly
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/70QcFGdW%26H/6e0d94da-3ce9-471d-b57c-9f8f038d409f.png" description="Users can learn about the benefits of the settings.">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/eKXgIakJPk/1cb7213d-61c4-41f2-84f0-256bcf436fe3.png" description="Users can't get the meaning of the settings.">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/70QcFGdW%26H/6e0d94da-3ce9-471d-b57c-9f8f038d409f.png" description="Users can learn about the benefits of the settings.">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/eKXgIakJPk/1cb7213d-61c4-41f2-84f0-256bcf436fe3.png" description="Users can't get the meaning of the settings.">
</ImagePreview>
When we want the user to take an action, we should focus on what the user can get and how the he/she feels. Telling users the purpose or importance of the action can make them more willing to perform it.
<br />
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/7oHuZX%26n5h/8fef2777-0841-4ea7-a274-75d6e78b6c15.png" description='Compared to "failure", "unable to complete" is a more objective result and easier for users to accept. Users need to know what to do next in the event of a problem.'>
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/oqI9DerB%26W/857e91be-ed75-4b70-aca9-811581080edd.png" description='Do not inform users "failure" coldly for abnormal situations.'>
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/7oHuZX%26n5h/8fef2777-0841-4ea7-a274-75d6e78b6c15.png" description='Compared to "failure", "unable to complete" is a more objective result and easier for users to accept. Users need to know what to do next in the event of a problem.'>
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/oqI9DerB%26W/857e91be-ed75-4b70-aca9-811581080edd.png" description='Do not inform users "failure" coldly for abnormal situations.'>
</ImagePreview>
Error reporting is a common feature in the UI, and it is an important part of user experience. When the user inputs  the wrong content, your error message should be consistent with the user's cognition, and expressed in an easy-to-understand way.
### Use words precisely and completely
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/Txu5VxBFTF/ef2a61a7-8f65-4001-8018-53aa2fccb28d.png" description="Complete expression.">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/ZG%26eSSivMP/c6b8413b-6651-4b6c-bbbc-5464e00761fc.png" description="Incomplete, ambiguous, or too colloquial.">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/Txu5VxBFTF/ef2a61a7-8f65-4001-8018-53aa2fccb28d.png" description="Complete expression.">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/ZG%26eSSivMP/c6b8413b-6651-4b6c-bbbc-5464e00761fc.png" description="Incomplete, ambiguous, or too colloquial.">
</ImagePreview>
Use general basic words normatively. Spell correctly, express completely. Professional terms should be accurate, according to industry standards; the expression of time must be clear.
<br />
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/oo3%24YkT8I5/1d7cfb4b-2a15-4f02-a110-17e24f837c1c.png" description="The expression of time is accurate and complete.">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/Np4rjq6bhw/8b13eab9-5441-43f5-8363-acc6d42b5cd0.png" description='The description of time is not a specific "day" or "month", which confuses users.'>
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/oo3%24YkT8I5/1d7cfb4b-2a15-4f02-a110-17e24f837c1c.png" description="The expression of time is accurate and complete.">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/Np4rjq6bhw/8b13eab9-5441-43f5-8363-acc6d42b5cd0.png" description='The description of time is not a specific "day" or "month", which confuses users.'>
</ImagePreview>
## Tone
@ -94,8 +114,10 @@ Language defines content, while emotions and atmosphere are expressed more in to
### Bring each other closer
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/j%267kjvP3kD/0d245e49-dba2-452c-93c3-68d6cb7c094f.png">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/7QsjvP%24TNj/f1310422-92d6-4ee2-b60a-21619e5bab9f.png">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/j%267kjvP3kD/0d245e49-dba2-452c-93c3-68d6cb7c094f.png">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/7QsjvP%24TNj/f1310422-92d6-4ee2-b60a-21619e5bab9f.png">
</ImagePreview>
Don't refer to the user by using "my" and "your" in the same phrase.
@ -103,15 +125,19 @@ Don't refer to the user by using "my" and "your" in the same phrase.
### Be friendly and respectful
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/EUV9qTHkWb/4a3cfd16-8eaa-44e3-ae1b-caf4b7bbc61a.png" description="Guide the user to enter the content correctly.">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/ssgx2B5f2W/f7327c68-708c-4707-b14f-d1951616c9f9.png" description="「can't」, 「don't」 make user feel a sense of command and pressure.">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/EUV9qTHkWb/4a3cfd16-8eaa-44e3-ae1b-caf4b7bbc61a.png" description="Guide the user to enter the content correctly.">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/ssgx2B5f2W/f7327c68-708c-4707-b14f-d1951616c9f9.png" description="「can't」, 「don't」 make user feel a sense of command and pressure.">
</ImagePreview>
Give users support and encouragement, not commands or pressure. If you want to keep your users, don't blame them when things go wrong. Focus on solving problems, not blaming.
### Do not be too extreme
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/mxmAx3KkzZ/2279654a-e42b-4db9-b6dd-2c2d00eaf501.png">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/dZxbeLAu1q/061fcf43-4dd4-49f5-a00f-61429d22be92.png" description='"Never" is too absolute and makes users feel uncomfortable.'>
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/mxmAx3KkzZ/2279654a-e42b-4db9-b6dd-2c2d00eaf501.png">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/dZxbeLAu1q/061fcf43-4dd4-49f5-a00f-61429d22be92.png" description='"Never" is too absolute and makes users feel uncomfortable.'>
</ImagePreview>
Don't use too absolute expression that will make the user uncomfortable.
@ -119,8 +145,10 @@ Don't use too absolute expression that will make the user uncomfortable.
### Uppercase and lowercase
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/pupl5xDdmR/32d6f262-049d-4ecb-a0d0-d2923f395fcd.png">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/VVdJdMspm2/9e64ab85-9786-43df-b134-7f4a505d76b1.png">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/pupl5xDdmR/32d6f262-049d-4ecb-a0d0-d2923f395fcd.png">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/VVdJdMspm2/9e64ab85-9786-43df-b134-7f4a505d76b1.png">
</ImagePreview>
When using the full name of the product, capitalize the first lettter of each word. Write the abbreviations of product names in capital, such as ESC, SLB, etc.
@ -128,22 +156,28 @@ When using the full name of the product, capitalize the first lettter of each wo
<br />
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/gdd3ZqLRuG/7cb448ce-bd5d-4354-af54-ea27b8491c6a.png">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/6ixy2%26KCzS/c742ea07-d983-4575-bb67-0f132b2787ab.png">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/gdd3ZqLRuG/7cb448ce-bd5d-4354-af54-ea27b8491c6a.png">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/6ixy2%26KCzS/c742ea07-d983-4575-bb67-0f132b2787ab.png">
</ImagePreview>
Use the correct case.
<br />
<img class="preview-img good no-padding" align="right" alt="Recommend" src="https://gw.alipayobjects.com/zos/antfincdn/WUKYyB%24FYw/36308410-e097-4ef0-ae88-8a57ba440ff4.png">
<img class="preview-img bad no-padding" align="right" alt="Not recommend" src="https://gw.alipayobjects.com/zos/antfincdn/yYgGa9h4U2/43ba0f31-fbea-4635-865f-a5ace6a19cdb.png">
<ImagePreview>
<img class="preview-img good no-padding" alt="Recommend" src="https://gw.alipayobjects.com/zos/antfincdn/WUKYyB%24FYw/36308410-e097-4ef0-ae88-8a57ba440ff4.png">
<img class="preview-img bad no-padding" alt="Not recommend" src="https://gw.alipayobjects.com/zos/antfincdn/yYgGa9h4U2/43ba0f31-fbea-4635-865f-a5ace6a19cdb.png">
</ImagePreview>
Use sentence capital case in headlines, titles, labels, menu items, buttons, etc.
### Arabic numbers
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/6Qg%24mrbKB%24/fe25e8db-3377-44e4-a3e6-61d0fe062a93.png">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/QyMfBb3I29/4cfc9ef7-7f2e-4441-8031-e05db349b7ce.png">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/6Qg%24mrbKB%24/fe25e8db-3377-44e4-a3e6-61d0fe062a93.png">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/QyMfBb3I29/4cfc9ef7-7f2e-4441-8031-e05db349b7ce.png">
</ImagePreview>
Users perceive numbers faster. Numbers transmit information more effectively than words.
@ -159,8 +193,10 @@ To help users scan the text more efficiently, unnecessary periods can be omitted
<br />
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/tJ9bT2%24Oky/43dd91ce-694a-4ce9-bfeb-adb020c257f9.png">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/YgQfEmqiIh/781c6045-31f9-4e64-b2bf-17feb94498c8.png">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/tJ9bT2%24Oky/43dd91ce-694a-4ce9-bfeb-adb020c257f9.png">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/YgQfEmqiIh/781c6045-31f9-4e64-b2bf-17feb94498c8.png">
</ImagePreview>
The following elements need to be punctuated when they appear separately:
@ -169,8 +205,10 @@ The following elements need to be punctuated when they appear separately:
### Use exclamation marks with caution
<img class="preview-img good no-padding" align="right" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/D3I1Y4%26mPt/13c2bf6a-c822-49c7-9959-46fdc3a07daf.png">
<img class="preview-img bad no-padding" align="right" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/JhP0VxI%24Vb/230c13d9-e26e-4cff-8b80-bebf41f13b0b.png">
<ImagePreview>
<img class="preview-img good no-padding" alt="Correct Example" src="https://gw.alipayobjects.com/zos/antfincdn/D3I1Y4%26mPt/13c2bf6a-c822-49c7-9959-46fdc3a07daf.png">
<img class="preview-img bad no-padding" alt="Wrong Example" src="https://gw.alipayobjects.com/zos/antfincdn/JhP0VxI%24Vb/230c13d9-e26e-4cff-8b80-bebf41f13b0b.png">
</ImagePreview>
The exclamation mark will make the tone appear too excited, and it will easily make the atmosphere too tense.

136
docs/spec/copywriting.zh-CN.md
View File

@ -21,8 +21,10 @@ title: 文案
### 明确表述立足点
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uBzzoUAMupDWPXFUeRIn.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EOVTgwoOsYptbkUqpMKn.png" alt="错误示范" description="侧重在「我们」为用户提供了什么，而不是以用户视角的关注点为中心。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/uBzzoUAMupDWPXFUeRIn.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/EOVTgwoOsYptbkUqpMKn.png" alt="错误示范" description="侧重在「我们」为用户提供了什么，而不是以用户视角的关注点为中心。">
</ImagePreview>
在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。
@ -32,8 +34,10 @@ title: 文案
### 精简语句
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/dAcEgVUcAcUqbMjaEydw.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xRUVqOQsBOqzdmZIQDLa.png" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/dAcEgVUcAcUqbMjaEydw.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/xRUVqOQsBOqzdmZIQDLa.png" alt="错误示范">
</ImagePreview>
省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。
@ -41,8 +45,10 @@ title: 文案
### 使用用户熟悉的语言
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/FOcLNnbiaZOTMRHAyeVZ.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tUmMsssHDlGqlKbRwYlH.png" alt="错误示范" description="站在用户的角度，说用户熟悉的话。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/FOcLNnbiaZOTMRHAyeVZ.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/tUmMsssHDlGqlKbRwYlH.png" alt="错误示范" description="站在用户的角度，说用户熟悉的话。">
</ImagePreview>
使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。
@ -50,13 +56,19 @@ title: 文案
### 表述一致
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ToMaEybHQCrcAfcYRbxF.png" alt="正确示范" description="备注描述使用相同的介词。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/BUFFQwfvLqTLrOzaEccX.png" alt="错误示范" description="同一区块描述中出现了「受」和「被」两个不同的介词。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/ToMaEybHQCrcAfcYRbxF.png" alt="正确示范" description="备注描述使用相同的介词。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/BUFFQwfvLqTLrOzaEccX.png" alt="错误示范" description="同一区块描述中出现了「受」和「被」两个不同的介词。">
</ImagePreview>
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/AAaXSGqNUBlZChkrMbYl.png" alt="正确示范" description="在同一页面、同一区域在语序上一致。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/DYCoXTphnpdkMMCtyMdN.png" alt="错误示范" description="语序上不一致，会影响用户理解成本。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/AAaXSGqNUBlZChkrMbYl.png" alt="正确示范" description="在同一页面、同一区域在语序上一致。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/DYCoXTphnpdkMMCtyMdN.png" alt="错误示范" description="语序上不一致，会影响用户理解成本。">
</ImagePreview>
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/sNqQYWEJCAzCxcYCBGYD.png" alt="操作名称和目标页面的标题一致。">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/sNqQYWEJCAzCxcYCBGYD.png" alt="操作名称和目标页面的标题一致。">
</ImagePreview>
- 描述同一个事物的词汇要保持统一;
- 上下文的语法、语种、语序要保持统一;
@ -64,8 +76,10 @@ title: 文案
### 重要的信息放在显著位置
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/clWcgMqBypLAAosLQHes.png" alt="正确示范" description="在有限的空间内将重要的信息放在最前面（或通过高亮、留白等方式突出重要信息）。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/hSiLeNGgmeqWvVHCNoeE.png" alt="错误示范" description="用户最关心的信息内容藏在段落中，不易搜寻。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/clWcgMqBypLAAosLQHes.png" alt="正确示范" description="在有限的空间内将重要的信息放在最前面（或通过高亮、留白等方式突出重要信息）。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/hSiLeNGgmeqWvVHCNoeE.png" alt="错误示范" description="用户最关心的信息内容藏在段落中，不易搜寻。">
</ImagePreview>
让用户第一眼看到最重要的内容，不用到段落中寻找。
@ -73,28 +87,38 @@ title: 文案
### 完整、直接得阐述信息
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ioBKvBqCNzUwQDyjMiIa.png" alt="正确示范" description="用户可以从中了解了设置后会有什么好处。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EiwnPMETQAmWlHSGAWEX.png" alt="错误示范" description="用户感受不到设置的意义，不会去设置。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/ioBKvBqCNzUwQDyjMiIa.png" alt="正确示范" description="用户可以从中了解了设置后会有什么好处。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/EiwnPMETQAmWlHSGAWEX.png" alt="错误示范" description="用户感受不到设置的意义，不会去设置。">
</ImagePreview>
当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/dlAkFzezQEwtNnZDWpQh.png" alt="正确示范" description="相对于「失败」，「无法完成」是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qqrgyclPnhBFgPEYsBXd.png" alt="错误示范" description="对于异常情况不是冷冰冰告诉你「失败」。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/dlAkFzezQEwtNnZDWpQh.png" alt="正确示范" description="相对于「失败」，「无法完成」是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/qqrgyclPnhBFgPEYsBXd.png" alt="错误示范" description="对于异常情况不是冷冰冰告诉你「失败」。">
</ImagePreview>
报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。
### 用词精准完整
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mCusyeTfzbyDCYxvwEPM.png" alt="正确示范" description="完整的表达。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cugctFUEXcVUNnsZRLMD.png" alt="错误示范" description="不完整，有歧义或太口语化。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/mCusyeTfzbyDCYxvwEPM.png" alt="正确示范" description="完整的表达。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/cugctFUEXcVUNnsZRLMD.png" alt="错误示范" description="不完整，有歧义或太口语化。">
</ImagePreview>
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jvYzIkRbdICzNvxeVfBr.png" alt="正确示范" description="专业用语精准。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/TFhFTbqHlEXTMOyCxIvN.png" alt="错误示范" description="专业的行业用词有别字。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/jvYzIkRbdICzNvxeVfBr.png" alt="正确示范" description="专业用语精准。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/TFhFTbqHlEXTMOyCxIvN.png" alt="错误示范" description="专业的行业用词有别字。">
</ImagePreview>
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qIwLlXOyJQlAqFwWSUuo.png" alt="正确示范" description="时间信息的表述精准完整。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HBCyJcXZYmtLECZUtjzE.png" alt="错误示范" description="时间信息的描述词不是具体的「日」、「月」，容易让用户产生困扰。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/qIwLlXOyJQlAqFwWSUuo.png" alt="正确示范" description="时间信息的表述精准完整。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/HBCyJcXZYmtLECZUtjzE.png" alt="错误示范" description="时间信息的描述词不是具体的「日」、「月」，容易让用户产生困扰。">
</ImagePreview>
<table style="font-size:12px;float:right;width:496px;margin-left:60px;margin-bottom:100px;clear:both;">
<tr>
@ -146,22 +170,28 @@ title: 文案
### 拉近彼此的距离
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LXVkAEabvRXwOTYkewzV.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/KxSWWhUiCPYaadFucIEr.png" alt="错误示范" description="建议不要使用「您」，太过客气，让用户感觉有些疏远。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/LXVkAEabvRXwOTYkewzV.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/KxSWWhUiCPYaadFucIEr.png" alt="错误示范" description="建议不要使用「您」，太过客气，让用户感觉有些疏远。">
</ImagePreview>
直接使用「你」、「我」来和用户对话，与用户建立亲密感。避免使用「您」，让用户感觉太过疏远。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mkFlHfRJxVaFpCVnhJxz.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SwzkNWboQRPncuORBPmL.png" alt="错误示范" description="同时出现了称谓「我」和「你」，用户会感到迷惑，不清楚到底指代对象是谁。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/mkFlHfRJxVaFpCVnhJxz.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/SwzkNWboQRPncuORBPmL.png" alt="错误示范" description="同时出现了称谓「我」和「你」，用户会感到迷惑，不清楚到底指代对象是谁。">
</ImagePreview>
> 注：不要在同一个句式中混用「你」和「我」，交互中指代混乱会让用户相当纠结。
### 友好、尊重用户
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SiyDiAnuljqDrZgcFiXn.png" alt="正确示范" description="引导用户正确输入内容。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ZSgEJWJJeOYBDDsenOuS.png" alt="错误示范" description="不能、不要、请勿都给人命令或强迫的感觉。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/SiyDiAnuljqDrZgcFiXn.png" alt="正确示范" description="引导用户正确输入内容。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/ZSgEJWJJeOYBDDsenOuS.png" alt="错误示范" description="不能、不要、请勿都给人命令或强迫的感觉。">
</ImagePreview>
多给用户支持与鼓励，不要命令和强迫用户。
@ -169,8 +199,10 @@ title: 文案
### 表述不应过于极端
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/zXLrYMCesvdZXdSoJEcP.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MTIsErHJIswPHVfUFQnI.png" alt="错误示范" description="「绝不」过于绝对，让用户感到不适。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/zXLrYMCesvdZXdSoJEcP.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/MTIsErHJIswPHVfUFQnI.png" alt="错误示范" description="「绝不」过于绝对，让用户感到不适。">
</ImagePreview>
不要使用过于绝对的表述，这样会让用户觉得不适。
@ -178,8 +210,10 @@ title: 文案
### 英文名词大小写规范
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ruuIBHvkqfJrCNuWrGZZ.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/yEqZfFLnyUACJhprXCqt.png" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/ruuIBHvkqfJrCNuWrGZZ.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/yEqZfFLnyUACJhprXCqt.png" alt="错误示范">
</ImagePreview>
产品名称全称，首字母大写。产品名称缩写需要全部大写，如：ESC、SLB 等；
@ -187,29 +221,37 @@ title: 文案
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/aVOygdsFMYeQZJNWDouv.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/obNsZSLYKAqMtsXrEHYg.png" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/aVOygdsFMYeQZJNWDouv.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/obNsZSLYKAqMtsXrEHYg.png" alt="错误示范">
</ImagePreview>
正确使用专有名词的大小写规范。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/sDSMymVeCJGoMJLBpoHe.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tUQvbqMLPGFjwiywBmJP.png" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/sDSMymVeCJGoMJLBpoHe.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/tUQvbqMLPGFjwiywBmJP.png" alt="错误示范">
</ImagePreview>
全英文的标题，标签，菜单项等等都要遵循英文句式中首字母大写的规范。
### 统计数据使用阿拉伯数字
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WOtjvzMQnfuAHJXcifgW.png" alt="正确示范" description="阿拉伯数字的信息传递效率更高">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LhJSOSsQrMFCxtFHqNqL.png" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/WOtjvzMQnfuAHJXcifgW.png" alt="正确示范" description="阿拉伯数字的信息传递效率更高">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/LhJSOSsQrMFCxtFHqNqL.png" alt="错误示范">
</ImagePreview>
这也是常见问题，用户对于数字的感知速度更快，使用数字而非文字表述会更加有效。
### 省略不必要的标点
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/QGpLpUFgZnTDzYJCeuun.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/fQhiFpjLcHJtJJGzElUT.png" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/QGpLpUFgZnTDzYJCeuun.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/fQhiFpjLcHJtJJGzElUT.png" alt="错误示范">
</ImagePreview>
为了帮助用户更加高效地扫视文本内容，可以省略不必要的断句点。
@ -221,8 +263,10 @@ title: 文案
- 悬停文本中的提示
- 表格中的句子
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/UMLpWSOrmsYFlozQFGXu.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/raqemTlQncDdOczUCKvo.png" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/UMLpWSOrmsYFlozQFGXu.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/raqemTlQncDdOczUCKvo.png" alt="错误示范">
</ImagePreview>
以下元素单独出现时需要加上标点：
@ -231,8 +275,10 @@ title: 文案
### 谨慎使用感叹号
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/CJAEXjDelaghIOHZAxgh.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/SgcrhDeaVpNmeFWRiJnc.png" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/CJAEXjDelaghIOHZAxgh.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/SgcrhDeaVpNmeFWRiJnc.png" alt="错误示范">
</ImagePreview>
感叹号会让文案显得过于激动，容易让气氛变得过于紧张。

24
docs/spec/data-display.en-US.md
View File

@ -14,7 +14,9 @@ The suitable way to display data helps users quickly locate and browse data, and
## Table
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/PetAXSByOolFbtmLazQz.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/PetAXSByOolFbtmLazQz.png">
</ImagePreview>
The table is recognized as one of the clearest and most efficient forms of presentation data. It is often used in conjunction with other interface elements such as sorting, searching, filtering, and paging, and is suitable for information collection and display, data analysis and induction, and manipulation of structured data. It's structure is simple, it's separation and induction are clear, the information is easier to compare, and the user's receiving efficiency and understanding of the information is greatly improved.
@ -25,7 +27,9 @@ The table is recognized as one of the clearest and most efficient forms of prese
## Collapse
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ypeOSafZJYqVJUHcJeef.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ypeOSafZJYqVJUHcJeef.png">
</ImagePreview>
Collapse guides the user to obtain information in a progressive manner by folding and arranging information, so that the interface is kept clean and the space is effectively utilized.
@ -37,7 +41,9 @@ These components are used extensively in navigation and are also suitable for le
## Card
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xtIGZmqUHAovPPKjwyVT.png" description="If the content of the page is too slow, you can use &quot;preload&quot; or &quot;step-by-step&quot; to alleviate the user's anxiety during waiting time.">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/xtIGZmqUHAovPPKjwyVT.png" description="If the content of the page is too slow, you can use &quot;preload&quot; or &quot;step-by-step&quot; to alleviate the user's anxiety during waiting time.">
</ImagePreview>
A card is a container for carrying information. There is not too much limit to the types of content that can be carried. It makes a type of information centralized, enhances the sense of block and is easier to operate. Cards are usually arranged in a grid or matrix to convey the hierarchical relationship between each other. Cards are suitable for lighter and more personalized information block display.
@ -50,7 +56,9 @@ A card is a container for carrying information. There is not too much limit to t
## Carousel
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/FaAbGkTwlhykSDSBqWbW.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/FaAbGkTwlhykSDSBqWbW.png">
</ImagePreview>
As a set of same hierarchy content parallel display mode, often used for picture or card carousel, can be triggered by the user or the system automatically rotates. It is suitable for display blocks such as the official website home page and product introduction page.
@ -63,7 +71,9 @@ As a set of same hierarchy content parallel display mode, often used for picture
## Tree
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/QZyxnLWUkbIuTqGYxTQs.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/QZyxnLWUkbIuTqGYxTQs.png">
</ImagePreview>
"Tree" displays the hierarchical relationship of information in the form of a step-by-step outline, which is efficient and has excellent visual visibility, making the overall information framework clear at a glance.
@ -73,7 +83,9 @@ Users can view and process multiple tree-level content at the same time. Tree is
## Timeline
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WmQeylAyWUNKmQIyoQGH.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WmQeylAyWUNKmQIyoQGH.png">
</ImagePreview>
Timeline is used to display time-flow information vertically, generally recording events in time by flashback, tracking what the user is doing now and what he has done in the past.

12
docs/spec/data-display.zh-CN.md
View File

@ -14,7 +14,7 @@ title: 数据展示
## 表格（Table）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/PetAXSByOolFbtmLazQz.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/PetAXSByOolFbtmLazQz.png">
表格被公认为是展现数据最为清晰、高效的形式之一。它常和排序、搜索、筛选、分页等其他界面元素一起协同，适用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。它结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。
@ -25,7 +25,7 @@ title: 数据展示
## 折叠面板（Collapse）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ypeOSafZJYqVJUHcJeef.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ypeOSafZJYqVJUHcJeef.png">
折叠面板通过对信息的分组和收纳，指引用户递进式的获取信息，使界面保持整洁的同时增加空间的有效利用率。
@ -37,7 +37,7 @@ title: 数据展示
## 卡片（Card）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xtIGZmqUHAovPPKjwyVT.png" description="如页面内容加载过慢时，可采用『预加载』或『分步获取』的方式来缓解用户在等待时间中的焦虑感。">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/xtIGZmqUHAovPPKjwyVT.png" description="如页面内容加载过慢时，可采用『预加载』或『分步获取』的方式来缓解用户在等待时间中的焦虑感。">
卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
@ -50,7 +50,7 @@ title: 数据展示
## 走马灯（Carousel）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/FaAbGkTwlhykSDSBqWbW.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/FaAbGkTwlhykSDSBqWbW.png">
作为一组平级内容的并列展示模式，常用于图片或卡片轮播，可由用户主动触发或者系统自动轮播。适合用于官网首页、产品介绍页等展示型区块。
@ -63,7 +63,7 @@ title: 数据展示
## 树形控件（Tree）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/QZyxnLWUkbIuTqGYxTQs.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/QZyxnLWUkbIuTqGYxTQs.png">
『树形控件』通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。
@ -73,7 +73,7 @@ title: 数据展示
## 时间轴（Timeline）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WmQeylAyWUNKmQIyoQGH.png">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WmQeylAyWUNKmQIyoQGH.png">
垂直展示的时间流信息，一般按照时间倒叙记录事件，追踪用户当下以及过去做了什么。

74
docs/spec/data-entry.en-US.md
View File

@ -18,7 +18,9 @@ Input is the basic and common way for data entry, which provides a text editable
### Input
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tlOeUNcdGkvWedJpiTSz.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/tlOeUNcdGkvWedJpiTSz.png">
</ImagePreview>
It uses a single line for text input with limited length.
@ -26,25 +28,35 @@ It uses a single line for text input with limited length.
### Textarea
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HwJLPhuelqEaeQvsYlFz.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/HwJLPhuelqEaeQvsYlFz.png">
</ImagePreview>
It's a multi-line text input for single long text.
### Tips and helps
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cggdJfFgvDlOwaFRylSk.png" alt="Basic style">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/cggdJfFgvDlOwaFRylSk.png" alt="Basic style">
</ImagePreview>
Hints is usually added in Input to help remind users, which can increase efficiency for the data entry.
> Note: Input usually works together with label which is to the left of input by default, while it can be on top as well when the text is too long or in English context. However, it should be consistent within the same system.
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xcDCXmgTCeXWelIovxvh.png" description="You can use an 'information' icon or a tip tool when the text is long">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/xcDCXmgTCeXWelIovxvh.png" description="You can use an 'information' icon or a tip tool when the text is long">
</ImagePreview>
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/AUTvHOWDsCTgSojYrQms.png" description="You can put the short input tip below the input (as shorter than a sentense).">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/AUTvHOWDsCTgSojYrQms.png" description="You can put the short input tip below the input (as shorter than a sentense).">
</ImagePreview>
### Search
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xLIltABSbmNgukJTZShA.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/xLIltABSbmNgukJTZShA.png">
</ImagePreview>
Search can help users reduce the range for target and retrieve the necessary information quickly from a huge information pool.
@ -56,7 +68,9 @@ Allow users to select from a specific range
#### Radio Button
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mLZUWZmJZKiTmcGFzaOC.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/mLZUWZmJZKiTmcGFzaOC.png">
</ImagePreview>
Radio button allows a user to select only one value from several options. Radio options should not be too many because all the options are default visible to a user so that the user can make the selection via comparison.
@ -64,7 +78,9 @@ Radio button allows a user to select only one value from several options. Radio
### Checkbox
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/DvQNtGZJgMZNAtfgweGo.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/DvQNtGZJgMZNAtfgweGo.png">
</ImagePreview>
Checkbox is used to select multiple values from several options.
@ -75,20 +91,26 @@ Checkbox is used to select multiple values from several options.
### Switch
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MsOFIDWorXeobBLkEwjS.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/MsOFIDWorXeobBLkEwjS.png">
</ImagePreview>
It's used to switch the state of a single option. The inline label of "Switch" should be displayed clearly, e.g. Disable/Enable, Disallow/Allow etc.
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/GJNIykRlFgmVRSKNGOCg.png" alt="Correct Sample">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/gLJCJDtOquBTRdBSoGYe.png" alt="Incorrect Sample" description="'Switch' doesn't need to work with buttons because the toggle will take effect immediately.">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/GJNIykRlFgmVRSKNGOCg.png" alt="Correct Sample">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/gLJCJDtOquBTRdBSoGYe.png" alt="Incorrect Sample" description="'Switch' doesn't need to work with buttons because the toggle will take effect immediately.">
</ImagePreview>
> Note: It will trigger the state change directly when a user toggle the "Switch".
### Dropdown
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wbOaUEKPkjzVFNLabvtF.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/wbOaUEKPkjzVFNLabvtF.png">
</ImagePreview>
Dropdown provides more flexibility for the number of options, allowing a user to select one or multiple values from a list of options.
@ -99,25 +121,33 @@ Dropdown provides more flexibility for the number of options, allowing a user to
### Slider
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/kfDmEBuFbbDsrsqTyxIH.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/kfDmEBuFbbDsrsqTyxIH.png">
</ImagePreview>
Slider allows to select a suitable value by moving the anchor in a continuous or discontinuous range. It's a better choice for reflecting options of intensities or grades, e.g. volume, brightness, color saturation etc.
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jRUNDmdChSEsFAXVBzAx.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jRUNDmdChSEsFAXVBzAx.png">
</ImagePreview>
> Note: Operations can be more flexible and convenient using "Slider" when precise value is not required. "NumberInput" can be worked together with Slider for precise values.
### Transfer
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/fxYgAmCVVkduXRfBYUCo.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/fxYgAmCVVkduXRfBYUCo.png">
</ImagePreview>
Transfer the elements between two columns in an intuitive and efficient way.
### DatePicker
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/IyntUBesFLpPNQTHtgVk.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/IyntUBesFLpPNQTHtgVk.png">
</ImagePreview>
DatePicker provides a visual way to browse and select a date or date range for users.
@ -129,19 +159,25 @@ Upload is the process of publishing information (from local or cloud storage) to
### Upload by simple clicks
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/nslSHZVgVxmBNgKhFcqT.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/nslSHZVgVxmBNgKhFcqT.png">
</ImagePreview>
Normally used to upload a single file which doesn't require preview. Click the button will prompt the file selection window.
### Upload by displaying thumbnails
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HQvQFtYdIQKoUOjgSFQP.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/HQvQFtYdIQKoUOjgSFQP.png">
</ImagePreview>
Normally used to upload images. Users can upload images and display thumbnails in the list. The upload button will disappear when the number of images is up to a threshold.
### Upload by drag-and-drop
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/evyhWzbCtinnGURCPJSn.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/evyhWzbCtinnGURCPJSn.png">
</ImagePreview>
Drag files into a specific area to upload, while it supports upload by clicking as well.

74
docs/spec/data-entry.zh-CN.md
View File

@ -18,7 +18,9 @@ title: 数据录入
### 文本框（Input）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tlOeUNcdGkvWedJpiTSz.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/tlOeUNcdGkvWedJpiTSz.png">
</ImagePreview>
输入较少的字符总数，使用单行的输入形式。
@ -26,25 +28,35 @@ title: 数据录入
### 文本域（Textarea）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HwJLPhuelqEaeQvsYlFz.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/HwJLPhuelqEaeQvsYlFz.png">
</ImagePreview>
录入长篇幅的单一的文本使用多行的文本区域。
### 提示与帮助
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cggdJfFgvDlOwaFRylSk.png" alt="基本样式">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/cggdJfFgvDlOwaFRylSk.png" alt="基本样式">
</ImagePreview>
为提升数据录入效率，通常可以在输入框内增加暗提示以帮助提醒用户。
> 注：输入框通常与标签（label）搭配使用，标签（label）默认放于输入区域的左侧，当文案过长或英文环境下也可放于输入区域的上方，但在同系统中需保持统一。
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xcDCXmgTCeXWelIovxvh.png" description="当说明文案较长时，你可以使用一个「信息」图标或者提示工具。">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/xcDCXmgTCeXWelIovxvh.png" description="当说明文案较长时，你可以使用一个「信息」图标或者提示工具。">
</ImagePreview>
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/AUTvHOWDsCTgSojYrQms.png" description="对于那些短的输入提醒（短于一句），你可以将其放置在输入框的下方。">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/AUTvHOWDsCTgSojYrQms.png" description="对于那些短的输入提醒（短于一句），你可以将其放置在输入框的下方。">
</ImagePreview>
### 搜索（Search）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/xLIltABSbmNgukJTZShA.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/xLIltABSbmNgukJTZShA.png">
</ImagePreview>
搜索可以让用户在巨大的信息池中缩小目标范围，并快速获取需要的信息。
@ -56,7 +68,9 @@ title: 数据录入
#### 单选框（Radio Button）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mLZUWZmJZKiTmcGFzaOC.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/mLZUWZmJZKiTmcGFzaOC.png">
</ImagePreview>
单选按钮允许用户从多个选项中选择一个选项。Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
@ -64,7 +78,9 @@ title: 数据录入
### 复选框（Checkbox）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/DvQNtGZJgMZNAtfgweGo.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/DvQNtGZJgMZNAtfgweGo.png">
</ImagePreview>
复选框用于在一组可选项中进行多项选择时。
@ -75,20 +91,26 @@ title: 数据录入
### 开关（Switch）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MsOFIDWorXeobBLkEwjS.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/MsOFIDWorXeobBLkEwjS.png">
</ImagePreview>
用于切换单个选项的状态。「开关」的内联标签应该显示清楚，例如：禁用/启用，不允许/允许等。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/GJNIykRlFgmVRSKNGOCg.png" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/gLJCJDtOquBTRdBSoGYe.png" alt="错误示范" description="切换「开关」结果会立即生效，无需与操作按钮搭配使用。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/GJNIykRlFgmVRSKNGOCg.png" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/gLJCJDtOquBTRdBSoGYe.png" alt="错误示范" description="切换「开关」结果会立即生效，无需与操作按钮搭配使用。">
</ImagePreview>
> 注：当用户切换「开关」按钮将直接触发状态改变。
### 选择列表（Dropdown）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wbOaUEKPkjzVFNLabvtF.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/wbOaUEKPkjzVFNLabvtF.png">
</ImagePreview>
选择列表（通常称为下拉菜单）允许用户从列表中选择一个选项或多个选项，为用户在选项的数量上提供了更多的灵活性。
@ -99,25 +121,33 @@ title: 数据录入
### 滑块选择（Slider）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/kfDmEBuFbbDsrsqTyxIH.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/kfDmEBuFbbDsrsqTyxIH.png">
</ImagePreview>
滑块选择可以在连续或间断的区间内，通过滑动锚点来选择一个合适的数值。这种交互特性使得它在设置诸如音量，亮度，色彩饱和度等需要反映强度等级的选项时是一种极好的选择。
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jRUNDmdChSEsFAXVBzAx.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jRUNDmdChSEsFAXVBzAx.png">
</ImagePreview>
> 注：在不要求精准数值的场景下用户使用「连续滑块」可得到更灵活便捷的操作；在用户需要精确数值时，可与「数字输入框」搭配使用。
### 穿梭框（Transfer）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/fxYgAmCVVkduXRfBYUCo.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/fxYgAmCVVkduXRfBYUCo.png">
</ImagePreview>
穿梭框用直观的方式在两栏中移动元素，完成选择行为。
### 日期选择器（DatePicker）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/IyntUBesFLpPNQTHtgVk.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/IyntUBesFLpPNQTHtgVk.png">
</ImagePreview>
日期选择器为用户提供了一种可视化的方式去浏览和选择一个日期或者日期范围。
@ -129,19 +159,25 @@ title: 数据录入
### 简单点击上传
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/nslSHZVgVxmBNgKhFcqT.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/nslSHZVgVxmBNgKhFcqT.png">
</ImagePreview>
一般用于单个上传且不需要预览效果的文件上传，点击按钮弹出文件选择框。
### 显示缩略图上传
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HQvQFtYdIQKoUOjgSFQP.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/HQvQFtYdIQKoUOjgSFQP.png">
</ImagePreview>
一般用于图片文件上传，用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。
### 拖拽上传
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/evyhWzbCtinnGURCPJSn.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/evyhWzbCtinnGURCPJSn.png">
</ImagePreview>
把文件拖入指定区域，完成上传，同样支持点击上传。

23
docs/spec/data-format.en-US.md
View File

@ -24,9 +24,10 @@ The numerical value is used to indicate the measurement size, it can be used alo
<br />
<img class="preview-img good" align="right" alt="Do" src="https://gw.alipayobjects.com/zos/antfincdn/8QPU0UKlAA/ebba34c8-c7c0-4dc7-a3a6-e486b118b5fd.png">
<img class="preview-img bad" align="right" alt="Don't" src="https://gw.alipayobjects.com/zos/antfincdn/jvsJ7TbQM%26/8cb7388a-7224-48cd-9672-a1cd1882b060.png">
<ImagePreview>
<img class="preview-img good" alt="Do" src="https://gw.alipayobjects.com/zos/antfincdn/8QPU0UKlAA/ebba34c8-c7c0-4dc7-a3a6-e486b118b5fd.png">
<img class="preview-img bad" alt="Don't" src="https://gw.alipayobjects.com/zos/antfincdn/jvsJ7TbQM%26/8cb7388a-7224-48cd-9672-a1cd1882b060.png">
</ImagePreview>
**Position**: To let users read the data intuitively and accurately, it is necessary to make it clear and concise. In a table with numerical values, "right-aligned" method is usually adopted, which not only facilitates the user to quickly read, but also allows the user to compare the longitudinal data.
@ -84,8 +85,10 @@ Data redaction refers to representing truncated data to protect sensitive privac
#### Complete Redaction
<img class="preview-img good" align="right" alt="Do" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NJs8QYejQyEAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" align="right" alt="Don't" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JvI4T5SXvIYAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img good" alt="Do" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NJs8QYejQyEAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" alt="Don't" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JvI4T5SXvIYAAAAAAAAAAABkARQnAQ">
</ImagePreview>
Generally used for particularly important and sensitive information such as amount and time. All the numbers need to be hidden. And the data is replaced by `***`.
@ -107,14 +110,18 @@ Generally used for situations that require partial information for identificatio
#### Empty State
<img class="preview-img good" align="right" alt="Do" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o0duS6P8WUEAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" align="right" alt="Don't" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ssPWRaVkIy8AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img good" alt="Do" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o0duS6P8WUEAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" alt="Don't" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ssPWRaVkIy8AAAAAAAAAAABkARQnAQ">
</ImagePreview>
Display `--` to express no-data status.
#### Loading
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E6pGTJYEh-gAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E6pGTJYEh-gAAAAAAAAAAABkARQnAQ">
</ImagePreview>
Use Skeleton screen when loading data.

41
docs/spec/data-format.zh-CN.md
View File

@ -24,16 +24,19 @@ title: 数据格式
<br />
<img class="preview-img good" align="right" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*vjAcTqS6VKoAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" align="right" alt="不推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3CXaSK6NcrwAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img good" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*vjAcTqS6VKoAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" alt="不推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3CXaSK6NcrwAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**位置排列**：便于用户直观而又准确地读取数据，要做到一眼观定、简洁明了。在表格中，诸如金额、数量等数值分布排列时，通常采用“右对齐”方式，既方便用户快捷读取数据，还可以使用户进行纵向数据对比。
<br />
<img class="preview-img good" align="right" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*5ymtS5WU83EAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" align="right" alt="不推荐示例" description="单位统一放在表头上，表格里不带单位，金额默认右对齐" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*qjzFQL3CqiQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img good" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*5ymtS5WU83EAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" alt="不推荐示例" description="单位统一放在表头上，表格里不带单位，金额默认右对齐" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*qjzFQL3CqiQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**计量单位**：在表格中，计量单位默认放在表头，并默认右对齐。
@ -48,16 +51,20 @@ title: 数据格式
<br />
<img class="preview-img good" align="right" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*FGtoQIKHySkAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" align="right" alt="不推荐示例" description="金额数字到「元」为止的，在「元」之后，应写「整」字，在「角」之后可以不写「整」字。金额数字有「分」的，「分」后面不写「整」字。" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*adz2QIF8umQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img good" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*FGtoQIKHySkAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" alt="不推荐示例" description="金额数字到「元」为止的，在「元」之后，应写「整」字，在「角」之后可以不写「整」字。金额数字有「分」的，「分」后面不写「整」字。" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*adz2QIF8umQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**大写金额：**一般用于银行、公司或个人的重要结算凭证和各种交易票据，需要使用大写数字以确保数据无法涂改，规范格式为「货币名称+金额数字」。
<br />
<img class="preview-img good" align="right" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*dHYhQ4iqnJkAAAAAAAAAAABkARQnAQ">
<img class="preview-img good" align="right" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*T6hbQJdz5usAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" align="right" alt="不推荐示例" description="“千”不能以单位的形式展示。" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iuEARoq_-o0AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img good" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*dHYhQ4iqnJkAAAAAAAAAAABkARQnAQ">
<img class="preview-img good" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*T6hbQJdz5usAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" alt="不推荐示例" description="“千”不能以单位的形式展示。" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iuEARoq_-o0AAAAAAAAAAABkARQnAQ">
</ImagePreview>
**大额计量：**如果一个金额很大，那么数值中的“万”“亿”单位可采用汉字。如果一个数值很大，那么数值中的“万”“亿”单位可采用汉字。
@ -102,8 +109,10 @@ title: 数据格式
#### 全部脱敏
<img class="preview-img good" align="right" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NJs8QYejQyEAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" align="right" alt="不推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JvI4T5SXvIYAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img good" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NJs8QYejQyEAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" alt="不推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JvI4T5SXvIYAAAAAAAAAAABkARQnAQ">
</ImagePreview>
一般用于金额、时间等特别重要敏感的信息，需要对所有数字进行脱敏。数据用一个 `***` 代替。
@ -125,14 +134,16 @@ title: 数据格式
#### 无数据
<img class="preview-img good" align="right" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o0duS6P8WUEAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" align="right" alt="不推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ssPWRaVkIy8AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img good" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o0duS6P8WUEAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" alt="不推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ssPWRaVkIy8AAAAAAAAAAABkARQnAQ">
</ImagePreview>
无数据用 `--` 表述。
#### 数据加载
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E6pGTJYEh-gAAAAAAAAAAABkARQnAQ">
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E6pGTJYEh-gAAAAAAAAAAABkARQnAQ">
数据加载用「骨架屏」表示。

84
docs/spec/data-list.en-US.md
View File

@ -1,9 +1,9 @@
---
group: Design Patterns
type: Global Rules
group: 设计模式
type: 全局规则
order: 7
skip: true
title: Data List
title: 数据列表
---
## 设计目标
@ -19,19 +19,25 @@ title: Data List
### 表格 Table
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VrOkRbo_Uc4AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VrOkRbo_Uc4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
强调浏览性。矩阵布局，趋向于展示复杂数据，数据按照矩阵布局对齐，方便横纵浏览数据，研究数据之间的关系。特别当用户受益于更多的数据外露，而无需进入该对象详情时，使用表格。
### 列表 List
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*D-8wTbCA1REAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*D-8wTbCA1REAAAAAAAAAAABkARQnAQ">
</ImagePreview>
兼顾浏览性与展示性。垂直排列，趋向于展示对象的基础概述，有层次地展示内容，适合快速扫读。特别当展示空间存在限制，如较小的弹窗、侧栏、下拉面板等容器中，使用列表。
### 卡片列表 Card list
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*fu2gQ6DQaGgAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*fu2gQ6DQaGgAAAAAAAAAAABkARQnAQ">
</ImagePreview>
强调展示性。网格布局无特定浏览顺序，每个对象拥有更平等的展示机会，网格布局在页面中更具吸引力，适合突出对象时使用。
@ -39,7 +45,9 @@ title: Data List
### 搜寻数据
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*pEyLSJsDgYIAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*pEyLSJsDgYIAAAAAAAAAAABkARQnAQ">
</ImagePreview>
选择适合的搜寻组件。
@ -54,19 +62,25 @@ title: Data List
#### 查询
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gHgBRofoBDQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gHgBRofoBDQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
按照预设的条件，选择多个查询条件后一次性提交获取查询。
#### 筛选
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*oECHSpfxwPAAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*oECHSpfxwPAAAAAAAAAAAABkARQnAQ">
</ImagePreview>
用户调整筛选项，结果即随之调整。
### 搜索
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*agcCS5eHy2UAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*agcCS5eHy2UAAAAAAAAAAABkARQnAQ">
</ImagePreview>
更智能的查找，输入关键词一次性在多种数据属性中查询后，展示结果。
@ -76,19 +90,25 @@ title: Data List
#### 分页器
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1sIoQKjspJIAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1sIoQKjspJIAAAAAAAAAAABkARQnAQ">
</ImagePreview>
默认推荐使用。使用时，当页面内容不足一页时，不展示分页器。
#### 同页加载
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ejtTTo4E0A4AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ejtTTo4E0A4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
当用户常常能够在列表靠前位置找到所需条目，且无定位特定列表项的需求时可以考虑使用这种模式，如动态、邮件。
#### 查看全部
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cgIlQJUC2_kAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cgIlQJUC2_kAAAAAAAAAAABkARQnAQ">
</ImagePreview>
当需跳转页面查看完整列表时使用。
@ -96,7 +116,7 @@ title: Data List
<div>
<img alt="mainly" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*nSsBTZlxihsAAAAAAAAAAABkARQnAQ">
<div>
</div>
#### 默认点击标题导航至详情，可以从以下几个角度判断如何打开详情：
@ -107,7 +127,9 @@ title: Data List
### 批量操作
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i6PJT6ArtcgAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i6PJT6ArtcgAAAAAAAAAAABkARQnAQ">
</ImagePreview>
当用户勾选条目后，触发批量操作模式，列表工具栏呼出批量操作工具条。
@ -115,13 +137,17 @@ title: Data List
#### 右上角新建按钮
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*HeQwR4Dc5aEAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*HeQwR4Dc5aEAAAAAAAAAAABkARQnAQ">
</ImagePreview>
点击触发新建表单弹窗、抽屉、页面等，完成创建后新创建的内容出现在列表的第一条，并短暂地高亮展示。
#### 虚线新建按钮
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*2OsyRpOCCIYAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*2OsyRpOCCIYAAAAAAAAAAABkARQnAQ">
</ImagePreview>
点击新建，在按钮位置出现对象编辑区，完成新建后即在该位置展示该新建对象。虚线新建按钮位置放在列表首或尾。
@ -129,36 +155,48 @@ title: Data List
#### 直接删除
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*rPUVTqeMzzgAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*rPUVTqeMzzgAAAAAAAAAAABkARQnAQ">
</ImagePreview>
删除后，允许用户撤销。
#### 二次确认
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*kYkSRKhHbIoAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*kYkSRKhHbIoAAAAAAAAAAABkARQnAQ">
</ImagePreview>
点击删除操作时，需要二次确认。
#### 安全校验
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*vkUuTYWLRCMAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*vkUuTYWLRCMAAAAAAAAAAABkARQnAQ">
</ImagePreview>
破坏性操作需高安全级别验证确认操作。
### 列表工具栏
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cPBwQ74TTFQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cPBwQ74TTFQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
在较小的空间中集成列表所需的常用功能，非常推荐使用。
## 布局
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y6PZQpyrFXUAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y6PZQpyrFXUAAAAAAAAAAABkARQnAQ">
</ImagePreview>
列表布局通常从上往下平铺，按照以下顺序排列。其中独占式区域提供了一个扩展空间，用于解决无法集成于工具栏中的复杂数据搜寻、数据统计类内容。
## 空状态
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8iBER4YJmdQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8iBER4YJmdQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
当列表无数据或无搜索结果时，应展示空状态。

78
docs/spec/data-list.zh-CN.md
View File

@ -19,19 +19,25 @@ title: 数据列表
### 表格 Table
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VrOkRbo_Uc4AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VrOkRbo_Uc4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
强调浏览性。矩阵布局，趋向于展示复杂数据，数据按照矩阵布局对齐，方便横纵浏览数据，研究数据之间的关系。特别当用户受益于更多的数据外露，而无需进入该对象详情时，使用表格。
### 列表 List
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*D-8wTbCA1REAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*D-8wTbCA1REAAAAAAAAAAABkARQnAQ">
</ImagePreview>
兼顾浏览性与展示性。垂直排列，趋向于展示对象的基础概述，有层次地展示内容，适合快速扫读。特别当展示空间存在限制，如较小的弹窗、侧栏、下拉面板等容器中，使用列表。
### 卡片列表 Card list
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*fu2gQ6DQaGgAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*fu2gQ6DQaGgAAAAAAAAAAABkARQnAQ">
</ImagePreview>
强调展示性。网格布局无特定浏览顺序，每个对象拥有更平等的展示机会，网格布局在页面中更具吸引力，适合突出对象时使用。
@ -39,7 +45,9 @@ title: 数据列表
### 搜寻数据
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*pEyLSJsDgYIAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*pEyLSJsDgYIAAAAAAAAAAABkARQnAQ">
</ImagePreview>
选择适合的搜寻组件。
@ -54,19 +62,25 @@ title: 数据列表
#### 查询
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gHgBRofoBDQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gHgBRofoBDQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
按照预设的条件，选择多个查询条件后一次性提交获取查询。
#### 筛选
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*oECHSpfxwPAAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*oECHSpfxwPAAAAAAAAAAAABkARQnAQ">
</ImagePreview>
用户调整筛选项，结果即随之调整。
### 搜索
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*agcCS5eHy2UAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*agcCS5eHy2UAAAAAAAAAAABkARQnAQ">
</ImagePreview>
更智能的查找，输入关键词一次性在多种数据属性中查询后，展示结果。
@ -76,19 +90,25 @@ title: 数据列表
#### 分页器
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1sIoQKjspJIAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1sIoQKjspJIAAAAAAAAAAABkARQnAQ">
</ImagePreview>
默认推荐使用。使用时，当页面内容不足一页时，不展示分页器。
#### 同页加载
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ejtTTo4E0A4AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ejtTTo4E0A4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
当用户常常能够在列表靠前位置找到所需条目，且无定位特定列表项的需求时可以考虑使用这种模式，如动态、邮件。
#### 查看全部
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cgIlQJUC2_kAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cgIlQJUC2_kAAAAAAAAAAABkARQnAQ">
</ImagePreview>
当需跳转页面查看完整列表时使用。
@ -96,7 +116,7 @@ title: 数据列表
<div>
<img alt="mainly" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*nSsBTZlxihsAAAAAAAAAAABkARQnAQ">
<div>
</div>
#### 默认点击标题导航至详情，可以从以下几个角度判断如何打开详情：
@ -107,7 +127,9 @@ title: 数据列表
### 批量操作
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i6PJT6ArtcgAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i6PJT6ArtcgAAAAAAAAAAABkARQnAQ">
</ImagePreview>
当用户勾选条目后，触发批量操作模式，列表工具栏呼出批量操作工具条。
@ -115,13 +137,17 @@ title: 数据列表
#### 右上角新建按钮
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*HeQwR4Dc5aEAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*HeQwR4Dc5aEAAAAAAAAAAABkARQnAQ">
</ImagePreview>
点击触发新建表单弹窗、抽屉、页面等，完成创建后新创建的内容出现在列表的第一条，并短暂地高亮展示。
#### 虚线新建按钮
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*2OsyRpOCCIYAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*2OsyRpOCCIYAAAAAAAAAAABkARQnAQ">
</ImagePreview>
点击新建，在按钮位置出现对象编辑区，完成新建后即在该位置展示该新建对象。虚线新建按钮位置放在列表首或尾。
@ -129,36 +155,48 @@ title: 数据列表
#### 直接删除
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*rPUVTqeMzzgAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*rPUVTqeMzzgAAAAAAAAAAABkARQnAQ">
</ImagePreview>
删除后，允许用户撤销。
#### 二次确认
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*kYkSRKhHbIoAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*kYkSRKhHbIoAAAAAAAAAAABkARQnAQ">
</ImagePreview>
点击删除操作时，需要二次确认。
#### 安全校验
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*vkUuTYWLRCMAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*vkUuTYWLRCMAAAAAAAAAAABkARQnAQ">
</ImagePreview>
破坏性操作需高安全级别验证确认操作。
### 列表工具栏
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cPBwQ74TTFQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cPBwQ74TTFQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
在较小的空间中集成列表所需的常用功能，非常推荐使用。
## 布局
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y6PZQpyrFXUAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y6PZQpyrFXUAAAAAAAAAAABkARQnAQ">
</ImagePreview>
列表布局通常从上往下平铺，按照以下顺序排列。其中独占式区域提供了一个扩展空间，用于解决无法集成于工具栏中的复杂数据搜寻、数据统计类内容。
## 空状态
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8iBER4YJmdQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8iBER4YJmdQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
当列表无数据或无搜索结果时，应展示空状态。

40
docs/spec/detail-page.en-US.md
View File

@ -41,13 +41,17 @@ To increase the information viewing and searching efficiency. To raise the conve
### Basic Layouts
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/pCRKNg9k17/1bd63a4b-d1f4-4e07-b22a-d473846ffa4c.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/pCRKNg9k17/1bd63a4b-d1f4-4e07-b22a-d473846ffa4c.png">
</ImagePreview>
Basic Detail Pages directly show all the information at the same level of hierarchy. We suggest such method of displaying data.
#### [Basic Detail Templates](https://preview.pro.ant.design/profile/basic)
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/mbOatwyvyE/0fb8dd2b-b0d6-4833-8eef-4b9bb403eece.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/mbOatwyvyE/0fb8dd2b-b0d6-4833-8eef-4b9bb403eece.png">
</ImagePreview>
Basic layout templates display the main information on one whole card, using non-column split lines to separate the content into groups.
@ -57,7 +61,9 @@ To display information with less content and low complexity.
#### Document Detail Templates
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/scYc%24%24mD8l/17738081-f446-417b-9b32-a8c30de2f221.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/scYc%24%24mD8l/17738081-f446-417b-9b32-a8c30de2f221.png">
</ImagePreview>
Document Detail Templates display the detailed information of approval documents. They use cards to separate the modules with complex content.
@ -71,15 +77,21 @@ Pass, reject, transfer, sign, suspend and withdraw.
### Complex Layouts
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/B76lyJVA80/3c938d7e-06a8-464c-b70c-5b2bebfcd638.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/B76lyJVA80/3c938d7e-06a8-464c-b70c-5b2bebfcd638.png">
</ImagePreview>
Deal with complex details in the following way: Divide information with high complexity and weak correlation into multiple parts. And put the parts into groups according to their relativities, with tabs, steps, cards, etc.
#### [Advanced Detail Templates](https://preview.pro.ant.design/profile/advanced)
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/%241vXHbjQ2A/ad454bfb-55d8-43b1-b1fb-adfbc889045c.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/%241vXHbjQ2A/ad454bfb-55d8-43b1-b1fb-adfbc889045c.png">
</ImagePreview>
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/O0dPbOqGT0/07b6e341-2186-4a20-bc2c-513d91d3faa8.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/O0dPbOqGT0/07b6e341-2186-4a20-bc2c-513d91d3faa8.png">
</ImagePreview>
**When to use**
@ -87,7 +99,9 @@ When the detail page has large and complex content, it has to be split into mult
#### Publish Process Templates
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/zMjpjg%24oaY/a9b7e996-ca9a-45d8-afbb-3c1727208629.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/zMjpjg%24oaY/a9b7e996-ca9a-45d8-afbb-3c1727208629.png">
</ImagePreview>
Divide the content into steps, letting users to browse and operate step by step.
@ -99,13 +113,17 @@ Such templates are suitable for developing and collaborating processes.
#### How to choose template
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/1uy%243Y6SRp/1a6ff7f8-4cd0-483b-b8a5-c8d49c63fa92.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/1uy%243Y6SRp/1a6ff7f8-4cd0-483b-b8a5-c8d49c63fa92.png">
</ImagePreview>
Based on information complexity and correlation model, choose related modes to present the information, and select suitable layouts to display the contents of detail pages.
#### Separation Methods
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/gadw%26gZBCW/f8c03ba9-73ae-40f6-b687-c322ecf963cb.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/gadw%26gZBCW/f8c03ba9-73ae-40f6-b687-c322ecf963cb.png">
</ImagePreview>
Conclude the closeness of each information module according to the relevance among them. Usually, the more relevant the contents are, the closer they are to each other.
@ -116,7 +134,9 @@ Conclude the closeness of each information module according to the relevance amo
#### Content Components
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/J7ccrSNpjz/89878d45-ca15-4a6a-853e-3281fe02f114.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/J7ccrSNpjz/89878d45-ca15-4a6a-853e-3281fe02f114.png">
</ImagePreview>
Select presentation modes of the information according to its types and complexity. Abased on the complexity from low to high, the followings are available components:

40
docs/spec/detail-page.zh-CN.md
View File

@ -43,13 +43,17 @@ title: 详情页
### 基础布局
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tKooSqMRdTEAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tKooSqMRdTEAAAAAAAAAAABkARQnAQ">
</ImagePreview>
基础详情单页直接平铺所有需要展示的的信息，推荐使用这种详情展示方式。
#### [模板 -  基础详情](https://preview.pro.ant.design/profile/basic)
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z78YSLlHYFUAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z78YSLlHYFUAAAAAAAAAAABkARQnAQ">
</ImagePreview>
将主体内容呈现于一整张卡片中，使用不通栏分割线将相关内容分组。
@ -59,7 +63,9 @@ title: 详情页
#### 模板 - 单据详情
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*51LGQopcBQgAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*51LGQopcBQgAAAAAAAAAAABkARQnAQ">
</ImagePreview>
展示某个审批单据的详细信息，将内容复杂度较高的各模块使用卡片区割开来。
@ -73,15 +79,21 @@ title: 详情页
### 复杂布局
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*BBAlT7zwS0gAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*BBAlT7zwS0gAAAAAAAAAAABkARQnAQ">
</ImagePreview>
将信息复杂度较高、相关性较弱的信息拆分为多个部分，并通过 页签 、分步、卡片分区、卡片内分组等形式按照相关性分组，用来处理复杂度较高的详情内容。
#### [模板 -  高级详情](https://preview.pro.ant.design/profile/advanced)
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*772pTpKDNkwAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*772pTpKDNkwAAAAAAAAAAABkARQnAQ">
</ImagePreview>
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*12bBR7yx30wAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*12bBR7yx30wAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候使用**
@ -89,7 +101,9 @@ title: 详情页
#### 模板 - 发布流程
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0IGLSaqstRoAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0IGLSaqstRoAAAAAAAAAAABkARQnAQ">
</ImagePreview>
将内容分阶段组织，了解不同阶段的事项。
@ -101,13 +115,17 @@ title: 详情页
### 选择模板
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*kC5tQbp8A60AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*kC5tQbp8A60AAAAAAAAAAABkARQnAQ">
</ImagePreview>
根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情页的内容。
### 区隔方式
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3jPZSa8n2g4AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3jPZSa8n2g4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
根据各个信息之间的相关性，判断各个信息模块之间的亲密度，通常情况下，相关性强的内容尽量靠近，相关性弱的的内容尽量拉开层次。
@ -118,7 +136,9 @@ title: 详情页
### 内容组件
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ZRvkTYUMKLQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ZRvkTYUMKLQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
根据不同的信息类型和复杂度选用对应的信息呈现方式。按复杂度由低至高，提供以下组件供选择：

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

@ -11,7 +11,9 @@ As Alan Cooper states：「Where there is output, let there be input」. This is
## In-Page Editing
<img class="preview-img" align="right" alt="Example of click to edit" description="Status 1: Common browsing mode, do not distinguish between editable and non-editable lines；<br>Status 2: On mouse hover, the background is backlit with yellow. A tool tip invites the user to 'Click to edit'；<br>Status 3: Once the user clicks on the title, the form elements 「Input box」, 「OK」 and 「Cancel」 appear, and the cursor is positioned in the 「input box」." src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">
<ImagePreview>
<img class="preview-img" alt="Example of click to edit" description="Status 1: Common browsing mode, do not distinguish between editable and non-editable lines；<br>Status 2: On mouse hover, the background is backlit with yellow. A tool tip invites the user to 'Click to edit'；<br>Status 3: Once the user clicks on the title, the form elements 「Input box」, 「OK」 and 「Cancel」 appear, and the cursor is positioned in the 「input box」." src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">
</ImagePreview>
Single-Field Inline Edit
@ -19,14 +21,18 @@ If 「readability」 is more important than 「editability」, 「click to edit
<br>
<img class="preview-img" align="right" alt="Example of Text link/Icon Edit" description="Status 1: Text link/icon appears near the editable line.；<br>Status 2: Once the mouse clicks 「edit」,the form elements 「Input box」, 「Ok」 and 「Cancel」 appear, and the cursor is positioned in the 「input box」.
<ImagePreview>
<img class="preview-img" alt="Example of Text link/Icon Edit" description="Status 1: Text link/icon appears near the editable line.；<br>Status 2: Once the mouse clicks 「edit」,the form elements 「Input box」, 「Ok」 and 「Cancel」 appear, and the cursor is positioned in the 「input box」.
" src="https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png">
</ImagePreview>
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.
<br>
<img class="preview-img" align="right" alt="Example of Multi-Field Inline Edit" description="Edit mode without destroying integrity can enlarge the space in order to put down the 「Input box」 and other form elements. Besides, when switching the edit mode in the Table, it is necessary to ensure that each column does not beat." src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">
<ImagePreview>
<img class="preview-img" alt="Example of Multi-Field Inline Edit" description="Edit mode without destroying integrity can enlarge the space in order to put down the 「Input box」 and other form elements. Besides, when switching the edit mode in the Table, it is necessary to ensure that each column does not beat." src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">
</ImagePreview>
Multi-Field Inline Edit
@ -38,15 +44,19 @@ Multi-Field Inline Edit
## Drag and Drop
<img class="preview-img" align="right" alt="Example of Drag and Drop List" description="Status 1: On mouse hover,a removable 「icon」 appears.；<br>Status 2： When hovering over the 「icon」, the pointer changes into a 「hand」, click-and-drag operation can be used；<br>Status 3：Drag target to the placeable block. When blue stroke appears, inform user that object can be placed in the block." src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
<ImagePreview>
<img class="preview-img" alt="Example of Drag and Drop List" description="Status 1: On mouse hover,a removable 「icon」 appears.；<br>Status 2： When hovering over the 「icon」, the pointer changes into a 「hand」, click-and-drag operation can be used；<br>Status 3：Drag target to the placeable block. When blue stroke appears, inform user that object can be placed in the block." src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
</ImagePreview>
Drag and Drop List
Drag and Drop can only limited in one dimension（upper/down or left/right）
Drag and Drop can only be limited in one dimension（upper/down or left/right）
<br>
<img class="preview-img" align="right" alt="Example of Drag and Drop picture/file" src="https://gw.alipayobjects.com/zos/rmsportal/wuAOmxmpXkcZlHzTbIvY.png">
<ImagePreview>
<img class="preview-img" alt="Example of Drag and Drop picture/file" src="https://gw.alipayobjects.com/zos/rmsportal/wuAOmxmpXkcZlHzTbIvY.png">
</ImagePreview>
Drag and Drop picture/file

20
docs/spec/direct.zh-CN.md
View File

@ -11,7 +11,9 @@ title: 直截了当
## 页内编辑
<img class="preview-img" align="right" alt="单击编辑示例" description="状态一：普通的浏览模式，不区分可编辑行和不可编辑行；<br>状态二：鼠标悬停时，「指针」变为「手型」，编辑区域底色变黄，出现「Tooltips」提示单击编辑；<br>状态三：鼠标点击后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。" src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">
<ImagePreview>
<img class="preview-img" alt="单击编辑示例" description="状态一：普通的浏览模式，不区分可编辑行和不可编辑行；<br>状态二：鼠标悬停时，「指针」变为「手型」，编辑区域底色变黄，出现「Tooltips」提示单击编辑；<br>状态三：鼠标点击后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。" src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">
</ImagePreview>
单字段行内编辑
@ -19,13 +21,17 @@ title: 直截了当
<br>
<img class="preview-img" align="right" alt="文字链/图标编辑示例" description="状态一：在可编辑行附近出现文字链/图标；<br>状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。" src="https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png">
<ImagePreview>
<img class="preview-img" alt="文字链/图标编辑示例" description="状态一：在可编辑行附近出现文字链/图标；<br>状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。" src="https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png">
</ImagePreview>
当「易读性」为主，同时又要突出操作行的「易编辑性」时，可使用「文字链/图标编辑」。
<br>
<img class="preview-img" align="right" alt="多字段行内编辑示例" description="编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。" src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">
<ImagePreview>
<img class="preview-img" alt="多字段行内编辑示例" description="编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。" src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">
</ImagePreview>
多字段行内编辑
@ -37,7 +43,9 @@ title: 直截了当
## 利用拖放
<img class="preview-img" align="right" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的「图标」；<br>状态二：鼠标悬停在该「图标」时，指针变为「手型」，点击即可进行拖动；<br>状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
<ImagePreview>
<img class="preview-img" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的「图标」；<br>状态二：鼠标悬停在该「图标」时，指针变为「手型」，点击即可进行拖动；<br>状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
</ImagePreview>
拖放列表
@ -45,7 +53,9 @@ title: 直截了当
<br>
<img class="preview-img" align="right" alt="拖放图片/文件示例" src="https://gw.alipayobjects.com/zos/rmsportal/wuAOmxmpXkcZlHzTbIvY.png">
<ImagePreview>
<img class="preview-img" alt="拖放图片/文件示例" src="https://gw.alipayobjects.com/zos/rmsportal/wuAOmxmpXkcZlHzTbIvY.png">
</ImagePreview>
拖放图片/文件

50
docs/spec/feedback.en-US.md
View File

@ -21,7 +21,9 @@ Any product can not be separated from user guidance and information prompts even
#### Alert
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/eviVRYTdxOxOfVENLnxq.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/eviVRYTdxOxOfVENLnxq.png">
</ImagePreview>
It is a non-blocking information display. It does not interrupt the user's current operation. It usually stays at a certain position on the page (top preferentially). The static display form of the non-floating layer is always displayed and will not disappear automatically. The user can click shut down.
@ -31,13 +33,17 @@ It is a non-blocking information display. It does not interrupt the user's curre
#### Notification
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/nElczRfDzAXRZSkpiJBQ.png" description="Used when the notification content is complex">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/nElczRfDzAXRZSkpiJBQ.png" description="Used when the notification content is complex">
</ImagePreview>
The important global notification information actively pushed by the system is displayed in the upper right corner of the system.
#### Badge
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/bVonmOmmkuvybQxTDGTC.png" description="When there is an icon, it is usually in the upper right corner of the icon; in the case of no icon, it is usually at the back of the title.">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/bVonmOmmkuvybQxTDGTC.png" description="When there is an icon, it is usually in the upper right corner of the icon; in the case of no icon, it is usually at the back of the title.">
</ImagePreview>
The message prompt for the aggregate type, generally appearing in the upper right corner of the notification icon or avatar, attracts the user's eye through a striking visual form.
@ -47,7 +53,9 @@ The message prompt for the aggregate type, generally appearing in the upper righ
#### Popover
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/zsPOjQqkiwMnMhIsbDHz.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/zsPOjQqkiwMnMhIsbDHz.png">
</ImagePreview>
When the target element has further description and related operations, it can be stored in the card and displayed according to the user's operation behavior.
@ -55,7 +63,9 @@ When the target element has further description and related operations, it can b
#### Tooltip
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/CKDiGEsluwkRRGqujpgv.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/CKDiGEsluwkRRGqujpgv.png">
</ImagePreview>
Used to accurately describe the pointed object, such as icons, graphics, links, etc. When the mouse is moved in, the prompt is displayed, when the mouse is moved out, the prompt is disappeared. And the complex text and operations are not carried.
@ -67,19 +77,25 @@ Feedback of the status is given to the user as much as possible during the opera
### Loading status progress feedback
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cHaaqZTvzgCZiYUnfNom.png" description="Used when users don't have to wait for a long time to load.">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/cHaaqZTvzgCZiYUnfNom.png" description="Used when users don't have to wait for a long time to load.">
</ImagePreview>
When the operation takes a while (usually more than 2 seconds) to complete, the system should immediately give a reminder, clearly inform the loading status or loading progress bar, and maintain communication with the user.
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/j6XiEx6UUV/676a18a1-bf60-4d93-8f94-55f1882dd13e.png" description="Used when the operation takes a long time to complete, showing the current progress and status of the operation.">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/j6XiEx6UUV/676a18a1-bf60-4d93-8f94-55f1882dd13e.png" description="Used when the operation takes a long time to complete, showing the current progress and status of the operation.">
</ImagePreview>
> Note: If the loading time is long, a cancel operation should be provided.
### Input feedback
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/CCeqqndHQgWnqVqvRptA.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/CCeqqndHQgWnqVqvRptA.png">
</ImagePreview>
During the operation, different verification rules and forms can be used to allow users to find and correct errors in time.
@ -87,7 +103,9 @@ During the operation, different verification rules and forms can be used to allo
#### Popconfirm
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/lPZZxOAakfNhwfrpRPht.png" description="The interaction form is lighter than the full-screen centered mode dialog.">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/lPZZxOAakfNhwfrpRPht.png" description="The interaction form is lighter than the full-screen centered mode dialog.">
</ImagePreview>
When the operation of the target element requires further confirmation by the user, a floating layer prompt is ejected near the target element to inquire the user.
@ -99,20 +117,26 @@ Feedback of the status is given to the user as much as possible during the opera
### Message
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/pqJMJfJGLkYTDbLyJwIg.png" description="When users don't have to wait for a long time to load.">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/pqJMJfJGLkYTDbLyJwIg.png" description="When users don't have to wait for a long time to load.">
</ImagePreview>
The feedback floating layer triggered by an operation is centered on the top and disappears automatically, which is a lightweight reminder that does not interrupt the user's operation.
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/DrKzGoqfLRtrPuZaHUiq.png" alt="Correct Sample" description="Important failure messages suggest using dialog box prompts and telling the reason for the failure.">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/akPBJQUiUWNsULtGOnyx.png" alt="Incorrect Sample" description="Lightweight prompts are not recommended for important failure messages.">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/DrKzGoqfLRtrPuZaHUiq.png" alt="Correct Sample" description="Important failure messages suggest using dialog box prompts and telling the reason for the failure.">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/akPBJQUiUWNsULtGOnyx.png" alt="Incorrect Sample" description="Lightweight prompts are not recommended for important failure messages.">
</ImagePreview>
Since the feedback floating layer has a short presentation time (default 3s), for more important failure notifications, it is recommended to use a dialog box to notify you to avoid missing information.
### Dialog feedback
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/OTzldmUjUgERMbUCHwzt.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/OTzldmUjUgERMbUCHwzt.png">
</ImagePreview>
The feedback floating layer triggered by an operation is located at the center of the page, and the feedback content can be closed by the confirmation or cancel button. The user cannot perform any operation when the feedback layer appears, it's for important feedback.

48
docs/spec/feedback.zh-CN.md
View File

@ -21,7 +21,9 @@ skip: true
#### 警告提示（Alert）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/eviVRYTdxOxOfVENLnxq.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/eviVRYTdxOxOfVENLnxq.png">
</ImagePreview>
是一种非阻碍式的信息展示，它不打断用户的当前操作，一般停留至页面某个位置（优先顶部），非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
@ -31,13 +33,17 @@ skip: true
#### 通知提醒（Notification）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/nElczRfDzAXRZSkpiJBQ.png" description="较为复杂的通知内容时使用。">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/nElczRfDzAXRZSkpiJBQ.png" description="较为复杂的通知内容时使用。">
</ImagePreview>
系统主动推送的重要的全局性通知信息，在系统右上角显示。
#### 徽标数（Badge）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/bVonmOmmkuvybQxTDGTC.png" description="当有 icon 的情况时一般居于 icon 右上角；无 icon 的情况下一般位于标题后侧。">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/bVonmOmmkuvybQxTDGTC.png" description="当有 icon 的情况时一般居于 icon 右上角；无 icon 的情况下一般位于标题后侧。">
</ImagePreview>
用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。
@ -47,7 +53,9 @@ skip: true
#### 气泡卡片（Popover）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/zsPOjQqkiwMnMhIsbDHz.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/zsPOjQqkiwMnMhIsbDHz.png">
</ImagePreview>
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
@ -55,7 +63,9 @@ skip: true
#### 文字提示（Tooltip）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/CKDiGEsluwkRRGqujpgv.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/CKDiGEsluwkRRGqujpgv.png">
</ImagePreview>
用于精确地描述被指向的对象，例如图标、图形、链接等，鼠标移入则显示提示，移出消失，不承载复杂文本和操作。
@ -67,19 +77,25 @@ skip: true
### 加载状态进度反馈
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cHaaqZTvzgCZiYUnfNom.png" description="当用户不必等待较长时间的加载时使用。">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/cHaaqZTvzgCZiYUnfNom.png" description="当用户不必等待较长时间的加载时使用。">
</ImagePreview>
在操作需要一段时间（一般为超过 2 秒）完成时系统应即时给予提醒，明确告知加载的状态或加载进度条，保持与用户的沟通。
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/j6XiEx6UUV/676a18a1-bf60-4d93-8f94-55f1882dd13e.png" description="在操作需要较长时间才能完成时使用，显示该操作的当前进度和状态。">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/j6XiEx6UUV/676a18a1-bf60-4d93-8f94-55f1882dd13e.png" description="在操作需要较长时间才能完成时使用，显示该操作的当前进度和状态。">
</ImagePreview>
> 注：若加载时间较长，应提供取消操作。
### 录入反馈
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/CCeqqndHQgWnqVqvRptA.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/CCeqqndHQgWnqVqvRptA.png">
</ImagePreview>
操作过程中可通过不同的校验规则和形式，让用户及时发现并纠正错误。
@ -87,7 +103,9 @@ skip: true
#### 气泡确认框（Popconfirm）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/lPZZxOAakfNhwfrpRPht.png" description="和全屏居中模态对话框相比，交互形式更轻量。">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/lPZZxOAakfNhwfrpRPht.png" description="和全屏居中模态对话框相比，交互形式更轻量。">
</ImagePreview>
目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
@ -99,20 +117,24 @@ skip: true
### 顶部全局提示反馈（Message）
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/pqJMJfJGLkYTDbLyJwIg.png" description="当用户不必等待较长时间的加载时使用。">
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/pqJMJfJGLkYTDbLyJwIg.png" description="当用户不必等待较长时间的加载时使用。">
通过一个操作引发的反馈浮层位于顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/DrKzGoqfLRtrPuZaHUiq.png" alt="正确示例" description="重要的失败信息建议使用对话框形式提示并告知失败原因。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/akPBJQUiUWNsULtGOnyx.png" alt="错误示例" description="重要的失败信息时不建议使用轻量级提示方式。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/DrKzGoqfLRtrPuZaHUiq.png" alt="正确示例" description="重要的失败信息建议使用对话框形式提示并告知失败原因。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/akPBJQUiUWNsULtGOnyx.png" alt="错误示例" description="重要的失败信息时不建议使用轻量级提示方式。">
</ImagePreview>
由于反馈浮层的展示时长较短（默认 3s），对于比较重要的失败通知，建议改用对话框的形式进行通知，以避免用户遗漏信息。
### 对话框反馈
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/OTzldmUjUgERMbUCHwzt.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/OTzldmUjUgERMbUCHwzt.png">
</ImagePreview>
通过一个操作引发的反馈浮层位于页面中心，反馈内容可通过确认或取消按钮进行关闭，用户在反馈层出现时不可进行任何的操作，用于重要的反馈。

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

@ -50,7 +50,9 @@ The font scale and line height determine the beauty of the dynamics and order of
Ant Design was inspired by the pentatonic scale and natural law to define 10 different font sizes and corresponding line heights.
<ImagePreview>
<img src="https://gw.alipayobjects.com/zos/rmsportal/iFjgfIBExksqCqGMwUlw.png" />
</ImagePreview>
In Ant Design's visual system, our recommended base font size is 14, and its corresponding line height is 22. The choice of the rest of the font scale can be freely defined according to the specific circumstances. It is recommended that in a design system (except for display pages), the choice of font scale should be controlled within 3 to 5 types, and the principle of restraint should be maintained.

4
docs/spec/font.zh-CN.md
View File

@ -78,7 +78,9 @@ Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸
## 字体颜色
<img class="preview-img" align="right" alt="字体颜色" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PdFFQr2NXyUAAAAAAAAAAAAAARQnAQ">
<ImagePreview>
<img class="preview-img" alt="字体颜色" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PdFFQr2NXyUAAAAAAAAAAAAAARQnAQ">
</ImagePreview>
文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。

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

@ -13,7 +13,9 @@ An icon is a graphical representation of meaning. Icons can be used to express a
## System Icons
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png" alt="System Icons">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png" alt="System Icons">
</ImagePreview>
System icons are often used to represent commonly used operations, such as: save, edit, delete. Ant Design also includes icons to represent file types and state.
@ -21,7 +23,9 @@ System icons are often used to represent commonly used operations, such as: save
### Key Contour Lines
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/beTZeZjJBVuhMyTOhebs.png" alt="Ant Design's grid and key contour lines" alt="Key Contour Lines">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/beTZeZjJBVuhMyTOhebs.png" alt="Ant Design's grid and key contour lines" alt="Key Contour Lines">
</ImagePreview>
Contour lines play an important role in making various icons with the same visual effect.
@ -29,23 +33,37 @@ Please make all icons in the 1024×1024 resolution (16×16 64 times).
- [Illustrator tips](https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png)
<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/rxuHAKGEGLuqBJAAhnSm.png" alt="Square contour">
<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/fhkmysGZiTkPVszWHgUy.png" alt="Horizontal rectangle contour">
<ImagePreview>
<img class="preview-img no-padding inline" src="https://gw.alipayobjects.com/zos/rmsportal/rxuHAKGEGLuqBJAAhnSm.png" alt="Square contour">
</ImagePreview>
<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/BiraoJgbXokyzmUFqVuf.png" alt="Circular contour">
<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wgQLwFnPaeEalmmSuBMO.png" alt="Vertical rectangle contour">
<ImagePreview>
<img class="preview-img no-padding inline" src="https://gw.alipayobjects.com/zos/rmsportal/fhkmysGZiTkPVszWHgUy.png" alt="Horizontal rectangle contour">
</ImagePreview>
<ImagePreview>
<img class="preview-img no-padding inline" src="https://gw.alipayobjects.com/zos/rmsportal/BiraoJgbXokyzmUFqVuf.png" alt="Circular contour">
</ImagePreview>
<ImagePreview>
<img class="preview-img no-padding inline" src="https://gw.alipayobjects.com/zos/rmsportal/wgQLwFnPaeEalmmSuBMO.png" alt="Vertical rectangle contour">
</ImagePreview>
### Stroke Weight
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uoNmxXiqKpfoFDdEVjUB.png" alt="Correct example" description="Line thickness is consistently 72px">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cnFYbWzcKaPFSiHcptCF.png" alt="Incorrect example" description="Line thickness is not uniform">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/uoNmxXiqKpfoFDdEVjUB.png" alt="Correct example" description="Line thickness is consistently 72px">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/cnFYbWzcKaPFSiHcptCF.png" alt="Incorrect example" description="Line thickness is not uniform">
</ImagePreview>
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
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tGbuhPmvEJXmOFoYAkPK.png" alt="Correct example" description="The icon's corners are properly rounded">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/JekevTlqdDJQLIQwrppm.png" alt="Incorrect example" description="The icon's corners are not rounded">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/tGbuhPmvEJXmOFoYAkPK.png" alt="Correct example" description="The icon's corners are properly rounded">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/JekevTlqdDJQLIQwrppm.png" alt="Incorrect example" description="The icon's corners are not rounded">
</ImagePreview>
Consistent rounding of corners and sizing of angles is also an important element in maintaining visual unity.
@ -53,27 +71,35 @@ Icons that follow Ant Design should have rounded corners and edges using a 72px
### Visual Correction
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/VghPLyDUdFmjhGJlNxjV.png" alt="Correct example" description="For the intricate “JPG” lettering, an outline is added for readability">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qnzloxRQmvHzHAhWWwCS.png" alt="Incorrect example" description="The text in the icon is crowded and hard to read">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/VghPLyDUdFmjhGJlNxjV.png" alt="Correct example" description="For the intricate “JPG” lettering, an outline is added for readability">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/qnzloxRQmvHzHAhWWwCS.png" alt="Incorrect example" description="The text in the icon is crowded and hard to read">
</ImagePreview>
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
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tIePnIOTXtgzVKbqwucm.png" alt="Correct example" description="Maintains a flat, simple style">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ALNOEelXeFhxUobLqyCq.png" alt="Incorrect example" description="Icons should not have depth nor varying perspectives">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/tIePnIOTXtgzVKbqwucm.png" alt="Correct example" description="Maintains a flat, simple style">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/ALNOEelXeFhxUobLqyCq.png" alt="Incorrect example" description="Icons should not have depth nor varying perspectives">
</ImagePreview>
Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail.
### Naming Conventions
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/NFOvbdbVWeeEqOkdUfVB.png" alt="Naming Conventions">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/NFOvbdbVWeeEqOkdUfVB.png" alt="Naming Conventions">
</ImagePreview>
Uniform naming conventions make finding icons faster and easier. For example, icons with a surrounding outline have a uniform "-o" suffix.
### Icon Sizing
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jAuedlyhNIDyOIZTqbqN.png" alt="Icon Sizing">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jAuedlyhNIDyOIZTqbqN.png" alt="Icon Sizing">
</ImagePreview>
Icons should be scaled according to the text size, according to the Ant Design specification.
@ -81,7 +107,9 @@ For example, icons inline with 12pt font should be 12px in size with 8px of spac
### Color
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LxGLhtnwvCqZWYqGDAAr.png" description="Colors demonstrated - @Black = #000000, @White = #FFFFFF, @Blue-6 = #1890FF" alt="Color">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/LxGLhtnwvCqZWYqGDAAr.png" description="Colors demonstrated - @Black = #000000, @White = #FFFFFF, @Blue-6 = #1890FF" alt="Color">
</ImagePreview>
The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly).
@ -89,7 +117,9 @@ The color of the icon should be consistent the color of the surrounding copy, un
## Business Icons
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EADAnRecKSTxvpxPzKoq.png" alt="Business Icons">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/EADAnRecKSTxvpxPzKoq.png" alt="Business Icons">
</ImagePreview>
Business icons, unlike system icons, do not themselves have functional operations, but rather an abstraction that assists with copywriting. Compared to the system icon, the business icon is more rich in the details of the design, the size of the use of relatively large.
@ -97,12 +127,16 @@ Business icons, unlike system icons, do not themselves have functional operation
### Icon Sizing
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uwAgfciGszhdiVlMSBXK.png" alt="Icon Sizing">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/uwAgfciGszhdiVlMSBXK.png" alt="Icon Sizing">
</ImagePreview>
In normal use, there are 32px (minimum size), 48px and 64px (maximum size) three options.
### Color
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wUxhTxZlHoTxDvneWBWO.png" alt="Color">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/wUxhTxZlHoTxDvneWBWO.png" alt="Color">
</ImagePreview>
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.

56
docs/spec/illustration.en-US.md
View File

@ -35,19 +35,25 @@ We concretized the 4 abstract cornerstones that make up our design strategy; Tec
### Sea Hare Swatch
<img class="preview-img no-padding" align="right" description="Sea Hare's color palette" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*5ZE6RrjW-jQAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="Sea Hare's color palette" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*5ZE6RrjW-jQAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
Sea Hare's color matching system is inspired by Ant Design's application of color palette in scenes. Differing from the UI's color scheme. The color matching system used in illustrations will be relatively more vibrant and flexible. Taking inspiration from Ant Design's basic color palette, we tweaked brightness and tolerance. The result is more efficient and easy to use. Since it originates from Any Design's color palette, it integrates seamlessly with other UI assets.
### Default Asset Colors of Sea Hare
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0Dv9Rrp7GtMAAAAAAAAAAAAAARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0Dv9Rrp7GtMAAAAAAAAAAAAAARQnAQ" />
</ImagePreview>
Through research, we discovered blue and white accounts for a large proportion among enterprise products. We chose Geek Blue as our primary color for its technological, exploration and focused vibes.
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*U5L-RKWlmJcAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*U5L-RKWlmJcAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
Sea Hare's palette combined with Adobe's ternary color picker and mosaic ball, you can easily obtain the default version of the basic color palette.
@ -57,23 +63,33 @@ Sea Hare's palette combined with Adobe's ternary color picker and mosaic ball, y
### Illustrations of People
<img class="preview-img" align="right" alt="Natural head-to-body ratio" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*rm9JRIqTmPgAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="Natural head-to-body ratio" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*rm9JRIqTmPgAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
In view of the natural design principle, we do not recommend using Q version cartoons and overly exaggerated artistic styles. Rather, we recommend a realistic head-to-body ratio.
<br />
<img class="preview-img" align="right" alt="9 variants of common professioal character design" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Zt7BSI2OL7gAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="9 variants of common professioal character design" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Zt7BSI2OL7gAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
Concurrently, we integrated emotions when designing the 9 common professional roles. Fusing some characteristics of the role while radiating vastly different personalities, meeting the needs of varies business requirements.
<br />
<img class="preview-img" align="right" alt="Breakdown of each character" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jUujRJBxU-sAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="Breakdown of each character" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jUujRJBxU-sAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" alt="HiTu skeletal system" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*C3NCT6QHU9QAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="HiTu skeletal system" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*C3NCT6QHU9QAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" alt="Reusing different postures" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NZuwQp_vcIQAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="Reusing different postures" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NZuwQp_vcIQAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
Taking the basic character design, we break down each character and rearrange them to match the desired skeleton structure. This means various postures can be reused and extended.
@ -81,9 +97,13 @@ Taking the basic character design, we break down each character and rearrange th
### Elementary Components
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ph0YSZmq-ekAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ph0YSZmq-ekAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" alt="Elementary components designed for business settings" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z8oxS5ym3PIAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="Elementary components designed for business settings" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z8oxS5ym3PIAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
Memory comes from difference and professionalism from uniformity. Elementary Components refers to some status in the business settings that are constantly shifting and changing. We hope to achieve uniformity while not constraining creativity. To achieve a consistent sense of rhythm, we recommend a 1024\*1024 grid while maintaining a rounded corner with sizes that are multiples of 8.
@ -91,13 +111,21 @@ Memory comes from difference and professionalism from uniformity. Elementary Com
# Usage
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*puHVQJEe-oIAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*puHVQJEe-oIAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*W-PzSadIFeAAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*W-PzSadIFeAAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OJoaQ77tczIAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OJoaQ77tczIAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*IySSSoBaGPYAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*IySSSoBaGPYAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
How do I utilize this wealth of assets? With HiTu's design principles as a guide, I recommend designers to construct a sense of spatial awareness along the Z-axis, dividing the illustration into 3 layers of foreground, middle ground and background. Placing the key elements in the foreground (such as people, elementary components, etc), environment and context in the middle and creating atmosphere in the background. The foreground should also have the highest saturation and visibility, both decreasing in level as the level decreases.

56
docs/spec/illustration.zh-CN.md
View File

@ -35,19 +35,25 @@ title: 图形化
### 海兔色板
<img class="preview-img no-padding" align="right" description="海兔色板" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*5ZE6RrjW-jQAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="海兔色板" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*5ZE6RrjW-jQAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
海兔的色彩配色体系是基于 Ant Design 色板的场景应用，与 UI 色彩体系的应用会有所不同。图形化的配色体系会相对更加的灵活可变。基于 Ant Design 的基础色板我们进行了明度的调整，扩大图形化设计的宽容度，使用选择时候更加高效易用，由于是出自 Ant Design 的色彩体系，和其他 UI 资产完美兼容。
### 海兔默认资产颜色
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0Dv9Rrp7GtMAAAAAAAAAAAAAARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0Dv9Rrp7GtMAAAAAAAAAAAAAARQnAQ" />
</ImagePreview>
通过搜资调研，我们发现在企业级产品中。色彩的使用上蓝色，白色会占很大的比重。我们选取了色板中最具科技感，且代表着探索，钻研感的极客蓝作为我们的主色。
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*U5L-RKWlmJcAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*U5L-RKWlmJcAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
基于 Adobe Color 的三元取色工具，和 3D 立体马赛克球，结合我们自己的海兔色板。可以轻松得到了我们默认版本的基础色板。
@ -57,23 +63,33 @@ title: 图形化
### 人物组件
<img class="preview-img" align="right" alt="基于自然的人物头身比例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*rm9JRIqTmPgAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="基于自然的人物头身比例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*rm9JRIqTmPgAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
基于自然的设计原则，我们不推荐使用 Q 版卡通和过于夸张艺术化的设计风格。相比之下，接近自然真人头人比例的风格更是我们所推荐的。
<br />
<img class="preview-img" align="right" alt="9 种常见职业角色设计" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Zt7BSI2OL7gAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="9 种常见职业角色设计" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Zt7BSI2OL7gAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
同时，我们结合情感化设计，将 9 种常见的职业角色进行人物设计。结合职业本身的一些特质，我们也赋予了他们不同气质特质，来满足各种业务场景的使用。
<br />
<img class="preview-img" align="right" alt="角色设计人物分解" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jUujRJBxU-sAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="角色设计人物分解" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jUujRJBxU-sAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" alt="HiTu 骨骼系统" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*C3NCT6QHU9QAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="HiTu 骨骼系统" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*C3NCT6QHU9QAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" alt="人物姿态复用" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NZuwQp_vcIQAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="人物姿态复用" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NZuwQp_vcIQAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
有了基础的人物设计，我们将人物进行分解，然后搭配设计好的骨骼系统。来为人物增加各种姿态动作的复用和延展。
@ -81,9 +97,13 @@ title: 图形化
### 元素组件
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ph0YSZmq-ekAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ph0YSZmq-ekAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" alt="根据业务场景设计的元素组件" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z8oxS5ym3PIAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" alt="根据业务场景设计的元素组件" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z8oxS5ym3PIAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
记忆点源于与众不同，专业感源于整齐划一。元素组件指代的是业务场景中一些业务元素，状态元素图形化的世界缤纷多变，我们希望在保持统一性的同时不去限时设计者的创意空间，元素组件的设计上，我们为了保持一定的韵律感，推荐设计师在 1024\*1024 的网格中绘制组件，且圆角的大小保持 8 的倍数关系。
@ -91,13 +111,21 @@ title: 图形化
# 设计应用
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*puHVQJEe-oIAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*puHVQJEe-oIAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*W-PzSadIFeAAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*W-PzSadIFeAAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OJoaQ77tczIAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OJoaQ77tczIAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*IySSSoBaGPYAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*IySSSoBaGPYAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
有了丰富的资产组件，我们应该如何使用呢？在 HiTu 的设计使用指引中，我推荐设计者在使用资产的过程中构建 Z 轴向的空间概念，将整幅画面拆分成前景，中景以及背景三个层次，在组件的排放时候，前景凸显重要的元素（如人，核心元素组件等），中间交代所处环境，背景则渲染烘托氛围，在颜色的使用和透明上也是前景的饱和度和透明度最高，逐级降低。

32
docs/spec/invitation.en-US.md
View File

@ -21,17 +21,25 @@ By providing cues for interaction directly on the page we can statically indicat
<br>
<img class="preview-img" align="right" alt="example of Text Invitation" src="https://gw.alipayobjects.com/zos/rmsportal/ZeMSbCHmvWETbssJHRvo.png">
<ImagePreview>
<img class="preview-img" alt="example of Text Invitation" src="https://gw.alipayobjects.com/zos/rmsportal/ZeMSbCHmvWETbssJHRvo.png">
</ImagePreview>
<img class="preview-img" align="right" alt="example of Blank Slate Invitation" src="https://gw.alipayobjects.com/zos/rmsportal/PHxVAFKncyXDCFUJInbB.png">
<ImagePreview>
<img class="preview-img" alt="example of Blank Slate Invitation" src="https://gw.alipayobjects.com/zos/rmsportal/PHxVAFKncyXDCFUJInbB.png">
</ImagePreview>
<img class="preview-img" align="right" alt="example of Unfinished Invitation" src="https://gw.alipayobjects.com/zos/rmsportal/ChvxJAQTwWbqzBnUBLec.png">
<ImagePreview>
<img class="preview-img" alt="example of Unfinished Invitation" src="https://gw.alipayobjects.com/zos/rmsportal/ChvxJAQTwWbqzBnUBLec.png">
</ImagePreview>
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.
<br>
<img class="preview-img" align="right" alt="example 1 of Tour Invitation" description="A few of tour points are provided when the user first logs in. Clicking the 'Got It' button leads the user to the next tour step." src="https://gw.alipayobjects.com/zos/rmsportal/dMrVeJJiaCLzoYfJrJKe.png">
<ImagePreview>
<img class="preview-img" alt="example 1 of Tour Invitation" description="A few of tour points are provided when the user first logs in. Clicking the 'Got It' button leads the user to the next tour step." src="https://gw.alipayobjects.com/zos/rmsportal/dMrVeJJiaCLzoYfJrJKe.png">
</ImagePreview>
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.
@ -47,21 +55,29 @@ Dynamic Invitations engage users at the point of the interaction and guide them
<br>
<img class="preview-img" align="right" alt="example 1 of Hover Invitation" description="During mouse hover on the whole card, the clickable parts turn to blue hypertext." src="https://gw.alipayobjects.com/zos/rmsportal/ejvYAogJXLPqoMUqyvIV.png">
<ImagePreview>
<img class="preview-img" alt="example 1 of Hover Invitation" description="During mouse hover on the whole card, the clickable parts turn to blue hypertext." src="https://gw.alipayobjects.com/zos/rmsportal/ejvYAogJXLPqoMUqyvIV.png">
</ImagePreview>
<img class="preview-img" align="right" alt="example 2 of Hover Invitation" description="During mouse hover, the button of &quot;Select this Template&quot; appears." src="https://gw.alipayobjects.com/zos/rmsportal/umGVwLlIJSmxaQXcjlbh.png">
<ImagePreview>
<img class="preview-img" alt="example 2 of Hover Invitation" description="During mouse hover, the button of &quot;Select this Template&quot; appears." src="https://gw.alipayobjects.com/zos/rmsportal/umGVwLlIJSmxaQXcjlbh.png">
</ImagePreview>
Hover Invitation: Provide an invitation during mouse hover.
<br>
<img class="preview-img" align="right" alt="example of Inference Invitation" description="The system predicts that the user's interest in an article extends to a type of articles, and it provides an invitation after the user click &quot;like&quot;." src="https://gw.alipayobjects.com/zos/rmsportal/iuLdCuNQWCvYuTxxQUuL.png">
<ImagePreview>
<img class="preview-img" alt="example of Inference Invitation" description="The system predicts that the user's interest in an article extends to a type of articles, and it provides an invitation after the user click &quot;like&quot;." src="https://gw.alipayobjects.com/zos/rmsportal/iuLdCuNQWCvYuTxxQUuL.png">
</ImagePreview>
Inference Invitation: Use visual inferences during interaction to cue users as to what the system has inferred about their intent.
<br>
<img class="preview-img" align="right" alt="example of More Content Invitation" description="Use the left or right arrows to switch more content around Modal." src="https://os.alipayobjects.com/rmsportal/sOqYOydwQjLHqph.png">
<ImagePreview>
<img class="preview-img" alt="example of More Content Invitation" description="Use the left or right arrows to switch more content around Modal." src="https://os.alipayobjects.com/rmsportal/sOqYOydwQjLHqph.png">
</ImagePreview>
More Content Invitation: Indicate that there is more content on the page.

32
docs/spec/invitation.zh-CN.md
View File

@ -21,17 +21,25 @@ title: 提供邀请
<br>
<img class="preview-img" align="right" alt="文本邀请示例" src="https://gw.alipayobjects.com/zos/rmsportal/ZeMSbCHmvWETbssJHRvo.png">
<ImagePreview>
<img class="preview-img" alt="文本邀请示例" src="https://gw.alipayobjects.com/zos/rmsportal/ZeMSbCHmvWETbssJHRvo.png">
</ImagePreview>
<img class="preview-img" align="right" alt="白板式邀请示例" src="https://gw.alipayobjects.com/zos/rmsportal/PHxVAFKncyXDCFUJInbB.png">
<ImagePreview>
<img class="preview-img" alt="白板式邀请示例" src="https://gw.alipayobjects.com/zos/rmsportal/PHxVAFKncyXDCFUJInbB.png">
</ImagePreview>
<img class="preview-img" align="right" alt="未完成邀请示例" src="https://gw.alipayobjects.com/zos/rmsportal/ChvxJAQTwWbqzBnUBLec.png">
<ImagePreview>
<img class="preview-img" alt="未完成邀请示例" src="https://gw.alipayobjects.com/zos/rmsportal/ChvxJAQTwWbqzBnUBLec.png">
</ImagePreview>
引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。常见类型：「文本邀请」、「白板式邀请」、「未完成邀请」。
<br>
<img class="preview-img" align="right" alt="漫游探索邀请示例 " description="在用户首次登录时出现少量「探索点」，当用户点击「我知道了」，能快速切换到下一个探索点。" src="https://gw.alipayobjects.com/zos/rmsportal/dMrVeJJiaCLzoYfJrJKe.png">
<ImagePreview>
<img class="preview-img" alt="漫游探索邀请示例 " description="在用户首次登录时出现少量「探索点」，当用户点击「我知道了」，能快速切换到下一个探索点。" src="https://gw.alipayobjects.com/zos/rmsportal/dMrVeJJiaCLzoYfJrJKe.png">
</ImagePreview>
漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是「创口贴」，仅通过它不能解决界面交互的真正问题。
@ -47,21 +55,29 @@ title: 提供邀请
<br>
<img class="preview-img" align="right" alt="悬停邀请示例 1" description="鼠标「悬停」整个卡片时，可被点击部分变为蓝色的「文字链」。" src="https://gw.alipayobjects.com/zos/rmsportal/ejvYAogJXLPqoMUqyvIV.png">
<ImagePreview>
<img class="preview-img" alt="悬停邀请示例 1" description="鼠标「悬停」整个卡片时，可被点击部分变为蓝色的「文字链」。" src="https://gw.alipayobjects.com/zos/rmsportal/ejvYAogJXLPqoMUqyvIV.png">
</ImagePreview>
<img class="preview-img" align="right" alt="悬停邀请示例 2" description="鼠标「悬停」时，出现「选择此模板」的按钮。" src="https://gw.alipayobjects.com/zos/rmsportal/umGVwLlIJSmxaQXcjlbh.png">
<ImagePreview>
<img class="preview-img" alt="悬停邀请示例 2" description="鼠标「悬停」时，出现「选择此模板」的按钮。" src="https://gw.alipayobjects.com/zos/rmsportal/umGVwLlIJSmxaQXcjlbh.png">
</ImagePreview>
悬停邀请：在鼠标悬停期间提供邀请。
<br>
<img class="preview-img" align="right" alt="推论邀请示例" description="用户点击「赞」后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启「精打细算」的邀请。" src="https://gw.alipayobjects.com/zos/rmsportal/iuLdCuNQWCvYuTxxQUuL.png">
<ImagePreview>
<img class="preview-img" alt="推论邀请示例" description="用户点击「赞」后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启「精打细算」的邀请。" src="https://gw.alipayobjects.com/zos/rmsportal/iuLdCuNQWCvYuTxxQUuL.png">
</ImagePreview>
推论邀请：用于交互期间，合理推断用户可能产生的需求。
<br>
<img class="preview-img" align="right" alt="更多内容邀请示例" description="在 Modal 中会出现前后切换的箭头。" src="https://os.alipayobjects.com/rmsportal/sOqYOydwQjLHqph.png">
<ImagePreview>
<img class="preview-img" alt="更多内容邀请示例" description="在 Modal 中会出现前后切换的箭头。" src="https://os.alipayobjects.com/rmsportal/sOqYOydwQjLHqph.png">
</ImagePreview>
更多内容邀请：用于邀请用户查看更多内容。

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

@ -14,7 +14,7 @@ Fitts's Law is an ergonomic principle that ties the size of a target and its con
## Always-Visible Tools
<img class="preview-img" align="right" alt="example of Always-Visible Tools, from Zhihu" description="Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill color of the button changes to a dark color, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked." src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
<img class="preview-img" alt="example of Always-Visible Tools, from Zhihu" description="Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill color of the button changes to a dark color, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked." src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
If an action is critical, expose it directly in the interface and keep it always visible.
@ -24,7 +24,7 @@ If an action is critical, expose it directly in the interface and keep it always
## Hover-Reveal Tools
<img class="preview-img" align="right" alt="example of Hover-Reveal Tools" description="On mouse hover, the tools are revealed." src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
<img class="preview-img" alt="example of Hover-Reveal Tools" description="On mouse hover, the tools are revealed." src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
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.
@ -34,7 +34,7 @@ Instead of making Contextual Tools always visible, we can show them on demand. O
## Toggle-Reveal Tools
<img class="preview-img" align="right" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
<img class="preview-img" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
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.
@ -44,13 +44,13 @@ Toggle a tool mode for an area or page when the actions are not the main flow. T
## Visible Area ≠ Clickable Area
<img class="preview-img" align="right" alt="example of hypertext hot spot" description="When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page." src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
<img class="preview-img" alt="example of hypertext hot spot" description="When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page." src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
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.
<br>
<img class="preview-img" align="right" alt="example of button hot spot" description="Move the mouse near the button and activate the hover state." src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
<img class="preview-img" alt="example of button hot spot" description="Move the mouse near the button and activate the hover state." src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.

10
docs/spec/lightweight.zh-CN.md
View File

@ -13,7 +13,7 @@ title: 简化交互
## 实时可见工具
<img class="preview-img" align="right" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标「指针」变为「手型」，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
<img class="preview-img" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标「指针」变为「手型」，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
@ -23,7 +23,7 @@ title: 简化交互
## 悬停即现工具
<img class="preview-img" align="right" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
<img class="preview-img" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
@ -33,7 +33,7 @@ title: 简化交互
## 开关显示工具
<img class="preview-img" align="right" alt="开关显示工具示例" description="用户点击「修改」后，Table 中「文本」变成「输入框」，开启编辑功能。" src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
<img class="preview-img" alt="开关显示工具示例" description="用户点击「修改」后，Table 中「文本」变成「输入框」，开启编辑功能。" src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
如果某些操作只需要在特定模式时显示，可以通过开关来实现。
@ -43,13 +43,13 @@ title: 简化交互
## 可视区域 ≠ 可点击区域
<img class="preview-img" align="right" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。" src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
<img class="preview-img" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。" src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
<br>
<img class="preview-img" align="right" alt="按钮热区示例" description="鼠标移入按钮附近，即可激活 Hover 状态。" src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
<img class="preview-img" alt="按钮热区示例" description="鼠标移入按钮附近，即可激活 Hover 状态。" src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。

48
docs/spec/navigation.en-US.md
View File

@ -20,13 +20,17 @@ Navigation menu is an effective and user-friendly way for representing site stru
### Top Navigation
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/pWbHrSnmicFxcgmWIFst.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/pWbHrSnmicFxcgmWIFst.png">
</ImagePreview>
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
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/VvajPSfjYcVNiNoxZFVH.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/VvajPSfjYcVNiNoxZFVH.png">
</ImagePreview>
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.
@ -38,7 +42,9 @@ 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.
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ZeChCVQTCUdghxmwqKIO.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ZeChCVQTCUdghxmwqKIO.png">
</ImagePreview>
> Notes:
>
@ -53,25 +59,33 @@ Tabs categorize content, in order to present large amount of information in a li
### Basic
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/dPpWpAhQYzJOWMCeKqhe.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/dPpWpAhQYzJOWMCeKqhe.png">
</ImagePreview>
Control content of the entire page. Usually used for switching among core functionalities.
### Card
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/aJypXYetynQcJxohHefp.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/aJypXYetynQcJxohHefp.png">
</ImagePreview>
Control part of page content. Bordered container naturally separate it from other parts of the page.
### Pill
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/QsgJeCmaQkoRLgGRxUim.png" description="Usually used in a small section, or along with basic and card tabs.">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/QsgJeCmaQkoRLgGRxUim.png" description="Usually used in a small section, or along with basic and card tabs.">
</ImagePreview>
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
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WvnEwzlmauGlKByAxZJH.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WvnEwzlmauGlKByAxZJH.png">
</ImagePreview>
Used for large number of tab options. It can be easily extended to contain an unlimited number of categories.
@ -83,13 +97,17 @@ Steps is a navigation bar guiding users to perform a task following a predefined
### Horizontal
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ugeAGDXQQYkZIbCAGlIP.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ugeAGDXQQYkZIbCAGlIP.png">
</ImagePreview>
Used for more than 2 but less than 5 steps. Title for each step should contain less than 12 characters.
### Vertical
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/PnDNqhBRyWLLLgQSVwvF.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/PnDNqhBRyWLLLgQSVwvF.png">
</ImagePreview>
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.
@ -101,18 +119,24 @@ Used for paginating large amount of content. Users can clearly know the total am
### Basic
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MlxHpEgkFHhIVaxpaiYJ.png" description="Quick page jumper can be used when there are more than 5 pages">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/MlxHpEgkFHhIVaxpaiYJ.png" description="Quick page jumper can be used when there are more than 5 pages">
</ImagePreview>
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
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/GtIWNdAtogjxXJNuuqTE.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/GtIWNdAtogjxXJNuuqTE.png">
</ImagePreview>
Commonly used in a Card or a floating layer.
### Simple
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LCUZrQJyHQXplzEzDrub.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/LCUZrQJyHQXplzEzDrub.png">
</ImagePreview>
Commonly used in a Card or a data table, for no more than 10 pages.

48
docs/spec/navigation.zh-CN.md
View File

@ -20,13 +20,17 @@ skip: true
### 顶部导航菜单
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/pWbHrSnmicFxcgmWIFst.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/pWbHrSnmicFxcgmWIFst.png">
</ImagePreview>
顶部导航菜单的形式就是把超链接连成一行，信息内容层级比较简单明了，适用在浏览性强的门户性质以及比较前台化的应用。一级类目建议在 2-7 个以内。标题长度 4-15 个字符长度为好，中文字长 2-6 个。
### 侧边导航菜单
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/VvajPSfjYcVNiNoxZFVH.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/VvajPSfjYcVNiNoxZFVH.png">
</ImagePreview>
垂直导航较横向的导航更灵活，易于向下扩展， 且允许的标签长度较长。类目数量不限，可配合滚动条使用，适合信息层级多、操作切换频率高的管理性质的应用。
@ -38,7 +42,9 @@ skip: true
面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系。
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ZeChCVQTCUdghxmwqKIO.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ZeChCVQTCUdghxmwqKIO.png">
</ImagePreview>
> 注意事项：
>
@ -53,25 +59,33 @@ skip: true
### 基本样式
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/dPpWpAhQYzJOWMCeKqhe.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/dPpWpAhQYzJOWMCeKqhe.png">
</ImagePreview>
引领整个页面的内容，用于主功能切换。
### 卡片样式
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/aJypXYetynQcJxohHefp.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/aJypXYetynQcJxohHefp.png">
</ImagePreview>
用于页面中局部展示，包裹型容器能很好的和其它内容隔离。
### 胶囊型样式
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/QsgJeCmaQkoRLgGRxUim.png" description="一般用于小版块内，或与基本样式、卡片样式搭配使用。">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/QsgJeCmaQkoRLgGRxUim.png" description="一般用于小版块内，或与基本样式、卡片样式搭配使用。">
</ImagePreview>
用于卡片内的选项切换，经常和其它组件结合使用，让用户快速切换对应内容。
### 竖状样式
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WvnEwzlmauGlKByAxZJH.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WvnEwzlmauGlKByAxZJH.png">
</ImagePreview>
用于分类较多的选项，可以不限制分类数量，具备更好的扩展性。
@ -83,13 +97,17 @@ skip: true
### 横向流程步骤条
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ugeAGDXQQYkZIbCAGlIP.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ugeAGDXQQYkZIbCAGlIP.png">
</ImagePreview>
步骤多于 2 步时使用, 但建议不超过 5 步，每阶段文字长度保持在 12 个字符以内。
### 竖向流程步骤条
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/PnDNqhBRyWLLLgQSVwvF.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/PnDNqhBRyWLLLgQSVwvF.png">
</ImagePreview>
一般居页面左侧，悬浮固定，可追加多行文字描述，适合较多步骤或步骤数动态变化时使用，例如：时间步骤跟踪描述。
@ -101,18 +119,24 @@ skip: true
### 标准样式
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/MlxHpEgkFHhIVaxpaiYJ.png" description="当页数超过 5 页时，可以提供快速跳转页面的功能。">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/MlxHpEgkFHhIVaxpaiYJ.png" description="当页数超过 5 页时，可以提供快速跳转页面的功能。">
</ImagePreview>
当信息条目较多的时候，可以允许用户自定义每页的行数，以提高用户查看和检索信息的效率和灵活性，常与表格、卡片搭配使用。
### 迷你样式
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/GtIWNdAtogjxXJNuuqTE.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/GtIWNdAtogjxXJNuuqTE.png">
</ImagePreview>
一般用于卡片或者浮层。
### 简易样式
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LCUZrQJyHQXplzEzDrub.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/LCUZrQJyHQXplzEzDrub.png">
</ImagePreview>
一般用于卡片或者统计类表格展示，在 10 页之内。

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

@ -11,13 +11,13 @@ When several items are in close proximity to each other, they become one visual
## The relation of vertical spacing
<img class="preview-img" align="right" alt="Example of the different vertical distance" description="In Ant Design, the three different formats are 8px (small spacing), 16px (middle spacing) and 24px (large spacing)." src="https://gw.alipayobjects.com/zos/rmsportal/goazWUHPXsGEDFIGsNlm.png">
<img class="preview-img" alt="Example of the different vertical distance" description="In Ant Design, the three different formats are 8px (small spacing), 16px (middle spacing) and 24px (large spacing)." src="https://gw.alipayobjects.com/zos/rmsportal/goazWUHPXsGEDFIGsNlm.png">
Divide the hierarchy of information through three formats:「small spacing」, 「middle spacing」and「large spacing」
<br>
<img class="preview-img" align="right" alt="Example of added element" description="To make the hierarchy more apparent through adding 「guides」." src="https://gw.alipayobjects.com/zos/rmsportal/XNFCsupiYDBTJFQkmOmv.png">
<img class="preview-img" alt="Example of added element" description="To make the hierarchy more apparent through adding 「guides」." src="https://gw.alipayobjects.com/zos/rmsportal/XNFCsupiYDBTJFQkmOmv.png">
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.
@ -27,12 +27,12 @@ In the case that the three formats are applicable, the hierarchy of information
## Relationship of horizontal spacing
<img class="preview-img" align="right" alt="Example of combination and configuration" src="https://gw.alipayobjects.com/zos/rmsportal/uYvsqAUXNaqURGIhZhxz.png">
<img class="preview-img" alt="Example of combination and configuration" src="https://gw.alipayobjects.com/zos/rmsportal/uYvsqAUXNaqURGIhZhxz.png">
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.
<br>
<img class="preview-img" align="right" alt="Example of checkbox" src="https://gw.alipayobjects.com/zos/rmsportal/ysXfdKqmdDRAimBiKVGS.png">
<img class="preview-img" alt="Example of checkbox" src="https://gw.alipayobjects.com/zos/rmsportal/ysXfdKqmdDRAimBiKVGS.png">
In the inner of a component, the horizontal spacing of elements should differ too.

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

@ -11,13 +11,13 @@ title: 亲密性
## 纵向间距关系
<img class="preview-img" align="right" alt="纵向间距示例" description="在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。" src="https://gw.alipayobjects.com/zos/rmsportal/goazWUHPXsGEDFIGsNlm.png">
<img class="preview-img" alt="纵向间距示例" description="在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。" src="https://gw.alipayobjects.com/zos/rmsportal/goazWUHPXsGEDFIGsNlm.png">
通过「小号间距」、「中号间距」、「大号间距」这三种规格来划分信息层次结构。
<br>
<img class="preview-img" align="right" alt="增加元素示例" description="通过增加「分割线」来拉开层次。" src="https://gw.alipayobjects.com/zos/rmsportal/XNFCsupiYDBTJFQkmOmv.png">
<img class="preview-img" alt="增加元素示例" description="通过增加「分割线」来拉开层次。" src="https://gw.alipayobjects.com/zos/rmsportal/XNFCsupiYDBTJFQkmOmv.png">
在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。
@ -27,12 +27,12 @@ title: 亲密性
## 横向间距关系
<img class="preview-img" align="right" alt="组合排布示例" src="https://gw.alipayobjects.com/zos/rmsportal/uYvsqAUXNaqURGIhZhxz.png">
<img class="preview-img" alt="组合排布示例" src="https://gw.alipayobjects.com/zos/rmsportal/uYvsqAUXNaqURGIhZhxz.png">
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
<br>
<img class="preview-img" align="right" alt="复选框内示例" src="https://gw.alipayobjects.com/zos/rmsportal/ysXfdKqmdDRAimBiKVGS.png">
<img class="preview-img" alt="复选框内示例" src="https://gw.alipayobjects.com/zos/rmsportal/ysXfdKqmdDRAimBiKVGS.png">
在一个组件内部，元素的横向间距也应该有所不同。

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

@ -17,15 +17,21 @@ While there is a possibility of too much feedback (or, more accurately, too much
## Lookup Patterns
<img class="preview-img" align="right" alt="example of Certain Category" description="The keyword of the user query is only displayed in three categories, Topics, Questions and Articles." src="https://gw.alipayobjects.com/zos/rmsportal/czfJRLltwXcsTLlTpytV.png">
<ImagePreview>
<img class="preview-img" alt="example of Certain Category" description="The keyword of the user query is only displayed in three categories, Topics, Questions and Articles." src="https://gw.alipayobjects.com/zos/rmsportal/czfJRLltwXcsTLlTpytV.png">
</ImagePreview>
<img class="preview-img" align="right" alt="example of Uncertain Category" description="The number of categories the keyword of the user query belongs to is uncertain." src="https://gw.alipayobjects.com/zos/rmsportal/XlqFYhYiZtWFNImtRElR.png">
<ImagePreview>
<img class="preview-img" alt="example of Uncertain Category" description="The number of categories the keyword of the user query belongs to is uncertain." src="https://gw.alipayobjects.com/zos/rmsportal/XlqFYhYiZtWFNImtRElR.png">
</ImagePreview>
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.
<br>
<img class="preview-img" align="right" alt="example of Live Search" description="When the user type a search value, the system instantly displays the search results." src="https://gw.alipayobjects.com/zos/rmsportal/clFLKIWTYfHwIiOCUNbw.png">
<ImagePreview>
<img class="preview-img" alt="example of Live Search" description="When the user type a search value, the system instantly displays the search results." src="https://gw.alipayobjects.com/zos/rmsportal/clFLKIWTYfHwIiOCUNbw.png">
</ImagePreview>
Live Suggest: Live Suggest provides real-time search term suggestions for creating a search.
@ -35,7 +41,9 @@ Live Suggest: Live Suggest provides real-time search term suggestions for creati
## Live Suggest
<img class="preview-img" align="right" alt="example of Live Preview" description="Depending on the type of the input from the user, the system provides instant feedback on password strength and validation." src="https://gw.alipayobjects.com/zos/rmsportal/koYsOzKwTcHvjpZULpov.png">
<ImagePreview>
<img class="preview-img" alt="example of Live Preview" description="Depending on the type of the input from the user, the system provides instant feedback on password strength and validation." src="https://gw.alipayobjects.com/zos/rmsportal/koYsOzKwTcHvjpZULpov.png">
</ImagePreview>
Live Preview: A Live Preview gives the users a glimpse beforehand of how the application will interpret their input once submitted.
@ -47,24 +55,36 @@ Progressive Disclosure: When users are faced with a series of steps, it is often
<br>
<img class="preview-img" align="right" alt="example of Loading Button" src="https://gw.alipayobjects.com/zos/rmsportal/cnAnCxfzSwUJeeXIUOIC.png">
<ImagePreview>
<img class="preview-img" alt="example of Loading Button" src="https://gw.alipayobjects.com/zos/rmsportal/cnAnCxfzSwUJeeXIUOIC.png">
</ImagePreview>
<img class="preview-img" align="right" alt="example of Loading Table" src="https://gw.alipayobjects.com/zos/rmsportal/agFZSlgdSOyCznCGXGcE.png">
<ImagePreview>
<img class="preview-img" alt="example of Loading Table" src="https://gw.alipayobjects.com/zos/rmsportal/agFZSlgdSOyCznCGXGcE.png">
</ImagePreview>
<img class="preview-img" align="right" alt="example of Loading List" src="https://gw.alipayobjects.com/zos/rmsportal/tVzqUunjctTxvSMmhSVv.png">
<ImagePreview>
<img class="preview-img" alt="example of Loading List" src="https://gw.alipayobjects.com/zos/rmsportal/tVzqUunjctTxvSMmhSVv.png">
</ImagePreview>
<img class="preview-img" align="right" alt="example of Loading Page" src="https://gw.alipayobjects.com/zos/rmsportal/igxFnUdRHWaBXtTePuFf.png">
<ImagePreview>
<img class="preview-img" alt="example of Loading Page" src="https://gw.alipayobjects.com/zos/rmsportal/igxFnUdRHWaBXtTePuFf.png">
</ImagePreview>
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.
<br>
<img class="preview-img" align="right" alt="example of Click Refresh" src="https://gw.alipayobjects.com/zos/rmsportal/HTDCbBvlFKwsDwmcgzcw.png">
<ImagePreview>
<img class="preview-img" alt="example of Click Refresh" src="https://gw.alipayobjects.com/zos/rmsportal/HTDCbBvlFKwsDwmcgzcw.png">
</ImagePreview>
Click Refresh: Click Refresh notifies the user of fresh content and provides button or tool to refresh.
<br>
<img class="preview-img" align="right" alt="example of Periodic Refresh" description="The added list item turns to be highlighted and get back to normal in a few seconds." src="https://gw.alipayobjects.com/zos/rmsportal/kpUhmRudNWDxNzgUddEp.png">
<ImagePreview>
<img class="preview-img" alt="example of Periodic Refresh" description="The added list item turns to be highlighted and get back to normal in a few seconds." src="https://gw.alipayobjects.com/zos/rmsportal/kpUhmRudNWDxNzgUddEp.png">
</ImagePreview>
Periodic Refresh: Periodic Refresh brings in fresh content on a periodic basis without direct user interaction.

40
docs/spec/reaction.zh-CN.md
View File

@ -17,15 +17,21 @@ title: 即时反应
## 查询模式
<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词，只会在「话题」、「问题」、「文章」这 3 种类目中出现。" src="https://gw.alipayobjects.com/zos/rmsportal/czfJRLltwXcsTLlTpytV.png">
<ImagePreview>
<img class="preview-img" alt="确定类目示例" description="用户所查询的关键词，只会在「话题」、「问题」、「文章」这 3 种类目中出现。" src="https://gw.alipayobjects.com/zos/rmsportal/czfJRLltwXcsTLlTpytV.png">
</ImagePreview>
<img class="preview-img" align="right" alt="不确定类目示例" description="用户所查询的关键词，其所属的类目数量不确定，可能 4 个，可能 5 个，可能更多。" src="https://gw.alipayobjects.com/zos/rmsportal/XlqFYhYiZtWFNImtRElR.png">
<ImagePreview>
<img class="preview-img" alt="不确定类目示例" description="用户所查询的关键词，其所属的类目数量不确定，可能 4 个，可能 5 个，可能更多。" src="https://gw.alipayobjects.com/zos/rmsportal/XlqFYhYiZtWFNImtRElR.png">
</ImagePreview>
自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。根据查询结果分类的多少，可以分为「确定类目」、「不确定类目」两种类型。
<br>
<img class="preview-img" align="right" alt="实时搜索示例" description="用户输入一个搜索值，系统随即显示查询结果。" src="https://gw.alipayobjects.com/zos/rmsportal/clFLKIWTYfHwIiOCUNbw.png">
<ImagePreview>
<img class="preview-img" alt="实时搜索示例" description="用户输入一个搜索值，系统随即显示查询结果。" src="https://gw.alipayobjects.com/zos/rmsportal/clFLKIWTYfHwIiOCUNbw.png">
</ImagePreview>
实时搜索：随着用户输入，实时显示搜索结果。「自动完成」、「实时建议」的近亲。
@ -35,7 +41,9 @@ title: 即时反应
## 反馈模式
<img class="preview-img" align="right" alt="实时预览示例" description="根据用户的输入，提供关于密码强度和有效性的实时反馈。" src="https://gw.alipayobjects.com/zos/rmsportal/koYsOzKwTcHvjpZULpov.png">
<ImagePreview>
<img class="preview-img" alt="实时预览示例" description="根据用户的输入，提供关于密码强度和有效性的实时反馈。" src="https://gw.alipayobjects.com/zos/rmsportal/koYsOzKwTcHvjpZULpov.png">
</ImagePreview>
实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。
@ -47,24 +55,36 @@ title: 即时反应
<br>
<img class="preview-img" align="right" alt="按钮加载示例" src="https://gw.alipayobjects.com/zos/rmsportal/cnAnCxfzSwUJeeXIUOIC.png">
<ImagePreview>
<img class="preview-img" alt="按钮加载示例" src="https://gw.alipayobjects.com/zos/rmsportal/cnAnCxfzSwUJeeXIUOIC.png">
</ImagePreview>
<img class="preview-img" align="right" alt="表格加载示例" src="https://gw.alipayobjects.com/zos/rmsportal/agFZSlgdSOyCznCGXGcE.png">
<ImagePreview>
<img class="preview-img" alt="表格加载示例" src="https://gw.alipayobjects.com/zos/rmsportal/agFZSlgdSOyCznCGXGcE.png">
</ImagePreview>
<img class="preview-img" align="right" alt="富列表加载示例" src="https://gw.alipayobjects.com/zos/rmsportal/tVzqUunjctTxvSMmhSVv.png">
<ImagePreview>
<img class="preview-img" alt="富列表加载示例" src="https://gw.alipayobjects.com/zos/rmsportal/tVzqUunjctTxvSMmhSVv.png">
</ImagePreview>
<img class="preview-img" align="right" alt="页面加载示例" src="https://gw.alipayobjects.com/zos/rmsportal/igxFnUdRHWaBXtTePuFf.png">
<ImagePreview>
<img class="preview-img" alt="页面加载示例" src="https://gw.alipayobjects.com/zos/rmsportal/igxFnUdRHWaBXtTePuFf.png">
</ImagePreview>
进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。常见的进度指示：「按钮加载」、「表格加载」、「富列表加载」、「页面加载」。可根据操作的量级和重要性，展示不同类型的进度指示。
<br>
<img class="preview-img" align="right" alt="点击刷新示例" src="https://gw.alipayobjects.com/zos/rmsportal/HTDCbBvlFKwsDwmcgzcw.png">
<ImagePreview>
<img class="preview-img" alt="点击刷新示例" src="https://gw.alipayobjects.com/zos/rmsportal/HTDCbBvlFKwsDwmcgzcw.png">
</ImagePreview>
点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
<br>
<img class="preview-img" align="right" alt="定时示例" description="新增的列表项「高亮」，持续几秒后恢复正常。" src="https://gw.alipayobjects.com/zos/rmsportal/kpUhmRudNWDxNzgUddEp.png">
<ImagePreview>
<img class="preview-img" alt="定时示例" description="新增的列表项「高亮」，持续几秒后恢复正常。" src="https://gw.alipayobjects.com/zos/rmsportal/kpUhmRudNWDxNzgUddEp.png">
</ImagePreview>
定时刷新：无需用户介入，定时展示新内容。

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

@ -11,10 +11,18 @@ The same elements keep repeating in the whole interface, which not only could lo
## Repetitive elements
<img class="preview-img" align="right" alt="Example of repetitive wireframe" src="https://gw.alipayobjects.com/zos/rmsportal/VkUeJYlTTseLCyUGeXZV.png">
<ImagePreview>
<img class="preview-img" alt="Example of repetitive wireframe" src="https://gw.alipayobjects.com/zos/rmsportal/VkUeJYlTTseLCyUGeXZV.png">
</ImagePreview>
<img class="preview-img" align="right" alt="Example of repetitive design elements" src="https://gw.alipayobjects.com/zos/rmsportal/HXvcTaEbEWWFaQbiEpLg.png">
<ImagePreview>
<img class="preview-img" alt="Example of repetitive design elements" src="https://gw.alipayobjects.com/zos/rmsportal/HXvcTaEbEWWFaQbiEpLg.png">
</ImagePreview>
<img class="preview-img" align="right" alt="Example of repetitive of formats" src="https://gw.alipayobjects.com/zos/rmsportal/DYDGrgkbdFEbcVRuJcjH.png">
<ImagePreview>
<img class="preview-img" alt="Example of repetitive of formats" src="https://gw.alipayobjects.com/zos/rmsportal/DYDGrgkbdFEbcVRuJcjH.png">
</ImagePreview>
<ImagePreview>
The repetitive element may be a thick rule(line), a wireframe, color, design elements, particular format, spatial relationships, etc.
</ImagePreview>

12
docs/spec/repetition.zh-CN.md
View File

@ -11,10 +11,16 @@ title: 重复
## 重复元素
<img class="preview-img" align="right" alt="线框重复示例" src="https://gw.alipayobjects.com/zos/rmsportal/VkUeJYlTTseLCyUGeXZV.png">
<ImagePreview>
<img class="preview-img" alt="线框重复示例" src="https://gw.alipayobjects.com/zos/rmsportal/VkUeJYlTTseLCyUGeXZV.png">
</ImagePreview>
<img class="preview-img" align="right" alt="设计要素重复示例" src="https://gw.alipayobjects.com/zos/rmsportal/HXvcTaEbEWWFaQbiEpLg.png">
<ImagePreview>
<img class="preview-img" alt="设计要素重复示例" src="https://gw.alipayobjects.com/zos/rmsportal/HXvcTaEbEWWFaQbiEpLg.png">
</ImagePreview>
<img class="preview-img" align="right" alt="文案格式重复示例" src="https://gw.alipayobjects.com/zos/rmsportal/DYDGrgkbdFEbcVRuJcjH.png">
<ImagePreview>
<img class="preview-img" alt="文案格式重复示例" src="https://gw.alipayobjects.com/zos/rmsportal/DYDGrgkbdFEbcVRuJcjH.png">
</ImagePreview>
重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。

22
docs/spec/research-empty.zh-CN.md
View File

@ -36,8 +36,10 @@ title: 空状态
### Do&Don’t
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Bh_yRKPOByUAAAAAAAAAAABkARQnAQ" alt="正确示范" description="展示明确空状态提示。">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*yiIXR4u8s2wAAAAAAAAAAABkARQnAQ" alt="错误示范" description="空状态没有任何提示。">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Bh_yRKPOByUAAAAAAAAAAABkARQnAQ" alt="正确示范" description="展示明确空状态提示。">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*yiIXR4u8s2wAAAAAAAAAAABkARQnAQ" alt="错误示范" description="空状态没有任何提示。">
</ImagePreview>
---
@ -45,25 +47,33 @@ title: 空状态
### 新手引导
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*UyVCTaiJ3icAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*UyVCTaiJ3icAAAAAAAAAAABkARQnAQ">
</ImagePreview>
一般来说，新用户希望空状态具有帮助说明和推荐操作。首次使用应用或功能场景的空状态非常有用，因为它向用户展示了该功能和流程，并且可以帮助用户快速上手。为了帮助首次使用新用户，空状态可以使用功能引导、帮助文档等方式填充原本为空的页面。
#### 使用引导变形
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Pf8HSa477DQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Pf8HSa477DQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
使用引导由状态提示、帮助引导、建议操作三个部分组成，设计时可根据业务流程选择模块来构成页面和变形。针对处于复杂流程中某一环的空状态页面，也可提供流程引导模块帮助用户全局理解操作流程，同时可提供文字按钮进行流程相关的快捷操作。
### 完成或清空
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SIZBTJs3O4kAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SIZBTJs3O4kAAAAAAAAAAABkARQnAQ">
</ImagePreview>
这种空状态是用户自愿从功能上删除数据的情况。例如，客户完成了任务清单上的所有项目，阅读了所有通知。一般此类场景不需要进行操作引导，只需要用图形元素或提示信息进行空状态说明。
### 无数据
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*utf3Qr-9VssAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*utf3Qr-9VssAAAAAAAAAAABkARQnAQ">
</ImagePreview>
内容区域无数据的场景使用，由图形元素、提示信息、建议操作三类元素组合展示，根据使用场景决定是否提供建议操作。

28
docs/spec/research-exception.zh-CN.md
View File

@ -38,7 +38,9 @@ title: 异常页
### 异常页
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OIo9TYjVhAEAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OIo9TYjVhAEAAAAAAAAAAABkARQnAQ">
</ImagePreview>
当页面出现异常时展示，其包含以下要素：
@ -52,7 +54,9 @@ title: 异常页
#### 模板 - 404
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tVUkTr052wUAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tVUkTr052wUAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候用**
@ -60,7 +64,9 @@ title: 异常页
#### 模板 - 403
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*j5LCQabCiz8AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*j5LCQabCiz8AAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候用**
@ -68,7 +74,9 @@ title: 异常页
#### 模板 - 500
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PRRMRY9cMPIAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PRRMRY9cMPIAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候用**
@ -76,7 +84,9 @@ title: 异常页
#### 模板 - 浏览器不兼容
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*bowLQ7DhaKsAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*bowLQ7DhaKsAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候用**
@ -84,7 +94,9 @@ title: 异常页
<br>
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PpLRQb0Rc5gAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PpLRQb0Rc5gAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**设计建议**
@ -96,7 +108,9 @@ title: 异常页
### 加载失败
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NfSZSb3jGl8AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NfSZSb3jGl8AAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候用**

82
docs/spec/research-form.zh-CN.md
View File

@ -43,20 +43,26 @@ title: 表单页
在表单页中组织呈现各表单项时要注意简洁表达，高效准确，避免增加用户录入信息的成本。
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*k9DyRYLzjcoAAAAAAAAAAABkARQnAQ" alt="错误示范" />
<ImagePreview>
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*k9DyRYLzjcoAAAAAAAAAAABkARQnAQ" alt="错误示范" />
</ImagePreview>
一个表单页中针对同一种内容类型的表单项不要使用不同的组件或表现形式，会增加用户理解成本。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*A0EBQ6eAkiwAAAAAAAAAAABkARQnAQ" alt="正确示范" />
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*V56PRpofMRUAAAAAAAAAAABkARQnAQ" alt="错误示范" />
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*A0EBQ6eAkiwAAAAAAAAAAABkARQnAQ" alt="正确示范" />
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*V56PRpofMRUAAAAAAAAAAABkARQnAQ" alt="错误示范" />
</ImagePreview>
表单项的标题、提示不要使用不易理解的词汇或过长，造成理解成本，如不可避免使用少见词汇，可使用帮助说明等元素辅助设计。
<br />
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EC9uR6LiI0IAAAAAAAAAAABkARQnAQ" alt="错误示范" />
<ImagePreview>
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EC9uR6LiI0IAAAAAAAAAAABkARQnAQ" alt="错误示范" />
</ImagePreview>
预填提示避免正确的废话，例如一个叫姓名的表单项输入提示是“请输入姓名”。
@ -76,7 +82,9 @@ title: 表单页
#### 模板 - 基础表单
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*c7b6TpKWl-cAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*c7b6TpKWl-cAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
**什么时候用**
@ -88,7 +96,9 @@ title: 表单页
#### 模板 - 基础分步表单
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E8wRRpLbdyoAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E8wRRpLbdyoAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
**什么时候用**
@ -96,7 +106,9 @@ title: 表单页
#### 模板 - 分组表单
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*k6kGSLGZsT0AAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*k6kGSLGZsT0AAAAAAAAAAABkARQnAQ" />
</ImagePreview>
**什么时候用**
@ -106,31 +118,41 @@ title: 表单页
**什么时候用**
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NLEeSLhLA3EAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NLEeSLhLA3EAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
动态增减：建议条目表单数 ≤3 项，并且每个输入框不需要单独的标题使用。
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PvoTSbqKywEAAAAAAAAAAABkARQnAQ"/>
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PvoTSbqKywEAAAAAAAAAAABkARQnAQ"/>
</ImagePreview>
可编辑表格：建议条目表单数 2 ~ 5 项 时使用，以使得每行内容可被完整呈现。
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DWlCQazb-HQAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DWlCQazb-HQAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
折叠面板编辑：建议条目表单数在 6 ~ 8 项 时使用。
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ttDGTLid8M4AAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ttDGTLid8M4AAAAAAAAAAABkARQnAQ" />
</ImagePreview>
抽屉编辑：建议条目表单表单数 >8 项 时使用。
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*p_wLTJEYOBgAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*p_wLTJEYOBgAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
规则树：应用于规则编辑场景。
@ -140,7 +162,9 @@ title: 表单页
#### 模板 - 设置
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*n9zkSKrDU8MAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*n9zkSKrDU8MAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
**什么时候用**
@ -161,13 +185,17 @@ title: 表单页
#### [模板 - 登录](https://preview.pro.ant.design/user/login)
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ba6DR5U23nAAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ba6DR5U23nAAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
Ant Design 标准登录模板
#### [模板 - 注册](https://preview.pro.ant.design/user/register)
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6U_gQ6MbrSYAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6U_gQ6MbrSYAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
Ant Design 标准注册模板
@ -184,33 +212,45 @@ Ant Design 标准注册模板
#### 基础布局
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lacoSZduvVQAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lacoSZduvVQAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
在一个区域内从上到下单列布局，引导用户纵向阅读，据[研究](https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php)这是能够最高效完成任务的布局方式。
#### 弱分组
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E7YuRo094e0AAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E7YuRo094e0AAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Nd_nQLmFQQwAAAAAAAAAAABkARQnAQ" alt="错误示范" description="为避免和弱分组布局的阅读顺序混淆，一个区域内禁用多列表单。" />
<ImagePreview>
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Nd_nQLmFQQwAAAAAAAAAAABkARQnAQ" alt="错误示范" description="为避免和弱分组布局的阅读顺序混淆，一个区域内禁用多列表单。" />
</ImagePreview>
在空间有限时，较短宽度且具有相关性的表单项可多个组合在一行中，形成分组的暗示。
#### 区域内分组
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*eU8dRZUTEM8AAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*eU8dRZUTEM8AAAAAAAAAAABkARQnAQ" />
</ImagePreview>
当一个区域中内容较多且可被分类归纳时，可通过区分标题来进行区域内分组。
#### 卡片分组
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VPEZRLBm1zwAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VPEZRLBm1zwAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
当一个页面中内容众多（通常大于两屏）且可被分类归纳时，可通过卡片分组来承载，每个卡片需要包含一个大标题。
#### 判断布局方式
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DoKmSYGaYtYAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DoKmSYGaYtYAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
关于使用何种布局方式的判断，和[详情页](/docs/spec/detail-page#%E8%AE%BE%E8%AE%A1%E5%BB%BA%E8%AE%AE)类似，应从信息的复杂度和关联性两个维度去梳理。随后可选择相匹配的模板，进行页面快速搭建。

32
docs/spec/research-list.zh-CN.md
View File

@ -38,19 +38,25 @@ title: 列表页
#### 单列布局
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*c0iNQIBusPMAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*c0iNQIBusPMAAAAAAAAAAABkARQnAQ">
</ImagePreview>
从上往下堆叠，数据过滤模块在最上方，过滤数据后，用户再由总体到具体的的浏览逻辑理解和分析。
#### 双栏布局
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*h8MsSr8UXCEAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*h8MsSr8UXCEAAAAAAAAAAABkARQnAQ">
</ImagePreview>
将数据过滤模块放置在侧栏，当过滤条件过多，横向空间充裕时使用。
#### [模版 - 查询表格](https://preview.pro.ant.design/list/table-list)
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*uAGRTY5EMvIAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*uAGRTY5EMvIAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候使用**
@ -58,7 +64,9 @@ title: 列表页
#### 模版 - 标准列表
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3KMbRrbjvzkAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3KMbRrbjvzkAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候使用**
@ -66,7 +74,9 @@ title: 列表页
#### [模板 - 卡片列表](https://preview.pro.ant.design/list/card-list)
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*coEVT7uElCUAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*coEVT7uElCUAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候使用**
@ -74,7 +84,9 @@ title: 列表页
#### 模版 - 搜索列表
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*yW4QQKNi_0QAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*yW4QQKNi_0QAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候使用**
@ -86,7 +98,9 @@ title: 列表页
#### 模版 - 成员管理
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*aJxDR6oP19gAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*aJxDR6oP19gAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候使用**
@ -100,7 +114,9 @@ title: 列表页
#### 批量操作
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NvPKR5HZQ9MAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NvPKR5HZQ9MAAAAAAAAAAABkARQnAQ">
</ImagePreview>
页级的批量操作影响整个页面，可布置于页底。

44
docs/spec/research-message-and-feedback.zh-CN.md
View File

@ -29,7 +29,9 @@ title: 消息与反馈
#### 留在原地
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*qQ8NTKMH-2IAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*qQ8NTKMH-2IAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**对话框 Modal**
@ -37,7 +39,9 @@ title: 消息与反馈
####
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NPVGQr6f5-4AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NPVGQr6f5-4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
**全局提示 Message**
@ -45,7 +49,9 @@ title: 消息与反馈
#### 跳转
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0EdyRa7WeUAAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0EdyRa7WeUAAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**独占式 Inline Text & Illustration**
@ -54,7 +60,9 @@ title: 消息与反馈
####
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*524fSKE97wYAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*524fSKE97wYAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**全局提示 Message**
@ -64,7 +72,9 @@ title: 消息与反馈
#### 留在原地
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*S03WS5uHqDsAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*S03WS5uHqDsAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**对话框 Model**
@ -72,7 +82,9 @@ title: 消息与反馈
####
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*4sHLQowCs6IAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*4sHLQowCs6IAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**警告提示 Alert**
@ -80,7 +92,9 @@ title: 消息与反馈
####
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qg51Sq2A_M4AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qg51Sq2A_M4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
**表单校验提示**
@ -90,7 +104,9 @@ title: 消息与反馈
####
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QeWqTIWqrWEAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QeWqTIWqrWEAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**通知提醒框 Notification**
@ -99,7 +115,9 @@ title: 消息与反馈
#### 跳转
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*7ES2TrY6UJgAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*7ES2TrY6UJgAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**独占式 Inline Text & Illustration**
@ -108,7 +126,9 @@ title: 消息与反馈
### 后台操作
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*owL_SK1xmggAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*owL_SK1xmggAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**通知提醒框 Notification**
@ -117,7 +137,9 @@ title: 消息与反馈
####
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*IGpqRbPGZxQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*IGpqRbPGZxQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**通知中心**

73
docs/spec/research-navigation.zh-CN.md
View File

@ -72,7 +72,9 @@ title: 导航
## 类型
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*MU2BQpS51mMAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*MU2BQpS51mMAAAAAAAAAAABkARQnAQ">
</ImagePreview>
正确理解和使用导航组件对产品全局体验至关重要。
@ -98,7 +100,9 @@ title: 导航
#### 侧边导航
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*fNW0Rak8sL8AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*fNW0Rak8sL8AAAAAAAAAAABkARQnAQ">
</ImagePreview>
- 很多菜单时使用，建议菜单多于 6 项时使用；
@ -108,7 +112,9 @@ title: 导航
#### 顶部导航
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*MmmnTKl0hO8AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*MmmnTKl0hO8AAAAAAAAAAABkARQnAQ">
</ImagePreview>
- 各菜单权重常常与排列顺序呈正相关，即排列顺序影响用户使用频次；
@ -118,9 +124,10 @@ title: 导航
#### 弹出式导航
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8lgCQb8copwAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_k8wR4PoOSsAAAAAAAAAAABkARQnAQ" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8lgCQb8copwAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_k8wR4PoOSsAAAAAAAAAAABkARQnAQ" alt="错误示范">
</ImagePreview>
用于拓展导航承载层级，适用于大型网站。
@ -134,7 +141,9 @@ title: 导航
#### 实用工具
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*UXcoSYBXgOMAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*UXcoSYBXgOMAAAAAAAAAAABkARQnAQ">
</ImagePreview>
通常放在网站的右上角，是一种习惯用法，用户习惯在这个位置找到这些内容。
@ -154,7 +163,9 @@ title: 导航
• 语言切换
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DgCoRI0aFLcAAAAAAAAAAABkARQnAQ" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DgCoRI0aFLcAAAAAAAAAAABkARQnAQ" alt="错误示范">
</ImagePreview>
**不要将页面内的操作放到实用工具中。**
@ -166,17 +177,23 @@ title: 导航
> 此处的数据库是一种信息架构形式，各页面内容独立，但都遵循一致的形式/格式。
<ImagePreview>
<img class="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jYG0T7S-SjsAAAAAAAAAAABkARQnAQ">
</ImagePreview>
#### 沉浸式导航
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*vABzS5JNgocAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*vABzS5JNgocAAAAAAAAAAABkARQnAQ">
</ImagePreview>
用于处理较为复杂或需要较大工作空间的任务。
#### 多级站点导航
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mXw5TIVLL-sAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mXw5TIVLL-sAAAAAAAAAAABkARQnAQ">
</ImagePreview>
- 菜单数量较多的子站点使用；
@ -188,31 +205,41 @@ title: 导航
#### 页头
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ah4HQ6gPheQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ah4HQ6gPheQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
页头位于页内容上方，主要作用是申明页面主题、页内信息导航、页面级内容操作。
#### Tree 树型控件
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PJ2fTKBEZIoAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PJ2fTKBEZIoAAAAAAAAAAABkARQnAQ">
</ImagePreview>
页面内多层次的结构展示。
#### 锚点
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*d6eDQZy-6gkAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*d6eDQZy-6gkAAAAAAAAAAABkARQnAQ">
</ImagePreview>
在各个页面分区之间跳转，当平铺呈现的内容过长时使用。
#### 回到顶部
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-QkOT5KrcDwAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-QkOT5KrcDwAAAAAAAAAAABkARQnAQ">
</ImagePreview>
快速回到页面顶部。
#### 走马灯
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gVZZQIz6yw4AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gVZZQIz6yw4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
循环播放一系列内容。
@ -224,13 +251,17 @@ title: 导航
#### 面包屑
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QcmiTLXUH1oAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QcmiTLXUH1oAAAAAAAAAAABkARQnAQ">
</ImagePreview>
反映当前页面在网站结构中的位置，在少于三个层级时无需展示，此时的全局导航能直接呈现位置。用户可通过面包屑返回上级页面。
#### 返回按钮
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*z1XdRrwsqgQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*z1XdRrwsqgQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**一般标题会和面包屑一起出现，有面包屑时标题默认不推荐使用返回按钮。**
@ -240,7 +271,9 @@ title: 导航
#### 步骤条
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jhNXQL5oRaMAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jhNXQL5oRaMAAAAAAAAAAABkARQnAQ">
</ImagePreview>
按照预先定义的顺序引导用户一步一步前后移动。
@ -254,7 +287,9 @@ title: 导航
#### 上一篇下一篇
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*5Es3S4HJvrEAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*5Es3S4HJvrEAAAAAAAAAAABkARQnAQ">
</ImagePreview>
协助我们移动到其他关系紧密的网页。

42
docs/spec/research-result.zh-CN.md
View File

@ -43,30 +43,40 @@ title: 结果页
## 设计建议
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*98B4QKjg-QoAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EgnGQ4zImuMAAAAAAAAAAABkARQnAQ" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*98B4QKjg-QoAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EgnGQ4zImuMAAAAAAAAAAABkARQnAQ" alt="错误示范">
</ImagePreview>
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lVo2RKb6mL4AAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*4RFCTLatKrcAAAAAAAAAAABkARQnAQ" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lVo2RKb6mL4AAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*4RFCTLatKrcAAAAAAAAAAABkARQnAQ" alt="错误示范">
</ImagePreview>
标题构成建议为「对象+动作+结果/状态」或「动作+结果/状态」。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*r7UFSLbqTdYAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zXk0SI4qqYMAAAAAAAAAAABkARQnAQ" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*r7UFSLbqTdYAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zXk0SI4qqYMAAAAAAAAAAABkARQnAQ" alt="错误示范">
</ImagePreview>
操作引导建议不超过 2 项，过多操作会对用户选择造成困扰。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*9gvmRq3RmnQAAAAAAAAAAABkARQnAQ" alt="正确示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*9gvmRq3RmnQAAAAAAAAAAABkARQnAQ" alt="正确示范">
</ImagePreview>
轻量的反馈不建议使用结果页，可以使用全局提示、警告提示、通知提醒框等交互方式，详情参考反馈类设计指南。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JY1kR4qIR1wAAAAAAAAAAABkARQnAQ" alt="正确示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JY1kR4qIR1wAAAAAAAAAAABkARQnAQ" alt="正确示范">
</ImagePreview>
若结果状态为成功时，可在主按钮上告知用户几秒后自动跳转。
@ -74,7 +84,9 @@ title: 结果页
### 基础布局
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PQotS7GJC1gAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PQotS7GJC1gAAAAAAAAAAABkARQnAQ">
</ImagePreview>
结果页可提供以下内容：
@ -88,19 +100,25 @@ title: 结果页
#### 模板 - 基础结果页
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*uXFNR4eef2oAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*uXFNR4eef2oAAAAAAAAAAABkARQnAQ">
</ImagePreview>
显示结果状态并引导用户进行下一步操作。
#### 模板 - 复杂结果页
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SWabTZptxEcAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SWabTZptxEcAAAAAAAAAAABkARQnAQ">
</ImagePreview>
除结果状态和引导操作等基础信息外，同时展示相关推荐、流程进度、错误详情等信息。
#### 补充信息类型
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*avS5TZcMawwAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*avS5TZcMawwAAAAAAAAAAABkARQnAQ">
</ImagePreview>
## 延伸阅读

13
docs/spec/research-workbench.zh-CN.md
View File

@ -28,6 +28,7 @@ title: 工作台
<div>
<h4>降低记忆负载</h4>
<p>理解用户再次访问的核心目标，为可能的目的地提供最短导航路径。</p>
</div>
</div>
</div>
@ -35,7 +36,9 @@ title: 工作台
#### 模板 - 工作台
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8s67TL62WEoAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8s67TL62WEoAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候使用**
@ -54,7 +57,9 @@ title: 工作台
#### 模板 - 新手引导
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*LQBmQauTEAsAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*LQBmQauTEAsAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候使用**
@ -90,7 +95,9 @@ title: 工作台
#### 按照使用频次布置内容
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1tfiR5-xKUQAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1tfiR5-xKUQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
用户在日常工作中最常使用的内容，按照使用频次将内容布置以下各区域。

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

@ -15,18 +15,20 @@ Solve most of problems on the same page and avoid a new one, because the page re
## Overlays
<img class="preview-img" align="right" alt="good example" description="As the user clicks delete, a success message and an undo button are displayed. When the user does nothing within one minute or click the undo button, the message and the button disappear." src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png" good>
<img class="preview-img" align="right" alt="good example (special case)" description="If the undo operation is invalid, the Popconfirm is displayed after clicking the delete button. The user can stay on the page to double confirm." src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png" good>
<img class="preview-img" align="right" alt="bad example" description="
Abusing the Modal can neither bring the context into the popup, which is prone to interrupt the user's flow, nor allow the user to undo the change." src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" bad>
<ImagePreview>
<img class="preview-img good" alt="good example" description="As the user clicks delete, a success message and an undo button are displayed. When the user does nothing within one minute or click the undo button, the message and the button disappear." src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png">
<img class="preview-img good" alt="good example (special case)" description="If the undo operation is invalid, the Popconfirm is displayed after clicking the delete button. The user can stay on the page to double confirm." src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png">
<img class="preview-img bad" alt="bad example" description="
Abusing the Modal can neither bring the context into the popup, which is prone to interrupt the user's flow, nor allow the user to undo the change." src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png">
</ImagePreview>
Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.
<br>
<img class="preview-img" align="right" alt="example of Detail Overlay " description="Click the eye icon to see more information." src="https://gw.alipayobjects.com/zos/rmsportal/yagQVxwdzuXOulzqdxEq.png">
<ImagePreview>
<img class="preview-img" alt="example of Detail Overlay " description="Click the eye icon to see more information." src="https://gw.alipayobjects.com/zos/rmsportal/yagQVxwdzuXOulzqdxEq.png">
</ImagePreview>
Detail Overlay: Allows an overlay to present additional information when the user clicks or hovers over a link or section of content.
@ -34,7 +36,9 @@ Detail Overlay: Allows an overlay to present additional information when the use
<br>
<img class="preview-img" align="right" alt="example of Input Overlay" description="Click the edit icon to trigger the Input Overlay. Click the outside of it to preserve the input and close it." src="https://gw.alipayobjects.com/zos/rmsportal/lLhJKFcaJnIPxFCjvUKY.png">
<ImagePreview>
<img class="preview-img" alt="example of Input Overlay" description="Click the edit icon to trigger the Input Overlay. Click the outside of it to preserve the input and close it." src="https://gw.alipayobjects.com/zos/rmsportal/lLhJKFcaJnIPxFCjvUKY.png">
</ImagePreview>
Input Overlay: Let the user enter small amounts of text on the overlay.
@ -44,13 +48,17 @@ Input Overlay: Let the user enter small amounts of text on the overlay.
## Inlays
<img class="preview-img" align="right" alt="example of List Inlay" src="https://gw.alipayobjects.com/zos/rmsportal/TgoEocLVYXfMKzFGwJar.png">
<ImagePreview>
<img class="preview-img" alt="example of List Inlay" src="https://gw.alipayobjects.com/zos/rmsportal/TgoEocLVYXfMKzFGwJar.png">
</ImagePreview>
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.
<br>
<img class="preview-img" align="right" alt="example of Tabs" src="https://gw.alipayobjects.com/zos/rmsportal/CKwQXddFJnJHsyFAifsg.png">
<ImagePreview>
<img class="preview-img" alt="example of Tabs" src="https://gw.alipayobjects.com/zos/rmsportal/CKwQXddFJnJHsyFAifsg.png">
</ImagePreview>
Tabs: Provides additional panels of information accessible by tab controls.
@ -72,18 +80,24 @@ It has long been common practice on the Web to turn each step into a separate pa
<br>
<img class="preview-img" align="right" alt="example of Responsive Disclosure" src="https://gw.alipayobjects.com/zos/rmsportal/OIxzAapqoGokUSIuFOWC.png">
<ImagePreview>
<img class="preview-img" alt="example of Responsive Disclosure" src="https://gw.alipayobjects.com/zos/rmsportal/OIxzAapqoGokUSIuFOWC.png">
</ImagePreview>
Responsive Disclosure: Make the experience for selecting painless by providing disclosures as quickly as possible, and doing it all in a single-page interface.
<br>
<img class="preview-img" align="right" alt="example of Configurator Process" src="https://gw.alipayobjects.com/zos/rmsportal/nVgSYAiXfKGMHxkjypPp.png">
<ImagePreview>
<img class="preview-img" alt="example of Configurator Process" src="https://gw.alipayobjects.com/zos/rmsportal/nVgSYAiXfKGMHxkjypPp.png">
</ImagePreview>
Configurator Process: Provides a configurator that allows users to help them accomplish the task or build their own product.
<br>
<img class="preview-img" align="right" alt="example of Dialog Overlay Process" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">
<ImagePreview>
<img class="preview-img" alt="example of Dialog Overlay Process" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">
</ImagePreview>
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.

38
docs/spec/stay.zh-CN.md
View File

@ -15,17 +15,19 @@ title: 足不出户
## 覆盖层
<img class="preview-img" align="right" alt="推荐示例" description="用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。" src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png" good>
<img class="preview-img" align="right" alt="推荐示例" description="特例：在执行某些无法「撤销」的操作时，可以点击「删除」后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png" good>
<img class="preview-img" align="right" alt="不推荐示例" description="滥用 Modal 进行二次确认，就像「狼来了」一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。" src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" bad>
<ImagePreview>
<img class="preview-img good" alt="推荐示例" description="用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。" src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png">
<img class="preview-img good" alt="推荐示例" description="特例：在执行某些无法「撤销」的操作时，可以点击「删除」后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png">
<img class="preview-img bad" alt="不推荐示例" description="滥用 Modal 进行二次确认，就像「狼来了」一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。" src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" >
</ImagePreview>
二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可。
<br>
<img class="preview-img" align="right" alt="详情覆盖层示例" description="通过「点击」图标查看更多详情信息。" src="https://gw.alipayobjects.com/zos/rmsportal/yagQVxwdzuXOulzqdxEq.png">
<ImagePreview>
<img class="preview-img" alt="详情覆盖层示例" description="通过「点击」图标查看更多详情信息。" src="https://gw.alipayobjects.com/zos/rmsportal/yagQVxwdzuXOulzqdxEq.png">
</ImagePreview>
详情覆盖层：一般在列表中，通过用户「悬停」/「点击」某个区块，在当前页加载该条列表项的更多详情信息。
@ -33,7 +35,9 @@ title: 足不出户
<br>
<img class="preview-img" align="right" alt="输入覆盖层示例" description="鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。" src="https://gw.alipayobjects.com/zos/rmsportal/lLhJKFcaJnIPxFCjvUKY.png">
<ImagePreview>
<img class="preview-img" alt="输入覆盖层示例" description="鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。" src="https://gw.alipayobjects.com/zos/rmsportal/lLhJKFcaJnIPxFCjvUKY.png">
</ImagePreview>
输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。
@ -43,13 +47,17 @@ title: 足不出户
## 嵌入层
<img class="preview-img" align="right" alt="列表嵌入层示例" src="https://gw.alipayobjects.com/zos/rmsportal/TgoEocLVYXfMKzFGwJar.png">
<ImagePreview>
<img class="preview-img" alt="列表嵌入层示例" src="https://gw.alipayobjects.com/zos/rmsportal/TgoEocLVYXfMKzFGwJar.png">
</ImagePreview>
列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
<br>
<img class="preview-img" align="right" alt="标签页示例" src="https://gw.alipayobjects.com/zos/rmsportal/CKwQXddFJnJHsyFAifsg.png">
<ImagePreview>
<img class="preview-img" alt="标签页示例" src="https://gw.alipayobjects.com/zos/rmsportal/CKwQXddFJnJHsyFAifsg.png">
</ImagePreview>
标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。
@ -71,18 +79,24 @@ title: 足不出户
<br>
<img class="preview-img" align="right" alt="渐进式展现示例" src="https://gw.alipayobjects.com/zos/rmsportal/OIxzAapqoGokUSIuFOWC.png">
<ImagePreview>
<img class="preview-img" alt="渐进式展现示例" src="https://gw.alipayobjects.com/zos/rmsportal/OIxzAapqoGokUSIuFOWC.png">
</ImagePreview>
渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
<br>
<img class="preview-img" align="right" alt="配置程序示例" src="https://gw.alipayobjects.com/zos/rmsportal/nVgSYAiXfKGMHxkjypPp.png">
<ImagePreview>
<img class="preview-img" alt="配置程序示例" src="https://gw.alipayobjects.com/zos/rmsportal/nVgSYAiXfKGMHxkjypPp.png">
</ImagePreview>
配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
<br>
<img class="preview-img" align="right" alt="弹出框覆盖层示例" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">
<ImagePreview>
<img class="preview-img" alt="弹出框覆盖层示例" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">
</ImagePreview>
弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。

60
docs/spec/visual.zh-CN.md
View File

@ -39,31 +39,41 @@ title: 可视化
#### 时间类
<img class="preview-img no-padding" align="right" description="代表类型：折线图、面积图等" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*z0ZSRabgdpQAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="代表类型：折线图、面积图等" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*z0ZSRabgdpQAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
通常用于表现数据在时间维度上的趋势和变化。
#### 比较类
<img class="preview-img no-padding" align="right" description="代表类型：柱状图、气泡图等" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mvE4T6jti5QAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="代表类型：柱状图、气泡图等" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mvE4T6jti5QAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小，通常用于展示不同分类间的数值对比。
#### 分布类
<img class="preview-img no-padding" align="right" description="代表类型：散点图、箱形图等" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_ft8Soe5p6EAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="代表类型：散点图、箱形图等" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_ft8Soe5p6EAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
通常用于展示连续数据上数值的分布情况。
#### 流程类
<img class="preview-img no-padding" align="right" description="代表类型：漏斗图等" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*kJj6Qo3-UFIAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="代表类型：漏斗图等" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*kJj6Qo3-UFIAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
通常用于表示流程流转、流量关系。
#### 占比类
<img class="preview-img no-padding" align="right" description="代表类型：环图、饼图、百分比堆叠类型图表等" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*52XJRK9B0KUAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="代表类型：环图、饼图、百分比堆叠类型图表等" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*52XJRK9B0KUAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
显示同一维度上占比关系。
@ -71,7 +81,9 @@ title: 可视化
### 色板
<img class="preview-img no-padding" align="right" description="AntV 官方默认色板示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Skn6TZsQ7ksAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="AntV 官方默认色板示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Skn6TZsQ7ksAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
AntV 提供了一套默认的图表颜色，包括颜色的用法，
@ -85,35 +97,49 @@ AntV 提供了一套默认的图表颜色，包括颜色的用法，
#### 轴
<img class="preview-img no-padding" align="right" description="轴的元素" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i4tXQZkMGrMAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="轴的元素" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i4tXQZkMGrMAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img no-padding" align="right" description="轴的分类" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-ycMQZ48GykAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="轴的分类" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-ycMQZ48GykAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
用来定义坐标系中数据在方向和值的映射关系。
#### 图例
<img class="preview-img no-padding" align="right" description="图例的元素" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8oYwRJbGmhMAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="图例的元素" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8oYwRJbGmhMAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
<img class="preview-img no-padding" align="right" description="图例的分类" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*sSGjRJGyrqQAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="图例的分类" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*sSGjRJGyrqQAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
用来解释图表区域中包含的所有视觉元素的含义。
#### 标签
<img class="preview-img no-padding" align="right" description="标签的分类" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*j2gNQ4E-wAoAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="标签的分类" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*j2gNQ4E-wAoAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
对当前的一组数据进行的内容标注。
#### 提示信息
<img class="preview-img no-padding" align="right" description="提示信息的元素" src="https://gw.alipayobjects.com/zos/basement_prod/f9683e72-81a4-47cc-a208-6570187cce11.svg" />
<ImagePreview>
<img class="preview-img no-padding" description="提示信息的元素" src="https://gw.alipayobjects.com/zos/basement_prod/f9683e72-81a4-47cc-a208-6570187cce11.svg" />
</ImagePreview>
指当鼠标悬停在图表上或者手指点按移动设备的某个数据点时，以交互提示信息的形式展示该点的数据，比如该点的值，数据单位等。
#### 图形
<img class="preview-img no-padding" align="right" description="图形的分类" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*itDLQb2fXpkAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="图形的分类" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*itDLQb2fXpkAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
图形是统计图表的视觉通道在形状上映射的视觉展现，是图表的主体部分，其他图表组件的目的是帮助读者更好地理解数据在图形上的映射关系。
@ -121,11 +147,15 @@ AntV 提供了一套默认的图表颜色，包括颜色的用法，
### 图表布局适应
<img class="preview-img no-padding" align="right" description="图表响应式示意" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0vfXTIlbSXwAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="图表响应式示意" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0vfXTIlbSXwAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
数据可视化始终面对海量数据量与有限屏幕空间的冲突，如何解决不同端、不同屏幕尺寸下内容的适配问题，在有限的空间内帮助用户更快地理解信息和更快地分析洞察，是我们一直致力研究的问题。
<img class="preview-img no-padding" align="right" description="设计思路" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*WsO3T5klNMIAAAAAAAAAAABkARQnAQ" />
<ImagePreview>
<img class="preview-img no-padding" description="设计思路" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*WsO3T5klNMIAAAAAAAAAAABkARQnAQ" />
</ImagePreview>
在 Ant Design 的可视化体系中，我们发展出一套适用于全量图表的布局适应规则，从整体图表、图表内原子组件梳理了适用于所有图表的布局适应体系。以右侧动图为例，图中横轴的轴标签跟随具体尺寸发生了旋转。更多内容即将发布，敬请期待。

58
docs/spec/visualization-page.en-US.md
View File

@ -41,20 +41,26 @@ To help users quickly and clearly understand the meanings of data, analyze trend
### Do & Don’t
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*D4AHQ434LjgAAAAAAAAAAABkARQnAQ" alt="Do">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*qUCwTKf_bV8AAAAAAAAAAABkARQnAQ" alt="Don't">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*D4AHQ434LjgAAAAAAAAAAABkARQnAQ" alt="Do">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*qUCwTKf_bV8AAAAAAAAAAABkARQnAQ" alt="Don't">
</ImagePreview>
When the data is highly summarized, a chart with the detail number(s) is more straight-forward than a chart alone.
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*YhWnS73vVvIAAAAAAAAAAABkARQnAQ" alt="Do">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*YhWnS73vVvIAAAAAAAAAAABkARQnAQ" alt="Do">
</ImagePreview>
Try to highlight the primary data on first one screen, and limit the sum of modules into 5-9, avoiding information overload.
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ym8CSoOMN1EAAAAAAAAAAABkARQnAQ" alt="Do">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ym8CSoOMN1EAAAAAAAAAAABkARQnAQ" alt="Do">
</ImagePreview>
Make good use of filtering capability, let users observe the overview, and check the detailed data at the same time. Therefore, users can explore quickly whenever they have questions.
@ -62,13 +68,17 @@ Make good use of filtering capability, let users observe the overview, and check
### Presentation Dashboards
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/dOPuiUwtR8/3ef4fa56-0272-4663-8353-e72055a404cc.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/dOPuiUwtR8/3ef4fa56-0272-4663-8353-e72055a404cc.png">
</ImagePreview>
In order to help users to make decisions, tile the most critical data from the overall perspective on the whole page. When all of the indicators share similar importance, choose the layout on the left; to emphasize one of them, select the one on the right.
#### Indicator Dashboards
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/JyiQirylIm/72eccc07-a5c9-47d2-8d17-a32c46507eb4.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/JyiQirylIm/72eccc07-a5c9-47d2-8d17-a32c46507eb4.png">
</ImagePreview>
**When to use**
@ -80,7 +90,9 @@ Key indicator, scorecard, filter, chart.
#### [Monitor Dashboards](https://preview.pro.ant.design/dashboard/monitor)
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/Ls0j%26N%24i4A/4fcb4e43-5b33-4f3e-83ee-07b308c192ff.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/Ls0j%26N%24i4A/4fcb4e43-5b33-4f3e-83ee-07b308c192ff.png">
</ImagePreview>
**When to use**
@ -92,13 +104,17 @@ Key indicator, scorecard, chart, map.
### Analytics Dashboards
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/HDGn37TfSL/0833d3e1-8126-4f89-a388-47a7f7c75cfe.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/HDGn37TfSL/0833d3e1-8126-4f89-a388-47a7f7c75cfe.png">
</ImagePreview>
Analytics dashboards separate the data-analysis interface into several parts. Usually their layouts are "summary and description" structure, showing overviews of the whole information with different aspects. These dashboards can assist the users to discover the current problems.
#### Multi-dimension Analytics Dashboards
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/crg34dVGk%26/fc54e283-8748-45a0-b65f-e41336fdbd0d.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/crg34dVGk%26/fc54e283-8748-45a0-b65f-e41336fdbd0d.png">
</ImagePreview>
**When to use**
@ -110,13 +126,17 @@ Key indicator, scorecard, filter, chart.
### Detail Templates
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/cwc7oz1J2J/5f5f9885-b7f1-4183-b696-f666c939175a.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/cwc7oz1J2J/5f5f9885-b7f1-4183-b696-f666c939175a.png">
</ImagePreview>
Detail templates display the overview and detailed information of a report or a unique indicator. Users can set texts, lists and charts according to their business needs.
#### Data Details
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/kQnhbqQWPE/a3abf5e3-beeb-4b60-a51f-13effcc239e8.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/kQnhbqQWPE/a3abf5e3-beeb-4b60-a51f-13effcc239e8.png">
</ImagePreview>
**When to use**
@ -142,25 +162,33 @@ Filter, chart, table.
#### Combination Methods of Cards
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/tul9MHfx6P/84e01ba5-c57e-49cd-805a-ae83f8ef49e2.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/tul9MHfx6P/84e01ba5-c57e-49cd-805a-ae83f8ef49e2.png">
</ImagePreview>
1. One card, one topic.
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*k-omRZK0t4IAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*k-omRZK0t4IAAAAAAAAAAABkARQnAQ">
</ImagePreview>
2. Place closely-related datasets on one card, and use split lines to break it into different areas.
#### Use Suitable Charts
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/L9YbwdqTcq/d4879a5e-c4bb-480a-8817-9058e89b8042.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/L9YbwdqTcq/d4879a5e-c4bb-480a-8817-9058e89b8042.png">
</ImagePreview>
After designing the draft layout, select related visualization charts based on how summarized or detailed the data is. Usually scorecards and ranking lists are used for information summaries, tables and texts express details, and charts are between the two categories.
#### Color Palette
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/8YsRuMRbel/446a7023-f13d-4754-8fea-6dd14343f335.png">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/8YsRuMRbel/446a7023-f13d-4754-8fea-6dd14343f335.png">
</ImagePreview>
## Read more

58
docs/spec/visualization-page.zh-CN.md
View File

@ -41,20 +41,26 @@ title: 数据可视化页
### Do&Don’t
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*D4AHQ434LjgAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*qUCwTKf_bV8AAAAAAAAAAABkARQnAQ" alt="错误示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*D4AHQ434LjgAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*qUCwTKf_bV8AAAAAAAAAAABkARQnAQ" alt="错误示范">
</ImagePreview>
在对数据进行高度概括时，展示指示卡+数值，比图表更直接。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*YhWnS73vVvIAAAAAAAAAAABkARQnAQ" alt="正确示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*YhWnS73vVvIAAAAAAAAAAABkARQnAQ" alt="正确示范">
</ImagePreview>
尽量在一屏中突出核心指示，将总模块数量控制在 5-9 个，避免信息过载。
<br />
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ym8CSoOMN1EAAAAAAAAAAABkARQnAQ" alt="正确示范">
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ym8CSoOMN1EAAAAAAAAAAABkARQnAQ" alt="正确示范">
</ImagePreview>
善于使用筛选、过滤功能，可以让用户在观察全局的同时，还可以查看数据细节，用户在有疑问时能够快速得到方向。
@ -62,13 +68,17 @@ title: 数据可视化页
### 概览
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*wM0lTJPh4tcAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*wM0lTJPh4tcAAAAAAAAAAABkARQnAQ">
</ImagePreview>
将全局视角中最关键的指标，以平铺的方式展现在整个页面中，帮助决策者做决策。当指标重要性平均时采用左图布局，需要强调主题时采用右图布局
#### 模板 - 指标大盘
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3penRKSd5AkAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3penRKSd5AkAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候用**
@ -80,7 +90,9 @@ title: 数据可视化页
#### [模板 - 监控](https://preview.pro.ant.design/dashboard/monitor)
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gbuDRaK1whcAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gbuDRaK1whcAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候用**
@ -92,13 +104,17 @@ title: 数据可视化页
### 分析
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*FSvoSbvL89YAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*FSvoSbvL89YAAAAAAAAAAABkARQnAQ">
</ImagePreview>
将数据分析类型页面拆解为多个部分，通常为“总 - 分”的结构，多维度地展示数据的全貌，帮助使用者发现当前问题。
#### 模板 - 多维分析
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*IljpTbaOEOoAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*IljpTbaOEOoAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候用**
@ -110,13 +126,17 @@ title: 数据可视化页
### 明细
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ihooQ69yX18AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ihooQ69yX18AAAAAAAAAAABkARQnAQ">
</ImagePreview>
数据明细用来展示单个指标总览和明细。常用于数据报表细节信息的展示，根据业务诉求可配置文本、列表、可视化图表等。
#### 模板 - 数据明细
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DjmzQKHxa9AAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DjmzQKHxa9AAAAAAAAAAAABkARQnAQ">
</ImagePreview>
**什么时候用**
@ -145,25 +165,33 @@ title: 数据可视化页
#### 卡片的组合方式
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0UoySagZKGsAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0UoySagZKGsAAAAAAAAAAABkARQnAQ">
</ImagePreview>
1、一张卡片放置一个主题内容。
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*k-omRZK0t4IAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*k-omRZK0t4IAAAAAAAAAAABkARQnAQ">
</ImagePreview>
2、也可将相关性高的数据组合呈现在一个卡片中，并使用通栏分割线区隔。
#### 选择正确的可视化组件
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*J1P7TbuZ5O8AAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*J1P7TbuZ5O8AAAAAAAAAAABkARQnAQ">
</ImagePreview>
当设计者对页面的结构有初步的思路之后，可根据信息粒度的大小来选择不同的可视化组件。信息粒度从大到小对应：指标卡和排行榜、图表、文本明细。
#### 选择正确的色板
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Skn6TZsQ7ksAAAAAAAAAAABkARQnAQ">
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Skn6TZsQ7ksAAAAAAAAAAABkARQnAQ">
</ImagePreview>
## 延伸阅读