ux-checkout-payment

结账与支付流程技能

此技能的工作方式（请先阅读）

这是一项生成式技能。结账是产品中风险最高的流程——这里的每一点阻碍都会导致购物车被放弃，而默认设计往往会让转化流失。直觉上的设计方式——强制用户创建账户、展示一张很长的表单、只在提交时验证、放置一个空白的促销码框、不展示最终价格明细，以及支付后没有后续操作——会让本已准备购买的用户在最后一步流失。这个流程由一系列阶段组成——购物车 → 身份信息 → 详细信息／地址 → 支付 → 处理中 → 确认（预订流程会将前面的阶段替换为搜索空位 → 选择），而需要在哪些阶段投入设计，取决于购买的商品。因此，此技能会依次处理：

1. 明确购买内容及购买对象——这决定流程阶段、字段和支付方式组合。
2. 应用始终适用的核心原则——几乎适用于所有交易、能保护转化率的设计模式。
3. 呈现取决于具体情境的决策（姓名字段、支付方式数量、单页还是多页、预订选择器、促销码的醒目程度），并说明各自的权衡。

然后将结果交给审查视角进行验证（候选项；按 docs/orchestration-policy.md 中的策略执行）。**组合（§9）：**结账以 ux-inputs-and-forms、ux-buttons 和 ux-selection-controls 作为核心子项；确认模态框的机制则交由 ux-modals-and-dialogs 处理，提示消息的行为交由 ux-notifications-and-toasts 处理（这两个是同级技能——若流程涉及，它们负责相应的子部分）。如果已有设计系统，请沿用其颜色、字体和间距令牌。

---

步骤 0——设计前明确情境

如果信息未知，请先询问；如果在未获得回答的情况下继续，请说明假设：

• 购买的是什么？ 一次性购买（实物商品 → 收货地址 + 购物车摘要；数字商品 → 无需配送）与预订／预约（日期／时间／空位是核心内容，流程从搜索阶段开始）与订阅（周期性条款、从试用转为付费，必须明确说明扣费周期）。这会改变流程中包含的阶段。
• 平台——移动端需要进一步简化：数量使用步进器而非下拉菜单，使用单一姓名字段，根据上下文显示数字键盘，自动填充 OTP，触控目标至少为 48×48dp，间距至少为 8dp。桌面端有更多空间展示标签和并排摘要。
• 受众／地区——面向国际用户时，应使用单一姓名字段、将国家置于地址填写层级首位，并采用符合地区习惯的支付方式组合（信用卡并非普遍适用——在德国、中国等地使用率较低）。面向单一国内地区时，可以适当放宽这些要求。
• 账户模式——产品是否真的需要账户才能正常使用，还是这只是为了收集数据？这决定了是否应尽力支持访客结账。

请牢记主导整个流程的一条事实：用户已经决定购买。 每个界面的唯一任务，就是消除用户停止购买的理由。

---

几乎适用于所有结账流程的核心原则

保护转化率

• 提供访客结账，并将其设为醒目选项。 强制用户在购买前注册会令人望而却步，也是导致用户放弃购买的主要原因之一；延后创建账户可以提高完成率。在订单提交后再提供注册选项（只需一键完成，因为你已经掌握了用户的信息）。
  • ❌ 账户选择步骤中，“创建账户”是醒目的大按钮，而访客结账只是被藏起来的文字链接。
  • ✅ 将“以访客身份继续”设为主要且最醒目的选项；在确认界面提供创建账户的选项。
• 移除结账页面上的干扰内容。 该页面的唯一目的就是完成购买。移除顶部导航和页脚链接，关掉广告和弹出窗口，并让用户可以直接在页面内编辑商品，而无需离开。仅保留必要内容（例如实时支持链接）。
  • ❌ 支付页面上仍有完整的网站页头、大型菜单、新闻通讯弹窗和满屏的页脚链接。
  • ✅ 仅保留 Logo、返回购物车入口和支持链接——不要让其他内容分散用户对支付按钮的注意力。

让费用清晰可信

• 付款前总结订单，并列出完整费用明细——商品明细、数量、缩略图（与所选款式／颜色一致）、商品页面链接、配送费和税费。只显示最终总额会削弱信任；临近付款才披露费用是一种暗黑设计。
• 在购物车中显示清晰的摘要，并将结账按钮放在订单详情之后，让用户先检查再继续。显示商品数量（购物车徽标应清晰可见），支持通过步进器修改数量、在购物车中修改款式，以及批量移除商品——不要让用户因为一个错误就得从头再来。

减少输入

• 在所有地方启用自动填充——浏览器自动填充姓名／地址／电子邮箱／电话号码、已保存的银行卡信息、银行卡扫描，以及 OTP 自动填充，让用户付款时无需切换应用。由于这些数据十分敏感，应同时采取安全措施。
• 在银行卡信息输入时使用输入格式掩码和智能默认值——将卡号自动分组格式化，根据前几位数字自动识别卡种（无需手动选择卡组织），并根据所选国家／地区获取货币。

