For displaying page error states.
Explain what went wrong, provide appropriate suggestions or actions to the user, and avoid confusion and disorientation.
Use friendly, clear language to express, avoiding confusing terms that might bewilder the user.
Guide users to the next level of interaction with reminders and hints, indicating what can be done on the next screen.
Displayed when a page encounters an error, it includes the following elements:
When to Use
When the page, item, resource, etc., the user requested is not found.
When to Use
No permission, which might include no application or data permissions, depending on the situation.
When to Use
When the server encounters an error and cannot provide service to the user.
When to Use
When the browser is incompatible, preventing users from opening the webpage.
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.
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.
When to Use
Displayed when a page fails to load content due to various reasons such as network issues, generally combined with retry options.
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.
