logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.26.1
  • 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
Design Suggestions

Workbench

contributors
    • Form PageList 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
    X
    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

    The workbench is often used as the homepage of an application, providing a convenient hub for users. It offers common information entry points, navigating to various functional modules of the application in a hub-and-spoke manner; it presents information that the user currently needs to focus on, shortening the path to key information; and allows users to directly perform some high-frequency tasks on the workbench.

    Design Goals

    User-side: Provide shortcuts for handling and viewing information and necessary help for users;
    Product-side: Communicate better with users, appropriately promote new trends and operational content of the product.

    Design Principles

    Findability

    Can users locate the information they want?

    Reduce Memory Load

    Understand the core goals of users returning to the site and provide the shortest navigation paths to possible destinations.

    How to Design

    Template - Workbench

    Preview

    When to Use

    • Shorten the navigation path for users returning to the site;
    • Provide common navigation entry points for users.

    Involved Functions

    Help; Core Data; Shortcuts; To-Do List; Focus; Operational Modules.

    Design Suggestions

    • Display modules related to daily work, keeping the total number of modules between 5-9;
    • Present the most frequently used content on the first screen whenever possible;
    • Provide role-based differentiated views.

    Template - New User Guide

    Preview

    When to Use

    • When new users arrive at the platform and have not yet started any work, shorten the learning time for new users;
    • When some modules have no content, refer to the "Empty State" guidelines.

    Involved Functions

    Help; Empty State Guide.

    Design Suggestions

    • Introduce the platform's purpose to users and guide them to start working;
    • If users need to manage complex objects, provide a Demo preview entry;

    Design Suggestions

    Choose the Right Navigation Method

    This type of page generally provides two types of navigation forms.

    ① Users know the function they want to use and need to navigate to it. For example:

    ② Discovery navigation, where users need to complete a task but do not know which function to use. For example:

    Arrange Content by Usage Frequency

    Preview

    Arrange the content based on usage frequency in the daily work.

    Consider Error States

    See Error Page

    Additionally, whether to recommend personalized customization for users is still under exploration.