跳到主要内容
界面图谱Interface Atlas
☰
EN
页面Page / Commerce

订单确认页

Order Confirmation

别名:订单确认页下单成功页付款成功页订单提交成功支付成功页面谢谢购买页订单完成页购买成功页

这是什么

下单成功后接住用户情绪的收尾页:用明确的成功状态、订单号与交付时间先给出确定感,再列商品明细、 金额与下一步动作(发票、物流、继续购物)。它不收集新信息,只把「钱已付、货在路上」讲清楚。

交互实验室

试一试,再决定怎么用

正在加载实验室…

✓ 适用场景

  • 支付或下单成功后立即展示
  • 需要给出订单号与交付预期
  • 需要引导配送跟踪、发票或继续购物

✕ 不适用场景

  • 支付失败或订单待审核(用状态或错误页)
  • 只是暂存草稿,尚未真正成单
  • 仍需用户继续填写信息

常见形式

收据式

Receipt

明细与金额完整铺开,像一张电子小票

庆祝式

Celebratory

成功动效加简短摘要,适合消费品牌

物流优先

Tracking-first

交付时间线与跟踪入口置于最前

页面结构

  1. 01

    成功横幅

    图标加一句确认语,第一眼就知道成单了。

  2. 02

    订单摘要

    订单号、下单时间与预计送达,可一键复制。

  3. 03

    商品明细

    缩略图、规格、数量与单价逐项列出。

  4. 04

    物流时间线

    已下单、已付款、已发货、已送达的进度。

  5. 05

    后续动作

    查看订单、下载发票、继续购物,主次分明。

实现要点

flexgridcounter-reset: stepposition: relative@media print

成功横幅用 role="status" 让读屏播报结果;订单号提供复制按钮并给出已复制反馈。商品明细用列表或表格, 金额用等宽数字(font-variant-numeric: tabular-nums)右对齐。物流时间线用有序列表加伪元素连线; 庆祝动效须尊重 prefers-reduced-motion,并乘 --demo-speed。

相关概念

时间线Timeline

沿时间顺序组织事件的展示组件,通过时间、节点和内容说明事件之间的先后关系。它适合展示活动日志、项目进展或订单状态。时间线呈现已经发生或计划发生的事件,而步骤条强调需要用户完成的任务阶段;当事件可展开时,应保留事件标题和时间,避免用户失去位置。

组件包含组件
卡片Card

用圆角边框或底色围出一块自包含内容的矩形容器,一块卡片聚合一组相关信息: 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。

组件包含组件
按钮Button

用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。

组件包含组件
撒花彩带Confetti

完成关键动作后从一点爆出彩色纸屑飘落,用一次性高能量庆祝"做成了"。 只在里程碑出现:提交成功、任务完成、订阅达成—— 正因为稀有,才有庆祝的分量。

动效搭配使用
结账页Checkout Page

电商转化的最后一公里:页面把收货信息、配送方式、支付方式和订单摘要组织成一条 不可回头的短流程,步骤条标示进度,表单尽量预填与自动更正,摘要常驻展示金额明细。 核心原则是每一步只问必要的信息,任何犹豫点(运费、总金额)都要提前说清楚。

页面相似概念

参考来源

Markdown 版(给 Agent) · JSON