当客户进入结账页面时，他们已经决定要购买。接下来会发生什么取决于他们面前的界面。精心设计的结账 用户界面 (UI) 可推动用户毫不犹豫地向前推进。而设计不佳的用户界面可能会让用户过于疑虑，并导致他们离开。下面，我们将解释结账用户界面的工作原理、它对转化率有哪些影响，以及结账中应包含哪些要素。

本文内容

• 什么是结账用户界面？
  
• 为什么结账用户界面设计会影响转化率？
  
• 有效的结账用户界面包含哪些要素？
  
• 版面配置、表单和视觉层级会在哪些方面影响结账体验？
  

什么是结账用户界面？

结账用户界面是客户用来完成购买的界面。它由页面或一系列屏幕组成，供客户输入收货地址、选择付款方式，然后点击“下单”或类似词汇的按钮。结账 UI 的目的是帮助客户完成交易。

用户界面是购买过程中最敏感的环节之一。如果版面配置混乱、表单字段过多或存在任何感觉不对劲的地方，都可能阻止客户完成交易。良好的结账用户界面可以让客户集中注意力，并推进至付款阶段。

为什么结账用户界面设计会影响转化率？

结账是购买过程的最后一步，也是许多交易也可能在这里止步。购物者已准备好购买，结账用户界面可以帮他们快速完成购买，也可能成为他们的拦路虎。

电商的平均购物车放弃付款率徘徊在 70% 左右。在许多情况下，用户离开是因为结账体验让他们困惑，或者感觉结账过于麻烦而难以完成。设计和可用性问题通常是购物者放弃结账的唯一原因。这些客户之所以离开，不是因为他们改变了对产品的想法，而是因为界面中的某些元素让结账变得过于麻烦。

结账用户界面中常见的问题包括：

• 表单过长或过于复杂

• 没有剩余步骤的提示

• 糟糕的移动版面配置，导致难以点击或阅读相关信息

• 强制创建账户

• 过时的设计或陌生的格式

• 未添加可见的安全 标识（如安全套接层[SSL]徽章或可识别的付款标志）

• 直到最终屏幕才显示价格，缺乏透明度

这些问题可能会让购物者感到沮丧，或引发其对网站无法正确处理其付款信息的担忧。即使他们仍然想要购买产品，如果他们对您的商家没有信心，他们也可能会停止完成购买过程。

有效的结账用户界面包含哪些要素？

强大的结账用户界面应兼具安全、易用两大特点，且不会降低用户体验。以下是一些让您的结账流程更顺畅的方法：

• 最少必填字段： 每个结账字段都可能会增加潜在的障碍，因此只应要求填写必要信息。例如，收货地址、联系方式和付款详情为必填字段，而大多数其他信息（如商家名称 或送货说明）应设为可选项或隐藏。

• 直观的表单顺序： 字段顺序应符合用户的预期，例如先显示联系方式，然后是收货地址、开单地址，最后是付款信息。应保持标签一致，除非有充分的理由，否则应避免拆分相关的输入项。应使用间距或章节标题将地址详情与付款输入项分开，以提高清晰度。

• 访客结账选项： 强制创建账户是导致销售流失最快的一种方式。许多购物者，尤其是首次购物者，只想购买商品然后离开。如果想鼓励用户创建账户，可在订单完成后进行，这样就不会减慢结账流程。

• 多种付款方式： 购物者希望有更高灵活性。如果他们首选的付款方式不可用，有些人会直接放弃购买。应接受所有主要的银行卡支付，并至少包括一种数字钱包（例如，Apple Pay、Google Pay）。如果有跨境销售，可考虑添加特定于某个地区的付款选项。

• 完整的订单摘要： 显示完整的订单明细，包括产品名称、数量、价格、运费、税费和最终总额。当用户更改运送选项或输入折扣代码时，应实时更新总额。将摘要信息放在一个固定位置，例如放在桌面右侧，或移动设备中的可折叠部分。

• 可见的进度指示条： 如果结账流程跨越多个屏幕，应让客户清楚地了解他们所处的阶段。可使用一个简单的步骤跟踪器，例如“发货 → 付款 → 审查”，让客户了解流程的范围有限，从而减少放弃率。在单页结账 中，清晰标记的部分也具有相同的作用。

