【官网】Web表单设计最佳实践：5个非常有用的UI设计模式
从技术角度来看，表单设计是容易的。一点HTML语言，少许CSS，一份你喜欢的后端代码，你就准备好投入使用了。但你的用户还没准备好。
用户体验需要的不仅仅是漂亮的视觉效果与强大的代码。UX需要引导用户沿着一条路径，暗示可以预期什么结果，并提供可以承诺的内容。
人们不是使用表单来娱乐的。无论是获得信息，注册服务，或购买产品，他们希望他们的努力有一个结果。最好的表单用最少的文本来引导用户。
这里有5个有用的UI模式来提升用户体验和做出转换。
1. Mad Libs 表单
OKCupid （译者注：美国在线约会社交网）
Oscar
问题
输入区域太模糊或太普通。
解决方案
在空白处填充的格式可以提供相关信息和放松用户心情。这种风格可以适应自然的思维过程，而不是像数据采集器机一样出现。Mad libs更简洁并可以清晰地解释功能而避免混乱，尤其是相比于其他单个词描述的表单字段。这种表单也提供展示你网站个性的机会。研究表明这种模式可以致使点击率的增加。
提示
· 输入字段的下划线比输入框更自然的和随意，比如mad libs和其他游戏。
· 用第一人称的短语叙述或作为用户对系统的指令进行描述。
· 虽然这种模式增加了日常标准数据的输入，如注册。但如果信息太多会有相反的效果。如果你需要的更多的语句，那么传统的表单模式可能更合适。
2. 多样格式
Airbnb
题
不清楚使用哪种格式的表单区域。
解决方案
采用多种格式。
多样的格式为用户提供更多自由并带来便利，降低他们因系统用户体验的缺点而责怪自己的可能。
提示
· 通常情况下，多样格式最好与在线提示一起使用，这样用户就会知道他们有更多选择。但如果输入提示添加了不必要的长度，可以不加。例如Airbnb就不是从“邮政，国家，国家，省……”等输入开始提示的。
· 伟大作品从登录开始，用户可以从他们的用户名，电子邮件等之间来选择，这取决于哪个最容易记住。
· 对数据库网站（比如IMDB）而言，必须致力于不同类别的内容。
· 与您的开发人员验证，是否信息范围对系统处理而言足够小。
3. 阶段式（向导）
Amazon
问题
一项服务或功能需要大量的数据输入。
解决方案
当有大量的数据输入，如某些服务或购买商品时，把这个过程分解成较小的部分。这是 Interaction Design Best Practices的建议，这使得即使信息输入的数量不变也更易管理。
此外，有时早期数据会影响后期数据。例如，选择国际或国内交货会改变航运选择。对于这些情况，一个阶梯式的形式可以阻止不必要的信息，构成正确步骤。
提示
· 使用进度表（描述下一步）向用户显示总进程有多长。
· 大量的输入是对用户的负担，即使是阶段式输入。所以应消减任何不需要的数据，并保持步数最小化。
· 如果您的表单需要5步以上，请考虑添加一个“剩余步骤”模式以显示还有多少。
4. 完成度（进度条）
Quora
UXPin
Fitocracy
问题
用户对某些花费很长的时间的过程感到焦虑，可能会因为这一过程太长而离开。
解决方案
向用户报告完成度的进展情况。
进度条在这些情况下是很常用的：
00001. 入职/远程教程
00001. 简介完成度
00001. 完成表格时
00002. 电子商务的结算页面
步骤的百分比或数量是标准的，尽管还有创造的空间。以LinkedIn为例，给出了“全明星”这样的绰号来匹配的用户填写的档案。
进度条减少了用户对时间期限的关注，并鼓励他们创建一种有意义的“不完整”。
提示
· 如果你有好几步，尽量措辞如“步_ 为了_”来简要告诉用户此时共有多少步。
· 如果步骤很多，考虑细分步骤。 例如，亚马逊的结帐进度表只列出了四个步骤（“登陆 ”，“ 配送&付款，”“ 礼品选项，”“ 地址 ”）。然而，“ 地址&付款”一步分解成三个小步。
5. 强调收益
问题
此时你的网站或APP已经说服人们来操作。这很好，但用户很多变。即使是提供信息，聪明的形式也会使用含蓄的方式来告诉人们为何这么做。
解决方案
向人们传递信息，让人们知道他们在每一步中得到什么。你可以使用这一方法给出指令或建设用户界面：“填写此表格，我们就可以邮寄你一个免费的礼物”。
提示
· 用按钮传递消息。举例来说，把你的表单上的选项变成服务，用“加入我们”代替“提交”。
· 保持消息简短。决定填写这一表格的用户往往会忽视掉给出的指示。试着用一句话来概括。
一个实例
现在是时候把这些技术付诸实践了。在这一课中，我们将解决一个常见的设计问题：说服用户填写一个表格。我们用uxpin打造出下面的中保真原型，当然这一概念适用于任何设计过程或工具。
在下面的中保真原型中，我们的目标是创造一个内容流畅的表单——像素完美是第二步。
1.选择正确的字段。 人们花费越少精力越好。例如，如果您的数据库允许，请使用“姓名”而不是单独的“名”和“姓”。在这个案例中，我们需要他们的三个信息：姓名，电子邮件地址和他们想学习的东西。
2. 讲清楚这么做的益处。 即使用户已经知道他们在做什么，使用“注册就能每周获得免费的有用技巧”比“注册就能接收我们的信息”要好。
3. 不要隐瞒任何事情-但也不要用文字压垮用户。人们希望知道有没有隐藏的费用，意想不到的产品注册或其他陷阱。文字构成的墙壁会阻碍注册。
4. 清晰明了。 当你从尽可能多的表单域中删除标签时，还是要说清楚每个字段的含义。
5. 充实内容。在你结合分析你的团队和客户的反馈后，调整线框图的颜色和字体使之成为高保真原型。注意，我们一直到这一步才能使用“mad lib”技术把文本领域填满，使他们更加非凡。
