填写样本图片(如何设计优秀的结账表)

如何设计出优秀的结账表？

以下内容由团队翻译整理，仅供学习和交流，

毫无疑问，结账体验是所有在线商店中最重要的部分。表格的设计与电子商务网站的转换率直接相关–用户填写的表格更快、更方便，意味着转换率更高。

作为一名用户体验设计师，您的工作是确保用户有无缝和高效的结账体验。在本文中，我将分享十个非常实用的技巧来帮助您设计一个优秀的结账表。

1.不强迫用户创建帐户

据Baymard研究所表示，强制性要求用户创建账户是人们放弃购买过程的主要原因之一。不要犯这样的错误！允许用户在不创建账户的情况下购买商品。重要的是，您不仅应该为客户提供结账选项，还应该使其清晰可见。Baymard研究所发现，88%的移动支付表未能使访客结账选项达到清晰可见的效果，因此用户经常忽略它。

eBay为用户提供访客选项

2.减少用户注册所需的信息

说到信息收集，最重要的原则是少即多。Baymard一项研究发现，近三分之一的美国在线购物者因太长/太复杂的结账流程而放弃了购买。同一项研究发现，平均支付时间可能会缩短20-60%。因此，作为一名设计师，你应该尽量减少用户的信息量。例如，如果你不打算打电话给你的客户，你就不需要他们的电话号码。

通过减少填充的字段，不仅可以提高完成时间，还可以使过程更加顺畅。字段数量越少，用户的认知负担越小，潜在错误就越少。

提示：付款单填写样本图片

清楚地标记所有可选字段。若有可选字段，则应使用单词optional(可选)*标记符号。这将使想要尽快填写表格的用户能够快速跳过这些字段。

3.不要用字段标签作为占位符

标签的主要目的不是在用户输入数据时隐藏它们。字段标签应始终可见；理想情况下，它们应该位于字段的顶部或左侧。如果您设计的移动终端和有限的屏幕空间，则可以使用浮动标签技术。当用户激活一个字段时，占位符文本会淡出并显示在顶部。

4.设计单列表

在多列形式下，眼睛会遵循曲线浏览，这使得用户更难关注某些元素（眼睛不会关注某些特定元素）。因此，多列表将增加完成时间。当表格由单列组成时，用户更容易浏览–因为眼睛遵循垂直扫描模式。

5.大量相关信息分在一起

一次显示太多的信息会让用户感到不知所措。分层技术可以帮助您在不过载的情况下提供相同数量的信息。有两种类型的块：付款单填写样本图片

页面上的分组。您可以将相关信息分组并按逻辑顺序排列。

左：付款单填写样本图片

字段之间没有视觉划分。右图：视觉上将相同数量的字段分为三部分。NNGroup

创建多步结账过程。您可以将结账过程分解为多个单独的步骤。例如，典型的结账过程可分为四个步骤-客户信息，运送方式，付款，订单汇总。将大任务分解为几个较小的任务可以让用户专注于一种特定类型的输入。但是如果你使用这种方法，请确保你的结帐过程是易于操作和理解的。用户需要了解他们花费多少时间来完成付款。如果能提供用户填写和操作方便的表单，那就太棒了。

多步结账流程：表单清楚地表明用户目前处于哪个阶段。

提示：确保退款按钮操作与用户期望一致是非常重要的。用户希望退款按钮能让他们退后一步（去他们认为是最后一页的地方），而不是回到产品页面。第二种行为通常伴随着用户数据的丢失，因此用户可能会放弃结账过程。

6.帮助用户填写地址

提示：在手机上填写地址的步骤可能更直接。您可以要求访问用户的当前位置并填写当前位置。

7.提供不同的付款选项，创建完美的信用卡表格

提供尽可能多的支付选项，让用户选择自己喜欢的方式。

沃尔玛允许使用信用卡、礼品卡和许多其他流行的支付方式(如PayPal）进行支付。

在许多支付选项中，信用卡仍然是最常用的支付方式之一。这一点非常重要：确保结账表已经优化了信用卡购物的使用，这里有几件事要记住：

告知用户可接受的卡类型。您可以将此信息与支持卡发行商的图标放在一起。如果您的支付系统不支持某种类型的卡，请在用户输入卡号时告诉他们。根据输入的第一个数字显示卡类型。前六名数字识别用户卡的确切发行人。最好显示卡发行人的标志，这样用户就可以看到系统已经识别了他/她的卡。使用卡有效期的占位符文本。帮助用户输入有效格式。当询问安全码时，请提示客户在哪里可以找到它。这可能与字段旁边的‘图标相似，用户点击时会弹出显示信息。请记住，安全代码不统一-不同的发卡机构使用不同的名称、位置和长度(例如，VISA安全代码位于卡的背面，由三位数组成AMEX，前面有四位数字的安全代码)。

Visa/MasterCard，JCB和AmericanExpress的安全码

满足上述所有要求的银行卡信息格式

8.提供订单汇总

购买前提供订单汇总非常重要。此功能允许用户查看订单的详细信息和选定的交货选项，确认费用和交货信息是否正确，必要时更改。

Asos提供订单汇总：用户可以查看和修改他们的订单

9.设计快速购买功能

快速购买是客户回购的优势功能。如果您的数据库包含客户信息，则无需要求他们重新执行所有付款步骤。该功能允许用户直接跳转到订单汇总界面，使用之前购买的结算和运输信息。

亚马逊的一键购买功能可以立即购买产品。这将从客户购买的数据中获取首选运输方式、地址和付款细节。

10.提供在另一个设备上购买的选项

一个典型的情况是，用户会在移动设备上浏览商品，但在填写结账表时，他们会切换到桌面。当用户切换到桌面时，用户可以按照手机上的步骤继续操作，通过提供通过电子邮件发送到购物车的选项。

说到结账过程，你的最终目标是提高成功率(用户转换率)，减少完成时间(更快完成)。对于客户来说，买东西的过程越容易，就越容易买。

原始地址：找到1072531张原始付款表，填写样本图片设计图片，包括样本图片、材料、海报、证书背景、源文件PSD、PNG、JPG、AI、CDR等格式素材！