logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • Ant Design
    • 소개
    • 设计价值观
    • 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

Workbench

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
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference
Work with Us

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
loading

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

미리보기

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

미리보기

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

미리보기

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.