如何创建高质量的网页表单

早期的表单里面对标签项的说明文字都直接放置在标签旁边，但很多用户不会去看这些文字，或者直接忽略掉。其实可以结合用户操作表单行为来动态显示帮助信息，例如用户聚焦在哪一个标签项，则显示哪一项对应的解释文案。腾讯微博注册页有一个细节做的比较好：

（图示3：腾讯微博注册页面）

当用户输入邮箱已经被注册过，则会即时给出相应的提示，节省用户输入额外注册信息的成本，而不是让用户填写完再点击「提交」按钮交给服务器去做一次判断。

当然除了这条，还有密码强度和密码要求的即时校验，旨在节省用户输入时的思考时间，让用户更高效率地填写表单。

4. 错误消息

表单中的错误提示信息，或者一些不合规的提示信息展示也是表单设计中影响比较大的元素。

（图示4：Error ，图片来源

）

上图中的表单项就比较多，可能在小尺寸屏幕中需要滚动页面才能看到完整表单信息，而因为采用了点击「提交」按钮之后交给服务器校验数据，所以在多个表单项出现错误的情况下，则需要统一在表单头部提示出来错误信息，并且最好要有锚点，点击之后能够直接到错误的位置，节省用户寻找的时间。

然而如之前所说，如果能够在前台即时校验的信息，就尽量交给前台校验，除了可以节省用户的表单操作时间，可以保证体验的一致。

5. 智能默认

（图示5：淘宝/天猫购物车页面，图中敏感数据已经抹去）

表单设计中可以通过智能默认的方式帮助用户填写一些需要重复填写的表单，这样可以节省大量的时间。例如图中的淘宝/天猫购物车页面，用户在每次购买之后都需要经过收货地址填写环节，如果说将填写过的地址帮助用户保存起来并设置成默认，在后来的每次购买过程，可以直接进入到下一个环节，省去了这一步的时间。

6. 设置 Tab 键跳转

笔者认为 Tab 键跳转也是一个能够提高用户操作表单效率的一个方式，也是设计师在表单设计中必须要考虑到的一个细节，Tab 键的跳转和表单项视觉先后顺序保持一致。

这个细节很小，但是影响面却很大。很多网站并没有在这个细节上做的很好。举个反面例子：

（图示6：支付宝收银台界面，图中敏感数据已经抹去）

（图示6：支付宝收银台界面，图中敏感数据已经抹去）

上图是支付宝收银台的页面，分别来自于两个不同的电商网站。按照表单设计逻辑，在用户输入账户名按 Tab 键后，光标会自动聚焦到支付密码输入框中，然而左右两个界面却存在完全不一样的逻辑。左边页面在输入账户名之后按 Tab 键会直接跳到「忘记账户名？」这个链接上，而右边则一切正常。

7. 同意提交

在很多注册表单的最后一项表单项是让用户勾选同意***协议，很多情况下完全是废话。所以这一步与提交按钮可以合并在一起，省去一步操作。

（图示7：网易邮箱的注册页面）

8. 正在进行的动作

表单填写完成，最后一步就是提交了，这一步至关重要。不仅仅是说在提交之后要将后面的结果反馈给用户（上面说到的即时反馈），如果网络条件比较慢，或者信息量比较大，导致等待时间过长（很多情况下会这样），那么我们应该告诉用户这一切，让用户并不会觉得等待时间很长。同时也减少了用户重复点击「提交」按钮的情况。

（图示8：提交按钮小动画，图片来源于

）

9. 对话形式表单

用户 表单 信息 图示 时间 页面