logoAnt Design

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

数据列表

文档贡献者
  • 按钮亲密性

    相关资源

    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
    X
    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 开源社区

    设计目标

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

    列表类型

    表格 Table

    预览

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

    列表 List

    预览

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

    卡片列表 Card list

    预览

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

    操作行为

    搜寻数据

    预览

    选择适合的搜寻组件。

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

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

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

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

    查询

    预览

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

    筛选

    预览

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

    搜索

    预览

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

    分页

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

    分页器

    预览

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

    同页加载

    预览

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

    查看全部

    预览

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

    导航至详情

    mainly

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

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

    批量操作

    预览

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

    新建

    右上角新建按钮

    预览

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

    虚线新建按钮

    预览

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

    删除

    直接删除

    预览

    删除后,允许用户撤销。

    二次确认

    预览

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

    安全校验

    预览

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

    列表工具栏

    预览

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

    布局

    预览

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

    空状态

    预览

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