From 2b947d04807ee05a13feee26676ff6600010f1d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Sat, 24 Dec 2022 18:11:43 +0800 Subject: [PATCH] docs: preview images in markdown (#39739) * 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 --- .dumi/theme/builtins/ImagePreview/index.tsx | 218 ++++++------------ .dumi/theme/common/styles/PreviewImage.tsx | 47 +--- docs/spec/alignment.en-US.md | 16 +- docs/spec/alignment.zh-CN.md | 16 +- docs/spec/buttons.en-US.md | 82 +++++-- docs/spec/buttons.zh-CN.md | 98 +++++--- docs/spec/colors.en-US.md | 12 +- docs/spec/colors.zh-CN.md | 12 +- docs/spec/contrast.en-US.md | 26 ++- docs/spec/contrast.zh-CN.md | 26 ++- docs/spec/copywriting.en-US.md | 112 ++++++--- docs/spec/copywriting.zh-CN.md | 136 +++++++---- docs/spec/data-display.en-US.md | 24 +- docs/spec/data-display.zh-CN.md | 12 +- docs/spec/data-entry.en-US.md | 74 ++++-- docs/spec/data-entry.zh-CN.md | 74 ++++-- docs/spec/data-format.en-US.md | 23 +- docs/spec/data-format.zh-CN.md | 41 ++-- docs/spec/data-list.en-US.md | 84 +++++-- docs/spec/data-list.zh-CN.md | 78 +++++-- docs/spec/detail-page.en-US.md | 40 +++- docs/spec/detail-page.zh-CN.md | 40 +++- docs/spec/direct.en-US.md | 22 +- docs/spec/direct.zh-CN.md | 20 +- docs/spec/feedback.en-US.md | 50 ++-- docs/spec/feedback.zh-CN.md | 48 ++-- docs/spec/font.en-US.md | 2 + docs/spec/font.zh-CN.md | 4 +- docs/spec/icon.en-US.md | 74 ++++-- docs/spec/illustration.en-US.md | 56 +++-- docs/spec/illustration.zh-CN.md | 56 +++-- docs/spec/invitation.en-US.md | 32 ++- docs/spec/invitation.zh-CN.md | 32 ++- docs/spec/lightweight.en-US.md | 10 +- docs/spec/lightweight.zh-CN.md | 10 +- docs/spec/navigation.en-US.md | 48 +++- docs/spec/navigation.zh-CN.md | 48 +++- docs/spec/proximity.en-US.md | 8 +- docs/spec/proximity.zh-CN.md | 8 +- docs/spec/reaction.en-US.md | 40 +++- docs/spec/reaction.zh-CN.md | 40 +++- docs/spec/repetition.en-US.md | 14 +- docs/spec/repetition.zh-CN.md | 12 +- docs/spec/research-empty.zh-CN.md | 22 +- docs/spec/research-exception.zh-CN.md | 28 ++- docs/spec/research-form.zh-CN.md | 82 +++++-- docs/spec/research-list.zh-CN.md | 32 ++- .../research-message-and-feedback.zh-CN.md | 44 +++- docs/spec/research-navigation.zh-CN.md | 73 ++++-- docs/spec/research-result.zh-CN.md | 42 +++- docs/spec/research-workbench.zh-CN.md | 13 +- docs/spec/stay.en-US.md | 40 ++-- docs/spec/stay.zh-CN.md | 38 ++- docs/spec/visual.zh-CN.md | 60 +++-- docs/spec/visualization-page.en-US.md | 58 +++-- docs/spec/visualization-page.zh-CN.md | 58 +++-- 56 files changed, 1698 insertions(+), 817 deletions(-) diff --git a/.dumi/theme/builtins/ImagePreview/index.tsx b/.dumi/theme/builtins/ImagePreview/index.tsx index 408d6c356b..7ea701a689 100644 --- a/.dumi/theme/builtins/ImagePreview/index.tsx +++ b/.dumi/theme/builtins/ImagePreview/index.tsx @@ -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 = (props) => { + const { children } = props; + const imgs = toArray(children).filter((ele) => ele.type === 'img'); -const PreviewImageBox: React.FC = (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 ( -
-
- {coverMeta.alt} + + const imagesList = imgsMeta.map((meta, index) => { + const metaCopy = { ...meta }; + delete metaCopy.description; + delete metaCopy.isGood; + delete metaCopy.isBad; + return ( +
+
+ {meta.alt} +
-
{coverMeta.alt}
-
- - - {comparable ? cover : imgs} - -
{coverMeta.alt}
- + ); + }); + + 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 ( +
+ {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 ( +
+
+ {coverMeta.alt} +
+
{coverMeta.alt}
+
+
+ ); + })}
); }; -interface ImagePreviewProps { - imgs: any[]; -} - -interface ImagePreviewStates { - previewVisible?: Record; -} - -class ImagePreview extends React.Component { - 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((meta, index) => { - const metaCopy = { ...meta }; - delete metaCopy.description; - delete metaCopy.isGood; - delete metaCopy.isBad; - return ( -
-
- {meta.alt} -
-
- ); - }); - - 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 ( -
- {imagesList.map((_, index) => { - if (!comparable && index !== 0) { - return null; - } - return ( - { - this.handleClick(index); - }} - /> - ); - })} -
- ); - } -} - export default ImagePreview; diff --git a/.dumi/theme/common/styles/PreviewImage.tsx b/.dumi/theme/common/styles/PreviewImage.tsx index a87fb14b4b..08aff35caa 100644 --- a/.dumi/theme/common/styles/PreviewImage.tsx +++ b/.dumi/theme/common/styles/PreviewImage.tsx @@ -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; diff --git a/docs/spec/alignment.en-US.md b/docs/spec/alignment.en-US.md index e7a3b79f5b..2f88d48363 100644 --- a/docs/spec/alignment.en-US.md +++ b/docs/spec/alignment.en-US.md @@ -13,8 +13,10 @@ As is described in the Law of Continuity of Gestalt psychology, in the perceptua ## Text Alignment -good example -bad example + +good example +bad example + 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 -example of colon alignment + +example of colon alignment + Colon alignment(right-align) can encircle the content into a certain range. Users can infer where the chart is through the regular arranged colon so that the speed of filling in the chart can be speeded up. @@ -30,7 +34,9 @@ Colon alignment(right-align) can encircle the content into a certain range. User ## Numbers Alignment -good example -bad example + +good example +bad example + To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal point; meanwhile all numbers should be right-aligned. diff --git a/docs/spec/alignment.zh-CN.md b/docs/spec/alignment.zh-CN.md index f2165789f4..3e6b15f30e 100644 --- a/docs/spec/alignment.zh-CN.md +++ b/docs/spec/alignment.zh-CN.md @@ -13,8 +13,10 @@ title: 对齐 ## 文案类对齐 -推荐示例 -不推荐示例 + +推荐示例 +不推荐示例 + 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 @@ -22,7 +24,9 @@ title: 对齐 ## 表单类对齐 -冒号对齐示例 + +冒号对齐示例 + 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 @@ -30,7 +34,9 @@ title: 对齐 ## 数字类对齐 -正确示例 -错误示例 + +正确示例 +错误示例 + 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。 diff --git a/docs/spec/buttons.en-US.md b/docs/spec/buttons.en-US.md index 100895e429..eaec3d1b25 100644 --- a/docs/spec/buttons.en-US.md +++ b/docs/spec/buttons.en-US.md @@ -43,33 +43,48 @@ Provides supplementary meaning to the button. ### Emphasis - + + + Common button types could be used to showcase to different **emphasis**. ### Do & Don't -Don't -Do + +Don't +Do + -Don't -Do + +Don't +Do +Do + ### Special Button Types #### Dashed Button - + + + Guide users to add content in an area. #### Danger Button - + + + -Do + +Do + -Do + +Do + 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. - + + + #### Call to Action - + + + 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 - + + + 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: - + + + - 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? - + + + - 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 - + + + 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 -Do - -Don't + +Do +Don't + 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. - + + + **Collapse buttons in the order of importance**
-Do -Don't + +Do +Don't + **Flat display of all the buttons**: could separate different groups using space; or use divider to group similar buttons. ## Label -Do + +Do + -Don't + +Don't + Labels should clearly indicate to users what would happen when buttons got clicked. diff --git a/docs/spec/buttons.zh-CN.md b/docs/spec/buttons.zh-CN.md index c50495534c..ce774e0e8b 100644 --- a/docs/spec/buttons.zh-CN.md +++ b/docs/spec/buttons.zh-CN.md @@ -43,33 +43,47 @@ title: 按钮 ### 按钮强调 - + + + 常规按钮类型呈现出不同的**强调程度**，使用者可以据此变化出合适的按钮类型： ### Do&Don't -错误示范 -正确示范 + +错误示范 +正确示范 + -错误示范 -正确示范 + +错误示范 +正确示范 + ### 特殊按钮 #### 虚线按钮  Dashed button - + + + 用于引导用户在一个区域中添加内容。 #### 危险按钮 Danger button - + + + -正确示范 + +正确示范 + -正确示范 + +正确示范 + 警示用户该操作存在风险。 @@ -77,41 +91,51 @@ title: 按钮 置于复杂或较深的背景中，避免按钮突兀地破坏背景的整体性。该场景下可灵活定制样式。 - + + + #### 行动号召按钮 Call to action - + + + 经常独立出现，行动号召按钮就像是电脑在对用户大声说“跟我来吧”，有点命令用户点击的意味，通常出现于 landing page 或者 一些引导性场景。最大可以将按钮放宽到与父区域等宽。一个屏幕空间中，建议只有一个行动号召按钮。 ## 位置 + ### 按钮区 - + + + 按钮区是用于放置按钮的区域，一个按钮区内可以有多个按钮。 - ### 跟随内容的按钮区 - + + + 按钮区跟随受控内容。将按钮区放置于用户浏览路径中，便于被用户发现。 - ### 工具栏中的按钮区 - + + + 工具栏中的按钮区，靠右放置。控制工具栏控制的内容范围。 - ### 如何确定按钮区的放置位置？ #### 页面/卡片/一组信息都能够呈现一个主题，主题的描述可以抽象为三个区域： - + + + - Header：主题的标题和摘要信息内容区的导航等 - Body：具体内容 @@ -123,9 +147,12 @@ title: 按钮 ### 什么时候需要在 Footer 中放置按钮区？ - + + + 为避免页脚工具栏滥用，我们不推荐使用页脚工具栏，仅建议以下两种场景使用： + - 1）对象详情页，「推进」对象的进展，例如审批流「通过」「驳回」。 - 2）异常复杂的表单页，表单的内容复杂到需要切分为多张卡片。 @@ -133,7 +160,9 @@ title: 按钮 ### 按钮顺序 - + + + 推荐操作是阅读的起点，折叠内容始终在最右侧。 @@ -144,15 +173,18 @@ title: 按钮 ### 按钮组 -正确示范 - -错误示范 + +正确示范 +错误示范 + 多个按钮形成一组时，将按钮排列在一起即可。 ### 有很多按钮组，如何确定顺序 - + + + 工具栏中的操作类型很多，我们会倾向于将变化较少的内容位置固化。以表格工具栏举例，排列逻辑如下： @@ -161,27 +193,31 @@ title: 按钮 - 其他：刷新、分享、设置等； - 溢出：被折叠的操作，若进行响应式设计，从右往左折叠至溢出操作。 - ### 按钮分组 当需要布置的按钮数量过多，可以把相关的动作组成一组，并采用相似的视觉设计。当某一个按钮是首要动作时仍可使用主按钮强调。 - + + + **按主次折叠部分按钮**
-正确示范 -错误示范 + +正确示范 +错误示范 + **平铺每个按钮**：优先推荐通过间距来区隔分组，也可以使用分割线来区隔视觉相似的按钮组。 ## 文案 -正确示范 - -错误示范 + +正确示范 +错误示范 + 文案需清楚传达用户按下按钮时系统将执行的操作。 diff --git a/docs/spec/colors.en-US.md b/docs/spec/colors.en-US.md index 287e87dd84..9f6f709a09 100644 --- a/docs/spec/colors.en-US.md +++ b/docs/spec/colors.en-US.md @@ -66,19 +66,25 @@ We provide JavaScript usage for developers. ### Brand Color - + + + 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 - + + + 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 - + + + 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: diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index abce4ffe88..ee7e94ff31 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -74,19 +74,25 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序 ### 品牌色的应用 - + + + 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 `#1890FF`，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。 ### 功能色 - + + + 功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图： ### 中性色 - + + + Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图： diff --git a/docs/spec/contrast.en-US.md b/docs/spec/contrast.en-US.md index ef93a92f64..ffacfecbec 100644 --- a/docs/spec/contrast.en-US.md +++ b/docs/spec/contrast.en-US.md @@ -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 -good example -bad example + +good example +bad example + In order to help user make a quick operation (something like the form, modal), a more important operation or a operation with higher frequency would be emphasized. @@ -22,7 +24,9 @@ In order to help user make a quick operation (something like the form, modal), a
-Example of ignoring the primary and secondary sequence + +Example of ignoring the primary and secondary sequence + When there's something needs users to make decision prudently, the system should remain neutral. It shouldn't make the decision for users or lead them to make judgement. @@ -30,9 +34,13 @@ When there's something needs users to make decision prudently, the system should ## Contrast of whole and part -Example of whole and part 1 + +Example of whole and part 1 + -Example of whole and part 2 + +Example of whole and part 2 + Taking advantage of changing the typesetting, the typeface and the size, we highlight the different levels and differentiate the ensemble and the part, which would make the page be more flexible and rhythmic. @@ -40,9 +48,13 @@ Taking advantage of changing the typesetting, the typeface and the size, we high ## Contrast of the state relation -Example of static contrast + +Example of static contrast + -Example of dynamic contrast + +Example of dynamic contrast + Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better diff --git a/docs/spec/contrast.zh-CN.md b/docs/spec/contrast.zh-CN.md index 88619775d9..c80909a0c3 100644 --- a/docs/spec/contrast.zh-CN.md +++ b/docs/spec/contrast.zh-CN.md @@ -13,8 +13,10 @@ title: 对比 ## 主次关系对比 -正确示例 -错误示例 + +正确示例 +错误示例 + 为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。 @@ -22,7 +24,9 @@ title: 对比
-不区分主次的示例 + +不区分主次的示例 + 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。 @@ -30,9 +34,13 @@ title: 对比 ## 总分关系对比 -总分关系示例 1 + +总分关系示例 1 + -总分关系示例 2 + +总分关系示例 2 + 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。 @@ -40,9 +48,13 @@ title: 对比 ## 状态关系对比 -静态对比示例 + +静态对比示例 + -动态对比示例 + +动态对比示例 + 通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。 diff --git a/docs/spec/copywriting.en-US.md b/docs/spec/copywriting.en-US.md index 59c99d8a7d..232895893e 100644 --- a/docs/spec/copywriting.en-US.md +++ b/docs/spec/copywriting.en-US.md @@ -21,8 +21,10 @@ In the interface, copywriting is the basis of our communication with users. Ther ### Articulate foothold -Correct Example -Wrong Example + +Correct Example +Wrong Example + 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 -Correct Example -Wrong Example + +Correct Example +Wrong Example + 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 -Correct Example -Wrong Example + +Correct Example +Wrong Example + Use simple, direct and easy-to-understand words. Indirect, ambiguous, obscure, and overly "refined" copywrite will increase user's cognitive load. ### Express consistently -Correct Example -Wrong Example + +Correct Example +Wrong Example + -The operation name and the target page title should be the same. + +The operation name and the target page title should be the same. + - 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 -Correct Example -Wrong Example + +Correct Example +Wrong Example + 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 -Correct Example -Wrong Example + +Correct Example +Wrong Example + 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.
-Correct Example -Wrong Example + +Correct Example +Wrong Example + 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 -Correct Example -Wrong Example + +Correct Example +Wrong Example + 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.
-Correct Example -Wrong Example + +Correct Example +Wrong Example + ## Tone @@ -94,8 +114,10 @@ Language defines content, while emotions and atmosphere are expressed more in to ### Bring each other closer -Correct Example -Wrong Example + +Correct Example +Wrong Example + 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 -Correct Example -Wrong Example + +Correct Example +Wrong Example + 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 -Correct Example -Wrong Example + +Correct Example +Wrong Example + 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 -Correct Example -Wrong Example + +Correct Example +Wrong Example + 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
-Correct Example -Wrong Example + +Correct Example +Wrong Example + Use the correct case.
-Recommend -Not recommend + +Recommend +Not recommend + Use sentence capital case in headlines, titles, labels, menu items, buttons, etc. ### Arabic numbers -Correct Example -Wrong Example + +Correct Example +Wrong Example + 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
-Correct Example -Wrong Example + +Correct Example +Wrong Example + 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 -Correct Example -Wrong Example + +Correct Example +Wrong Example + The exclamation mark will make the tone appear too excited, and it will easily make the atmosphere too tense. diff --git a/docs/spec/copywriting.zh-CN.md b/docs/spec/copywriting.zh-CN.md index e14a792916..9764f82d2b 100644 --- a/docs/spec/copywriting.zh-CN.md +++ b/docs/spec/copywriting.zh-CN.md @@ -21,8 +21,10 @@ title: 文案 ### 明确表述立足点 -正确示范 -错误示范 + +正确示范 +错误示范 + 在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。 @@ -32,8 +34,10 @@ title: 文案 ### 精简语句 -正确示范 -错误示范 + +正确示范 +错误示范 + 省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。 @@ -41,8 +45,10 @@ title: 文案 ### 使用用户熟悉的语言 -正确示范 -错误示范 + +正确示范 +错误示范 + 使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。 @@ -50,13 +56,19 @@ title: 文案 ### 表述一致 -正确示范 -错误示范 + +正确示范 +错误示范 + -正确示范 -错误示范 + +正确示范 +错误示范 + -操作名称和目标页面的标题一致。 + +操作名称和目标页面的标题一致。 + - 描述同一个事物的词汇要保持统一; - 上下文的语法、语种、语序要保持统一; @@ -64,8 +76,10 @@ title: 文案 ### 重要的信息放在显著位置 -正确示范 -错误示范 + +正确示范 +错误示范 + 让用户第一眼看到最重要的内容，不用到段落中寻找。 @@ -73,28 +87,38 @@ title: 文案 ### 完整、直接得阐述信息 -正确示范 -错误示范 + +正确示范 +错误示范 + 当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。
-正确示范 -错误示范 + +正确示范 +错误示范 + 报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。 ### 用词精准完整 -正确示范 -错误示范 + +正确示范 +错误示范 + -正确示范 -错误示范 + +正确示范 +错误示范 + -正确示范 -错误示范 + +正确示范 +错误示范 + @@ -146,22 +170,28 @@ title: 文案 ### 拉近彼此的距离 -正确示范 -错误示范 + +正确示范 +错误示范 + 直接使用「你」、「我」来和用户对话，与用户建立亲密感。避免使用「您」，让用户感觉太过疏远。
-正确示范 -错误示范 + +正确示范 +错误示范 + > 注：不要在同一个句式中混用「你」和「我」，交互中指代混乱会让用户相当纠结。 ### 友好、尊重用户 -正确示范 -错误示范 + +正确示范 +错误示范 + 多给用户支持与鼓励，不要命令和强迫用户。 @@ -169,8 +199,10 @@ title: 文案 ### 表述不应过于极端 -正确示范 -错误示范 + +正确示范 +错误示范 + 不要使用过于绝对的表述，这样会让用户觉得不适。 @@ -178,8 +210,10 @@ title: 文案 ### 英文名词大小写规范 -正确示范 -错误示范 + +正确示范 +错误示范 + 产品名称全称，首字母大写。产品名称缩写需要全部大写，如：ESC、SLB 等； @@ -187,29 +221,37 @@ title: 文案
-正确示范 -错误示范 + +正确示范 +错误示范 + 正确使用专有名词的大小写规范。
-正确示范 -错误示范 + +正确示范 +错误示范 + 全英文的标题，标签，菜单项等等都要遵循英文句式中首字母大写的规范。 ### 统计数据使用阿拉伯数字 -正确示范 -错误示范 + +正确示范 +错误示范 + 这也是常见问题，用户对于数字的感知速度更快，使用数字而非文字表述会更加有效。 ### 省略不必要的标点 -正确示范 -错误示范 + +正确示范 +错误示范 + 为了帮助用户更加高效地扫视文本内容，可以省略不必要的断句点。 @@ -221,8 +263,10 @@ title: 文案 - 悬停文本中的提示 - 表格中的句子 -正确示范 -错误示范 + +正确示范 +错误示范 + 以下元素单独出现时需要加上标点： @@ -231,8 +275,10 @@ title: 文案 ### 谨慎使用感叹号 -正确示范 -错误示范 + +正确示范 +错误示范 + 感叹号会让文案显得过于激动，容易让气氛变得过于紧张。 diff --git a/docs/spec/data-display.en-US.md b/docs/spec/data-display.en-US.md index 571b3f3908..7e060d1199 100644 --- a/docs/spec/data-display.en-US.md +++ b/docs/spec/data-display.en-US.md @@ -14,7 +14,9 @@ The suitable way to display data helps users quickly locate and browse data, and ## Table - + + + 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 - + + + 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 - + + + 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 - + + + 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 - + + + "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 - + + + 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. diff --git a/docs/spec/data-display.zh-CN.md b/docs/spec/data-display.zh-CN.md index d7593e8d9a..e25bb5d6c8 100644 --- a/docs/spec/data-display.zh-CN.md +++ b/docs/spec/data-display.zh-CN.md @@ -14,7 +14,7 @@ title: 数据展示 ## 表格（Table） - + 表格被公认为是展现数据最为清晰、高效的形式之一。它常和排序、搜索、筛选、分页等其他界面元素一起协同，适用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。它结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。 @@ -25,7 +25,7 @@ title: 数据展示 ## 折叠面板（Collapse） - + 折叠面板通过对信息的分组和收纳，指引用户递进式的获取信息，使界面保持整洁的同时增加空间的有效利用率。 @@ -37,7 +37,7 @@ title: 数据展示 ## 卡片（Card） - + 卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。 @@ -50,7 +50,7 @@ title: 数据展示 ## 走马灯（Carousel） - + 作为一组平级内容的并列展示模式，常用于图片或卡片轮播，可由用户主动触发或者系统自动轮播。适合用于官网首页、产品介绍页等展示型区块。 @@ -63,7 +63,7 @@ title: 数据展示 ## 树形控件（Tree） - + 『树形控件』通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。 @@ -73,7 +73,7 @@ title: 数据展示 ## 时间轴（Timeline） - + 垂直展示的时间流信息，一般按照时间倒叙记录事件，追踪用户当下以及过去做了什么。 diff --git a/docs/spec/data-entry.en-US.md b/docs/spec/data-entry.en-US.md index 1afb72f7d0..847ee149a9 100644 --- a/docs/spec/data-entry.en-US.md +++ b/docs/spec/data-entry.en-US.md @@ -18,7 +18,9 @@ Input is the basic and common way for data entry, which provides a text editable ### Input - + + + 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 - + + + It's a multi-line text input for single long text. ### Tips and helps -Basic style + +Basic style + 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. - + + + - + + + ### Search - + + + 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 - + + + 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 - + + + 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 - + + + 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.
-Correct Sample -Incorrect Sample + +Correct Sample +Incorrect Sample + > Note: It will trigger the state change directly when a user toggle the "Switch". ### Dropdown - + + + 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 - + + + 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.
- + + + > 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 - + + + Transfer the elements between two columns in an intuitive and efficient way. ### DatePicker - + + + 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 - + + + 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 - + + + 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 - + + + Drag files into a specific area to upload, while it supports upload by clicking as well. diff --git a/docs/spec/data-entry.zh-CN.md b/docs/spec/data-entry.zh-CN.md index 071445f810..d46c29f63a 100644 --- a/docs/spec/data-entry.zh-CN.md +++ b/docs/spec/data-entry.zh-CN.md @@ -18,7 +18,9 @@ title: 数据录入 ### 文本框（Input） - + + + 输入较少的字符总数，使用单行的输入形式。 @@ -26,25 +28,35 @@ title: 数据录入 ### 文本域（Textarea） - + + + 录入长篇幅的单一的文本使用多行的文本区域。 ### 提示与帮助 -基本样式 + +基本样式 + 为提升数据录入效率，通常可以在输入框内增加暗提示以帮助提醒用户。 > 注：输入框通常与标签（label）搭配使用，标签（label）默认放于输入区域的左侧，当文案过长或英文环境下也可放于输入区域的上方，但在同系统中需保持统一。 - + + + - + + + ### 搜索（Search） - + + + 搜索可以让用户在巨大的信息池中缩小目标范围，并快速获取需要的信息。 @@ -56,7 +68,9 @@ title: 数据录入 #### 单选框（Radio Button） - + + + 单选按钮允许用户从多个选项中选择一个选项。Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。 @@ -64,7 +78,9 @@ title: 数据录入 ### 复选框（Checkbox） - + + + 复选框用于在一组可选项中进行多项选择时。 @@ -75,20 +91,26 @@ title: 数据录入 ### 开关（Switch） - + + + 用于切换单个选项的状态。「开关」的内联标签应该显示清楚，例如：禁用/启用，不允许/允许等。
-正确示范 -错误示范 + +正确示范 +错误示范 + > 注：当用户切换「开关」按钮将直接触发状态改变。 ### 选择列表（Dropdown） - + + + 选择列表（通常称为下拉菜单）允许用户从列表中选择一个选项或多个选项，为用户在选项的数量上提供了更多的灵活性。 @@ -99,25 +121,33 @@ title: 数据录入 ### 滑块选择（Slider） - + + + 滑块选择可以在连续或间断的区间内，通过滑动锚点来选择一个合适的数值。这种交互特性使得它在设置诸如音量，亮度，色彩饱和度等需要反映强度等级的选项时是一种极好的选择。
- + + + > 注：在不要求精准数值的场景下用户使用「连续滑块」可得到更灵活便捷的操作；在用户需要精确数值时，可与「数字输入框」搭配使用。 ### 穿梭框（Transfer） - + + + 穿梭框用直观的方式在两栏中移动元素，完成选择行为。 ### 日期选择器（DatePicker） - + + + 日期选择器为用户提供了一种可视化的方式去浏览和选择一个日期或者日期范围。 @@ -129,19 +159,25 @@ title: 数据录入 ### 简单点击上传 - + + + 一般用于单个上传且不需要预览效果的文件上传，点击按钮弹出文件选择框。 ### 显示缩略图上传 - + + + 一般用于图片文件上传，用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。 ### 拖拽上传 - + + + 把文件拖入指定区域，完成上传，同样支持点击上传。 diff --git a/docs/spec/data-format.en-US.md b/docs/spec/data-format.en-US.md index 90a7720fbd..78e753223c 100644 --- a/docs/spec/data-format.en-US.md +++ b/docs/spec/data-format.en-US.md @@ -24,9 +24,10 @@ The numerical value is used to indicate the measurement size, it can be used alo
-Do - -Don't + +Do +Don't + **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 -Do -Don't + +Do +Don't + 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 -Do -Don't + +Do +Don't + Display `--` to express no-data status. #### Loading - + + + Use Skeleton screen when loading data. diff --git a/docs/spec/data-format.zh-CN.md b/docs/spec/data-format.zh-CN.md index 1fa050d1c3..8b763240f7 100644 --- a/docs/spec/data-format.zh-CN.md +++ b/docs/spec/data-format.zh-CN.md @@ -24,16 +24,19 @@ title: 数据格式
-推荐示例 - -不推荐示例 + +推荐示例 +不推荐示例 + **位置排列**：便于用户直观而又准确地读取数据，要做到一眼观定、简洁明了。在表格中，诸如金额、数量等数值分布排列时，通常采用“右对齐”方式，既方便用户快捷读取数据，还可以使用户进行纵向数据对比。
-推荐示例 -不推荐示例 + +推荐示例 +不推荐示例 + **计量单位**：在表格中，计量单位默认放在表头，并默认右对齐。 @@ -48,16 +51,20 @@ title: 数据格式
-推荐示例 -不推荐示例 + +推荐示例 +不推荐示例 + **大写金额：**一般用于银行、公司或个人的重要结算凭证和各种交易票据，需要使用大写数字以确保数据无法涂改，规范格式为「货币名称+金额数字」。
-推荐示例 -推荐示例 -不推荐示例 + +推荐示例 +推荐示例 +不推荐示例 + **大额计量：**如果一个金额很大，那么数值中的“万”“亿”单位可采用汉字。如果一个数值很大，那么数值中的“万”“亿”单位可采用汉字。 @@ -102,8 +109,10 @@ title: 数据格式 #### 全部脱敏 -推荐示例 -不推荐示例 + +推荐示例 +不推荐示例 + 一般用于金额、时间等特别重要敏感的信息，需要对所有数字进行脱敏。数据用一个 `***` 代替。 @@ -125,14 +134,16 @@ title: 数据格式 #### 无数据 -推荐示例 -不推荐示例 + +推荐示例 +不推荐示例 + 无数据用 `--` 表述。 #### 数据加载 - + 数据加载用「骨架屏」表示。 diff --git a/docs/spec/data-list.en-US.md b/docs/spec/data-list.en-US.md index a547bfd155..f785a30510 100644 --- a/docs/spec/data-list.en-US.md +++ b/docs/spec/data-list.en-US.md @@ -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 - + + + 强调浏览性。矩阵布局，趋向于展示复杂数据，数据按照矩阵布局对齐，方便横纵浏览数据，研究数据之间的关系。特别当用户受益于更多的数据外露，而无需进入该对象详情时，使用表格。 ### 列表 List - + + + 兼顾浏览性与展示性。垂直排列，趋向于展示对象的基础概述，有层次地展示内容，适合快速扫读。特别当展示空间存在限制，如较小的弹窗、侧栏、下拉面板等容器中，使用列表。 ### 卡片列表 Card list - + + + 强调展示性。网格布局无特定浏览顺序，每个对象拥有更平等的展示机会，网格布局在页面中更具吸引力，适合突出对象时使用。 @@ -39,7 +45,9 @@ title: Data List ### 搜寻数据 - + + + 选择适合的搜寻组件。 @@ -54,19 +62,25 @@ title: Data List #### 查询 - + + + 按照预设的条件，选择多个查询条件后一次性提交获取查询。 #### 筛选 - + + + 用户调整筛选项，结果即随之调整。 ### 搜索 - + + + 更智能的查找，输入关键词一次性在多种数据属性中查询后，展示结果。 @@ -76,19 +90,25 @@ title: Data List #### 分页器 - + + + 默认推荐使用。使用时，当页面内容不足一页时，不展示分页器。 #### 同页加载 - + + + 当用户常常能够在列表靠前位置找到所需条目，且无定位特定列表项的需求时可以考虑使用这种模式，如动态、邮件。 #### 查看全部 - + + + 当需跳转页面查看完整列表时使用。 @@ -96,7 +116,7 @@ title: Data List
mainly -
+
#### 默认点击标题导航至详情，可以从以下几个角度判断如何打开详情： @@ -107,7 +127,9 @@ title: Data List ### 批量操作 - + + + 当用户勾选条目后，触发批量操作模式，列表工具栏呼出批量操作工具条。 @@ -115,13 +137,17 @@ title: Data List #### 右上角新建按钮 - + + + 点击触发新建表单弹窗、抽屉、页面等，完成创建后新创建的内容出现在列表的第一条，并短暂地高亮展示。 #### 虚线新建按钮 - + + + 点击新建，在按钮位置出现对象编辑区，完成新建后即在该位置展示该新建对象。虚线新建按钮位置放在列表首或尾。 @@ -129,36 +155,48 @@ title: Data List #### 直接删除 - + + + 删除后，允许用户撤销。 #### 二次确认 - + + + 点击删除操作时，需要二次确认。 #### 安全校验 - + + + 破坏性操作需高安全级别验证确认操作。 ### 列表工具栏 - + + + 在较小的空间中集成列表所需的常用功能，非常推荐使用。 ## 布局 - + + + 列表布局通常从上往下平铺，按照以下顺序排列。其中独占式区域提供了一个扩展空间，用于解决无法集成于工具栏中的复杂数据搜寻、数据统计类内容。 ## 空状态 - + + + 当列表无数据或无搜索结果时，应展示空状态。 diff --git a/docs/spec/data-list.zh-CN.md b/docs/spec/data-list.zh-CN.md index e913846be4..f785a30510 100644 --- a/docs/spec/data-list.zh-CN.md +++ b/docs/spec/data-list.zh-CN.md @@ -19,19 +19,25 @@ title: 数据列表 ### 表格 Table - + + + 强调浏览性。矩阵布局，趋向于展示复杂数据，数据按照矩阵布局对齐，方便横纵浏览数据，研究数据之间的关系。特别当用户受益于更多的数据外露，而无需进入该对象详情时，使用表格。 ### 列表 List - + + + 兼顾浏览性与展示性。垂直排列，趋向于展示对象的基础概述，有层次地展示内容，适合快速扫读。特别当展示空间存在限制，如较小的弹窗、侧栏、下拉面板等容器中，使用列表。 ### 卡片列表 Card list - + + + 强调展示性。网格布局无特定浏览顺序，每个对象拥有更平等的展示机会，网格布局在页面中更具吸引力，适合突出对象时使用。 @@ -39,7 +45,9 @@ title: 数据列表 ### 搜寻数据 - + + + 选择适合的搜寻组件。 @@ -54,19 +62,25 @@ title: 数据列表 #### 查询 - + + + 按照预设的条件，选择多个查询条件后一次性提交获取查询。 #### 筛选 - + + + 用户调整筛选项，结果即随之调整。 ### 搜索 - + + + 更智能的查找，输入关键词一次性在多种数据属性中查询后，展示结果。 @@ -76,19 +90,25 @@ title: 数据列表 #### 分页器 - + + + 默认推荐使用。使用时，当页面内容不足一页时，不展示分页器。 #### 同页加载 - + + + 当用户常常能够在列表靠前位置找到所需条目，且无定位特定列表项的需求时可以考虑使用这种模式，如动态、邮件。 #### 查看全部 - + + + 当需跳转页面查看完整列表时使用。 @@ -96,7 +116,7 @@ title: 数据列表
mainly -
+
#### 默认点击标题导航至详情，可以从以下几个角度判断如何打开详情： @@ -107,7 +127,9 @@ title: 数据列表 ### 批量操作 - + + + 当用户勾选条目后，触发批量操作模式，列表工具栏呼出批量操作工具条。 @@ -115,13 +137,17 @@ title: 数据列表 #### 右上角新建按钮 - + + + 点击触发新建表单弹窗、抽屉、页面等，完成创建后新创建的内容出现在列表的第一条，并短暂地高亮展示。 #### 虚线新建按钮 - + + + 点击新建，在按钮位置出现对象编辑区，完成新建后即在该位置展示该新建对象。虚线新建按钮位置放在列表首或尾。 @@ -129,36 +155,48 @@ title: 数据列表 #### 直接删除 - + + + 删除后，允许用户撤销。 #### 二次确认 - + + + 点击删除操作时，需要二次确认。 #### 安全校验 - + + + 破坏性操作需高安全级别验证确认操作。 ### 列表工具栏 - + + + 在较小的空间中集成列表所需的常用功能，非常推荐使用。 ## 布局 - + + + 列表布局通常从上往下平铺，按照以下顺序排列。其中独占式区域提供了一个扩展空间，用于解决无法集成于工具栏中的复杂数据搜寻、数据统计类内容。 ## 空状态 - + + + 当列表无数据或无搜索结果时，应展示空状态。 diff --git a/docs/spec/detail-page.en-US.md b/docs/spec/detail-page.en-US.md index f857df837c..85ac91f264 100644 --- a/docs/spec/detail-page.en-US.md +++ b/docs/spec/detail-page.en-US.md @@ -41,13 +41,17 @@ To increase the information viewing and searching efficiency. To raise the conve ### Basic Layouts - + + + 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) - + + + 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 - + + + 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 - + + + 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) - + + + - + + + **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 - + + + 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 - + + + 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 - + + + 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 - + + + 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: diff --git a/docs/spec/detail-page.zh-CN.md b/docs/spec/detail-page.zh-CN.md index 228aa7ca72..40f8ca73e0 100644 --- a/docs/spec/detail-page.zh-CN.md +++ b/docs/spec/detail-page.zh-CN.md @@ -43,13 +43,17 @@ title: 详情页 ### 基础布局 - + + + 基础详情单页直接平铺所有需要展示的的信息，推荐使用这种详情展示方式。 #### [模板 -  基础详情](https://preview.pro.ant.design/profile/basic) - + + + 将主体内容呈现于一整张卡片中，使用不通栏分割线将相关内容分组。 @@ -59,7 +63,9 @@ title: 详情页 #### 模板 - 单据详情 - + + + 展示某个审批单据的详细信息，将内容复杂度较高的各模块使用卡片区割开来。 @@ -73,15 +79,21 @@ title: 详情页 ### 复杂布局 - + + + 将信息复杂度较高、相关性较弱的信息拆分为多个部分，并通过 页签 、分步、卡片分区、卡片内分组等形式按照相关性分组，用来处理复杂度较高的详情内容。 #### [模板 -  高级详情](https://preview.pro.ant.design/profile/advanced) - + + + - + + + **什么时候使用** @@ -89,7 +101,9 @@ title: 详情页 #### 模板 - 发布流程 - + + + 将内容分阶段组织，了解不同阶段的事项。 @@ -101,13 +115,17 @@ title: 详情页 ### 选择模板 - + + + 根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情页的内容。 ### 区隔方式 - + + + 根据各个信息之间的相关性，判断各个信息模块之间的亲密度，通常情况下，相关性强的内容尽量靠近，相关性弱的的内容尽量拉开层次。 @@ -118,7 +136,9 @@ title: 详情页 ### 内容组件 - + + + 根据不同的信息类型和复杂度选用对应的信息呈现方式。按复杂度由低至高，提供以下组件供选择： diff --git a/docs/spec/direct.en-US.md b/docs/spec/direct.en-US.md index edab91875a..982bc57f6d 100644 --- a/docs/spec/direct.en-US.md +++ b/docs/spec/direct.en-US.md @@ -11,7 +11,9 @@ As Alan Cooper states：「Where there is output, let there be input」. This is ## In-Page Editing -Example of click to edit + +Example of click to edit + Single-Field Inline Edit @@ -19,14 +21,18 @@ If 「readability」 is more important than 「editability」, 「click to edit
-Example of Text link/Icon Edit + If the priority is given to 「readability」 and the 「editability」 of operation lines need to be highlighted at the same time, 「text link/icon edit」can be used.
-Example of Multi-Field Inline Edit + +Example of Multi-Field Inline Edit + Multi-Field Inline Edit @@ -38,15 +44,19 @@ Multi-Field Inline Edit ## Drag and Drop -Example of Drag and Drop List + +Example of Drag and Drop List + 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）
-Example of Drag and Drop picture/file + +Example of Drag and Drop picture/file + Drag and Drop picture/file diff --git a/docs/spec/direct.zh-CN.md b/docs/spec/direct.zh-CN.md index ebf9c464fe..323fa70388 100644 --- a/docs/spec/direct.zh-CN.md +++ b/docs/spec/direct.zh-CN.md @@ -11,7 +11,9 @@ title: 直截了当 ## 页内编辑 -单击编辑示例 + +单击编辑示例 + 单字段行内编辑 @@ -19,13 +21,17 @@ title: 直截了当
-文字链/图标编辑示例 + +文字链/图标编辑示例 + 当「易读性」为主，同时又要突出操作行的「易编辑性」时，可使用「文字链/图标编辑」。
-多字段行内编辑示例 + +多字段行内编辑示例 + 多字段行内编辑 @@ -37,7 +43,9 @@ title: 直截了当 ## 利用拖放 -拖放列表示例 + +拖放列表示例 + 拖放列表 @@ -45,7 +53,9 @@ title: 直截了当
-拖放图片/文件示例 + +拖放图片/文件示例 + 拖放图片/文件 diff --git a/docs/spec/feedback.en-US.md b/docs/spec/feedback.en-US.md index 47ca7df8d9..e3aeba511d 100644 --- a/docs/spec/feedback.en-US.md +++ b/docs/spec/feedback.en-US.md @@ -21,7 +21,9 @@ Any product can not be separated from user guidance and information prompts even #### Alert - + + + 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 - + + + The important global notification information actively pushed by the system is displayed in the upper right corner of the system. #### Badge - + + + 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 - + + + 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 - + + + 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 - + + + 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.
- + + + > Note: If the loading time is long, a cancel operation should be provided. ### Input feedback - + + + 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 - + + + 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 - + + + 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.
-Correct Sample -Incorrect Sample + +Correct Sample +Incorrect Sample + 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 - + + + 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. diff --git a/docs/spec/feedback.zh-CN.md b/docs/spec/feedback.zh-CN.md index 6981bf596d..e5c2242b85 100644 --- a/docs/spec/feedback.zh-CN.md +++ b/docs/spec/feedback.zh-CN.md @@ -21,7 +21,9 @@ skip: true #### 警告提示（Alert） - + + + 是一种非阻碍式的信息展示，它不打断用户的当前操作，一般停留至页面某个位置（优先顶部），非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。 @@ -31,13 +33,17 @@ skip: true #### 通知提醒（Notification） - + + + 系统主动推送的重要的全局性通知信息，在系统右上角显示。 #### 徽标数（Badge） - + + + 用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。 @@ -47,7 +53,9 @@ skip: true #### 气泡卡片（Popover） - + + + 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。 @@ -55,7 +63,9 @@ skip: true #### 文字提示（Tooltip） - + + + 用于精确地描述被指向的对象，例如图标、图形、链接等，鼠标移入则显示提示，移出消失，不承载复杂文本和操作。 @@ -67,19 +77,25 @@ skip: true ### 加载状态进度反馈 - + + + 在操作需要一段时间（一般为超过 2 秒）完成时系统应即时给予提醒，明确告知加载的状态或加载进度条，保持与用户的沟通。
- + + + > 注：若加载时间较长，应提供取消操作。 ### 录入反馈 - + + + 操作过程中可通过不同的校验规则和形式，让用户及时发现并纠正错误。 @@ -87,7 +103,9 @@ skip: true #### 气泡确认框（Popconfirm） - + + + 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。 @@ -99,20 +117,24 @@ skip: true ### 顶部全局提示反馈（Message） - + 通过一个操作引发的反馈浮层位于顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
-正确示例 -错误示例 + +正确示例 +错误示例 + 由于反馈浮层的展示时长较短（默认 3s），对于比较重要的失败通知，建议改用对话框的形式进行通知，以避免用户遗漏信息。 ### 对话框反馈 - + + + 通过一个操作引发的反馈浮层位于页面中心，反馈内容可通过确认或取消按钮进行关闭，用户在反馈层出现时不可进行任何的操作，用于重要的反馈。 diff --git a/docs/spec/font.en-US.md b/docs/spec/font.en-US.md index 015728c541..238037ed1a 100644 --- a/docs/spec/font.en-US.md +++ b/docs/spec/font.en-US.md @@ -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. + + 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. diff --git a/docs/spec/font.zh-CN.md b/docs/spec/font.zh-CN.md index c331e6ea31..6729b4a815 100644 --- a/docs/spec/font.zh-CN.md +++ b/docs/spec/font.zh-CN.md @@ -78,7 +78,9 @@ Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸 ## 字体颜色 -字体颜色 + +字体颜色 + 文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。 diff --git a/docs/spec/icon.en-US.md b/docs/spec/icon.en-US.md index 5ca78387b6..57a35a7571 100644 --- a/docs/spec/icon.en-US.md +++ b/docs/spec/icon.en-US.md @@ -13,7 +13,9 @@ An icon is a graphical representation of meaning. Icons can be used to express a ## System Icons -System Icons + +System Icons + System icons are often used to represent commonly used operations, such as: save, edit, delete. Ant Design also includes icons to represent file types and state. @@ -21,7 +23,9 @@ System icons are often used to represent commonly used operations, such as: save ### Key Contour Lines -Ant Design's grid and key contour lines + +Ant Design's grid and key contour lines + Contour lines play an important role in making various icons with the same visual effect. @@ -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) -Square contour -Horizontal rectangle contour + +Square contour + -Circular contour -Vertical rectangle contour + +Horizontal rectangle contour + + + +Circular contour + + + +Vertical rectangle contour + ### Stroke Weight -Correct example -Incorrect example + +Correct example +Incorrect example + Consistent stroke weight is the key to maintaining the visual unity of the entire icon system. Ant Design's icons have a consistent line width of 72px. ### Corners -Correct example -Incorrect example + +Correct example +Incorrect example + Consistent rounding of corners and sizing of angles is also an important element in maintaining visual unity. @@ -53,27 +71,35 @@ Icons that follow Ant Design should have rounded corners and edges using a 72px ### Visual Correction -Correct example -Incorrect example + +Correct example +Incorrect example + In certain special cases (for example, when the icon is too compact), adjustments to line width, outlines, or other subtle changes may be made to increase readability. ### Perspective -Correct example -Incorrect example + +Correct example +Incorrect example + Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail. ### Naming Conventions -Naming Conventions + +Naming Conventions + Uniform naming conventions make finding icons faster and easier. For example, icons with a surrounding outline have a uniform "-o" suffix. ### Icon Sizing -Icon Sizing + +Icon Sizing + 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 -Color + +Color + The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly). @@ -89,7 +117,9 @@ The color of the icon should be consistent the color of the surrounding copy, un ## Business Icons -Business Icons + +Business Icons + Business icons, unlike system icons, do not themselves have functional operations, but rather an abstraction that assists with copywriting. Compared to the system icon, the business icon is more rich in the details of the design, the size of the use of relatively large. @@ -97,12 +127,16 @@ Business icons, unlike system icons, do not themselves have functional operation ### Icon Sizing -Icon Sizing + +Icon Sizing + In normal use, there are 32px (minimum size), 48px and 64px (maximum size) three options. ### Color -Color + +Color + There are two kinds of business icon, single-color (neutral color) and double-color (neutral color + primary color), the area of primary color does not exceed 40% of the entire icon. diff --git a/docs/spec/illustration.en-US.md b/docs/spec/illustration.en-US.md index f67f7a7105..f938518cec 100644 --- a/docs/spec/illustration.en-US.md +++ b/docs/spec/illustration.en-US.md @@ -35,19 +35,25 @@ We concretized the 4 abstract cornerstones that make up our design strategy; Tec ### Sea Hare Swatch - + + + 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 - + + + 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.
- + + + 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 -Natural head-to-body ratio + +Natural head-to-body ratio + 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.
-9 variants of common professioal character design + +9 variants of common professioal character design + 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.
-Breakdown of each character + +Breakdown of each character + -HiTu skeletal system + +HiTu skeletal system + -Reusing different postures + +Reusing different postures + 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 - + + + -Elementary components designed for business settings + +Elementary components designed for business settings + 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 - + + + - + + + - + + + - + + + 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. diff --git a/docs/spec/illustration.zh-CN.md b/docs/spec/illustration.zh-CN.md index b5c10a33b3..1ea0b86a05 100644 --- a/docs/spec/illustration.zh-CN.md +++ b/docs/spec/illustration.zh-CN.md @@ -35,19 +35,25 @@ title: 图形化 ### 海兔色板 - + + + 海兔的色彩配色体系是基于 Ant Design 色板的场景应用，与 UI 色彩体系的应用会有所不同。图形化的配色体系会相对更加的灵活可变。基于 Ant Design 的基础色板我们进行了明度的调整，扩大图形化设计的宽容度，使用选择时候更加高效易用，由于是出自 Ant Design 的色彩体系，和其他 UI 资产完美兼容。 ### 海兔默认资产颜色 - + + + 通过搜资调研，我们发现在企业级产品中。色彩的使用上蓝色，白色会占很大的比重。我们选取了色板中最具科技感，且代表着探索，钻研感的极客蓝作为我们的主色。
- + + + 基于 Adobe Color 的三元取色工具，和 3D 立体马赛克球，结合我们自己的海兔色板。可以轻松得到了我们默认版本的基础色板。 @@ -57,23 +63,33 @@ title: 图形化 ### 人物组件 -基于自然的人物头身比例 + +基于自然的人物头身比例 + 基于自然的设计原则，我们不推荐使用 Q 版卡通和过于夸张艺术化的设计风格。相比之下，接近自然真人头人比例的风格更是我们所推荐的。
-9 种常见职业角色设计 + +9 种常见职业角色设计 + 同时，我们结合情感化设计，将 9 种常见的职业角色进行人物设计。结合职业本身的一些特质，我们也赋予了他们不同气质特质，来满足各种业务场景的使用。
-角色设计人物分解 + +角色设计人物分解 + -HiTu 骨骼系统 + +HiTu 骨骼系统 + -人物姿态复用 + +人物姿态复用 + 有了基础的人物设计，我们将人物进行分解，然后搭配设计好的骨骼系统。来为人物增加各种姿态动作的复用和延展。 @@ -81,9 +97,13 @@ title: 图形化 ### 元素组件 - + + + -根据业务场景设计的元素组件 + +根据业务场景设计的元素组件 + 记忆点源于与众不同，专业感源于整齐划一。元素组件指代的是业务场景中一些业务元素，状态元素图形化的世界缤纷多变，我们希望在保持统一性的同时不去限时设计者的创意空间，元素组件的设计上，我们为了保持一定的韵律感，推荐设计师在 1024\*1024 的网格中绘制组件，且圆角的大小保持 8 的倍数关系。 @@ -91,13 +111,21 @@ title: 图形化 # 设计应用 - + + + - + + + - + + + - + + + 有了丰富的资产组件，我们应该如何使用呢？在 HiTu 的设计使用指引中，我推荐设计者在使用资产的过程中构建 Z 轴向的空间概念，将整幅画面拆分成前景，中景以及背景三个层次，在组件的排放时候，前景凸显重要的元素（如人，核心元素组件等），中间交代所处环境，背景则渲染烘托氛围，在颜色的使用和透明上也是前景的饱和度和透明度最高，逐级降低。 diff --git a/docs/spec/invitation.en-US.md b/docs/spec/invitation.en-US.md index 23068e1578..eb88cc78ee 100644 --- a/docs/spec/invitation.en-US.md +++ b/docs/spec/invitation.en-US.md @@ -21,17 +21,25 @@ By providing cues for interaction directly on the page we can statically indicat
-example of Text Invitation + +example of Text Invitation + -example of Blank Slate Invitation + +example of Blank Slate Invitation + -example of Unfinished Invitation + +example of Unfinished Invitation + Call to Action Invitations are generally provided as static instructions on the page. But visually they can be provided in many different ways such as Text Invitation, Blank Slate Invitation and Unfinished Invitation.
-example 1 of Tour Invitation + +example 1 of Tour Invitation + Tour invitation can be a nice way to explain design changes to a web application, especially for a well-designed interface. But providing tours will not solve the real problems an interface may have during interaction. @@ -47,21 +55,29 @@ Dynamic Invitations engage users at the point of the interaction and guide them
-example 1 of Hover Invitation + +example 1 of Hover Invitation + -example 2 of Hover Invitation + +example 2 of Hover Invitation + Hover Invitation: Provide an invitation during mouse hover.
-example of Inference Invitation + +example of Inference Invitation + Inference Invitation: Use visual inferences during interaction to cue users as to what the system has inferred about their intent.
-example of More Content Invitation + +example of More Content Invitation + More Content Invitation: Indicate that there is more content on the page. diff --git a/docs/spec/invitation.zh-CN.md b/docs/spec/invitation.zh-CN.md index 145ec4ded1..1c45a4bc93 100644 --- a/docs/spec/invitation.zh-CN.md +++ b/docs/spec/invitation.zh-CN.md @@ -21,17 +21,25 @@ title: 提供邀请
-文本邀请示例 + +文本邀请示例 + -白板式邀请示例 + +白板式邀请示例 + -未完成邀请示例 + +未完成邀请示例 + 引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。常见类型：「文本邀请」、「白板式邀请」、「未完成邀请」。
-漫游探索邀请示例 + +漫游探索邀请示例 + 漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是「创口贴」，仅通过它不能解决界面交互的真正问题。 @@ -47,21 +55,29 @@ title: 提供邀请
-悬停邀请示例 1 + +悬停邀请示例 1 + -悬停邀请示例 2 + +悬停邀请示例 2 + 悬停邀请：在鼠标悬停期间提供邀请。
-推论邀请示例 + +推论邀请示例 + 推论邀请：用于交互期间，合理推断用户可能产生的需求。
-更多内容邀请示例 + +更多内容邀请示例 + 更多内容邀请：用于邀请用户查看更多内容。 diff --git a/docs/spec/lightweight.en-US.md b/docs/spec/lightweight.en-US.md index c53ac4b335..86a249fd0b 100644 --- a/docs/spec/lightweight.en-US.md +++ b/docs/spec/lightweight.en-US.md @@ -14,7 +14,7 @@ Fitts's Law is an ergonomic principle that ties the size of a target and its con ## Always-Visible Tools -example of Always-Visible Tools, from Zhihu +example of Always-Visible Tools, from Zhihu If an action is critical, expose it directly in the interface and keep it always visible. @@ -24,7 +24,7 @@ If an action is critical, expose it directly in the interface and keep it always ## Hover-Reveal Tools -example of Hover-Reveal Tools +example of Hover-Reveal Tools Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object. @@ -34,7 +34,7 @@ Instead of making Contextual Tools always visible, we can show them on demand. O ## Toggle-Reveal Tools -example of Toggle-Reveal Tools +example of Toggle-Reveal Tools Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle. @@ -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 -example of hypertext hot spot +example of hypertext hot spot The clickable area of hypertext is affected by the length of the string in a cell. The whole cell can be set to a hot spot in order to be triggered easier.
-example of button hot spot +example of button hot spot Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button. diff --git a/docs/spec/lightweight.zh-CN.md b/docs/spec/lightweight.zh-CN.md index 187cfe6504..8613e77bab 100644 --- a/docs/spec/lightweight.zh-CN.md +++ b/docs/spec/lightweight.zh-CN.md @@ -13,7 +13,7 @@ title: 简化交互 ## 实时可见工具 -实时可见工具示例 --摘自知乎 +实时可见工具示例 --摘自知乎 如果某个操作非常重要，就应该把它放在界面中，并实时可见。 @@ -23,7 +23,7 @@ title: 简化交互 ## 悬停即现工具 -悬停即现工具示例 +悬停即现工具示例 如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 @@ -33,7 +33,7 @@ title: 简化交互 ## 开关显示工具 -开关显示工具示例 +开关显示工具示例 如果某些操作只需要在特定模式时显示，可以通过开关来实现。 @@ -43,13 +43,13 @@ title: 简化交互 ## 可视区域 ≠ 可点击区域 -文字链热区示例 +文字链热区示例 在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
-按钮热区示例 +按钮热区示例 当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。 diff --git a/docs/spec/navigation.en-US.md b/docs/spec/navigation.en-US.md index b8d146ac83..2b6efd5151 100644 --- a/docs/spec/navigation.en-US.md +++ b/docs/spec/navigation.en-US.md @@ -20,13 +20,17 @@ Navigation menu is an effective and user-friendly way for representing site stru ### Top Navigation - + + + Top navigation menu put hyperlinks in a row and present information in a simple and straightforward way. It is suitable for landing pages and consumer facing web apps. The number of first level menu items should be between 2 and 7. Title for each menu item should contain less than 15 characters. ### Side Navigation - + + + Vertical navigation is more flexible than horizontal one, menu items are easily extensible downward, and longer labels can be allowed. With help from a scrollbar, unlimited number of menu items can be supported. It is suitable for multi-level, operation intensive and dashboard-like web apps. @@ -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. - + + + > Notes: > @@ -53,25 +59,33 @@ Tabs categorize content, in order to present large amount of information in a li ### Basic - + + + Control content of the entire page. Usually used for switching among core functionalities. ### Card - + + + Control part of page content. Bordered container naturally separate it from other parts of the page. ### Pill - + + + Switch among options in a card. Usually used along with other types of tabs, so that user can navigate to intended content via quick tab switching. ### Vertical - + + + Used for large number of tab options. It can be easily extended to contain an unlimited number of categories. @@ -83,13 +97,17 @@ Steps is a navigation bar guiding users to perform a task following a predefined ### Horizontal - + + + Used for more than 2 but less than 5 steps. Title for each step should contain less than 12 characters. ### Vertical - + + + Usually float at the left side of pages, in a fixed position. Multi-line description can be attached to each step. Suitable for large or dynamic number of steps, i.e. time-based steps with dynamic descriptions. @@ -101,18 +119,24 @@ Used for paginating large amount of content. Users can clearly know the total am ### Basic - + + + When there is a large number of rows, page size can be made customizable by users, so that users can query and browse information more flexibly and effectively. ### Mini - + + + Commonly used in a Card or a floating layer. ### Simple - + + + Commonly used in a Card or a data table, for no more than 10 pages. diff --git a/docs/spec/navigation.zh-CN.md b/docs/spec/navigation.zh-CN.md index 34aeee914c..10d87f0e30 100644 --- a/docs/spec/navigation.zh-CN.md +++ b/docs/spec/navigation.zh-CN.md @@ -20,13 +20,17 @@ skip: true ### 顶部导航菜单 - + + + 顶部导航菜单的形式就是把超链接连成一行，信息内容层级比较简单明了，适用在浏览性强的门户性质以及比较前台化的应用。一级类目建议在 2-7 个以内。标题长度 4-15 个字符长度为好，中文字长 2-6 个。 ### 侧边导航菜单 - + + + 垂直导航较横向的导航更灵活，易于向下扩展， 且允许的标签长度较长。类目数量不限，可配合滚动条使用，适合信息层级多、操作切换频率高的管理性质的应用。 @@ -38,7 +42,9 @@ skip: true 面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系。 - + + + > 注意事项： > @@ -53,25 +59,33 @@ skip: true ### 基本样式 - + + + 引领整个页面的内容，用于主功能切换。 ### 卡片样式 - + + + 用于页面中局部展示，包裹型容器能很好的和其它内容隔离。 ### 胶囊型样式 - + + + 用于卡片内的选项切换，经常和其它组件结合使用，让用户快速切换对应内容。 ### 竖状样式 - + + + 用于分类较多的选项，可以不限制分类数量，具备更好的扩展性。 @@ -83,13 +97,17 @@ skip: true ### 横向流程步骤条 - + + + 步骤多于 2 步时使用, 但建议不超过 5 步，每阶段文字长度保持在 12 个字符以内。 ### 竖向流程步骤条 - + + + 一般居页面左侧，悬浮固定，可追加多行文字描述，适合较多步骤或步骤数动态变化时使用，例如：时间步骤跟踪描述。 @@ -101,18 +119,24 @@ skip: true ### 标准样式 - + + + 当信息条目较多的时候，可以允许用户自定义每页的行数，以提高用户查看和检索信息的效率和灵活性，常与表格、卡片搭配使用。 ### 迷你样式 - + + + 一般用于卡片或者浮层。 ### 简易样式 - + + + 一般用于卡片或者统计类表格展示，在 10 页之内。 diff --git a/docs/spec/proximity.en-US.md b/docs/spec/proximity.en-US.md index e7ee545362..e8d1bcea4b 100644 --- a/docs/spec/proximity.en-US.md +++ b/docs/spec/proximity.en-US.md @@ -11,13 +11,13 @@ When several items are in close proximity to each other, they become one visual ## The relation of vertical spacing -Example of the different vertical distance +Example of the different vertical distance Divide the hierarchy of information through three formats:「small spacing」, 「middle spacing」and「large spacing」
-Example of added element +Example of added element In the case that the three formats are applicable, the hierarchy of information can be separated clearly through adding or cutting down the multiple of 「basic spacing」, or adding elements. @@ -27,12 +27,12 @@ In the case that the three formats are applicable, the hierarchy of information ## Relationship of horizontal spacing -Example of combination and configuration +Example of combination and configuration To adapt to screens of different sizes, in the horizontal direction, use grid layout to arrange the components to ensure the flexibility of the layout.
-Example of checkbox +Example of checkbox In the inner of a component, the horizontal spacing of elements should differ too. diff --git a/docs/spec/proximity.zh-CN.md b/docs/spec/proximity.zh-CN.md index bb2b7bfb7a..532f10b3a0 100644 --- a/docs/spec/proximity.zh-CN.md +++ b/docs/spec/proximity.zh-CN.md @@ -11,13 +11,13 @@ title: 亲密性 ## 纵向间距关系 -纵向间距示例 +纵向间距示例 通过「小号间距」、「中号间距」、「大号间距」这三种规格来划分信息层次结构。
-增加元素示例 +增加元素示例 在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。 @@ -27,12 +27,12 @@ title: 亲密性 ## 横向间距关系 -组合排布示例 +组合排布示例 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
-复选框内示例 +复选框内示例 在一个组件内部，元素的横向间距也应该有所不同。 diff --git a/docs/spec/reaction.en-US.md b/docs/spec/reaction.en-US.md index 8ad25017fb..67f489280c 100644 --- a/docs/spec/reaction.en-US.md +++ b/docs/spec/reaction.en-US.md @@ -17,15 +17,21 @@ While there is a possibility of too much feedback (or, more accurately, too much ## Lookup Patterns -example of Certain Category + +example of Certain Category + -example of Uncertain Category + +example of Uncertain Category + Auto Complete: As the user types input into a field, a drop-down menu of matching values is displayed. Depending on the categories of search results, it can be divided into two types, Certain Category and Uncertain Category.
-example of Live Search + +example of Live Search + Live Suggest: Live Suggest provides real-time search term suggestions for creating a search. @@ -35,7 +41,9 @@ Live Suggest: Live Suggest provides real-time search term suggestions for creati ## Live Suggest -example of Live Preview + +example of Live Preview + Live Preview: A Live Preview gives the users a glimpse beforehand of how the application will interpret their input once submitted. @@ -47,24 +55,36 @@ Progressive Disclosure: When users are faced with a series of steps, it is often
-example of Loading Button + +example of Loading Button + -example of Loading Table + +example of Loading Table + -example of Loading List + +example of Loading List + -example of Loading Page + +example of Loading Page + Progress Indicator: Progress Indicators keep a conversation going with the user when the rest of the interface is currently unavailable. Common Progress Indicators, such as Loading Button, Loading Table, Loading List and Loading Page, can be displayed respectively according to the frequency and importance of operation.
-example of Click Refresh + +example of Click Refresh + Click Refresh: Click Refresh notifies the user of fresh content and provides button or tool to refresh.
-example of Periodic Refresh + +example of Periodic Refresh + Periodic Refresh: Periodic Refresh brings in fresh content on a periodic basis without direct user interaction. diff --git a/docs/spec/reaction.zh-CN.md b/docs/spec/reaction.zh-CN.md index 3cd805c73f..32d451ee44 100644 --- a/docs/spec/reaction.zh-CN.md +++ b/docs/spec/reaction.zh-CN.md @@ -17,15 +17,21 @@ title: 即时反应 ## 查询模式 -确定类目示例 + +确定类目示例 + -不确定类目示例 + +不确定类目示例 + 自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。根据查询结果分类的多少，可以分为「确定类目」、「不确定类目」两种类型。
-实时搜索示例 + +实时搜索示例 + 实时搜索：随着用户输入，实时显示搜索结果。「自动完成」、「实时建议」的近亲。 @@ -35,7 +41,9 @@ title: 即时反应 ## 反馈模式 -实时预览示例 + +实时预览示例 + 实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。 @@ -47,24 +55,36 @@ title: 即时反应
-按钮加载示例 + +按钮加载示例 + -表格加载示例 + +表格加载示例 + -富列表加载示例 + +富列表加载示例 + -页面加载示例 + +页面加载示例 + 进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。常见的进度指示：「按钮加载」、「表格加载」、「富列表加载」、「页面加载」。可根据操作的量级和重要性，展示不同类型的进度指示。
-点击刷新示例 + +点击刷新示例 + 点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
-定时示例 + +定时示例 + 定时刷新：无需用户介入，定时展示新内容。 diff --git a/docs/spec/repetition.en-US.md b/docs/spec/repetition.en-US.md index a10a8e89e7..43d645516b 100644 --- a/docs/spec/repetition.en-US.md +++ b/docs/spec/repetition.en-US.md @@ -11,10 +11,18 @@ The same elements keep repeating in the whole interface, which not only could lo ## Repetitive elements -Example of repetitive wireframe + +Example of repetitive wireframe + -Example of repetitive design elements + +Example of repetitive design elements + -Example of repetitive of formats + +Example of repetitive of formats + + The repetitive element may be a thick rule(line), a wireframe, color, design elements, particular format, spatial relationships, etc. + diff --git a/docs/spec/repetition.zh-CN.md b/docs/spec/repetition.zh-CN.md index 033b19b3a0..8c998724f8 100644 --- a/docs/spec/repetition.zh-CN.md +++ b/docs/spec/repetition.zh-CN.md @@ -11,10 +11,16 @@ title: 重复 ## 重复元素 -线框重复示例 + +线框重复示例 + -设计要素重复示例 + +设计要素重复示例 + -文案格式重复示例 + +文案格式重复示例 + 重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。 diff --git a/docs/spec/research-empty.zh-CN.md b/docs/spec/research-empty.zh-CN.md index 3ba5aa09e7..32f48d8849 100644 --- a/docs/spec/research-empty.zh-CN.md +++ b/docs/spec/research-empty.zh-CN.md @@ -36,8 +36,10 @@ title: 空状态 ### Do&Don’t -正确示范 -错误示范 + +正确示范 +错误示范 + --- @@ -45,25 +47,33 @@ title: 空状态 ### 新手引导 - + + + 一般来说，新用户希望空状态具有帮助说明和推荐操作。首次使用应用或功能场景的空状态非常有用，因为它向用户展示了该功能和流程，并且可以帮助用户快速上手。为了帮助首次使用新用户，空状态可以使用功能引导、帮助文档等方式填充原本为空的页面。 #### 使用引导变形 - + + + 使用引导由状态提示、帮助引导、建议操作三个部分组成，设计时可根据业务流程选择模块来构成页面和变形。针对处于复杂流程中某一环的空状态页面，也可提供流程引导模块帮助用户全局理解操作流程，同时可提供文字按钮进行流程相关的快捷操作。 ### 完成或清空 - + + + 这种空状态是用户自愿从功能上删除数据的情况。例如，客户完成了任务清单上的所有项目，阅读了所有通知。一般此类场景不需要进行操作引导，只需要用图形元素或提示信息进行空状态说明。 ### 无数据 - + + + 内容区域无数据的场景使用，由图形元素、提示信息、建议操作三类元素组合展示，根据使用场景决定是否提供建议操作。 diff --git a/docs/spec/research-exception.zh-CN.md b/docs/spec/research-exception.zh-CN.md index f7fb62952c..413028ecee 100644 --- a/docs/spec/research-exception.zh-CN.md +++ b/docs/spec/research-exception.zh-CN.md @@ -38,7 +38,9 @@ title: 异常页 ### 异常页 - + + + 当页面出现异常时展示，其包含以下要素： @@ -52,7 +54,9 @@ title: 异常页 #### 模板 - 404 - + + + **什么时候用** @@ -60,7 +64,9 @@ title: 异常页 #### 模板 - 403 - + + + **什么时候用** @@ -68,7 +74,9 @@ title: 异常页 #### 模板 - 500 - + + + **什么时候用** @@ -76,7 +84,9 @@ title: 异常页 #### 模板 - 浏览器不兼容 - + + + **什么时候用** @@ -84,7 +94,9 @@ title: 异常页
- + + + **设计建议** @@ -96,7 +108,9 @@ title: 异常页 ### 加载失败 - + + + **什么时候用** diff --git a/docs/spec/research-form.zh-CN.md b/docs/spec/research-form.zh-CN.md index eb680162c8..240ca83b83 100644 --- a/docs/spec/research-form.zh-CN.md +++ b/docs/spec/research-form.zh-CN.md @@ -43,20 +43,26 @@ title: 表单页 在表单页中组织呈现各表单项时要注意简洁表达，高效准确，避免增加用户录入信息的成本。 -错误示范 + +错误示范 + 一个表单页中针对同一种内容类型的表单项不要使用不同的组件或表现形式，会增加用户理解成本。
-正确示范 -错误示范 + +正确示范 +错误示范 + 表单项的标题、提示不要使用不易理解的词汇或过长，造成理解成本，如不可避免使用少见词汇，可使用帮助说明等元素辅助设计。
-错误示范 + +错误示范 + 预填提示避免正确的废话，例如一个叫姓名的表单项输入提示是“请输入姓名”。 @@ -76,7 +82,9 @@ title: 表单页 #### 模板 - 基础表单 - + + + **什么时候用** @@ -88,7 +96,9 @@ title: 表单页 #### 模板 - 基础分步表单 - + + + **什么时候用** @@ -96,7 +106,9 @@ title: 表单页 #### 模板 - 分组表单 - + + + **什么时候用** @@ -106,31 +118,41 @@ title: 表单页 **什么时候用** - + + + 动态增减：建议条目表单数 ≤3 项，并且每个输入框不需要单独的标题使用。
- + + + 可编辑表格：建议条目表单数 2 ~ 5 项 时使用，以使得每行内容可被完整呈现。
- + + + 折叠面板编辑：建议条目表单数在 6 ~ 8 项 时使用。
- + + + 抽屉编辑：建议条目表单表单数 >8 项 时使用。
- + + + 规则树：应用于规则编辑场景。 @@ -140,7 +162,9 @@ title: 表单页 #### 模板 - 设置 - + + + **什么时候用** @@ -161,13 +185,17 @@ title: 表单页 #### [模板 - 登录](https://preview.pro.ant.design/user/login) - + + + Ant Design 标准登录模板 #### [模板 - 注册](https://preview.pro.ant.design/user/register) - + + + Ant Design 标准注册模板 @@ -184,33 +212,45 @@ Ant Design 标准注册模板 #### 基础布局 - + + + 在一个区域内从上到下单列布局，引导用户纵向阅读，据[研究](https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php)这是能够最高效完成任务的布局方式。 #### 弱分组 - + + + -错误示范 + +错误示范 + 在空间有限时，较短宽度且具有相关性的表单项可多个组合在一行中，形成分组的暗示。 #### 区域内分组 - + + + 当一个区域中内容较多且可被分类归纳时，可通过区分标题来进行区域内分组。 #### 卡片分组 - + + + 当一个页面中内容众多（通常大于两屏）且可被分类归纳时，可通过卡片分组来承载，每个卡片需要包含一个大标题。 #### 判断布局方式 - + + + 关于使用何种布局方式的判断，和[详情页](/docs/spec/detail-page#%E8%AE%BE%E8%AE%A1%E5%BB%BA%E8%AE%AE)类似，应从信息的复杂度和关联性两个维度去梳理。随后可选择相匹配的模板，进行页面快速搭建。 diff --git a/docs/spec/research-list.zh-CN.md b/docs/spec/research-list.zh-CN.md index e9ef0014ed..72ca7271b4 100644 --- a/docs/spec/research-list.zh-CN.md +++ b/docs/spec/research-list.zh-CN.md @@ -38,19 +38,25 @@ title: 列表页 #### 单列布局 - + + + 从上往下堆叠，数据过滤模块在最上方，过滤数据后，用户再由总体到具体的的浏览逻辑理解和分析。 #### 双栏布局 - + + + 将数据过滤模块放置在侧栏，当过滤条件过多，横向空间充裕时使用。 #### [模版 - 查询表格](https://preview.pro.ant.design/list/table-list) - + + + **什么时候使用** @@ -58,7 +64,9 @@ title: 列表页 #### 模版 - 标准列表 - + + + **什么时候使用** @@ -66,7 +74,9 @@ title: 列表页 #### [模板 - 卡片列表](https://preview.pro.ant.design/list/card-list) - + + + **什么时候使用** @@ -74,7 +84,9 @@ title: 列表页 #### 模版 - 搜索列表 - + + + **什么时候使用** @@ -86,7 +98,9 @@ title: 列表页 #### 模版 - 成员管理 - + + + **什么时候使用** @@ -100,7 +114,9 @@ title: 列表页 #### 批量操作 - + + + 页级的批量操作影响整个页面，可布置于页底。 diff --git a/docs/spec/research-message-and-feedback.zh-CN.md b/docs/spec/research-message-and-feedback.zh-CN.md index fda93d8896..1adea775a7 100644 --- a/docs/spec/research-message-and-feedback.zh-CN.md +++ b/docs/spec/research-message-and-feedback.zh-CN.md @@ -29,7 +29,9 @@ title: 消息与反馈 #### 留在原地 - + + + **对话框 Modal** @@ -37,7 +39,9 @@ title: 消息与反馈 #### - + + + **全局提示 Message** @@ -45,7 +49,9 @@ title: 消息与反馈 #### 跳转 - + + + **独占式 Inline Text & Illustration** @@ -54,7 +60,9 @@ title: 消息与反馈 #### - + + + **全局提示 Message** @@ -64,7 +72,9 @@ title: 消息与反馈 #### 留在原地 - + + + **对话框 Model** @@ -72,7 +82,9 @@ title: 消息与反馈 #### - + + + **警告提示 Alert** @@ -80,7 +92,9 @@ title: 消息与反馈 #### - + + + **表单校验提示** @@ -90,7 +104,9 @@ title: 消息与反馈 #### - + + + **通知提醒框 Notification** @@ -99,7 +115,9 @@ title: 消息与反馈 #### 跳转 - + + + **独占式 Inline Text & Illustration** @@ -108,7 +126,9 @@ title: 消息与反馈 ### 后台操作 - + + + **通知提醒框 Notification** @@ -117,7 +137,9 @@ title: 消息与反馈 #### - + + + **通知中心** diff --git a/docs/spec/research-navigation.zh-CN.md b/docs/spec/research-navigation.zh-CN.md index c9f156e7d4..fb9482a38c 100644 --- a/docs/spec/research-navigation.zh-CN.md +++ b/docs/spec/research-navigation.zh-CN.md @@ -72,7 +72,9 @@ title: 导航 ## 类型 - + + + 正确理解和使用导航组件对产品全局体验至关重要。 @@ -98,7 +100,9 @@ title: 导航 #### 侧边导航 - + + + - 很多菜单时使用，建议菜单多于 6 项时使用； @@ -108,7 +112,9 @@ title: 导航 #### 顶部导航 - + + + - 各菜单权重常常与排列顺序呈正相关，即排列顺序影响用户使用频次； @@ -118,9 +124,10 @@ title: 导航 #### 弹出式导航 -正确示范 - -错误示范 + +正确示范 +错误示范 + 用于拓展导航承载层级，适用于大型网站。 @@ -134,7 +141,9 @@ title: 导航 #### 实用工具 - + + + 通常放在网站的右上角，是一种习惯用法，用户习惯在这个位置找到这些内容。 @@ -154,7 +163,9 @@ title: 导航 • 语言切换 -错误示范 + +错误示范 + **不要将页面内的操作放到实用工具中。** @@ -166,17 +177,23 @@ title: 导航 > 此处的数据库是一种信息架构形式，各页面内容独立，但都遵循一致的形式/格式。 + + #### 沉浸式导航 - + + + 用于处理较为复杂或需要较大工作空间的任务。 #### 多级站点导航 - + + + - 菜单数量较多的子站点使用； @@ -188,31 +205,41 @@ title: 导航 #### 页头 - + + + 页头位于页内容上方，主要作用是申明页面主题、页内信息导航、页面级内容操作。 #### Tree 树型控件 - + + + 页面内多层次的结构展示。 #### 锚点 - + + + 在各个页面分区之间跳转，当平铺呈现的内容过长时使用。 #### 回到顶部 - + + + 快速回到页面顶部。 #### 走马灯 - + + + 循环播放一系列内容。 @@ -224,13 +251,17 @@ title: 导航 #### 面包屑 - + + + 反映当前页面在网站结构中的位置，在少于三个层级时无需展示，此时的全局导航能直接呈现位置。用户可通过面包屑返回上级页面。 #### 返回按钮 - + + + **一般标题会和面包屑一起出现，有面包屑时标题默认不推荐使用返回按钮。** @@ -240,7 +271,9 @@ title: 导航 #### 步骤条 - + + + 按照预先定义的顺序引导用户一步一步前后移动。 @@ -254,7 +287,9 @@ title: 导航 #### 上一篇下一篇 - + + + 协助我们移动到其他关系紧密的网页。 diff --git a/docs/spec/research-result.zh-CN.md b/docs/spec/research-result.zh-CN.md index 93a181eeb1..ef3929f95c 100644 --- a/docs/spec/research-result.zh-CN.md +++ b/docs/spec/research-result.zh-CN.md @@ -43,30 +43,40 @@ title: 结果页 ## 设计建议 -正确示范 -错误示范 + +正确示范 +错误示范 + -正确示范 -错误示范 + +正确示范 +错误示范 + 标题构成建议为「对象+动作+结果/状态」或「动作+结果/状态」。
-正确示范 -错误示范 + +正确示范 +错误示范 + 操作引导建议不超过 2 项，过多操作会对用户选择造成困扰。
-正确示范 + +正确示范 + 轻量的反馈不建议使用结果页，可以使用全局提示、警告提示、通知提醒框等交互方式，详情参考反馈类设计指南。
-正确示范 + +正确示范 + 若结果状态为成功时，可在主按钮上告知用户几秒后自动跳转。 @@ -74,7 +84,9 @@ title: 结果页 ### 基础布局 - + + + 结果页可提供以下内容： @@ -88,19 +100,25 @@ title: 结果页 #### 模板 - 基础结果页 - + + + 显示结果状态并引导用户进行下一步操作。 #### 模板 - 复杂结果页 - + + + 除结果状态和引导操作等基础信息外，同时展示相关推荐、流程进度、错误详情等信息。 #### 补充信息类型 - + + + ## 延伸阅读 diff --git a/docs/spec/research-workbench.zh-CN.md b/docs/spec/research-workbench.zh-CN.md index 1a8c360336..eca1916f97 100644 --- a/docs/spec/research-workbench.zh-CN.md +++ b/docs/spec/research-workbench.zh-CN.md @@ -28,6 +28,7 @@ title: 工作台

降低记忆负载

理解用户再次访问的核心目标，为可能的目的地提供最短导航路径。

+
@@ -35,7 +36,9 @@ title: 工作台 #### 模板 - 工作台 - + + + **什么时候使用** @@ -54,7 +57,9 @@ title: 工作台 #### 模板 - 新手引导 - + + + **什么时候使用** @@ -90,7 +95,9 @@ title: 工作台 #### 按照使用频次布置内容 - + + + 用户在日常工作中最常使用的内容，按照使用频次将内容布置以下各区域。 diff --git a/docs/spec/stay.en-US.md b/docs/spec/stay.en-US.md index 9e26010094..13a48f6e41 100644 --- a/docs/spec/stay.en-US.md +++ b/docs/spec/stay.en-US.md @@ -15,18 +15,20 @@ Solve most of problems on the same page and avoid a new one, because the page re ## Overlays -good example - -good example (special case) - -bad example + +good example +good example (special case) +bad example + Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.
-example of Detail Overlay + +example of Detail Overlay + Detail Overlay: Allows an overlay to present additional information when the user clicks or hovers over a link or section of content. @@ -34,7 +36,9 @@ Detail Overlay: Allows an overlay to present additional information when the use
-example of Input Overlay + +example of Input Overlay + Input Overlay: Let the user enter small amounts of text on the overlay. @@ -44,13 +48,17 @@ Input Overlay: Let the user enter small amounts of text on the overlay. ## Inlays -example of List Inlay + +example of List Inlay + List Inlay: Works as an effective way to hide detail until needed — while at the same time preserving space on the page for high-level overview information.
-example of Tabs + +example of Tabs + Tabs: Provides additional panels of information accessible by tab controls. @@ -72,18 +80,24 @@ It has long been common practice on the Web to turn each step into a separate pa
-example of Responsive Disclosure + +example of Responsive Disclosure + Responsive Disclosure: Make the experience for selecting painless by providing disclosures as quickly as possible, and doing it all in a single-page interface.
-example of Configurator Process + +example of Configurator Process + Configurator Process: Provides a configurator that allows users to help them accomplish the task or build their own product.
-example of Dialog Overlay Process + +example of Dialog Overlay Process + Dialog Overlay Process: Any page switch is an interruption to the user's mental flow. In addition, any context switch is a chance for a user to leave the site. But sometimes the step-by-step flow is necessary. diff --git a/docs/spec/stay.zh-CN.md b/docs/spec/stay.zh-CN.md index 8195469909..b51c74d089 100644 --- a/docs/spec/stay.zh-CN.md +++ b/docs/spec/stay.zh-CN.md @@ -15,17 +15,19 @@ title: 足不出户 ## 覆盖层 -推荐示例 - -推荐示例 - -不推荐示例 + +推荐示例 +推荐示例 +不推荐示例 + 二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可。
-详情覆盖层示例 + +详情覆盖层示例 + 详情覆盖层：一般在列表中，通过用户「悬停」/「点击」某个区块，在当前页加载该条列表项的更多详情信息。 @@ -33,7 +35,9 @@ title: 足不出户
-输入覆盖层示例 + +输入覆盖层示例 + 输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。 @@ -43,13 +47,17 @@ title: 足不出户 ## 嵌入层 -列表嵌入层示例 + +列表嵌入层示例 + 列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
-标签页示例 + +标签页示例 + 标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。 @@ -71,18 +79,24 @@ title: 足不出户
-渐进式展现示例 + +渐进式展现示例 + 渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
-配置程序示例 + +配置程序示例 + 配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
-弹出框覆盖层示例 + +弹出框覆盖层示例 + 弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。 diff --git a/docs/spec/visual.zh-CN.md b/docs/spec/visual.zh-CN.md index 1852334970..5ed22f662f 100644 --- a/docs/spec/visual.zh-CN.md +++ b/docs/spec/visual.zh-CN.md @@ -39,31 +39,41 @@ title: 可视化 #### 时间类 - + + + 通常用于表现数据在时间维度上的趋势和变化。 #### 比较类 - + + + 使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小，通常用于展示不同分类间的数值对比。 #### 分布类 - + + + 通常用于展示连续数据上数值的分布情况。 #### 流程类 - + + + 通常用于表示流程流转、流量关系。 #### 占比类 - + + + 显示同一维度上占比关系。 @@ -71,7 +81,9 @@ title: 可视化 ### 色板 - + + + AntV 提供了一套默认的图表颜色，包括颜色的用法， @@ -85,35 +97,49 @@ AntV 提供了一套默认的图表颜色，包括颜色的用法， #### 轴 - + + + - + + + 用来定义坐标系中数据在方向和值的映射关系。 #### 图例 - + + + - + + + 用来解释图表区域中包含的所有视觉元素的含义。 #### 标签 - + + + 对当前的一组数据进行的内容标注。 #### 提示信息 - + + + 指当鼠标悬停在图表上或者手指点按移动设备的某个数据点时，以交互提示信息的形式展示该点的数据，比如该点的值，数据单位等。 #### 图形 - + + + 图形是统计图表的视觉通道在形状上映射的视觉展现，是图表的主体部分，其他图表组件的目的是帮助读者更好地理解数据在图形上的映射关系。 @@ -121,11 +147,15 @@ AntV 提供了一套默认的图表颜色，包括颜色的用法， ### 图表布局适应 - + + + 数据可视化始终面对海量数据量与有限屏幕空间的冲突，如何解决不同端、不同屏幕尺寸下内容的适配问题，在有限的空间内帮助用户更快地理解信息和更快地分析洞察，是我们一直致力研究的问题。 - + + + 在 Ant Design 的可视化体系中，我们发展出一套适用于全量图表的布局适应规则，从整体图表、图表内原子组件梳理了适用于所有图表的布局适应体系。以右侧动图为例，图中横轴的轴标签跟随具体尺寸发生了旋转。更多内容即将发布，敬请期待。 diff --git a/docs/spec/visualization-page.en-US.md b/docs/spec/visualization-page.en-US.md index 87b5395828..7ba4fbe437 100644 --- a/docs/spec/visualization-page.en-US.md +++ b/docs/spec/visualization-page.en-US.md @@ -41,20 +41,26 @@ To help users quickly and clearly understand the meanings of data, analyze trend ### Do & Don’t -Do -Don't + +Do +Don't + When the data is highly summarized, a chart with the detail number(s) is more straight-forward than a chart alone.
-Do + +Do + Try to highlight the primary data on first one screen, and limit the sum of modules into 5-9, avoiding information overload.
-Do + +Do + 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 - + + + 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 - + + + **When to use** @@ -80,7 +90,9 @@ Key indicator, scorecard, filter, chart. #### [Monitor Dashboards](https://preview.pro.ant.design/dashboard/monitor) - + + + **When to use** @@ -92,13 +104,17 @@ Key indicator, scorecard, chart, map. ### Analytics Dashboards - + + + 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 - + + + **When to use** @@ -110,13 +126,17 @@ Key indicator, scorecard, filter, chart. ### Detail Templates - + + + 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 - + + + **When to use** @@ -142,25 +162,33 @@ Filter, chart, table. #### Combination Methods of Cards - + + + 1. One card, one topic.
- + + + 2. Place closely-related datasets on one card, and use split lines to break it into different areas. #### Use Suitable Charts - + + + 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 - + + + ## Read more diff --git a/docs/spec/visualization-page.zh-CN.md b/docs/spec/visualization-page.zh-CN.md index 43a4f556cf..3e470a39ee 100644 --- a/docs/spec/visualization-page.zh-CN.md +++ b/docs/spec/visualization-page.zh-CN.md @@ -41,20 +41,26 @@ title: 数据可视化页 ### Do&Don’t -正确示范 -错误示范 + +正确示范 +错误示范 + 在对数据进行高度概括时，展示指示卡+数值，比图表更直接。
-正确示范 + +正确示范 + 尽量在一屏中突出核心指示，将总模块数量控制在 5-9 个，避免信息过载。
-正确示范 + +正确示范 + 善于使用筛选、过滤功能，可以让用户在观察全局的同时，还可以查看数据细节，用户在有疑问时能够快速得到方向。 @@ -62,13 +68,17 @@ title: 数据可视化页 ### 概览 - + + + 将全局视角中最关键的指标，以平铺的方式展现在整个页面中，帮助决策者做决策。当指标重要性平均时采用左图布局，需要强调主题时采用右图布局 #### 模板 - 指标大盘 - + + + **什么时候用** @@ -80,7 +90,9 @@ title: 数据可视化页 #### [模板 - 监控](https://preview.pro.ant.design/dashboard/monitor) - + + + **什么时候用** @@ -92,13 +104,17 @@ title: 数据可视化页 ### 分析 - + + + 将数据分析类型页面拆解为多个部分，通常为“总 - 分”的结构，多维度地展示数据的全貌，帮助使用者发现当前问题。 #### 模板 - 多维分析 - + + + **什么时候用** @@ -110,13 +126,17 @@ title: 数据可视化页 ### 明细 - + + + 数据明细用来展示单个指标总览和明细。常用于数据报表细节信息的展示，根据业务诉求可配置文本、列表、可视化图表等。 #### 模板 - 数据明细 - + + + **什么时候用** @@ -145,25 +165,33 @@ title: 数据可视化页 #### 卡片的组合方式 - + + + 1、一张卡片放置一个主题内容。
- + + + 2、也可将相关性高的数据组合呈现在一个卡片中，并使用通栏分割线区隔。 #### 选择正确的可视化组件 - + + + 当设计者对页面的结构有初步的思路之后，可根据信息粒度的大小来选择不同的可视化组件。信息粒度从大到小对应：指标卡和排行榜、图表、文本明细。 #### 选择正确的色板 - + + + ## 延伸阅读