（翻译）设计人员可以从Target网站的付款表单中学到的9个技巧

  Target网站近期进行了重构（PS：原文是2011年的文章），虽然很多人对新的网站褒贬不一，但设计人员可以从网站的付款表单页面中学到一些优秀的设计技巧。初看付款表单页面可能会感觉不怎么样，但深入研究的话，就会发现它是一座宝藏。

1.页面标题清晰明确

  用户访问付款表单页面时，应让他们清楚自己所在的位置。页面顶部中央的巨大加粗标题让用户清楚地知道他们所在的页面以及即将执行的操作。同时页面标题颜色混入灰色，确保用户的视线不会从更加重要的章节标题上转移[1]。

2.联系方式字段附带输入掩码

  电话号码是最难从用户处获取的信息之一，用户不仅需要知道提供电话号码的原因，还得知道电话号码的输入格式。Target网站在联系方式字段的名称右侧添加了简短的注释，告诉用户需要他们提供电话号码的原因。但联系方式字段的最佳设计部分是使用输入掩码辅助用户输入，这样就能从用户处获得指定格式的电话号码信息。

• 自己动手：输入掩码插件。
  

3.字段内容实时验证和确认

  大部分表单中采用字段内容实时验证是为了验证用户输入错误，但这还不够。Target网站在用户修正错误输入后会确认内容输入成功，向用户保证他们可以接着执行表单中的后续操作。用户修正错误输入后没有收到反馈，会让他们怀疑是否修正了错误以及是否通过了内容验证。如果让用户觉得填写完表单后可能不会通过，他们就不想填写表单，省得最后劳而无功。字段内容实时确认能消除用户的疑虑。

• 实现内容实时验证的方式：内容较多的表单需要实时验证的原因。
  

4.使常被忽略的复选框问题无法回避

  表单中的文本框和下拉列表很容易引起用户注意，它们尺寸大、视觉效果显著[2]。另一方面，复选框尺寸小，位置位于表单下方，很容易被忽略。Target网站使用大号字体强调复选框问题，让用户无法回避复选框问题。这不仅使复选框问题比普通内容更易于浏览，也让用户填写表单时不可能忽略这些问题。

5.次要操作按钮使用不饱和色

  Target网站区别设计主次操作按钮。主要操作按钮用于提交用户信息，其背景色使用强的红色饱和色。而次要操作按钮用于修改用户信息，其背景色使用弱的蓝色非饱和色。这有助于用户区分主次操作按钮，而很多网站都犯了表单中所有按钮使用相同颜色的错误。通过使用颜色对比和饱和度，Target网站使主次操作按钮清晰可辨。

• 了解更多主次操作按钮内容：主次操作按钮的视觉重量。
  

6.载入图标快速旋转

  所有付款表单都需要用户等待信息处理结束。Target网站中的载入图标转速比正常速度快，让用户感觉信息处理速度很快。虽然并不能真正加快信息处理速度，但加快载入图标旋转速度会影响用户的时间感知，其效果令人印象深刻。

7.用信用卡图标代表支付方式

  不是每家商店都支持所有种类的信用卡付款，用户需要知道能使用哪些信用卡付款。Target网站列出了所有支持的信用卡和礼品卡的图标，让用户一眼就能看出可以使用哪些卡，然后他们就可以轻松地下拉选择要使用的信用卡或礼品卡。

8.将优惠码字段放在付款流程的末尾

  优惠码给予用户特殊折扣，但将优惠码输入字段放在表单开头会影响表单转化率。Target网站将优惠码字段和员工折扣字段放在付款表单流程的末尾，会让用户更加积极地付款。

• 优惠码影响转化率的研究：优惠卷是否会提高支付放弃率？
  

9.订单汇总框突出显示

  用户想知道购物车中所有物品的总费用。Target网站用浅色的蓝色不饱和色突出显示订单汇总框，与页面上的其他元素形成对比，使用户很容易看到。

有效的表单设计技巧

  Target网站的重构并非完美无缺，但它成功地应用表单设计技巧使付款表单的用户体验变得有趣和富有成效，很多零售网站根本没想过使用这些技巧。Target网站付款表单中使用的这9个设计技巧，给了设计人员新的视角，能提高他们的表单设计水平。付款表单并不是网站设计的最重要部分，但设计得当的话，就能成为回报最多的功能模块。

原文地址：https://uxmovement.com/forms/9-things-designers-can-learn-from-targets-checkout-form/

[1]原文：At the same time, its diminished with a gray color so that it doesn’t take the focus away from the more important section headings in the form.
[2]原文：Text fields and dropdown lists are widgets on forms that easily catch users’ attention. They’re big, visual and shout at the user.