logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
5.3.2
  • Ant Design
    • 介绍
    • 设计价值观
    • 实践案例
  • 全局样式
    • 色彩
    • 布局
    • 字体
    • 图标
    • 暗黑模式
    • 阴影
  • 设计模式
    • 概览
    • 模板文档
      • 表单页
      • 数据可视化页
      • 详情页
    • 全局规则
      • 反馈
      • 导航
      • 数据录入
      • 数据展示
      • 数据格式
      • 文案
      • 按钮
      • 数据列表
    • 原则
      • 亲密性
      • 对齐
      • 对比
      • 重复
      • 直截了当
      • 足不出户
      • 简化交互
      • 提供邀请
      • 巧用过渡
      • 即时反应
  • 设计模式 - 探索
    • 概览
    • 模板文档
      • 表单页
      • 工作台
      • 列表页
      • 结果页
      • 异常页
    • 全局规则
      • 导航
      • 消息与反馈
      • 空状态
  • 可视化
  • 动效
  • 图形化
设计目标
设计原则
类型
异常页
空状态
加载失败
设计建议
扩展阅读
会用到哪些模板文档
外部参考文章

异常页

结果页导航

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech更多产品

yuque语雀-构建你的数字花园
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

用于展示页面异常状态。

设计目标

解释发生了什么异常,为用户提供相应建议或操作,避免用户感到迷失和困惑。


设计原则

友好

使用友好、清晰的语言来表达,不要使用难懂的术语,让用户产生困惑。

提供邀请

引导用户进入下一个交互层次的提醒和暗示,以表明在下一个界面可以做什么。


类型

异常页

预览

当页面出现异常时展示,其包含以下要素:

1.配图:为沉重的异常增添一点乐趣,缓解用户烦躁心理;

2.异常代码/问题:当异常有具体的 HTTP 错误代码时,可予以展示;

3.异常描述:简明扼要地描述异常原因,方便用户作对问题作反馈;

4.建议操作:协助用户处理异常,或把用户引导回正确的路径上。

模板 - 404

预览

什么时候用

当用户请求访问的页面、项目、资源等未找到时可使用。

模板 - 403

预览

什么时候用

无权限,可能包括无应用权限或无数据权限,根据实际情况向用户反馈。

模板 - 500

预览

什么时候用

当服务器出错,无法向用户提供服务时。

模板 - 浏览器不兼容

预览

什么时候用

当浏览器不兼容导致用户无法打开网页的时候使用。


预览

设计建议

当浏览器不兼容,对操作影响程度不同,当并不严重影响使用时,可使用全局提示,允许用户继续使用。

空状态

当没有内容/数据显示给用户时,展示空状态。空状态也属于一种特定的异常页,具体内容请前往查看空状态文档。

加载失败

预览

什么时候用

当页面因为网络等各种原因加载内容失败时展示,一般结合重试操作。

设计建议

页面的整体交互流程可能是由不同状态构成的,设计者在设计页面时不能只关注理想状态,应完整考虑各类突发场景,防止用户在使用时体验中断。

理想状态:所有页面模块正常展示的状态;

部分状态:部分模块不存在或部分内容为空状态,设计参考空状态;

加载状态:用 Spin 或 Skeleton 反馈加载中状态;

错误状态:系统错误、无权限等;

空状态:内容完全为空的状态,建议使用引导类的空状态提示,如果是新用户参考使用新人引导页。


扩展阅读

会用到哪些模板文档

  • 空状态

外部参考文章

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