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

Message and Feedback

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

Used to provide feedback to the user on the results of their actions or to convey messages when necessary.

Design Goals

Ensure that users receive feedback or messages that match the context and urgency of their actions under different scenarios, achieving reasonable and effective communication.

Feedback Methods

When designing, consider the task the user is attempting to complete and the method of attention required. The feedback methods are listed below:

When to Use

Success

Stay in Place

미리보기

Modal Dialog

Notify users of important success results without interrupting their workflow.

미리보기

Global Message

Display a brief success message without interrupting the user’s ongoing task.

Redirect

미리보기

Inline Text & Illustration

  • Notify users of success at the end of a long-form process;
  • Provide detailed supplementary information (e.g., configuration details).

미리보기

Global Message

Display a brief success message without interrupting the user’s ongoing task.

Failure

Stay in Place

미리보기

Modal Dialog

Alert users to important actions outside the current workflow (e.g., safety warnings).

미리보기

Alert

Inform users of critical errors that require immediate attention.

미리보기

Form Validation

  • User input does not meet field or form requirements;
  • User skipped required fields;
  • System detects errors in form data.

미리보기

Notification

  • Inform users of important issues or failure statuses that require immediate decisions;
  • Feedback on backend process failures & alerts.

Redirect

미리보기

Inline Text & Illustration

  • Notify users of failure at the end of a long-form process due to third-party causes (e.g., application engine creation failure);
  • Provide detailed failure information.

Background Operations

미리보기

Notification

  • Inform users of important issues or failure statuses that require immediate decisions;
  • Feedback on backend process results.

미리보기

Notification Center

Notify users of related activity information (e.g., items that need user approval or the progress of user-submitted approvals).