• 精心设计的操作按钮： 结账流程中的每个步骤都应以一个明确的下一步操作结束。使用醒目颜色和尺寸的主要操作按钮（例如“继续付款”或“下单”）。辅助链接（例如“返回购物车”）在视觉上不应当醒目。在移动设备上，可考虑将最后一个按钮设置为粘性，以便在滚动时随时可见。

• 简易的错误处理： 用户界面应帮助客户快速而自信地纠正错误。在字段旁边以内联方式标记错误，并提供具体消息（例如，“请输入有效的邮政编码”，而不是“输入无效”）。使用实时验证及早发现问题，例如在提交之前检测到无效的卡号。避免在重新加载或刷新页面时清除用户输入。

• 可见的信任标志： 付款时的保障信号非常重要。即使是细微的差异，也会影响用户是点击“下单”还是放弃购买。在付款部分附近使用安全超文本传输协议 (HTTPS) 锁定图标、SSL 徽章或诸如“安全结账”之类的文字。在客户会注意到的地方显示已知的品牌徽标，例如 Visa、Mastercard 或 Apple Pay。

• 可用的支持选项： 如果有任何不清楚的地方，用户也不应为了寻找答案而放弃购物车。应在结账流程中包含指向常见问题解答或联系方式（聊天、邮箱、电话）的链接。即使仅仅在页脚中添加诸如“有疑问？请联系我们”之类的简短文字，也可以增强客户信心，向其保证在需要时可以获得帮助。

• 退货和取消政策： 结账时，客户经常会问自己：“如果这个商品不行怎么办？” 简要地在适当的时候重申您的退货期限或保证。只要在最后一个按钮附近添加诸如“30 天免费退货”之类的简短文字，就可以消除疑虑并减少最后一刻的犹豫。

版面配置、表单和视觉层级会在哪些方面影响结账体验？

设计可影响用户行为。版面配置、表单结构和视觉层级决定了结账用户界面的是否可用、是否可信，以及是否高效。以下是它的工作原理：

版面配置

优秀的版面配置应具备实用性。它能创建从开始到结束的清晰路径，帮助用户明确方向，并减少出错的几率。优化良好的结账流程通常采用单一垂直流，因为多列格式可能会降低用户速度并增加错误。版面配置还应将相关的输入和部分（例如，账单信息、付款信息）分组，并以直观的方式对包含的字段进行排序。

桌面端和移动端结账 应分别进行优化。例如，在桌面端，右侧栏中的订单摘要常见而有效。而在移动端，这种版面配置会造成滚动问题，而摘要在用户可以点击打开的可折叠部分中效果更好。

表单设计

结账表单中的每项决定（例如，字段数量、字段名称以及字段的行为方式）都会影响用户是继续操作还是放弃。不应包含非绝对必要的字段，应使用用户需要输入的明确内容来标记每个字段，并以内嵌示例显示每个条目应采用的格式（例如，信用卡 号的 16 位数字序列）。如果出现问题，应实时标记错误，并创建错误消息，准确解释需要在相应字段旁边修复的内容。

视觉层级

视觉层级意味着创建有目的的注意力流，以便用户始终知道下一步该做什么、其处于流程中的哪个位置，以及需要注意哪些信息。设计良好的页面会利用各部分之间的间距、清晰的部分标题和一致的节奏来引导视线。订单总额、所选发货方式和付款摘要应予以加粗、略微放大或固定在最终按钮附近。同样，“下单”或“继续”应该是屏幕上视觉上最醒目的元素，通过应用大小、颜色、间距或所有三种方式来实现。其他所有内容（例如，“使用优惠券”、“返回购物车”、“更改地址”）都应对上述元素起辅助作用，而不是抢占注意力。

结账流程中不应出现促销横幅、追加销售框和不必要的链接。在这个阶段，用户是在执行购买决策，而不是在浏览。不要打断他们。

当版面配置、表单和结构层级协同工作时，即使需要收集所有必要的信息，结账流程也会显得很简单。每个设计决策都应减少歧义，防止出错，并推动用户离完成购买更进一步。