logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • 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
Design Goals
Design Principles
How to Design
Basic Layout
Design Suggestions
Further Reading

List Page

contributors
  • WorkbenchResult Page

    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

    A list page allows viewing and handling a large number of entries, often with navigation to detailed pages. Users can filter, compare, add, analyze entries, and drill down to complete detail pages from the list page.


    Design Goals

    Help users view, handle, and find entries more efficiently.

    Design Principles

    Scannability

    Use a consistent format to highlight key information that aids in object recognition. Utilize rich interactive layered information to reduce cognitive load.

    Findability

    Organize lists in a logically browsable order. Provide suitable search components to help users quickly find information.

    How to Design

    Basic Layout

    Single Column Layout

    Preview

    Stack from top to bottom, with the data filtering module at the top. After filtering the data, users can browse and analyze from the general to the specific.

    Two-Column Layout

    Preview

    Place the data filtering module in the sidebar when there are many filtering conditions and ample horizontal space.

    Template - Query Table

    Preview

    When to Use

    When each entry needs to expose many fields; use when users have an accurate query scope when searching for entries.

    Template - Standard List

    Preview

    When to Use

    Provide an overview of each entry, with navigation to entry details by clicking the list. The page often provides statistical functions for users to understand the overall progress. It can be used as a simplified version of a workbench.

    Template - Card List

    Preview

    When to Use

    When users do not need to browse entries in a specific order, present each entry attractively.

    Template - Search List

    Preview

    When to Use

    Primarily used for searching specific entry information, search results across many topics using keywords. Suitable for searching and filtering a large number of different types of content, meeting the needs of finding vague targets.

    Involves Operations

    Filter, search

    Template - Member Management

    Preview

    When to Use

    Member management is used to display and manage the basic information and permissions of members within an object. Management operations usually include adding members, deleting members, assigning member roles and permissions, etc.

    Involves Operations

    Filter, delete, etc.

    Design Suggestions

    Batch Operations

    Preview

    Page-level batch operations affect the entire page and can be placed at the bottom of the page.

    Further Reading

    External Reference Articles

    • Canvas Filters
    • Canvas Search
    • Fiori Analytical List Page
    • QuickBook Table Design Rules
    • Article: Data Table Design
    • Article: Designing Tables for Reusability
    • Article: Affordances in Design