虽然表单类型多样，有不同目的的、收集不同内容的、不同尺寸的，但是却有一些共同的基本的元素可以帮你的用户快速且顺利地填写它。

【亚马逊创建账户的表单】

• 1. 类别或者条目（Category or Section）：它可以帮助用户快速理解表单的作用，同时，当你要收集的数据多于一个类别时，比如：个人信息、职业信息、财务信息等……对数据归类整理具有很大的帮助作用。
• 2. 标签（Label）：它的作用主要是告诉用户，在这一栏需要填写什么。
• 3. 占位符（Placeholder）：对于标签下需要填写内容的额外注释。
• 4. 出错信息（Error Message）：当用户填写的信息无法被录入时给予反馈。
• 5. 提交操作的主按钮（Primary CTA button）：放置于表单底部，用户用来提交填写好的表单的按钮。

表单状态 

基本上来讲，

你的表单在用户使用过程中存在三种状态：

• 1. 默认状态：就是用户在填写前表单的状态。
• 2. 焦点状态：在用户正在填写的栏目上做着重提醒，这样可以帮助用户聚焦正在填写的栏目，哪怕他的注意力离开了屏幕一会儿，回来后也能马上找到刚刚正在填写的栏目。
• 3. 反馈状态：这种状态一般是给用户一些反馈信息（大多数是出错信息）。一般情况下，这种状态会出现在用户移至下一个填写区域的时候。另外，当用户提交表单时，如果系统无法马上验证信息，也会出现这种状态。

【表单的默认状态，焦点状态，反馈状态】

 好的案例 

1.表单要尽量简单

尽量让你的表单短且简单。收集必要的数据，避免重复的输入。比如，把“再次输入你的密码”这一栏去掉，而是在“输入密码”区域增加一个“密码可视”的按钮，让用户可以选择看到自己输入的密码内容。

【Jumia和亚马逊不同的用户密码验证方式】

2.使用框内提醒

向用户反馈“输入错误”提示时，最好把错误提醒放在对应的输入框内。

【Facebook和亚马逊不同的“错误提醒”方式】

3.将相关信息分组

这一点很重要，把相关的信息分组，并将这些组按序列排列。这样可以帮助用户减少认知负荷，并能更加专注地填写当下的信息。

【hotels.ng结账页面截图，一个很好的将信息分组的例子】

4.正确使用标签，并将其左对齐

标签要放在填写框的上方，最好不要把标签替换掉。如果没有标签，用户在提交表单之前很会反复确认他们填写的内容是否正确，这个过程会非常艰难，最直接的结果是就用户需要思考很多，导致提交率下降。而使用标签时，我们习惯于将标签放在填写栏的左上方，具体原因可以参看下面这篇论文，里面综合讲述了为什么这种方式对用户提交信息转化更有效。《Label Placement in Forms》

5.输入框的大小要与输入内容的长度和尺寸相匹配

简单来讲，要确保输入框的区域能够完美匹配输入内容的长度，比方说输入地址的区域长于输入邮政编码的长度。

【Flutterwave 登录表单的填写区域长度刚刚好】

【Payporte的登录表单填写区域长度就不太合适了】

6.CTA（提交操作） 按钮

所有的表单在最后都应该有一个“提交表单“的按钮，或者一个“下一步”按钮。如果一个页面里不止一个按钮，那么需要把重点放在主要的提交按钮上，另一个按钮需要稍微削弱一些存在感。

【亚马逊将主要提交按钮突出得很好】

如果使用弹窗状态来收集数据，那么次重点按钮通常是关闭弹窗的按钮。我们一般会在弹窗右上角使用“X”按钮来关闭弹窗，而不是专门设计一个“关闭表单”的按钮。

【Medium的登录页面使用“X”而不是使用一个“关闭按钮” 来关闭窗口】

7.搜索区域

不要隐藏你的搜索框，尤其当你的网页的内容非常多的时候，搜索会是用户的有限选择操作。

【亚马逊的搜索框十分明显】

另外，当一个用户提交一个搜索任务后，不要清除搜索框的内容，这样方便用户能很快且清晰地看到自己最初的搜索词是什么。

【Medium在搜索结果出来后不会清除搜索框里的内容】

8.清晰

将信息清晰地传达给用户，尽可能清晰地告诉用户什么内容是被需要的，不要给出让用户误解的信息。没人喜欢填写表单，所以避免让用户填写第二次。

【Cowrywise的标签短小精炼、信息清晰，甚至按钮上的文本表达也很到位】

