logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Ant Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations

Data format

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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 FormatHow and When to UseExample
Decimal separatorUse commas to separate groups of thousands to help users read.123,123,220
Unit of measurementPut units of measurement in lowercase.123,220kg
PercentageTo present proportionality, etc.12.32%
Forward slashTo express progress with fractions.12/30

Do
Preview
Do
Don't
Preview
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.

Currency SymbolHow and When to UseExample
CharacterTake RMB as example, its character symbol is ¥, placed in front of the amount.¥123.00
LetterTake 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:

FormatHow and when to useExamples
Year, month, dayIn China YYYY-MM-DD format is used by default.2019-12-08
TermsWhen 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 rangePut ~ or - between the date or time range (space is required before and after).2018-12-08 ~ 2019-12-07

Time Format:

Time SystemHow and when to useExamples
24-hour clockThe format is HH:MM:SS. Omit hours or second if not apply. Use the 24-hour clock by default.14:08:00
12-hour clockUse 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.

TimeDisplay form
Less than 1 minutejust now
Less than 1 hourN minutes ago
Within 24 hoursN hours ago
Longer than 24 hoursMM-DD HH:MM, e.g. "12-08 08:00"
Longer than one yearYYYY-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
Preview
Do
Don't
Preview
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 TypeHow and When to UseExample
NameTwo-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 numberKeep the first three and the last four digits of the mobile number.186****1402
ID numberThe 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 *.
6*************2
213***********203
212912******2233
AddressKeep the provinces, cities and district information, followed by several *.浙江省杭州市 西湖区 *****
EmailKeep the host name of the mail and the first three characters, indicate the rest information with *.123*******@163.com
Bank card numberThe 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
Preview
Do
Don't
Preview
Don't

Display -- to express no-data status.

Loading

Preview

Use Skeleton screen when loading data.

Reference

  • Currency Symbol List
  • Time Data Formats for Different Countries
  • Digital Specification for Publications