logoAnt Design

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

Exception 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
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

For displaying page error states.

Design Goals

Explain what went wrong, provide appropriate suggestions or actions to the user, and avoid confusion and disorientation.


Design Principles

Friendly

Use friendly, clear language to express, avoiding confusing terms that might bewilder the user.

Provide Invitation

Guide users to the next level of interaction with reminders and hints, indicating what can be done on the next screen.


Types

Error Page

Preview

Displayed when a page encounters an error, it includes the following elements:

  1. Illustration: Add a bit of fun to the heavy error, easing user frustration;
  2. Error Code/Issue: Display specific HTTP error codes if available;
  3. Error Description: Briefly describe the error cause, making it easier for users to report the issue;
  4. Suggested Actions: Help users deal with the error or guide them back on the right path.

Template - 404

Preview

When to Use

When the page, item, resource, etc., the user requested is not found.

Template - 403

Preview

When to Use

No permission, which might include no application or data permissions, depending on the situation.

Template - 500

Preview

When to Use

When the server encounters an error and cannot provide service to the user.

Template - Browser Incompatibility

Preview

When to Use

When the browser is incompatible, preventing users from opening the webpage.


Preview

Design Recommendations

When the browser is incompatible, affecting the operation to different extents, use global prompts if it does not seriously impact usage, allowing users to continue.

Empty State

Displayed when there is no content/data to show to the user. An empty state is also a specific type of error page. For detailed content, please refer to the Empty State document.

Load Failure

Preview

When to Use

Displayed when a page fails to load content due to various reasons such as network issues, generally combined with retry options.

Design Recommendations

The overall interaction flow of a page may consist of different states. Designers should not only focus on the ideal state but also consider various unexpected scenarios comprehensively, preventing interruptions in the user experience.

  • Ideal State: The state where all page modules are displayed normally;

  • Partial State: Some modules are missing or some content is in an empty state, refer to the design of Empty State;

  • Loading State: Use Spin or Skeleton to indicate the loading state;

  • Error State: System errors, no permissions, etc.;

  • Empty State: The state where the content is completely empty, it is recommended to use guide-like Empty State prompts. For new users, refer to the new user guide page.


Further Reading

Related Template Documents

  • Empty State

External Reference

  • Avoid Being Embarrassed by Your Error Messages
  • How to fix a bad user interface