小小声明一下：

以上的所有案例在这里没有任何褒义和贬低的含义，仅仅是为了举例教学。希望此篇文章能给你带来帮助，谢谢观看。

原文链接：《Creating User-friendly forms》

译文地址：蓝湖产品设计协作 (公众号)

原文作者：Momoh Silm

译者：蓝湖产品设计协作

每个步骤（寄送地址、寄送选项、信用卡详细信息）都收在一个手风琴面板中。而每个面板都通过AJAX提交。提交成功后，这个面板就会收起，并且通过滑动动画展开下一个面板。

看起来就像这样：

Boots的单页结账页面，使用了手风琴面板展现每一个步骤。

用户千辛万苦才完成了下单过程。错误难以更正，因为上下滚动并不方便。手风琴面板让人非常痛苦和分心。不可避免地，客户要求我们作出改变。

我们进行了改版，让每个面板单独成为一个页面，也就不需要手风琴和AJAX了。不过，我们还是保留了客户端验证，防止不必要的服务器请求。

看起来就像这样：

Boots的结账页面：每一步都是单独的一个页面。

这个版本的转化率好多了。虽然我不记得具体数字了，我知道客户比较满意。

6年后（2014年），我在*Just Eat*工作，发生了同样的事情。我们设计了一个单页结账流程，其中每个部分都有独立页面。这一次，我记下了相关数据。

结果是每年能增加2百万订单。要清楚，这是订单量，不是利润。这个数据是基于新版本至少一周后，结账转化率提升的比例得出的。这部分转化成了订单，数量激增52倍。

这是我们的移动端优先的设计：

Just Eat的结账分为多个页面。我们还在设计中进一步简化了支付页面：用户先选择“现金支付”或“银行卡支付”，然后才会转到相关的页面。可惜我们并没有对这项优化进行测试。

两年后（2016年），GDS的Robin Whittleton告诉我，把每一步分为单独页面，是一种独立的设计模式，叫做“一页只做一件事”。除了它产生的数据效果，这种模式的背后还有充分的合理性，这部分我们很快就会讲到。

不过在这之前，我们来仔细看看这种模式到底是什么。

“一页只做一件事”到底是什么意思？

一页只做一件事，并不是一定要在一个页面上只展示单一的元素或组件（虽然也可以这么做）。比如说，很可能仍然会保留页头和页尾。

类似的，也不是说每个页面上只能有一个输入框（当然，这么做也是可以的）。

这种模式是指把复杂的流程分解成多个小碎片，把每个小碎片独立一页展示。

比如说，与其把地址输入表单放在寄送选项和支付表单页面，倒不如把地址输入放在一个专用页面。

地址输入表单有许多输入框，但它对于用户来说，实际上是个单一的、独立的问题。在专用页面里回答这个问题是有道理的。

我们看看这种模式到底好在哪里。

好在哪里？

虽然这种模式常常能结出硕果（其实就是指订单和转化率了），我们最好还是要了解它背后的原理。

1. 减少认知负荷

正如Ryan Holiday在《The Obstacle Is The Way》中所说：

回想一下你第一次看到复杂代数式时的情景。这整个就是一团混乱的未知符号。但是当你将它分解，独立成各个部分，答案便水落石出。

一步步分解等式，就能轻松解决问题。

用户在填写表单时也是一样的道理，或者其他任何重要的事情都一样。如果屏幕上元素减少，只有唯一的选择，阻碍就降到最低。因此，用户会专注于完成任务。

2. 处理错误更容易

当用户填写小型表单时，错误可以很容易被发觉，并尽早呈现出来。如果只有一个错误要修正，那就很容易，能降低用户放弃的可能性。

即使有多个错误，Kidly的地址填写表单也很容易更正。

3. 页面加载更快

如果页面的设计很简单，加载就会更快。更快的加载速度能降低用户离开的风险，为我们的服务建立起信任。

4. 易于追踪行为

一页上内容越多，就越难以了解用户因为什么离开。不要误会我的意思：页面数据分析不能左右设计，但这是个很不错的副产品。

5. 易于追踪过程和返回上一步

如果用户需要频繁提交信息，我们可以把它们以更细的颗粒来保存。举个例子，如果用户中途退出，我们还可以发送邮件，鼓励他们完成订单。

6. 滚动操作减少，甚至被消灭

不要误会我的意思：滚动不是什么大问题——用户的期望中，网页就是这么用的。但如果页面短小，用户就没必要滚动了。主操作项就更容易出现在屏幕视野内，能强调它的重要性，易于任务完成。

