logoMogu Design

⌘ K
  • Design
  • Development
  • Components
  • 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
List type
Table
List
Card list
Operation Behavior
Search data
Search
Paging
Navigate to details
Batch operations
新建
删除
列表工具栏
布局
空状态

Data List

ButtonProximity

Design goals

  • Make lists easy to scan.
  • Quickly find objects in the list.

List type

Table

Preview

Emphasis on browsing. The matrix layout tends to display complex data, and the data is aligned according to the matrix layout, which is convenient for browsing data horizontally and vertically, and studying the relationship between data. Tables are used especially when the user would benefit from more data exposure without having to go into the details of the object.

List

Preview

Consider both browsing and presentation. Arranged vertically, it tends to show the basic overview of the object, and the content is displayed hierarchically, which is suitable for quick scanning. Especially when the display space is limited, such as smaller pop-up windows, sidebars, drop-down panels and other containers, use lists.

Card list

Preview

Emphasis on presentation. The grid layout has no specific browsing order, and each object has a more equal display opportunity. The grid layout is more attractive on the page and is suitable for highlighting objects.

Operation Behavior

Search data

Preview

Select the appropriate search component.

1）Identify the main search patterns of users.

  • Known Items Exploration: Start the search with verbally describable known items.
  • Exploratory query: search for a target with a defined but broad scope.

2）The higher the search frequency, the higher the efficiency requirements.

3）Communicate well with developers to understand system performance and select appropriate components.

Inquire

Preview

According to the preset conditions, select multiple query conditions and submit the acquisition query at one time.

Filter

Preview

Users adjust the filters and the results adjust accordingly.

Search

Preview

Smarter search, enter keywords to query in multiple data attributes at one time, and display the results.

Paging

By default, page loading is used to reduce user waiting. The user's browsing position in the original list should be cached, and the browsed items in the list should be marked. When the user returns to the previous page, the user returns to the original browsing position.

Pagination

Preview

Recommended by default. When used, when the content of the page is less than one page, the pager will not be displayed.

same page load

Preview

This mode can be considered when users can often find the desired item at the top of the list and there is no need to locate a specific list item, such as dynamics and emails.

view all

Preview

Use when you need to jump to the page to view the complete list.

Navigate to details

mainly

By default, click on the title to navigate to the details, and you can judge how to open the details from the following angles:

  • From the perspective of natural interaction, Expand the list on the same page is more natural, and it should be noted that the height of the expanded content area should not exceed one screen;
  • From the perspective of the amount of information in the details, if the information display exceeds one screen, it is not convenient for the user to use the unfolding method. At this time, it is better to use Drawer Expand;
  • Details need to be shared with others separately, or complex immersive tasks, jump to independent page is more suitable;
  • There may be content that the user is interested in in each item of detail, so as to facilitate switching navigation, quickly view and process different items, you can use the ** double column display. **

Batch operations

Preview

When the user checks the item, the batch operation mode is triggered, and the list toolbar calls out the batch operation toolbar.

新建

右上角新建按钮

Preview

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

虚线新建按钮

Preview

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

删除

直接删除

Preview

删除后，允许用户撤销。

二次确认

Preview

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

安全校验

Preview

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

列表工具栏

Preview

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

布局

Preview

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

空状态

Preview

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