logoAnt Design

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

Overview

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

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 use of design patterns in enterprise-level businesses can significantly increase the certainty of the R&D team, save unnecessary design and maintain system consistency, allowing designers to focus on creativity where it is most needed.

Design patterns adhere to Ant Design design values and provide a general solution to recurring design issues in enterprise products. The designer can directly use the design pattern to complete the interface design, or the design pattern can be used as a starting point to derive a more business-specific solution to meet the individual design needs.

At the same time, this is a dynamically updated design document, and your reading and feedback is the driving force behind our progress, GitHub Feedback Address.

Framework Information

Structure diagram

The complete design pattern will include examples of templates, components (ETC), and general-purpose concepts:

  • Function example: Consists of multiple templates to inspire users how to use and build a common feature.
  • Template: A page-level example that inspires users how to build a typical page in a system, such as a detail page.
  • Component
    • Basic components: The most basic elements of the system, such as buttons and pagers.
    • Business components/modules: Block-level examples, typically consisting of multiple components.
  • General concepts: Some conventions that guarantee ETC systematization, such as typesetting, fonts, and copywriting.

Resources

We work with engineers to transform design patterns into reusable code that maximizes your productivity and communication efficiency.

  • Ant Design Pro: Out-of-the-box solution with 20+ templates and 10+ business components.
  • Official UI: Ant Design's React UI library is a global component library with 60+ base components.
  • Axure Library: Axure resource packs are included with the code to make your prototype look like a visual draft, including templates, components, and more.