7. 容易产生分支

有时候，我们需要根据之前的答案，给用户提供一条不同的路径。举个简单的例子，两个联动的下拉菜单，用户在第一个菜单里的选择，会影响第二个菜单中的内容。

一页只做一件事可以轻松处理这种情况：用户作出选择并提交，服务器来决定用户接下来看到什么——天然具有简单和包容的特点。

我们也可以用JavaScript。不过无论是构建还是确保界面的可用性，都需要更高的成本。如果JavaScript出错，用户的体验也就被破坏了。而且，根据所有这些排列组合选项来加载页面，会显著加重页面负担。

或者，我们可以使用AJAX，但这并没有避免渲染新页面（或者部分）。更关键的是，它并没有减轻服务端的数据往返压力。

还不止这些。我们需要发送更多代码量，并且发起AJAX请求，还要处理错误、显示加载指示器。这又让页面加载变慢了。

自定义加载指示器是有问题的，因为它们并不准确，不像浏览器的原生加载进度。用户也不熟悉它们——相对于整个网站来说，它们是特殊的存在。无论如何，相似性是用户体验的惯例，除非真有必要，否则不要打破它。

而且，页面上有两个动态更新的联动输入项，这会需要用户按照一定顺序来操作。我们也可以通过可用/禁用和显示/隐藏来控制这些输入项，但这样也更加复杂。

最后，用户的某些更改，可能会导致随后的元素消失或者变化，这也让人迷惑。

8. 对使用屏幕阅读器的用户更友好

如果页面上内容减少，屏幕阅读器就不必长途跋涉穿过许多多余的次要信息。用户可以直接前往第一个标题，然后迅速开始操作表单。

9. 易于更改细节

想象一下某人正要确认订单。关键时刻，他发现支付信息里有一处错误。此时回到专用页面比找到页面*当中*的某个部分更容易。

用户点击“编辑”，会前往支付信息页面，里面有专用的标题和相关的表单项目。

深陷一个长页面中是会令人迷失方向。记住，用户点击链接代表他们要执行特定的操作——页面上的其他东西都是干扰信息。

长页面还可能会加重工作量。比如说，如果想要在一个页面中展开和收起面板，你就需要更多额外的逻辑思考。

一页只做一件事，这些问题都得到了解决。

10. 用户对数据更有掌控力

用户不会只加载一半的页面。要么全部，要么没有。如果他们需要更多信息，就会点击链接，他们有选择能力。只要每一步都更接近目标，用户并不介意点击。

11. 解决了性能问题

如果每件事都复杂无比——单页应用就是一个极端例子——性能问题就很难解决。是因为执行时间问题？内存泄漏？还是AJAX请求导致的？

人们很容易认为AJAX能提升用户体验，但增加代码量很少情况能创造更快的体验。

复杂性转移到客户端，会掩盖服务端的根本问题。但如果页面只做一件事情，性能问题就不容易产生。如果真发生了问题，排查原因也很容易。

12. 它有一种在前进的感觉

因为用户在不停地前往下一步，会产生一种正在前进的感觉，在用户填写表单时给他们一种积极的感受。

13. 降低丢失信息的风险

长表单需要更长时间来完成。如果所花时间太长，页面超时可能导致信息丢失，产生严重的挫败感。

又或者，电脑可能卡死，*《我是布莱克》*里的主角Daniel就是这样的例子。他的健康每况愈下，而且第一次用电脑就遇到了死机，然后数据丢失。最终他放弃了。

14. 第二次使用的体验更顺畅

比如，假设我们储存了用户的支付信息，我们可以直接跳过那一页，直接带他们去“结账确认”页面。这会减少阻碍，提升转化率。

15. 这是移动优先设计的一种补充

移动优先的设计，提倡在小屏幕上只呈现最重要的信息。一页只做一件事，也遵循着相同的方式。

16. 设计过程很简单

当我们设计一套复杂流程时，分解成细小页面和组件，可以让人更容易理解这些问题。

还可以方便地调换页面来改变顺序。我们一次只研究一件事，这点和用户一样，能让我们更轻松地分析问题。

这可以减轻设计负担——这种模式让用户受益的同时，还能有这样的附加福利。

这种模式适合所有情况吗？

也不完全是。Caroline Jarrett在2015年写过一篇文章《一页只做一件事》，里面讲得很清楚。她解释道，用户调研“会告诉你某些问题组合起来放在长页面里更合适”。

