跳到主要内容

UI 组件 · 反馈

结果页

Result Page

也叫:结果反馈页、成功页、失败页、操作结果、Success Page、Result

付款、提交、注册这类操作完成后显示的整页反馈:一个大图标、一句结果标题、一行说明和「下一步」按钮,告诉用户成了没有、接下来做什么。

点「标注」看每个部分叫什么,点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

做一个支付成功的结果页:内容在页面中间,最大宽度 480px。最上面是 64px 的绿色圆形对勾图标;下方 24px 粗体标题「支付成功」;再下面一行 14px 灰色说明「我们会在 24 小时内发货,物流信息会通过短信通知你」。说明下方一块浅灰底的信息区,左右两列列出「订单号 SO-0918-0032」「实付金额 ¥ 326.00」「支付方式 微信支付」。底部两个按钮并排:主按钮「查看订单」、普通按钮「继续购物」。再做一个失败版本:红色叉号图标,标题「支付失败」,说明「银行卡余额不足,订单会为你保留 30 分钟」,按钮是「重新支付」和「更换支付方式」。刷新页面不会重复扣款。

发给

01判断

你的内容是这样吗?

对照两列,确认结果页是不是你要找的。

符合这些情况,用结果页

  • 支付、下单、提交申请、注册这类重要流程的最后一步,告诉用户成功还是失败
  • 需要后台处理一段时间的操作(审核中、导入中),说明现在的状态和预计多久完成
  • 403 没有权限、404 页面不存在、500 服务出错这类异常页

是这些情况,换成别的

  • 保存、复制、收藏这类小操作的反馈

    改用轻提示
  • 列表里还没有数据,用空状态,引导去创建第一条

    改用空状态
  • 表单里某个字段填错了,在字段下方提示,不要跳到失败页

拿不准?上传页面截图,页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用,其实会给用户添麻烦。

  1. 01

    只有一个大对勾和「操作成功」,没有说明也没有下一步按钮,用户不知道该去哪

    下面的线框画的就是这种情况,红色虚线框是出问题的地方。

  2. 02

    失败页只写「操作失败」,不说为什么,也没有重试或联系客服的入口

  3. 03

    刷新成功页会再提交一次,重复下单、重复扣款

反例示意,对应第 01 条

03识别

怎么认出它

先看整体结构,再对照几个一眼能认出的特征。

结构

由居中的大号状态图标、结果标题、说明文字、可选的关键信息区(订单号、金额、失败原因)和一到两个下一步按钮组成。

组成部分点一下,在上面的线框里标出来

识别特征

  1. 1页面中间一个很大的圆形图标:绿色对勾、红色叉或黄色感叹号
  2. 2图标下方一行大号粗体的短标题,再下面一行灰色说明
  3. 3最下面一两个并排的按钮,例如「查看订单」「返回首页」

04解释

详细解释

结果页出现在一个流程的最后一步:支付成功、订单已提交、注册完成、申请已发出、导入失败。它的样子很固定:页面中间一个大的状态图标(绿色对勾、红色叉、黄色感叹号,时钟表示处理中),下面一行大字标题「支付成功」,再一行灰色说明(「订单 SO-0918 会在 24 小时内发货」),然后是一个主按钮和一个次按钮(「查看订单」「继续购物」)。有时下方还有一块浅灰区域列出订单号、金额这类关键信息,失败时列出原因。组件库里的 Result 组件也常用来做 403、404、500 这类异常页。

它和 空状态 的区别:空状态说的是「这里还没有东西」,引导用户去创建第一条;结果页说的是「你刚才的操作结束了,结果是这样」。它和 轻提示 的区别:轻提示只在角落闪几秒,适合「已保存」这种小操作;付款、提交申请这种重要的、在流程终点的结果,要用整页的结果页,让用户确认结果、决定下一步。

标题直接说结果,说明里给出关键信息和接下来会发生什么(多久发货、去哪里查看)。一定要有下一步按钮,不要把用户留在死胡同里。失败页写清楚失败原因和怎么补救(「重新支付」「联系客服」),并保留用户已经填好的内容。支付成功这类页面刷新后不能重复提交。

开发者信息
术语 ID
component-result
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器(标签、ARIA role、常见组件库 class)。

  • .ant-result
  • .el-result
  • .arco-result
  • .n-result
  • .weui-msg
类名关键词

类名、id、data-testid 拆成单词后连续匹配,例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • result-page
  • result-view
  • result-screen
  • success-page
  • success-view
  • success-screen
  • success-state
  • payment-success
  • order-success
  • submit-success
组件名

React / Vue 开发模式下读到的组件名,不区分大小写,会去掉 El、Ant、Mui 这类组件库前缀。

  • ResultPage
  • ResultView
  • ResultScreen
  • SuccessPage
  • PaymentSuccess
  • OrderSuccess
结构特征

根据元素的排列和样式算出来的特征,只用来加分,单独不判定。

  • 图片开头
优先级
2 · 同一层有多条命中时,优先级高的胜出
版本
v2 · 更新于 2026/09/30