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

Result Page

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

A result page is a page that provides feedback on the outcome of an operation. It is the strongest form of feedback mode.

When to Use

When an operation process is completed and clear feedback is needed for the user, such as the final step of a step form.
When a large amount of information needs to be displayed on the result page.

Design Goals

Convey the task completion result to the user, guide the user to the next operation, and establish the user's trust in the system through effective feedback.

Design Principles

Use Cautiously

The result page is a heavy feedback method, only suitable for scenarios where strong user attention is needed, the information volume is large, and the page stays permanently. It is not recommended for other scenarios.

End Instantly

When the result status is successful, it can automatically jump after a few seconds (3-5 seconds is recommended).

Simplify Information

The information on the result page should be the result triggered by the submission action, such as validation should be completed in the form. The information on the result page should be concise, only displaying result-related content. Additional information can be added for special scenarios.

Design Suggestions

Correct Example
미리보기
Correct Example
Incorrect Example
미리보기
Incorrect Example
Correct Example
미리보기
Correct Example
Incorrect Example
미리보기
Incorrect Example

The title should be constructed as "Object + Action + Result/Status" or "Action + Result/Status".


Correct Example
미리보기
Correct Example
Incorrect Example
미리보기
Incorrect Example

It is recommended to limit the guidance operations to no more than 2 items, as too many operations can cause confusion for users.


Correct Example
미리보기
Correct Example

For lighter feedback, it is not recommended to use a result page. Use global tips, warning tips, notification boxes, etc. Refer to feedback design guidelines for details.


Correct Example
미리보기
Correct Example

If the result status is successful, inform the user that it will automatically jump after a few seconds on the main button.

How to Design

Basic Layout

미리보기

The result page can provide the following content:

  1. Result Feedback: Clearly inform the user of the submission result;

  2. Result Explanation (optional): Used for brief explanations of the result if needed;

  3. Suggested Actions: Guide the user to continue with subsequent tasks;

  4. Additional Information (optional): Provide supplementary information to the user along with the result; marketing modules.

Template - Basic Result Page

미리보기

Displays the result status and guides the user to the next operation.

Template - Complex Result Page

미리보기

In addition to basic information like result status and guidance operations, it also displays related recommendations, process progress, error details, etc.

Additional Information Types

미리보기

Further Reading

Relevant Global Rules

  • Feedback

Relevant Modules or Components

  • Form Page

External Reference Articles

  • Fiori Message Feedback Component Rules
  • Aliyun Result Page Design
  • CANVAS Message Feedback Component Rules
  • PREDIX Notification and Alert Component Rules