但是反过来，她也提到了“对于设计师来说‘属于一组’的问题……对于用户而言，并不一定要放在一个页面上”。

她提出了一个颇具启发性的例子，GOV.UK的验证页面中，他们尝试把“创建用户名”和“创建密码”先后放在两个页面上。

就像许多设计师所认为的，Caroline觉得把这两者放在不同页面有点太过了。实际上，用户对此一点也不介意。

关键在于，以一页只做一件事为出发点，然后通过用户研究，验证把其中一些项目编组合并，是否能进一步改善用户体验。

这并不代表最终结果一定是把页面合并——在我经验中，最好的结果往往是把事情拆分开来，仅此而已。当然，我也希望听听你的经验。

总结

这种低调不起眼的用户体验设计模式很灵活、高性能、有包容性。这是真正拥抱互联网的方式，对于自信满满和小心翼翼的用户而言都很简单。

一个页面上展现很多（或者全部）内容可能会营造一种简单的幻象，但就像代数式问题一样，除非把它们分解，否则很难处理。

如果把任务看作是用户想要完成的一笔交易，把它分解为多个小步骤很有必要。这就像我们在用网页的一砖一瓦来搭建渐进式表单。每一页背后的隐喻，都给潜意识营造一种正在前进的感觉。

我还没有遇到过哪种其他的设计模式，能具备这么多的优点。这就是那种真理时刻——答案总是最简单的。

作者信息：Adam Silver

原文链接：https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/

译文链接：http://colachan.com/post/3552

每天我们都使用表单进行基本的网上操作。网上购物、注册邮箱、社交网络甚至参与讨论、描述美味的午餐等等都需要我们填好表单。不夸张地说，表单是数字信息分享的生命根基。然而多年以来，表单的体验鲜有提升，仅仅停留在功能足够好却达不到体验上的优秀。然而现在，在使用恰当技术的帮助下，我们可以设计出更快、更简单、更有成效的表单体验。

在表单体验中一条经典的原则是“越短越好”。耗费用户更少的精力可以带来更高的转化率，这当然看起来符合逻辑，但是这条原则没有考虑到很多因素，比如应用场景，设计方式、表单体验的吸引力等等。

