logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Namu 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
Framework Information
Resources

Overview

  • ShadowFeedback

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu 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 Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    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 Namu 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, such as the PageHeader generic header.
    • 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.

    • Namu Design Pro: Out-of-the-box solution with 20+ templates and 10+ business components.
    • Offcial UI: Namu 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.