结账页
Checkout Page
别名:结账页下单页付款页面收银台提交订单页支付页面买的东西确认页
这是什么
电商转化的最后一公里：页面把收货信息、配送方式、支付方式和订单摘要组织成一条 不可回头的短流程，步骤条标示进度，表单尽量预填与自动更正，摘要常驻展示金额明细。 核心原则是每一步只问必要的信息，任何犹豫点（运费、总金额）都要提前说清楚。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 购物车到支付的完整下单流程
- 需要分步收集收货、配送、支付信息
- 需要同时展示金额明细与优惠减免
✕ 不适用场景
- 单件虚拟商品的极简购买（一屏内完成更优）
- 浏览和挑选商品的商城首页
- 订阅升级（用定价页的升级弹层更轻）
常见形式
单页结账
One-page Checkout
所有信息一屏铺开，转化路径最短
多步结账
Multi-step Checkout
步骤条分段收集，长表单减压
手风琴式
Accordion Checkout
完成一段折叠一段，兼顾单页与分步
快捷支付优先
Express-first
一键支付按钮置顶，表单退居其次
页面结构
- 01
步骤条
购物车 → 信息 → 支付 → 完成，标明当前进度。
- 02
收货与支付表单
地址与卡信息分组，减少字段并支持自动填充。
- 03
支付方式
卡 / 钱包 / 分期并列，默认选中推荐方式。
- 04
订单摘要
商品、运费、税费与合计，结算全程可见。
- 05
提交按钮
唯一致命操作，处理中禁用并给出反馈。
实现要点
flexgridposition: stickyaccent-color: var(--color-accent)多步流程用受控 step 状态 + 步骤条（可点击回退）；每步本地校验通过才放行。 订单摘要桌面端 sticky 右栏，移动端折叠成"合计 ¥xx"的可展开条。 表单输入配 autocomplete（name / postal-code / cc-number）、输入掩码与即时校验。 提交中禁用按钮并防重复下单；成功后跳转确认页。
相关概念
用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件包含组件在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式使用模式用横条从左到右填充来表示任务完成比例的加载指示，常配百分比或步骤文字。 适用于时长可预测的确定性任务：上传、下载、安装与分步表单。
组件包含组件在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件包含组件用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件包含组件