举个例子，我发现一个被引用的次数远超其它的报告，它的测试成果被多篇文章和言说提及并被当做“真理”，而可怕的是这个研究成果其实是相当有局限性的。这个报告是Imaginary Landscape(一个开源的网络开发机构）近十年前的一次实验，试验中当表单从11个字段减少到4个字段，转化率增加了160%。但这只是一个页面，一次测试，两个变量得到的实验结果，假设他们进行了多组4个字段的实验，或者做10个字段与11个字段的表单作对比，4个与5个字段表单做对比，也会令实验更加值得信服。然而他们没有，这只能说明仅在这一个特定的情况下，确实减少表单64%的字段能使表格更容易填写。

在Call To Action 2015的演讲上,来自Unbounce 的Michael Aagaard分享了类似的案例。以提高一个特定表单的商业转化率作为任务，他首先将表单的字段数从9削减到6，转化率下降了14%。深入研究后他发现，表单中那些被删除的字段构成了一个不太引人注目的体验，而这恰恰是最吸引用户的部分。在第二次实验，他调整了原始表单的组织结构和清晰度，并保持9个字段不变，转化率增加了19%。事实证明，短的表单不总是更好。

所以如果不是通过简单的使表单更短，我们怎样用现代技术来设计最好的表单呢？让我们来考虑一些新原则：

－优先保证表单的可浏览性

－提供更易填写的表单格式

－给予恰当的输入限制

－利用定位

1.优先保证表单的可浏览性

很早之前Jakob Nielsen的研究告诉我们，用户通常只是快速浏览网页而不是细致地从上到下阅读。在填写表单的时候也是这样，尽管设计者希望填写者全心全意，用户也未必如你所愿。让用户能够高效的浏览表单，对避免错填漏填至关重要，尤其是当表单是用户只能填写一次的时候（比如电子商务地址表单，注册表单等等）。

－标签位置

关于标签的位置已经有了很多研究，然而这场辩论还在继续。表单大师Luke Wroblewski在研究中确定，用户对标签顶部对齐的表单完成时间最短，因为此种方式减少了眼球运动的需要量。在通常意义的表单标签中，右对齐的方式能让用户第二快的完成表单，尤其建议在当页面高度有限时使用这种方式。虽然左对齐标签的表单用户完成的最慢，但是当表单需填写的数据不太常见时，这种方式能提高理解。

－提示文字

如果将标签作为框内提示文字，帮助性也不大。一旦表单获取点击焦点，提示文字就消失了，用户不再能看见它。这会让用户产生短期记忆的压力而增加错误的机率。

即使把标签分开，另外增加框内提示文字，用户乍一看上去也会觉得像已经填写了的样子。举个例子，Nielsen Norman Group曾做过的一项眼球追踪研究就说明，空的输入框比有提示文字的输入框更能引起用户的关注，而且与空的输入框相比，用户更容易忽略有提示文字的输入框。换句话说，被认为是有用的表单提示文本其实弊大于利，尤其是对习惯大致浏览的用户。

好的：空的表单字段 

不好的：被提示文字掩盖的表单字段

在某些情况下，提示文字比普通文本的颜色较轻，这可能缓解上述问题。然而这种技术产生了一个对比度的问题，在白色背景下配浅灰色文本通常不符合被普遍接受的网络可访问性指南（正常文本对比4.5:1）。此外，根据W3C，提示文字也不支持残疾人的辅助设计（如屏幕阅读器，见https://www.w3.org/WAI/tutorials/forms/instructions/），这使得这些残疾人用户更难准确填写表单。

－浮动的标签

浮动标签是一个迅速获得普及的新的交互设计方式。在它的设计中，标签文字开始作为提示文字，然后一旦用户开始填写，标签将升到上面，解决了上述提示文字消失的问题。 

虽然这种方式还可以帮助减少页面长度，在移动端特别有帮助。但是它不能解决上述文本框看上去已经被填补的问题。因此，Nielsen Norman Group不建议这种做法，还是应该保持标签在上面，除非页面长度是最重要的设计关注点。

2.提供更易填写的表单格式

以前，在填写表格时用户有很多的猜测。“我的电话号码应该是哪种格式？我的信用卡有没有少输一位？这个键盘上的符号“@”在哪里？” 新技术使我们能够不让用户被这些疑虑困扰，提供更清爽的体验。

－输入掩码

帮助用户格式化输入文本的输入掩码，虽然在外观上与提示文字类似，其实有明显的不同。首先，掩码只出现在用户点击输入框的时候，避免了上述浏览障碍的问题。其次，输入的文字自动应用正确的文本格式，让用户将填充字段时的焦点放在所需的数据上，这样更容易注意到错误。在下面的例子中，填写电话号码时括号和破折号自动填充。 

在填写手机号、信用卡、货币等等的时候，这种简单的技术可以节省我们的时间和精力。

－输入字段的HTML属性

设计师知道对于输入特定的数据需要展示正确的移动键盘，但是对究竟哪种才是正确的键盘类型有些疑虑。

举个例子，对于最常用的“数字”类型属性的输入框，常常不会触发数字小键盘，触发的是普通的带有数字区域的键盘，数字键的大小远小于小键盘。

“数字”键盘和“电话”小键盘

对于只包括数字的字段，比如日期，邮编，信用卡等等。使用数字小键盘可以有更大的点击目标，从而使用户用更小的精力输入。（为了使其展示，前端中可用“tel”作为type值或者添加属性“pattern＝［0-9]* ”。）然而，为数字状态设置全键盘，对如街道地址等以数字作为开始的混合字段依然有用。

这里有其他的几种可以被加入输入框的属性，从而可以消除额外的点击和错误。

• 自动填写：利用浏览器可以保存并列举用户以前填写过的值。对敏感数据应关闭此功能。
• 自动更正：更正输入的拼写错误。对名称，地址等特殊字段应该关闭此功能。
• 自动首字母大写：自动大写输入的第一个字母。这适用于填写姓名，而不可用于电子邮件地址。
• 拼写检查：用红色下划线标出拼写错误的单词。对名称，地址等特殊字段应该关闭此功能。

3.限制输入

如今越来越多的人用小屏的移动设备，我们需要考虑到小屏的使用场景，避免用户不必要的输入，在提高用户满意度的同时还可以减少错误率。

－地址预填充

在网上注册表单中地址的填写常常是最麻烦的，因为包括多个字段，长长的地址名。通过把长地址拆解为单个字段，不仅有助于让用户聚焦在输入上（是的他们总是会频繁切换页面），也削减了大量的输入。

在下面的例子中输入谷歌总部的地址（街道，城市，州，邮编，国家），完整的输入过程只需键入10个字母，而如果不用自动填充的话，用户需要手动输入50多次。 

