logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • Ant Design
    • 소개
    • 设计价值观
    • 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

数据格式

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
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
Work with Us

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

设计目标

规范数据表达,保证直观准确一致地理解数据。

类型

数值

数值用来表示计量大小,可单独出现或搭配数字符号进行使用。

符号格式如何使用及何时使用例子
千分位默认使用千分位帮助用户阅读。123,220
计量单位计量单位默认用小写字母。123,220kg
百分比比例问题等。12.32%
正斜杠用分数的形式表示事项进展。12/30

推荐示例
미리보기
推荐示例
不推荐示例
미리보기
不推荐示例

位置排列:便于用户直观而又准确地读取数据,要做到一眼观定、简洁明了。在表格中,诸如金额、数量等数值分布排列时,通常采用“右对齐”方式,既方便用户快捷读取数据,还可以使用户进行纵向数据对比。


推荐示例
미리보기
推荐示例
不推荐示例
미리보기
不推荐示例
单位统一放在表头上,表格里不带单位,金额默认右对齐

计量单位:在表格中,计量单位默认放在表头,并默认右对齐。

金额

小写金额: 规范格式为「货币符号+数字」的格式,例如“CNY1,123.00"。 货币符号:表示货币种类的符号代码(货币符号表),分为字母和字符两种:

货币符号如何使用及何时使用例子
字符以人民币为例,金额前带货币单位标志¥¥123.00
字母以人民币为例,推荐使用 CNY,CNY 为国际上通用的货币代码。CNY123.00

推荐示例
미리보기
推荐示例
不推荐示例
미리보기
不推荐示例
金额数字到「元」为止的,在「元」之后,应写「整」字,在「角」之后可以不写「整」字。金额数字有「分」的,「分」后面不写「整」字。

大写金额: 一般用于银行、公司或个人的重要结算凭证和各种交易票据,需要使用大写数字以确保数据无法涂改,规范格式为「货币名称+金额数字」。


推荐示例
미리보기
推荐示例
推荐示例
미리보기
推荐示例
不推荐示例
미리보기
不推荐示例
“千”不能以单位的形式展示。

大额计量: 如果一个数值很大,那么数值中的“万”“亿”单位可采用汉字。

日期时间

绝对时间

针对时间精确度要求较高的用户,强调信息发布的精确时间点,有回顾过去内容并通过绝对时间用来检索信息的诉求。

日期格式: 可用如下标准化计法:

格式如何使用及何时使用例子
年、月、日中国默认使用 yyyy-mm-dd 格式。(其它国家参考链接)。2019-12-08
专用名词含有月日的专用名词采用阿拉伯数字表示时,应采用间隔号 · 将月、日分开,并在数字前后加引号。“6·1” 儿童节
日期范围在日期或时间范围之间显示一个波浪号 (前后需要空格)。2018-12-08 ~ 2019-12-07

时间格式:默认使用二十四小时制:

时间制如何使用及何时使用例子
二十四小时制二十四小时时间格式  HH:mm:ss 。14:08:00
十二小时制十二小时时间格式 h:mm:ss 。2:08:00 PM | 2:08:00 AM

标准格式:日期与时间连在一起时,两者之间用「空格」隔开,如“2019-12-08 06:00:00”。

相对时间

时间的精确度对于用户并不十分重要,重要的是信息的即时性。在中后台中,相对时间一般用于消息、通知类功能,用户往往更关注于书面形式的时间单位,而不必去往前推算出发布的具体时间点。

时间展示形式
1 分钟以内的时间刚刚
1 小时以内的时间N 分钟前
24 小时以内的时间N 小时前
24 小时以外的时间用 mm-dd HH:mm 的形式表示,即 12-08 08:00
超过一年的时间用 yyyy-mm-dd HH:mm 的形式表示,即 2019-12-08 08:00

数字脱敏

数据脱敏是指对某些敏感信息通过脱敏规则进行数据变形,实现敏感隐私数据的可靠保护。此处给出的脱敏规则为通用产品规范,遇到数据安全性较强的业务场景,可根据业务场景自行调整。

全部脱敏

推荐示例
미리보기
推荐示例
不推荐示例
미리보기
不推荐示例

一般用于金额、时间等特别重要敏感的信息,需要对所有数字进行脱敏。数据用一个 *** 代替。

部分脱敏

一般用于需要部分信息进行识别的状况,只需要对部分信息进行脱敏处理,但数字真实位数保留。数据脱敏部分用 * 代替。

脱敏类型如何使用例子
姓名两个字的姓名:显示第一个字符,后面的隐藏为 *。仲*
三个字及三个字以上的姓名:显示第一个字符和最后一个字符,中间字符为 *。仲*妮
仲**妮
手机号码保留手机号码前 3 位与后 4 位。186 **** 1402
身份证号码公民身份号码由六位地址码,八位出生日期码,三位顺序码和一位校验码组成。脱敏规则分为高、中、低级:
高级:保留前一位与后一位,其余 * 表示,仅能识别该人属于哪个地区。
中级:保留前三位与后三位,其余 * 表示,仅能识别该人的省市与是男是女。
低级:保留前六位与后四位,其余 * 表示,仅能识别该人的省市区与是男是女。
6*************2
213***********203
212912******2233
联系地址保留省市区,后面的用 * 表述。浙江省杭州市 西湖区 *****
邮箱保留邮箱主机名与前三位字符,其余 * 表示。123*******@163.com
银行卡号码银行卡号码由发卡行标识代码(六到十二位不等),个人账号标识(六到十二位不等),一位校验码组成。脱敏规则分为高、中、低级:
高级:保留后四位,其余 * 表示,仅能识别部份个人账号标识。
中级:保留前六位与后四位,其余 * 表示,仅能识别发卡行与小部份个人账号标识。
低级:保留前四位与后六位,其余 * 表示。仅能识别发卡行与大部份个人账号标识。
********1208
620121******1208
620121****111208

数据状态

无数据

推荐示例
미리보기
推荐示例
不推荐示例
미리보기
不推荐示例

无数据用 -- 表述。

数据加载

미리보기
数据加载用「骨架屏」表示。

参考文档

  • 货币符号表
  • 其它国家时间规范参考链接
  • 出版物数字规范