logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.26.1
  • 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
When to Use
Design Goals
Design Principles
Design Suggestions
How to Design
Basic Layout
Further Reading
Relevant Global Rules
Relevant Modules or Components
External Reference Articles

Result Page

contributors
  • List PageException Page

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    X
    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

    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
    Preview
    Correct Example
    Incorrect Example
    Preview
    Incorrect Example
    Correct Example
    Preview
    Correct Example
    Incorrect Example
    Preview
    Incorrect Example

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


    Correct Example
    Preview
    Correct Example
    Incorrect Example
    Preview
    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
    Preview
    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
    Preview
    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

    Preview

    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

    Preview

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

    Template - Complex Result Page

    Preview

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

    Additional Information Types

    Preview

    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