上面使用谷歌API的解决办法可以在大多数情况下表现良好，但是对于输入标志性建筑和公寓号的适用性有限，因为这些也许不包括在API提供的反馈之中。

而ThinkGeek的方法，由软件即服务（SaaS）供应商提供，称为PCA预测，初始搜索时允许输入公寓号码，输入后将地址正确的格式化。

THINKGEEK.COM

－邮箱预填充

另一种减少输入的方法就是在邮件地址字段中提供一个常见邮箱域名的列表。列表在用户输入了“@”按钮时出现，主要就是使用了一个预填充的解决方案，这样每次输入邮件地址最多可以节省12次按键。

 注意输入框文本 “邮箱地址” 已经消失

4.利用定位

虽然调用定位数据常用在移动应用程序中，但是我们不能忘记在所有的平板电脑和台式机上也可以使用。特别是当在触摸屏上打字很麻烦时，基于位置的信息预填充可以节省用户宝贵的时间并提高转化率。

诺德斯特龙百货网站的产品详情页就是这种技术的一个很好的例子，产品利用定位完全跳过了表单填写。页面调用定位信息，并在最接近的商店自动查找项目的库存，而不是要求用户输入邮政编码来获取地址。这样不仅仅节省了用户的时间，还可以让用户直接看到“最近店面地址”这个有用的信息。 

NORDSTROM.COM

虽然由于精度问题，预填充一个完整的地址可能是有困难的。通过谷歌的Places API，可以同时使用地理位置信息和地址预填充两种方式以达到最好的效果，根据用户的实时位置给出更为精确的位置填写参考。 

ZUPPLER.COM

当然，因为不能保证准确性，所以需要允许用户可以对自动生成的位置数据进行手动修改。

总结

总之，遵循这些原则可以帮助设计出易用的表单并创造愉悦的表单体验：

• 优先保证表单的可浏览性，设计易于阅读的标签，并避免无关的内容妨碍用户浏览。
• 提供更易填写的表单格式，为每个输入条目的类型设计输入掩码，并使用适当的键盘（以及其他HTML属性）。
• 给予恰当的输入限制，使用预填充
• 利用定位，无需再次点击添加。

以上说明我们在不断变化的数字时代中总是有更多可以学习的东西。另附一些高质量的表单设计资源：

• Luke Wroblewski的书《Web表单设计》，还有他的博客（http://www.lukew.com/ff/），里面涵盖了各种UX的话题
• W3C的表单指导方针（https://www.w3.org/WAI/tutorials/forms/）
• Amanda Cheung写在UX Booth的文章：“如何使表单风格通俗易懂”（http://www.uxbooth.com/articles/styling-forms-accessibly/）

英文原文：MIKE MADAIO, THE NEW RULES OF FORM DESIGN.

原文地址：HTTP://WWW.UXBOOTH.COM/ARTICLES/THE-NEW-RULES-OF-FORM-DESIGN/

译文地址：http://ddc.dianrong.com/?p=2531

Pricing

Pricing

Pricing Plan

Pricing page

Pricing

Pricing Table

Product Plans

Upgrade page

Pricing page

Sign Up UI

Modal

Freelance Website

Sign Up

Daily UI #1

Sign Up Modal

Sign Up

Flocabulary

To Do App Concept

DailyUI

p.s.我们简单说说表单中含有哪些元素：

标签（Label）告诉用户该表单需要填写什么类型的信息，通常放置在表单文本框之外。

表单字段（Form field）则是用来收集用户输入的信息，在我们平常使用的表单之中，每个字段包含着某一类型的信息（如姓名、性别等）。

占位符文本（Placeholder text），又叫提示文本，位于表单文本框里面，一般用于提示用户填写。在大多数的做法中，当用户开始输入，这些提示文本会自动消失。

一条经典的表单设计原则是表单越短越好。这条法则看上去似乎有理有据，但是它却没给我们带来预期高的用户转化率。这条指导原则错就错在没有考虑其他因素，如用户输入，它们该如何设计、如何影响表单的体验。

举个例子，在我的研究中发现这篇文章被设计师们引用的次数远远超过其他文章，被大多数人奉为经典，想想就可怕。这篇文章来源于Imaginary Landscape(一个开源的网络开发社区)将近10年前的一次报告，文章里面提到如果将一个11个字段的表单减少至4个字段，那么转化率就会提升160%。但这份报告只给出了一个页面、二个变量和一次测试的结果，他们没有做更多的测试，比如对比不同的4个字段表单之间的测试结果，对比10和11个字段以及5和4个字段表单之间不同的结果，所以这份报告存在很明显的漏洞，根本不能令人信服。