友善地验证，妥善处理失败

• 每个字段都应在失焦时进行内联验证，而不是等到提交时。 提交后才显示错误的表单容易让用户放弃。应在用户离开字段时验证（不要逐个按键验证，那会让人觉得被打扰），并确认成功状态，而不只是显示失败信息。
• 错误消息应明确、简洁、礼貌、精准、有助于解决问题，并体现人情味（NN/g）。绝不要责怪用户；应说明哪里出了问题以及如何修正。更好的做法是，清晰地撰写标签和占位符，从源头上避免错误。

绝不让用户等待时不知所措

• 显示付款处理状态。 付款可能需要几秒到几分钟；加载／状态页面能让用户安心，并防止重复提交和恐慌。
• 在页面上和通过电子邮件确认成功。 显示清晰可见且保留时间足以让用户阅读的成功消息 → 显示确认页面 → 发送详细电子邮件：订单摘要、完整费用明细、预计配送时间／后续步骤、追踪信息、支持详情，以及邀请访客注册账户的选项。说明接下来会发生什么（“我们会通过电子邮件发送配送进度更新”“请激活您的订阅”）——不要让用户以为付款后事情就办完了。

加强安全感（感知安全和实际安全）

• 在付款步骤添加直观的安全提示：HTTPS 和挂锁图标，以及信任标章／SSL 徽章（Norton、TRUSTe、BBB 等）。大多数用户凭直觉判断安全性；这些提示能增强他们的信心。（研究记录显示，感知安全性不足和付款方式太少是导致用户放弃的重要原因。）

促销码不要让转化率流失

• 绝不要显示空白的促销码输入框，并搭配醒目的“应用”按钮——没有促销码的用户会觉得自己错过了优惠，于是离开页面去寻找促销码，而且不会再回来。使用不显眼的**“有促销码吗？”链接，点击后再展开输入框。**
• 点击即可应用，无需记忆——让用户从可用优惠码中选择，或直接应用电子邮件／广告中的优惠码；注册优惠、满额优惠等全局促销应自动应用，而不是要求用户重新输入。在总额附近显示折扣，并提供清晰的成功／错误／移除**状态（优惠码过期时，应链接到其他可用优惠）。

依具体情境决定（展示选项，不要自动应用）

逐项说明其权衡，并提供与步骤 0 相对应的建议。默认应用所有这些做法才是失败之道——例如，把每个结账流程都拆成 5 个页面，或提供所有能想到的付款方式。

决策	适用情形	应避免／调整的情形	默认建议
使用一个“全名”字段，还是分别填写名和姓	使用单个字段：面向全球受众、移动端场景、可减少错误并加快输入（尤其适用于姓在前的文化）	使用单独字段：需要个性化营销（“嗨，John”），或医疗／政府／金融身份识别要求，或 API 要求拆分姓名	使用单个字段，除非身份识别或个性化需求要求拆分
付款方式的数量	更多付款方式有助于促进国际销售，并减少因“没有方便的付款方式”而放弃购买的情况（约 9%）	方式过多会让用户难以选择，而且每增加一种方式都会增加成本	提供与受众／地区相关的方式，并优先展示最受欢迎的方式；随着业务增长再扩充——不要把所有方式都列出来
单页还是多步骤结账	字段较多时采用多步骤（并配有进度指示器）——分块填写可降低认知负担	将简短表单无谓地拆成多个页面会增加点击次数	表单较短时使用单页；较长时使用带进度指示器的多步骤流程（或单页折叠面板）。始终告知用户当前所在位置以及剩余步骤数
地址填写时先选国家／地区	国内或国际配送——国家／地区决定适用的字段和格式	面向单一地区且格式固定的商店	地区之间存在差异时，先询问国家／地区；然后仅显示相关且标签清晰的字段，并提供示例占位符
预订：日期范围选择器和可订情况	预订流程——选择器就是核心交互	一次性商品购买（无需安排时间）	在顶部显眼位置放置搜索栏；通过悬停状态突出显示所选范围；清楚标明今天；选择日期范围后自动填充；按自然顺序将出发地／目的地（或相应字段）分组，并允许互换；在结果页面保留搜索条件
预订：保存／收藏结果	自主选择、需要大量比较的预订（旅行、住宿），用户可能分多次会话作决定	快速交易型预订	提供带工具提示的书签／爱心按钮，供用户稍后保存；快速的单步预订则跳过
促销码的显眼程度	默认使用可展开的链接，让没有促销码的用户专注于结账	仅当促销码几乎人人都有时（例如活动落地页），才适合默认展开并持续显示输入框	默认折叠为“有优惠码吗？”链接，点击后展开；如果由你控制可用的促销码，也可提供可选列表

