表单设计经验集锦

一、表单结构

标签：告诉用户表单问题是什么；

输入框或者下拉框：供给用户填写或选择答案信息；

动作：用户提交表单，即用户点击一个按钮或链接，执行一个操作；

帮助文字：为如何填写表单提供帮助；

输入反馈：针对用户输入给出反馈，输入正确还是错误；

二、表单设计原则

1.信息内容的合理组织

表单项并不是一个个从上到下无序罗列，而是根据表单内容，按照一定的逻辑，经过组织，分成不同的内容组，不同的主题。同时各个逻辑组和同一个主题的表单项，也是按照逻辑顺序或者用户熟悉的模式顺序，使用户浏览和填写自如。如果表单过长时，也可拆解成不同网页，类似于任务拆解，让用户一步步填写。

2.清晰的浏览线 

思考如何设计表单结构和路径时，需要有个基本原则：由始至终提供清晰的浏览线。采用眼动仪实验即可检验用户的浏览线。如标签的对齐方式、输入框的布局等都影响着用户的浏览线。当提供了垂直单一路径，使用户减少注意力分散，可以迅速对问题作出回答，完成任务所花时间最少。

3.简化表单突出重点

根据用户使用数据，适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来。

4.只填写一定要填的

只让用户填写必须要填写的数据，对于流程最终目标或者后台其他功能无关的数据剔除掉，对大多数用户同一答案的数据设置默认，对用户已经被系统获取的数据进行预填。

5.考虑用户场景保证主流程顺畅

我们在设计表单时，定义了清晰的线性步骤，但很少真正实现。考虑用户场景，保证主流程不要中断，将导致人们放弃填写的元素解决。

例如，招商银行卡号密码的付款流程，分为三项表单步骤：填写银行卡号、填写其他验证信息、支付成功。但在用户填完卡号和其他验证信息后，经常会发现付款额超出每日限额，以前的流程是，用户中断付款流程，不得不新打开一个网页，招行主页→网上个人银行登录→选择一卡通（输一卡通卡号、查询密码、附加码）登录后→网上支付→网上支付额度管理调整额度，然后再次重新支付，使用户在两个操作流程中切换，让用户各种折腾。而改版后的设计，可谓十分贴心，给予信息提示的同时，用户可在当前流程设置限额，避免了付款流程的中断，同时大大节省了用户的操作成本。

6.提供帮助

为了用户快地填写表单，一般在难以理解的表单项增加帮助信息，引导用户成功填表。帮助信息，提示用户应该如何填写，常见的帮助，一般在标签或者输入框旁提供帮助文字，交互方式也有一直展现（即一直出现在输入框右侧、下方或输入框内）、即时帮助（即激活输入框时，帮助文字自动出现）、用户激活的即时帮助（即帮助信息默认不显示、用户鼠标悬浮触发帮助图标来显示帮助）、用户激活的区域帮助（将表单所有的帮助信息统一放在一个位置）等多种方式。其实可以考虑更多的方式来更好地帮助用户，例如经常见到的信用卡有效期填写，当用户激活输入框时，右侧出现可视化的帮助信息，更简洁直观，更好理解。

7.智能默认

网络表单中有很多地方能利用智能默认减少必要的选择和输入次数，加速表单完成过程。一般通过恰当设置满足大多数人需要的默认选择和数值，推送默认每个人都相同。还有个性化默认方式，它与表单对象相关。

如京东购买的订单信息，智能默认与个人相关，不需要表单输入，默认之前的收货地址信息、支付配送方式、发票信息等，符合用户的需求习惯，同时避免了重复输入的成本。

8.即时反馈验证

虽然设计表单时，保证表单的内容结构清晰，提供有意义的输入帮助，但总有些答案不止一个。此时，直接反馈有助于再次确保人们的回答有效，提供即时校验。即时验证分为多类反馈：确认输入合适、建议有效回答、核对输入信息，通过实时更新设计以帮助用户控制在必要的限制范围内。这类反馈通常发生在用户在输入框开始、继续输入或者停止输入的时候。

如在设置密码时，要求用户输入字符数有限制、字符类型有限制的密码，利用即时验证，不仅告诉用户输入的密码是否有效，是否合格，而不是填完所有表单，提交之后，才告我密码需要修改，同时还能说明密码的安全程度，采用高度可视化方式让用户衡量密码质量。

直接反馈不仅限于确认所提供的答案，还能提供输入建议。用户在搜索时，搜索框能够在输入过程中自动补全、提供相关联的搜索建议，既可以避免用户输入出错，又可以节约用户的拼写时间（这一点在手机端更加需要）。

9.专注当下任务

如前所述，让用户专注于一件任务。表单填写是一件负担很重的事，因此在填写表单的时候尽可能去除不必要的干扰。要推广告，比如淘宝的相关购买推荐也是在付款结束的完成页面出现的。

三、表单设计技巧

1.标签&字段的对齐

Matteo Penzo的眼动实验发现，顶部标签方式，标签移动到输入框需50毫秒，比左对齐标签方式（500毫秒）快了10倍，比右对齐标签方式（240毫秒）快了5倍左右。

总之，顶部标签方式，填表时间最短。但如果尽量减少垂直面积，可以考虑右对齐方式。如果希望用户填表时认真浏览标签，了解仔细考虑表单的每个输入框时，可以采用左对齐方式。

虽然新的设计会在垂直方向上占用更多的空间，但是标签和字段的匹配会让整个界面在视觉上更加易用清晰。为了让用户在输入的时候看得更清楚，成对的字段和标签会更加靠近，两个不同的组之间的间隙会更大。无需左右扫视之后，用户可以更加顺畅地填写表单。

2.设置默认值

3.预填写相关字段

许多记录的相关页面会根据“发布者”来执行一些预制的操作，比如创建新的任务和事件（我们在淘宝下单的时候，系统会帮你填写预制的默认收件地址、收件人和联系电话，这种机制与之类似）。

4.步骤化

当表单所需信息较多或者所填信息有前后依赖性时，合理地拆分步骤重新组织内容会减轻用户填写的心理压力并专注于当下表单，与之相对应的是需要设计清晰的引导线让用户明白自己目前所处的步骤。