好的表单设计能够提升用户体验，具体如何做？本文作者梳理收集了33个能立即应用的最好做法，与大家分享。

想象一下，如果你走进一家商店，往购物篮里塞满了东西却找不到收银台的感觉。最后你可能放下所有东西一分钱没花极其失望地离开了。的确，这种在支付过程中遇到的槽糕事情，也会发生在表单设计中。

糟糕的表单替我省了好几百美元。冗长、繁琐的表单吓跑了你的顾客，让你的公司潜在中流失了几千美元。

表单看起来是最简单的UI组件，却把控着你产品中最重要的交互设计。它们引导你的用户去注册、支付。

我不需要告诉你这些步骤在精心运作的企业中扮演的重要角色。但是我也有好的消息：做到好的表单设计不是那么难。

在这篇指南里，我收集了33个你能立即应用的最好的做法。它提供了一个非常好的出发点去试验，找到对你有用的方法。我们会讲到：

副本很重要！最优移动端表单设计使用正确的输入方式通过工作而不是用户来变得聪明优秀表单的合理布局表单设计的巧妙之处

一、副本很重要

你知道副本有多重要。我们曾在博客里写过。调整表单设计能大大的提高你的转化率。

1.让用户知道完成表单的好处

“我闲的时候，喜欢填不同的线上表单。我就是喜欢填！”从来没人这样说。用户需要明确的知道把他们的时间投入到这样一个不合理的活动里有什么好处。

在结账过程中，好处非常明显，但是注册呢？在表单的顶部突出显示他们一旦注册完能做什么。他们可以访问独家内容，社区或者免费试用。不要羞于让他们兴奋。

Marvel显示他们的大客户和用户数来展示他们的社会认同

2.在注册窗口旁边使用社会认同

作为人类，我们都想归属于某处。我们需要知道一个产品是否值得我们花费时间、金钱和注意力。证明其他用户和我们一样，已经加入了这个俱乐部并非常喜欢它，对你的项目非常有帮助。

你的产品上有一些大牌吗？在注册表单的旁边展示这些品牌的logo。你已经拥有了多少满意的用户？它会让原本犹豫的访客对注册感到安心。现在就为你所获得的成就骄傲吧！

3.明确错误

“发生了错误”。好吧谢谢，我发现了。。。但是，我已经看了多少遍了？这让我非常受挫，我甚至都没有得到一个哪里出错的提示。有人已经使用了我的用户名吗？还是密码强度设置的不够吗？帮帮你的用户吧，让这个错误尽可能的明确。

详情呢？

4.在相关输入框旁边显示错误的信息

发生出错。哪错的，显示在哪。假设用户提交了有三处错误的表单，然后全都显示在顶部。这种情况下，他们需要浏览整张表单找出哪些需要注意。

根据上下文显示错误，不要忘了考虑色盲用户。不仅仅只使用红色文字强调错误字段。图标是万无一失的选择。强烈推荐读者阅读更多关于易访问性的文章。

5.对指令有明确的称谓

用户应该对他们的操作所带来的结果非常自信。如“提交”、“好的”、“允许”。描述用户将采取的操作。多使用“注册”、“立即支付”、“创造账户”。

6.用户操作成功时给他们反馈

你可能以为整个表单的设计到用户按下“下单”就结束了。错！用户需要清楚的已操作成功的反馈。还要让他们知道接下来的步骤。

例如，有人在你的网店里下了单，显示一个支付成功和订单的页面。甚至还可以提供预期的下一步时间线，比如产品什么时候发货。

二、优化移动端表单设计

优化移动端表单有两个方面。一方面，我们需要额外注意某些事情。另一方面，我们手机有很多功能，会让填写表单简单些。

在你的设计上多花点心思。本节将提供几个简单的示例，专门用于改进移动设备的表单设计。

1.提供足够大的点击区域

我周日晚上喜欢在电视上看NFL比赛。球员的运动能力总是能让我惊讶，就像他们的接球技术一样。他们需要一双大手去接球。这些足球运动员可能是你下一个客户。

这些家伙看起来很强壮，所以你不希望你表单上的小小点击框让他们生气。谷歌建议最小区域为48x48px，这是一个很好的标准。

2.不要回避使用手机的硬件功能

在用手机填写表格的用户中，大约99%的人都有一个功能齐全的摄像头。你想过利用它吗？

只需点击按钮，他们就可以扫描身份证或信用卡上的信息，否则这需要更长的时间填写信息。更进一步，考虑一下使用GPS或生物识别的可能性。

3.使用与预期输入相匹配的键盘

如果你希望用户填写邮箱地址，激活键盘文本模式，如果他们需要输入电话号码，显示数字键盘。

这只需要花一点心思，就能节省用户宝贵的时间，不需要他们自己来回切换键盘。这还有助于他们了解您期望的输入类型。

4.使用本机原生输入

谷歌和苹果都投入了大量研究来设计他们自己的UI控件。大多数人都见过这些，所以除非你有充分的理由不这样做，否则请坚持使用本机控件。

使用正确的输入类型

这可能看起来显而易见，但实际上并不总是那么容易。不要让用户从多个下拉列表中选择一个国家，或者从下拉列表中选择“是/否”，这样会让用户觉得一团糟。

复选框、单选按钮、下拉菜单、短文本和长文本输入——在表单的世界里任何东西都有自己的位置。只要确保在适当的时候使用它们。

5.避免超长下拉框

节日季正在迅速的过去，但你可能在线订购了一些礼物。要做到这一点，你需要选择发货到哪个国家。在那个时候，从滚动条里多个国家里找到你的真是太让人生气了。

明年再设计表单的时候，最好让用户从预设列表里输入并选择国家。这需要你的开发人员多做一些额外的工作，但是你的用户会为此感谢你。

6.使用智能的即时搜索方案

为什么不让前面的提示更进一步呢？花点时间思考用户可能遇到的场景。

一个居住在苏格兰的人可能开始输入“苏格兰”，尽管你的网站只接受“英国”作为居住国，在理想的情况下，他们即时输入“苏格兰”也应该看到“英国”作为一个建议条目。

同样的情况也适用于“Netherlands”而不是“TheNetherlands”。考虑这些场景并花些时间开发这种逻辑，这样用户就不用去猜测准确的措辞了。

Lilogo符合了用户的期望，显示了“苏格兰”的结果，尽管标签上写着“联合王国”

7.当你有6个或更少的条目时使用单选按钮

下拉框不是长表单的最佳解决方案，对于短列表来说同样也不是。为什么让用户每次回答是或否的时候需要点开一个下拉框呢？

6个或更少条目的时候就使用好的经典的单选按钮好了。更好的表单用户体验，用户扫描垂直的排列更轻松。过多的下拉框可能是最糟糕表单设计的标志。

8.选择合适的日期输入方式

很多表单仍在使用错误的日期输入方式（最常被请求的信息之一），有多少次选择年龄是从预设的年开始滚动？

这些网站要么认为他们的大多数用户是岁以上俱乐部要么就是不在乎。我倾向于后者。在移动端设备上，使用默认的时间选择框或者使用格式输入，就像我们的例子里FOX新闻一样。

注意预期日期格式，因国家而异。在数字键盘上（甚至移动设备上）输入8个数字都能比滚动3个下拉框快得多。如果坚持使用原生iOS或Android日期选择器，请确保有一个实际的默认日期，而不是年或当前年份。除非你在为百岁老人协会的年度晚会设计申请表。

使用格式输入改进日期选择的用户体验（fox.

转载请注明:http://www.aideyishus.com/lkzp/3591.html