一种会同时改变多项默认选择的情境：移动端。 它会让你同时倾向于使用单个姓名字段、输入步进器、情境键盘、OTP 自动填充和间距更大的触控目标——应将移动端结账作为独立体验来设计，而不是把桌面版硬挤进小屏幕。

验证结果（编排）

交接时，请使用各审查视角对应的可安装技能 name。只有在该技能已安装时才调用；如果未安装，本技能的核心内容本身已包含这些规则——无需因此停下，继续即可。

设计或修订完成后，请将输出交给审计视角审查，而不是直接宣布完成。这些都是候选视角——审查方式由 docs/orchestration-policy.md 规定，也可以通过 ux-design-review 执行整个流程。在这里，dark-patterns、heuristics 和 microcopy 属于 A 级（自动运行）；accessibility、aesthetics、mobile-responsiveness 和 information-architecture 属于 B 级（可选）——使用现有设计系统时，aesthetics 不适用，accessibility 则收窄为使用层面的审查；mobile-responsiveness 仅适用于移动平台。如果用户调用此技能是为了处理某个特定事项，请遵循该范围。

• ux-dark-patterns-audit (A 级) — 此处优先级最高的交接事项。结账流程最容易集中出现问题：隐藏费用在流程后期才出现（滴灌定价）、强制创建账户、偷偷加入购物篮的预选附加商品／保险、强制持续订阅（试用期结束后悄然自动转为付费订阅），以及对拒绝选项进行羞辱式确认。核心内容中透明的费用汇总、访客结账和清晰的订阅条款，旨在确保此项审查顺利通过。
• ux-heuristics-audit — 系统状态的可见性（购物车徽标、处理中状态、已应用的折扣、步骤进度）、用户控制权（编辑购物车、移除促销码、返回而不丢失数据）、错误预防与恢复。
• ux-accessibility-audit — 选择器／步进器的键盘可操作性、触控目标（≥48dp，间距 ≥8dp）、对比度、跨步骤的焦点管理、每个字段的标签。
• ux-aesthetics-audit — 购物车／摘要的层级（突出显示商品名称和价格）、将支付按钮作为明确的视觉焦点、避免杂乱内容干扰用户完成流程。
• ux-microcopy-audit — 有助于避免错误的字段标签和占位符、人性化的错误提示、CTA 措辞、确认／后续步骤文案，以及清晰直白的订阅／计费条款。
• ux-mobile-responsiveness-audit — 适用于移动场景：步进器、上下文键盘、单手操作范围，以及针对移动端优化的姓名／地址填写方式。
• ux-information-architecture-audit — 适用于多步骤或预订流程：步骤顺序以及可用性／结果的组织结构是否符合用户的心智模型。

如果审计发现冲突（例如，支付方式越多，用户越难选择；或安全徽标造成视觉杂乱），请优先回归主要任务：用户已经决定购买——消除让用户停下来的理由，不添加任何不能加快完成流程的内容。

---

常见的“不要”与“应该”做法

❌ 不要	✅ 应该
强制用户创建账户才能购买	突出显示访客结账选项；下单后再邀请用户注册
只显示最终价格	在付款前列出完整费用明细——商品、运费和税费
到最后一步才显示费用或运费	在购物车和摘要中提前显示所有费用（→ dark-patterns）
在结账页面保留完整导航、页脚、广告和弹出窗口	移除干扰内容；只保留完成结账所必需的链接
提交时才验证整个表单	在输入框失去焦点时进行行内验证；成功时也给予确认
“输入无效。”／责怪用户	提供明确、礼貌且有帮助的信息——说明哪里有问题以及如何修正
空白的优惠码输入框加醒目的“应用”按钮	将“有优惠码吗？”链接折叠显示；点击后应用；在总价中体现折扣
在移动端用下拉菜单更改数量	使用步进输入控件；支持在购物车中编辑；支持批量移除
手动选择卡片类型、未格式化的卡号输入框	自动识别卡片类型，提供输入格式化、自动填充和 OTP 自动填充
付款时冻结或无声跳转	显示处理中状态；随后在屏幕上确认并发送确认邮件
以“付款完成。”结束	提供确认信息、后续步骤、详细邮件和注册邀请
将 4 个字段的表单拆分到 4 个页面	表单较短时放在单页；只有较长时才拆分为多步，并显示进度
提供所有可用的付款方式	提供与受众／地区相关的付款方式，并将热门方式排在前面
未经检查就上线	对照 dark-patterns、heuristics、accessibility 和 aesthetics + microcopy 进行检查

---

来源课程（Uxcel）

• 如何设计能提高转化率的结账页面
• 付款
• 购物车设计最佳实践
• 预订流程设计最佳实践
• 输入优惠码