创建用户友好型表单 Creating User Friendly Forms

表单解析

表单的目的、内容、大小虽然各不相同，但是有一些基本的元素助我们轻松地填写。

Amazon创建账户表单解析

i. 标题

这个元素帮助用户引导完成表单填写的整个过程，尤其当你收集的数据不止有一个标题的时候，它特别有用。例如：个人资料、职业详情、财务明细。

ii. 标签

标签告诉用户在任何特定的输入区域期望他们填写什么内容。

iii. 占位符

占位符是对标签进行额外的信息描述。

iv. 错误信息提示

错误信息提示给予用户错误反馈，提醒用户为什么填错了。

v. 动作按钮

动作按钮是在表单的结尾，有个确认提交的动作控件。

表单状态

基本上，表单在用户的交互过程中需要经历三个阶段。

i. 默认状态

用户在未进行任何操作前表单的状态。

ii. 聚焦状态

这个状态强调用户正在填写的区域，帮助用户聚焦和减少反复扫描屏幕的时间。

ii. 反馈状态

反馈状态是指用户收到的反馈时的页面状态(大多数是指错误信息反馈)。有时候，这个状态出现在用户在完成了一个输入框的录入后把焦点移动到下个输入框。当然了，如果数据不能得到立即验证的话，就要等到用户点击提交按钮后再给予反馈提示。

Amazon创建账户表单的“默认、聚焦、反馈”页面状态

最佳实践

1.保持简洁

让你的表单保持简短精炼，只保留最有必要的数据，避免以验证的名义让用户重复输入，例如不要重复密码字段，取而代之的是要让用户直接看到他们输入的密码。

2.使用及时验证

当给予用户输入进行报错时，最好将反馈定位到具体位置。

Facebook和Amazon采用了两种不同的验证反馈方式

3.将相近的字段打组

将相近的字段打组和按标准序列排序是非常重要的。这样的话可以帮助用户减少认知负荷和注意力消耗。

付款页面相近的功能区域被适当地分组

4.将标签左对齐

要将标签放置到输入框上面（像上面所解析的Amazon的表单一样）。不要把占位符文字作为输入框的标签，那样的话用户输入完成后将看不到标签，用户将很难对已输入的内容做最终的核对，会让他们思考很多。

始终将标签放置在输入框上面并左对齐，有一个很全面的研究报告来说明这是高效率的做法。

详见链接：https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php