From 2b71085e68ae8529f7463f08ff6f14f3e80abc42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 12 Aug 2020 17:37:31 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=F0=9F=8C=90=20translate=20more=20desig?= =?UTF-8?q?n=20documents=20(#26125)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: 🌐 translate more design documents * translate docs/spec/copywriting.en-US.md * translate docs/spec/data-format.en-US.md * translate docs/spec/detail-page.en-US.md * fix remark link * update link * translate docs/spec/visualization-page.en-US.md * update docs * update docs --- docs/spec/copywriting.en-US.md | 177 ++++++++++++++++++ .../{copywriting.md => copywriting.zh-CN.md} | 14 +- docs/spec/data-format.en-US.md | 125 +++++++++++++ .../{data-format.md => data-format.zh-CN.md} | 18 +- docs/spec/detail-page.en-US.md | 141 ++++++++++++++ .../{detail-page.md => detail-page.zh-CN.md} | 22 +-- docs/spec/research-overview.zh-CN.md | 4 +- docs/spec/visualization-page.en-US.md | 175 +++++++++++++++++ ...on-page.md => visualization-page.zh-CN.md} | 14 +- site/theme/static/common.less | 4 +- site/theme/static/preview-img.less | 2 +- 11 files changed, 647 insertions(+), 49 deletions(-) create mode 100644 docs/spec/copywriting.en-US.md rename docs/spec/{copywriting.md => copywriting.zh-CN.md} (98%) create mode 100644 docs/spec/data-format.en-US.md rename docs/spec/{data-format.md => data-format.zh-CN.md} (98%) create mode 100644 docs/spec/detail-page.en-US.md rename docs/spec/{detail-page.md => detail-page.zh-CN.md} (93%) create mode 100644 docs/spec/visualization-page.en-US.md rename docs/spec/{visualization-page.md => visualization-page.zh-CN.md} (96%) diff --git a/docs/spec/copywriting.en-US.md b/docs/spec/copywriting.en-US.md new file mode 100644 index 000000000000..1b4b9465bf95 --- /dev/null +++ b/docs/spec/copywriting.en-US.md @@ -0,0 +1,177 @@ +--- +category: Design Patterns +type: Global Rules +order: 5 +title: Copywriting +--- + +In the interface, we need to resonate with users through dialogue. Accurate and clear words are easy to understand, and a suitable tone can build a sense of trust easily. Therefore, in the interface design, copywriting should be taken seriously. There are some points to note when using and writing copy: + +- Consider from the user's point of view +- Express consistently +- Place important information in prominent positions +- Professional, accurate and complete +- Concise, friendly and positive + +--- + +## Language + +In the interface, copywriting is the basis of our communication with users. Therefore, the expression of words should be carefully deliberaed and designed. With clear, accurate, and concise copywriting, the user experience can be more user-friendly. + +### Articulate foothold + +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. + +> Note: Use "we" to comunicate with users when they are reporting questions, suggestions or complaints to the systems, such as "We will consider your complaint.". + +### Concise statement + +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 + +Use simple, direct and easy-to-understand words. Indirect, ambiguous, obscure, and overly "refined" copywirte will increase user's cognitive load. + +### Express consistently + +Correct Example +Wrong Example + +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; +- Use consistent operation names and page titles. + +### Place important information in a prominent position + +Correct Example +Wrong Example + +Let users see the most important content at first glance. + +> Note: When considering security issues, private information can be adjusted to "visible after click". + +### Express completely and directly + +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 + +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 + +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 + +## Tone + +Language defines content, while emotions and atmosphere are expressed more in tone. The same content can be expressed in different tones to different users. Take an example, to professional operators and new users, we should use different copywrite. + +### Bring each other closer + +Correct Example +Wrong Example + +Don't refer to the user by using "my" and "your" in the same phrase. + +> Note: To aovoid confusing the users, don't mix first person("I","me", or "my") and second person("you","your") in the same sentence. + +### Be friendly and respectful + +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 + +Don't use too absolute expression that will make the user uncomfortable. + +## Capitalization and punctuation + +### Uppercase and lowercase + +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. + +> People are much more used to reading words in lowercase letters, those are what our brains find easiest to scan and instantly absorb. Please avoid capitalizing whole words or phrases. + +
+ +Correct Example +Wrong Example + +Use the correct case. + +
+ +Recommend +Not recommend + +Use sentence capital case in headlines, titles, labels, menu items, buttons, etc. + +### Arabic numbers + +Correct Example +Wrong Example + +Users perceive numbers faster. Numbers transmit information more effectively than words. + +### Omit unnecessary punctuation + +To help users scan the text more efficiently, unnecessary periods can be omitted. No need to use punctuation when the following elements appear alone: + +- Label +- Title +- Tips under the input box +- Text in tooltip component +- Sentences in the table + +
+ +Correct Example +Wrong Example + +The following elements need to be punctuated when they appear separately: + +- Multiple sentences or paragraphs +- Any sentence before a link + +### Use exclamation marks with caution + +Correct Example +Wrong Example + +The exclamation mark will make the tone appear too excited, and it will easily make the atmosphere too tense. + +> Note: When expressing greetings or congratulations to the user, use "!" is reasonable, such as" Welcome back to the community! ". diff --git a/docs/spec/copywriting.md b/docs/spec/copywriting.zh-CN.md similarity index 98% rename from docs/spec/copywriting.md rename to docs/spec/copywriting.zh-CN.md index 338b14a9e575..e7f2fc258859 100644 --- a/docs/spec/copywriting.md +++ b/docs/spec/copywriting.zh-CN.md @@ -1,14 +1,8 @@ --- -category: - zh-CN: 设计模式 - en-US: Design Patterns -type: - zh-CN: 全局规则 - en-US: Global Rules +category: 设计模式 +type: 全局规则 order: 5 -title: - zh-CN: 文案 - en-US: Copywriting +title: 文案 --- 在界面中，我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。 在使用和书写文案时有以下几点需要注意： @@ -62,7 +56,7 @@ title: 正确示范 错误示范 - +操作名称和目标页面的标题一致。 - 描述同一个事物的词汇要保持统一; - 上下文的语法、语种、语序要保持统一; diff --git a/docs/spec/data-format.en-US.md b/docs/spec/data-format.en-US.md new file mode 100644 index 000000000000..c098bca85118 --- /dev/null +++ b/docs/spec/data-format.en-US.md @@ -0,0 +1,125 @@ +--- +category: Design Patterns +type: Global Rules +order: 5 +title: Data format +--- + +## Design Goals + +Standardize data expression to ensure intuitive, accurate and consistent understanding of data. + +## Types + +### Numerical + +The numerical value is used to indicate the measurement size, it can be used alone or with digital symbols. + +| Symbol Format | How and When to Use | Example | +| --- | --- | --- | +| Decimal separator | Use commas to separate groups of thousands to help users read. | 123,123,220 | +| Unit of measurement | Put units of measurement in lowercase. | 123,220kg | +| Percentage | To present proportionality, etc. | 12.32% | +| Forward slash | To express progress with fractions. | 12/30 | + +
+ +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. + +### Amount + +**Amount Format**: The standard format is "currency symbol + number". For example, "CNY1,123.00". **Currency Symbol**: There are two types: abbreviations letters and characters. You can check symbols for different currencies from [CURRENCY SYMBOLS](https://www.iban.com/currency-codes). + +| Currency Symbol | How and When to Use | Example | +| --- | --- | --- | +| Character | Take RMB as example, its character symbol is "¥", placed in front of the amount. | ¥123.00 | +| Letter | Take RMB as example, it is recommended to use CNY, which is the international currency code. | CNY123.00 | + +Large amount: If an amount is large, "M/Mill." (abbreviation of million) and "B/Bill." (abbreviation of billion) can be used. + +### Date/Time + +#### Absolute Time + +Absolute time is for users with high time accuracy requirements, it emphasizes the precise time point of information release. Through absolute time, users can retrieve information and review the past content. + +**Date Format:** + +We suggest the following formats: + +| Format | How and when to use | Examples | +| --- | --- | --- | +| Year, month, day | In China「YYYY-MM-DD」format is used by default. | `2019-12-08` | +| Terms | When a special term containing a date expressed with numbers，display a "." between the month and the day, and quotation marks should be added before and after the term. | `6.1 children's day` | +| Date range | Put "~" or "-" between the date or time range (space is required before and after). | `2018-12-08 ~ 2019-12-07` | + +**Time Format:** + +| Time System | How and when to use | Examples | +| --- | --- | --- | +| 24-hour clock | The format is HH:MM:SS. Omit hours or second if not apply. Use the 24-hour clock by default. | `14:08:00` | +| 12-hour clock | Use the format H:MM:SS AM/PM (or am/pm).  | `2:08:00 PM ~ 2:08:00 AM` | + +**Standard format**: When put a date and a time together, show a space between them, e.g. "2019-12-08 06:00:00". + +#### Relative Time + +To the users, the accuracy of time is not so important as the immediacy of the information. In the console platform, relative time is generally used for message and notification. And users tend to pay more attention to the unit of time, instead of working out the specific time point of publication. + +| Time | Display form | +| -------------------- | ----------------------------------------- | +| Less than 1 minute | just now | +| Less than 1 hour | N minutes ago | +| Within 24 hours | N hours ago | +| Longer than 24 hours | MM-DD HH:MM, e.g. "12-08 08:00" | +| Longer than one year | YYYY-MM-DD HH:MM，e.g. "2019-12-08 08:00" | + +### Data Redaction + +Data redaction refers to representing truncated data to protect sensitive privacy information. The rules presented here are general guidelines, which can be adjusted according to business scenarios with strong data security. + +#### Complete Redaction + +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 "\*\*\*". + +#### Partial Redaction + +Generally used for situations that require partial information for identification. In such cases, some part of the information is truncated, but the numerical digits of the numbers need to retain. The truncated data is replaced by "\*". + +| Data Type | How and When to Use | Example | +| --- | --- | --- | +| Name | Two-character name: display the first character, followed by a "\*". | 仲\* | +| | Names with three characters or more: display the first character and the last character, replace the middle character(s) with "\*". | 仲\*妮
仲\*\*妮 | +| Mobile number | Keep the first three and the last four digits of the mobile number. | 186\*\*\*\*1402 | +| ID number | The Chinese citizenship number consists of six address codes, eight birthdate codes, three sequential codes and one check code.

Redaction rules are classified into high, medium and low levels:
**High**: Show the first and last digits, and replace the others with `_`.
**Medium**: Show the first three and the last three. Replace the others with `_`.
**Low**: Show the first six and the last four. Replace the others with `*`. | High:
`6*************2`
Medium:
`213***********203`
Low:
`212912******2233` | +| Address | Keep the provinces, cities and district information, followed by several "\*". | 浙江省杭州市 西湖区 \***\*\*\*\*** | +| Email | Keep the host name of the mail and the first three characters, indicate the rest information with "\*". | 123\***\*\*\*\*\*\***@163.com | +| Bank card number | The bank card number consists of the issuing bank identification code (ranging from 6 to 12 digits), personal account identification (ranging from 6 to 12 digits), and a check code.

Redaction rules are classified into high, medium and low levels:
**High**: Display the last four digits, and replace the others with `_`.
**Medium**: Display the first six and the last four digits, replace the others with `_`. 
**Low**: Display the first six and the last six digits, display the remaining digits with `*`. | \***\*\*\*\*\*\*\***1208
620121**\*\***1208
620121\*\*\*\*111208 | + +### Data Status + +#### Empty State + +Do +Don't + +Display `--` to express no-data status. + +#### Loading + + + +Use Skeleton screen when loading data. + +## Reference + +- [Currency Symbol List](https://baike.baidu.com/item/%E8%B4%A7%E5%B8%81%E4%BB%A3%E7%A0%81/7467182?fr=aladdin) +- [Time Data Formats for Different Countries](https://zh.wikipedia.org/wiki/%E5%90%84%E5%9C%B0%E6%97%A5%E6%9C%9F%E5%92%8C%E6%97%B6%E9%97%B4%E8%A1%A8%E7%A4%BA%E6%B3%95) +- [Digital Specification for Publications](http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091154536.pdf) diff --git a/docs/spec/data-format.md b/docs/spec/data-format.zh-CN.md similarity index 98% rename from docs/spec/data-format.md rename to docs/spec/data-format.zh-CN.md index 19d497e39aa7..9f31d19b1b3b 100644 --- a/docs/spec/data-format.md +++ b/docs/spec/data-format.zh-CN.md @@ -1,14 +1,8 @@ --- -category: - zh-CN: 设计模式 - en-US: Design Patterns -type: - zh-CN: 全局规则 - en-US: Global Rules +category: 设计模式 +type: 全局规则 order: 5 -title: - zh-CN: 数据格式 - en-US: Data format +title: 数据格式 --- ## 设计目标 @@ -28,6 +22,8 @@ title: | 百分比 | 比例问题等。 | 12.32% | | 正斜杠 | 用分数的形式表示事项进展。 | 12/30 | +
+ 推荐示例 不推荐示例 @@ -50,6 +46,8 @@ title: | 字符 | 以人民币为例，金额前带货币单位标志「¥」 | ¥123.00 | | 字母 | 以人民币为例，推荐使用 CNY，CNY 为国际上通用的货币代码。 | CNY123.00 | +
+ 推荐示例 不推荐示例 @@ -130,7 +128,7 @@ title: 推荐示例 不推荐示例 -无数据用「--」表述。 +无数据用 `--` 表述。 #### 数据加载 diff --git a/docs/spec/detail-page.en-US.md b/docs/spec/detail-page.en-US.md new file mode 100644 index 000000000000..ba0ede80153b --- /dev/null +++ b/docs/spec/detail-page.en-US.md @@ -0,0 +1,141 @@ +--- +category: Design Patterns +type: Template Document +order: 3 +title: Detail Page +--- + +Detail Pages display the complete data to users. Users can edit the information or do other operations. + +## Design Goals + +To increase the information viewing and searching efficiency. To raise the convenience of operation. + +## Design Principles + +
+
+ +
+

Direct

+

Try to display the information as flat as possible. Do not hide or fold up the content if not necessary.

+
+
+
+ +
+

Clear hierarchy

+

In order to decrease the information complexity on each page, put information in levels and groups, following the principle of proximity.

+
+
+
+ +
+

Concise

+

Reduce the use of complex structures, try to use similar layouts and modules to reduce the interference of structural differences to users, and let them focus on information itself.

+
+
+
+ +## Typical Templates + +### 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. + +**When to use** + +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. + +**When to use** + +To display approval process and detailed approval information, as well as some approval operations. + +**Related operations** + +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** + +When the detail page has large and complex content, it has to be split into multiple tabs to guide users to browse information. + +#### Publish Process Templates + + + +Divide the content into steps, letting users to browse and operate step by step. + +**When to use** + +Such templates are suitable for developing and collaborating processes. + +## Design Suggestions + +#### 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. + +- Non-column split lines: to separate relevant contents; +- Full-column split lines: to divide the content into multiple parts; +- Cards: to display information on one topic; +- Tabs: to put the information into groups according to some feature, such as version, intention, phase, etc. + +#### 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: + +## Read more + +#### Related Global Rules + +- [Data Format](/docs/spec/data-format) +- [Button](/docs/spec/buttons) + +#### Related Modules or Components + +- [Description](/components/descriptions/) +- [Collapse](/components/collapse/) +- [Table](/components/table/) + +#### Reference + +- [Fiori – How to Design an Object Page](https://blogs.sap.com/2017/08/06/fiori-elements-how-to-design-an-object-page/) +- [SAP Fiori 2.0: The Object Page —— Part 1: It's History](https://experience.sap.com/skillup/sap-fiori-2-0-the-object-page-part-1-its-history/) +- [Object Page Floorplan](https://experience.sap.com/fiori-design-web/object-page/) +- [Principle of Product Display in Supermarkets](https://experience.sap.com/fiori-design-web/object-page/) diff --git a/docs/spec/detail-page.md b/docs/spec/detail-page.zh-CN.md similarity index 93% rename from docs/spec/detail-page.md rename to docs/spec/detail-page.zh-CN.md index af8e7efc634e..1a9fa90611ea 100644 --- a/docs/spec/detail-page.md +++ b/docs/spec/detail-page.zh-CN.md @@ -1,14 +1,8 @@ --- -category: - zh-CN: 设计模式 - en-US: Design Patterns -type: - zh-CN: 模板文档 - en-US: Template Document +category: 设计模式 +type: 模板文档 order: 3 -title: - zh-CN: 详情页 - en-US: Detail Page +title: 详情页 --- 详情页向用户展示一个对象的完整信息，主要用与信息浏览，允许对该对象发起编辑等操作。 @@ -103,15 +97,15 @@ title: 适用于开发协作流程。 -### 设计建议 +## 设计建议 -#### 选择模板 +### 选择模板 根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情页的内容。 -#### 区隔方式 +### 区隔方式 @@ -122,7 +116,7 @@ title: - 卡片：放置一个主题； - 页签：对象描述信息最顶层组织方式，如按版本组织、按意图组织、按阶段组织； -#### 内容组件 +### 内容组件 @@ -144,7 +138,7 @@ title: ### 外部参考文章 - [Fiori – How to Design an Object Page](https://blogs.sap.com/2017/08/06/fiori-elements-how-to-design-an-object-page/) -- [SAP Fiori 2.0: The Object Page —— Part 1： Its History](https://experience.sap.com/skillup/sap-fiori-2-0-the-object-page-part-1-its-history/) +- [SAP Fiori 2.0: The Object Page —— Part 1: It's History](https://experience.sap.com/skillup/sap-fiori-2-0-the-object-page-part-1-its-history/) - [Fiori 详情页汇总](https://experience.sap.com/fiori-design-web/?s=Details+page) - [Object Page Floorplan](https://experience.sap.com/fiori-design-web/object-page/) - [超市商品陈列原则](https://wiki.mbalib.com/wiki/%E8%B6%85%E5%B8%82%E5%95%86%E5%93%81%E9%99%88%E5%88%97%E5%8E%9F%E5%88%99) diff --git a/docs/spec/research-overview.zh-CN.md b/docs/spec/research-overview.zh-CN.md index 5fdbcfe2f0a5..f910e1658423 100644 --- a/docs/spec/research-overview.zh-CN.md +++ b/docs/spec/research-overview.zh-CN.md @@ -5,5 +5,5 @@ title: 概览 --- 在探索频道中，将公开我们正在研究完善的设计模式和尚未定稿的内容，其中大部分内容可以使用现有的 antd 组件搭建。当然，也可能存在小部分新的组件还未被开发。开辟探索频道，初心是与用户一起完善 Ant Design，如果你正在使用这些内容，你的反馈可以帮助我们更快优化和迭代，并推动组件尽快进入开发状态。 -

-[反馈地址](https://www.yuque.com/antdesign/topics) | [阿里内网反馈地址](https://yuque.antfin-inc.com/bigfish/topics) + +[反馈地址](https://www.yuque.com/antdesign/topics) | [阿里内网反馈地址](https://yuque.antfin-inc.com/ui-assets/topics) diff --git a/docs/spec/visualization-page.en-US.md b/docs/spec/visualization-page.en-US.md new file mode 100644 index 000000000000..67476cd65c73 --- /dev/null +++ b/docs/spec/visualization-page.en-US.md @@ -0,0 +1,175 @@ +--- +category: Design Patterns +type: Template Document +order: 2 +title: Visualization Page +--- + +Data visualization templates depict information and assist users to understand the data, by displaying a serious of multiple charts. In the way of viewing and operating the charts, users can analyze the data and finally make the data-driven strategies. + +## Design Goals + +To help users quickly and clearly understand the meanings of data, analyze trends, and make decisions. + +--- + +## Design Principles + +
+
+ +
+

Organized

+

Define the layout logically, prioritize the content in order. In most cases, in order to emphasize the common-used analysis thoughts, you should organize the information from top to bottom and from left to right, or use processive interactions. To sum up, put the summary first, then focus on filters, and finally provide details whenever the user needs.

+
+
+
+ +
+

Focused

+

Put the most important charts and the key scorecards on the top or upper part the page.

+
+
+
+ +
+

Accurate

+

Keep data accuracy, clarity and completeness.
1. Use the correct types of chart.
2. Explain data definition when necessary.

+
+
+
+ +### 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 + +Try to highlight the primary data on first one screen, and limit the sum of modules into 5-9, avoiding information overload. + +
+ +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. + +## Typical Templates + +### 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** + +For decision-makers to monitor overviews of data, and attach charts for further insights. + +**Related capabilities** + +Key indicator, scorecard, filter, chart. + +#### [Monitor Dashboards](https://preview.pro.ant.design/dashboard/monitor) + + + +**When to use** + +This type of dashboard provides an overview of the data for decision making. Usually there is a central topic, around which presents multi-dimension indicators, helping the users find out abnormal immediately. + +**Related capabilities** + +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** + +To analyze multiple dimension of data, surround the same topic. + +**Related capabilities** + +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** + +To show the details of the reports. + +**Related capabilities** + +Filter, chart, table. + +### Design Suggestions + +#### Connect Analysis Steps + +- Figure out users’ roles and aims, and choose the categories of template accordingly. Different business roles pay attention to different key data. There are two common-used types of indicators: high-level dashboard data, and detailed information. + - Decision-makers can select templates which describe the results; + - Operators can choose templates which provide more analysis capabilities and detailed information. +- Confirm the priority of the key indicators, and then define the page layouts accordingly. Put the most important data on the most outstanding positions. +- Please remember, you can connect the user interfaces through interactive modes, telling your own stories. + +
+ +
+ +#### 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 + +### Relative Rules + +- [AntV Visualizatio Design Principles](https://www.yuque.com/mo-college/vis-design/pwh679) +- [AntV Visualization Color Palette](https://www.yuque.com/mo-college/vis-design/ugbofr) +- [AntV Visualization Interaction Design Guidelines](https://www.yuque.com/mo-college/vis-design/yygtlg) + +### Relative Modules or Components + +- [AntV Chart Samples](https://g2plot.antv.vision/en/examples/gallery) diff --git a/docs/spec/visualization-page.md b/docs/spec/visualization-page.zh-CN.md similarity index 96% rename from docs/spec/visualization-page.md rename to docs/spec/visualization-page.zh-CN.md index 001f8d3d26fd..0850f8ce4dd6 100644 --- a/docs/spec/visualization-page.md +++ b/docs/spec/visualization-page.zh-CN.md @@ -1,14 +1,8 @@ --- -category: - zh-CN: 设计模式 - en-US: Design Patterns -type: - zh-CN: 模板文档 - en-US: Template Document +category: 设计模式 +type: 模板文档 order: 2 -title: - zh-CN: 数据可视化页 - en-US: Visualization Page +title: 数据可视化页 --- 数据可视化类的页面通过一系列图表展现及辅助解读，用户通过浏览和操作数据图表，来实现特定分析目的，制定数据驱动型决策。 @@ -181,4 +175,4 @@ title: ### 会用到哪些模块或组件 -- [AntV 图表示例](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html) +- [AntV 图表示例](https://g2plot.antv.vision/zh/examples/gallery) diff --git a/site/theme/static/common.less b/site/theme/static/common.less index 3bc7f5c17eb3..3783503edc71 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -96,10 +96,10 @@ a { // Nest Category > Type > Article &.ant-menu-inline { .ant-menu-item-group-title { - padding-left: 56px; + padding-left: 60px; .ant-row-rtl & { - padding-right: 56px; + padding-right: 60px; padding-left: 16px; } } diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less index 1ff93c1f616c..c7dd04b73061 100644 --- a/site/theme/static/preview-img.less +++ b/site/theme/static/preview-img.less @@ -85,7 +85,7 @@ } .preview-image-title { - margin-top: 5px; + margin-top: 20px; color: @site-text-color; font-size: 12px; }