logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.0
  • Ant Design
    • 介绍
    • 设计价值观
    • 实践案例
  • 全局样式
    • 色彩
    • 布局
    • 字体
    • 图标
    • 暗黑模式
    • 阴影
  • 设计模式
    • 概览
    • 全局规则
      • 反馈
      • 导航
      • 数据录入
      • 数据展示
      • 数据格式
      • 文案
      • 按钮
      • 数据列表
    • 原则
      • 亲密性
      • 对齐
      • 对比
      • 重复
      • 直截了当
      • 足不出户
      • 简化交互
      • 提供邀请
      • 巧用过渡
      • 即时反应
    • 模板文档
      • 数据可视化页
      • 详情页
  • 设计模式 - 探索
    • 概览
    • 模板文档
      • 表单页
      • 工作台
      • 列表页
      • 结果页
      • 异常页
    • 全局规则
      • 导航
      • 消息与反馈
      • 空状态
  • 可视化
  • 动效
  • 图形化

数据展示

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作。在设计时有以下几点需要注意:

  • 依据信息的重要等级、操作频率和关联程度来编排展示的顺序。
  • 注意极端情况下的引导。如数据信息过长,内容为空的初始化状态等。

表格(Table)

预览

表格被公认为是展现数据最为清晰、高效的形式之一。它常和排序、搜索、筛选、分页等其他界面元素一起协同,适用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。它结构简单,分隔归纳明确,使信息之间更易于对比,大大提升了用户对信息的接收效率和理解程度。

注:

  1. 表格中的时间、状态、操作栏需保持词语完整不过行。
  2. 当单元格数据为空时,可使用 - 来表示暂无数据。

折叠面板(Collapse)

预览

折叠面板通过对信息的分组和收纳,指引用户递进式的获取信息,使界面保持整洁的同时增加空间的有效利用率。

这类组件在导航中大量使用,同时也适合冗长的、无规则的内容管理。

注:若折叠内容彼此之间关联度较低时,可使用更为节省空间的『手风琴』模式——『手风琴』是一种特殊的折叠面板,只允许单项内容区域展开。


卡片(Card)

预览
如页面内容加载过慢时,可采用『预加载』或『分步获取』的方式来缓解用户在等待时间中的焦虑感。

卡片是一种承载信息的容器,对可承载的内容类型无过多限制,它让一类信息集中化,增强区块感的同时更易于操作;卡片通常以网格或矩阵的方式排列,传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。

注:

  1. 卡片通常根据栅格进行排列,建议一行最多不超过四个
  2. 在有限的卡片空间内需注意信息之间的间距,若信息过长可做截断处理。例如『Ant Design 适用于中台…』

走马灯(Carousel)

预览

作为一组平级内容的并列展示模式,常用于图片或卡片轮播,可由用户主动触发或者系统自动轮播。适合用于官网首页、产品介绍页等展示型区块。

注:

  1. 轮播的数量不宜过多以免造成用户厌烦,控制在 3~5 个之间为最佳
  2. 建议在设计上提供暗示,让用户对轮播的数量和方向保持清晰的认知

树形控件(Tree)

预览

『树形控件』通过逐级大纲的形式来展现信息的层级关系,高效且具有极佳的视觉可视性,使得整体信息框架一目了然。

用户可同时浏览与处理多个树状层级的内容。适用于任何需要通过层级组织的信息场景,如文件夹、组织架构、生物分类、国家地区等等。


时间轴(Timeline)

预览

垂直展示的时间流信息,一般按照时间倒叙记录事件,追踪用户当下以及过去做了什么。

每一条信息以时间为主轴,内容可涵盖主题、类型、相关的附加内容等等。适用于包括事件、任务、日历标注以及其他相关的数据展示。