logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
5.3.3
  • 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 开源社区

结果页是用一个页面反馈操作结果,是反馈模式中最强的一种。

何时使用

当完成一个流程操作后,需给与用户明确的结果反馈时,例如分步表单的最后一步。
当有大量的信息需要在结果页展示时。

设计目标

向用户传达任务完成结果,引导用户进行下一步操作,通过有效的反馈建立起用户对系统的信任。

设计原则

慎重使用

结果页是比较重的反馈方式,仅适用于吸引用户注意程度强、信息量较大、页面永久停留的场景中,其余场景不建议使用。

即时结束

当结果状态为成功时,可以默认提供几秒(建议 3-5秒)后自动跳转。

精简信息

结果页信息建议为提交动作触发后的结果,例如校验建议在表单中完成。结果页信息需精简,仅展示结果相关内容,特殊场景可以增加补充信息。

设计建议

正确示范
预览
正确示范
错误示范
预览
错误示范
正确示范
预览
正确示范
错误示范
预览
错误示范

标题构成建议为「对象+动作+结果/状态」或「动作+结果/状态」。


正确示范
预览
正确示范
错误示范
预览
错误示范

操作引导建议不超过 2 项,过多操作会对用户选择造成困扰。


正确示范
预览
正确示范

轻量的反馈不建议使用结果页,可以使用全局提示、警告提示、通知提醒框等交互方式,详情参考反馈类设计指南。


正确示范
预览
正确示范

若结果状态为成功时,可在主按钮上告知用户几秒后自动跳转。

如何设计

基础布局

预览

结果页可提供以下内容:

  1. 结果反馈:明确告知用户提交结果;

  2. 结果解释(可选):若需要对结果简要解释使用;

  3. 建议操作:引导用户继续完成后续工作;

  4. 补充信息(可选):在通知结果的同时,有补充信息需要反馈给用户;营销模块。

模板 - 基础结果页

预览

显示结果状态并引导用户进行下一步操作。

模板 - 复杂结果页

预览

除结果状态和引导操作等基础信息外,同时展示相关推荐、流程进度、错误详情等信息。

补充信息类型

预览

延伸阅读

会用到哪些全局规则

  • 反馈

会用到哪些模块或组件

  • 表单页

外部参考文章

  • Fiori 消息反馈类组件规则
  • 阿里云结果页设计
  • CANVAS 消息反馈类组件规则
  • PREDIX 通知提醒框和警告组件规则