来自Michael Aagaard在Call To Action 2015分享的一个与上面类似的案例。案例中，他负责提升某表单的用户转化率。他一开始的做法是将原本表单的字段从9个减少至6个，但是转化率没有提升反而降了14%。后来经过研究，他发现原本表单中最吸引用户注意的恰好是被删除的字段，结果显而易见，表单对用户的吸引力变弱了。发现问题后，Michael Aagaard进行了第二次测试，他在保持9个字段不变动的情况下调整了表单的结构使之更清晰，结果转化率提升了19%。事实证明，减少表单字段不一定能提升用户转化率。

所以，我们该如何设计出好的表单？这里有一些新的设计原则也许适用：

1.优先考虑用户浏览方式

2.能够轻松填写的格式

3.限制输入

4.利用定位

（1）优先考虑用户浏览方式：

来自Jakob Nielsen很早之前的研究：用户浏览网页是通过眼睛快速扫描的方式浏览，而不是从上往下逐字地阅读。即使是在填写表单上面，用户也是如此。考虑到表单输入的效率，用户有效的扫描网页对于减少错误或错失字段的情况至关重要，尤其是当表单只能填写（提交）一次的时候（电商地址填写，注册帐号等等）。

表单标签的位置

虽然已经有了大量关于表单标签位置的研究，但仍然存有争议。表单方面的专家Luke Wroblewski有一篇研究明确了表单标签采取顶部对齐的方式能让用户更快完成浏览，原因是这种对齐方式对眼球移动的需求比其他对齐方式要更少。其中采用右对齐方式标签的表单浏览时间仅次于顶部对齐标签的表单，如果你的网页高度有限的话推荐这种对齐方式。采用左对齐标签方式的表单是三者之中浏览时间最长的，但是，这种对齐方式能够在你想要用户放慢速度阅读，仔细考虑的时候使用（如一些重要的输入）。

提示

占位符文本（又叫提示文本）。关于提示文本，一般来说它对用户来说弊大于利。其中包括把标签作为占位符文本来使用的情况，这样的话当我们在表单里面添加内容的时候，提示文本会自动消失。这种做法虽然可以让用户不再看到提示文本，但是这很容易造成用户短期记忆的压力以及增加犯错的机会。

即使标签不作为提示文本，另外添加一个提示文本。用户这种扫描式的浏览很容易造成框内已经被输入了文字的误会。来自NN Group的研究，研究中表明了空字段对比有文字的字段更吸引用户注意，以及用户更多的会跳过那些有提示文本的字段。换句话说，被认为对用户有利的提示文本其实对用户来说弊大于利，尤其会对用户浏览网页方面造成困难。

Good: 一个空的表单字段

Bad: 表单字段里的帮助文本令人费解

在某些情况下，为了减轻上面所说的问题，占位符文本可以使用比普通的文本更浅的颜色。然而这种方法容易导致一个对比度的问题，白色背景上的浅灰色文本不符合W3C Web内容的可访问性指南（正常文本比4.5:1）。此外，根据W3C，占位符文本不支持辅助残疾人的设计（如屏幕阅读器），这会让这部分用户填写表单变得很困难。

浮动标签（Floating Labels）

这是一个现在很受欢迎的新颖的交互设计方式：浮动（或自适应）标签。整个交互过程，一开始标签文本作为占位符文本，之后一旦用户开始填写它就会移动到表单字段的上方。这种方式很好的解决了上面所说关于标签消失的问题。

而且这种方式应用在移动端上还能帮助我们减少页面长度。但是，它还是没有解决上面所讲的一个很重要的问题：用户扫描式的浏览很容易误会框内已经被输入了文字。因此，NN Group建议还是避免这种交互方式，仍然采用标签在字段上方的做法，除非页面长度是现阶段你需要解决优先级最高的问题。

(2)能够轻松填写的格式

以前，我们填写表单是需要靠猜的，比如我的手机号码应该用哪种格式？信用卡号码填写有没有遗漏？“@”符号在键盘的哪个位置？现在，新的表单设计能够帮助用户做出判断，提高表单使用体验。

输入掩码（Input Masks）

