UI 组件 · 反馈
结果页
Result Page
也叫:结果反馈页、成功页、失败页、操作结果、Success Page、Result
付款、提交、注册这类操作完成后显示的整页反馈:一个大图标、一句结果标题、一行说明和「下一步」按钮,告诉用户成了没有、接下来做什么。
点「标注」看每个部分叫什么,点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发做一个支付成功的结果页:内容在页面中间,最大宽度 480px。最上面是 64px 的绿色圆形对勾图标;下方 24px 粗体标题「支付成功」;再下面一行 14px 灰色说明「我们会在 24 小时内发货,物流信息会通过短信通知你」。说明下方一块浅灰底的信息区,左右两列列出「订单号 SO-0918-0032」「实付金额 ¥ 326.00」「支付方式 微信支付」。底部两个按钮并排:主按钮「查看订单」、普通按钮「继续购物」。再做一个失败版本:红色叉号图标,标题「支付失败」,说明「银行卡余额不足,订单会为你保留 30 分钟」,按钮是「重新支付」和「更换支付方式」。刷新页面不会重复扣款。
发给
01判断
你的内容是这样吗?
对照两列,确认结果页是不是你要找的。
02避坑
常见坏用法
看起来能用,其实会给用户添麻烦。
- 01
只有一个大对勾和「操作成功」,没有说明也没有下一步按钮,用户不知道该去哪
下面的线框画的就是这种情况,红色虚线框是出问题的地方。右边的线框画的就是这种情况,红色虚线框是出问题的地方。
- 02
失败页只写「操作失败」,不说为什么,也没有重试或联系客服的入口
- 03
刷新成功页会再提交一次,重复下单、重复扣款
03识别
怎么认出它
先看整体结构,再对照几个一眼能认出的特征。
结构
由居中的大号状态图标、结果标题、说明文字、可选的关键信息区(订单号、金额、失败原因)和一到两个下一步按钮组成。
组成部分点一下,在上面的线框里标出来
识别特征
- 1页面中间一个很大的圆形图标:绿色对勾、红色叉或黄色感叹号
- 2图标下方一行大号粗体的短标题,再下面一行灰色说明
- 3最下面一两个并排的按钮,例如「查看订单」「返回首页」
04解释
详细解释
结果页出现在一个流程的最后一步:支付成功、订单已提交、注册完成、申请已发出、导入失败。它的样子很固定:页面中间一个大的状态图标(绿色对勾、红色叉、黄色感叹号,时钟表示处理中),下面一行大字标题「支付成功」,再一行灰色说明(「订单 SO-0918 会在 24 小时内发货」),然后是一个主按钮和一个次按钮(「查看订单」「继续购物」)。有时下方还有一块浅灰区域列出订单号、金额这类关键信息,失败时列出原因。组件库里的 Result 组件也常用来做 403、404、500 这类异常页。
它和 空状态 的区别:空状态说的是「这里还没有东西」,引导用户去创建第一条;结果页说的是「你刚才的操作结束了,结果是这样」。它和 轻提示 的区别:轻提示只在角落闪几秒,适合「已保存」这种小操作;付款、提交申请这种重要的、在流程终点的结果,要用整页的结果页,让用户确认结果、决定下一步。
标题直接说结果,说明里给出关键信息和接下来会发生什么(多久发货、去哪里查看)。一定要有下一步按钮,不要把用户留在死胡同里。失败页写清楚失败原因和怎么补救(「重新支付」「联系客服」),并保留用户已经填好的内容。支付成功这类页面刷新后不能重复提交。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 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-pageresult-viewresult-screensuccess-pagesuccess-viewsuccess-screensuccess-statepayment-successorder-successsubmit-success
- 组件名
React / Vue 开发模式下读到的组件名,不区分大小写,会去掉 El、Ant、Mui 这类组件库前缀。
ResultPageResultViewResultScreenSuccessPagePaymentSuccessOrderSuccess
- 结构特征
根据元素的排列和样式算出来的特征,只用来加分,单独不判定。
图片开头
- 优先级
- 2 · 同一层有多条命中时,优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30