logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.3.2
  • 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
    • Template Document
      • Form Page
      • Visualization Page
      • Detail Page
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
  • 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
设计目标
列表类型
表格 Table
列表 List
卡片列表 Card list
操作行为
搜寻数据
搜索
分页
导航至详情
批量操作
新建
删除
列表工具栏
布局
空状态

Data List

ButtonForm Page

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
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

设计目标

  • 让列表易于扫读。
  • 快速查找列表中的对象。

列表类型

表格 Table

Preview

强调浏览性。矩阵布局,趋向于展示复杂数据,数据按照矩阵布局对齐,方便横纵浏览数据,研究数据之间的关系。特别当用户受益于更多的数据外露,而无需进入该对象详情时,使用表格。

列表 List

Preview

兼顾浏览性与展示性。垂直排列,趋向于展示对象的基础概述,有层次地展示内容,适合快速扫读。特别当展示空间存在限制,如较小的弹窗、侧栏、下拉面板等容器中,使用列表。

卡片列表 Card list

Preview

强调展示性。网格布局无特定浏览顺序,每个对象拥有更平等的展示机会,网格布局在页面中更具吸引力,适合突出对象时使用。

操作行为

搜寻数据

Preview

选择适合的搜寻组件。

1)明确用户主要的搜寻模式。

  • 已知项探索:从可言语描述的已知项开始搜寻。
  • 探索性查询:对需求确定但范围宽泛的目标进行搜寻。

2)搜寻频次越高对效率的要求越高。

3)与开发做好沟通,了解系统性能, 选择合适的组件。

查询

Preview

按照预设的条件,选择多个查询条件后一次性提交获取查询。

筛选

Preview

用户调整筛选项,结果即随之调整。

搜索

Preview

更智能的查找,输入关键词一次性在多种数据属性中查询后,展示结果。

分页

默认使用分页加载,用于减少用户等待。应缓存用户在原列表中的浏览位置,并标记列表中已浏览项,当用户返回上级页面是回到原浏览位置。

分页器

Preview

默认推荐使用。使用时,当页面内容不足一页时,不展示分页器。

同页加载

Preview

当用户常常能够在列表靠前位置找到所需条目,且无定位特定列表项的需求时可以考虑使用这种模式,如动态、邮件。

查看全部

Preview

当需跳转页面查看完整列表时使用。

导航至详情

mainly

默认点击标题导航至详情,可以从以下几个角度判断如何打开详情:

  • 自然交互的角度,同页展开列表更自然,需注意展开的内容区高度不要超过一屏;
  • 详情的信息量大小角度,如果信息展示超过一屏,使用展开的方式不便于用户操作,此时使用抽屉展开更好;
  • 详情需要被单独分享给他人,或复杂的沉浸式任务,跳转独立页更合适;
  • 每条详情中都可能有用户感兴趣的内容,以方便切换的导航,快速查看和处理不同的项目,可以使用双栏展示。

批量操作

Preview

当用户勾选条目后,触发批量操作模式,列表工具栏呼出批量操作工具条。

新建

右上角新建按钮

Preview

点击触发新建表单弹窗、抽屉、页面等,完成创建后新创建的内容出现在列表的第一条,并短暂地高亮展示。

虚线新建按钮

Preview

点击新建,在按钮位置出现对象编辑区,完成新建后即在该位置展示该新建对象。虚线新建按钮位置放在列表首或尾。

删除

直接删除

Preview

删除后,允许用户撤销。

二次确认

Preview

点击删除操作时,需要二次确认。

安全校验

Preview

破坏性操作需高安全级别验证确认操作。

列表工具栏

Preview

在较小的空间中集成列表所需的常用功能,非常推荐使用。

布局

Preview

列表布局通常从上往下平铺,按照以下顺序排列。其中独占式区域提供了一个扩展空间,用于解决无法集成于工具栏中的复杂数据搜寻、数据统计类内容。

空状态

Preview

当列表无数据或无搜索结果时,应展示空状态。