字段掩码，能帮助用户输入的文本编排格式。首先，用户填写一个字段的时候只能出现一种掩码，以免出现上述问题。其次，当用户填写时自动为文本编排格式，让用户将关注的重点放在所需要填写的信息以及更容易被发现的错误上面。在下面的例子中，括号、破折号和间隔被应用于电话号码的输入上面。

当我们填写电话号码、信用卡号、货币等等的时候，这个简单的方法能够节省我们的时间和精力。

输入字段（Input Fields）的HTML属性

现在设计师们已经知道如何正确调用手机上的小键盘，但实际上仍有很多人不会使用正确的键盘类型。

“数字（Number）”键盘vs.“电话号码（tel）”小键盘

对于仅包含数字的字段，如日期、邮编、信用卡号等，使用“电话号码”样式的小键盘因为触发面大的原因能让用户轻松的输入数字。（前端的实现方式，  标签的type属性里使用“tel”或者添加属性 “pattern=”[0-9]*”）。

这里还有其他几个属性，将它们添加到文本字段里面也能帮助我们消除多余的按键以及错误。（注：以下建议需考虑中文适用性）

自动填写：利用浏览器显示用户之前填写的数值。但需要将敏感数据设置为“关闭”。

自动更正：当用户出现文字拼写错误的时候自动更正。但要注意如果是姓名、地址等特殊字段的时候需要关闭此功能。

自动大写：第一个字母大写。

拼写检测：用红色强调拼写错误的单词。但也需要注意如果是姓名、地址等特殊字段的时候需要关闭此功能。

（3）限制输入

如今越来越多人使用手机去处理生活中各种各样的事情，考虑到手机的使用场景以及它本身屏幕小的情况，我们需要让用户在填写表单的时候避免一些不必要的输入，这样不仅能够提高用户满意度还可以降低操作的错误率。

地址预填充（Pre-Fills）

地址的填写是任何注册表单中最麻烦的部分，里面含有多个字段。通过调整表单字段至单个字段，我们发现用户不仅仅能保持在当前输入的状态（不需要频繁的切换），还可以削减大量的用户输入。

在下面的例子我们试着填写了谷歌总部的地址（街道、城市、州、邮编、国家）。整个表单我们只用了不到10次按键就完成了填写。这看似简单的输入背后隐藏了超过50次的潜在手动输入。

邮件地址预填充

另一种减少输入的方法就是在邮件地址字段中提供常见的域名。当用户开始输入@键的时候就会出现这些常见的域名。

利用定位

在移动端APP里面调用地理位置信息是很常见的做法，但也别忘了这种做法同样适用于平板电脑和台式电脑。特别是触摸屏，众所周知，在触摸屏上填写表格特别麻烦。使用基于地理位置信息的预填充方式刚好能帮助用户节省宝贵的时间，同时提高用户转化率。

Nordstrom网站的产品详情页就是个很好的例子，该页面调用了位置信息来自动搜寻离用户最近的店铺。这样做除了节省时间外，用户不需要花费精力就能得到可能对其有用的信息。

Nordstrom.com

但是，由于精度问题，想要通过预填充填写一个完整的地址是很困难的。谷歌的Places API基于用户位置，通过使用地理位置信息和地址预填充两种方式来解决这个问题，为用户提供准确的位置参考。

zuppler.com

当然，因为不可能完全准确，所以需要允许用户对这些自动生成的位置信息进行修改。

总结

总之，遵循这些设计原则能帮助大家设计出更易用的表单以及创造更好的表单体验：

1.优先考虑用户浏览方式，设计易于用户阅读的“标签（labels）”，并避免无关紧要的信息干扰用户浏览；

2.提供能够轻松填写的格式，考虑每一种字段类型，为其提供掩码（masks）以及合适的键盘输入；

3.限制用户输入，使用预填充的方式；

4.利用定位，节省用户时间。

原文作者：Mike Madaio

译文链接：UI中国

网站是企业宣传和展示其产品的一个非常好的媒介，同时也是收集用户建议和评价的最佳途径。作为网站最重要的组成部分之一，联系表单是用户反馈信息的重要窗口。联系表单的设计应该具有创意性，能够吸引用户的注意力，还要让用户能够简单快速的提交信息。在今天这篇文章中，我向和大家分享19个与众不同的网页联系表单设计，相信能够带给你满满的设计灵感。

01. Manhattan

02. Mario Petrone

03. Waves of Ideas

04. Motion Kandy

05. Ripcord Graphics

06. Lasabree

07. Hippy Hippy Cakes

08. Sick Designer

09. Pearman

10. Cleek