LOFTER-网易轻博

上一篇文章我们讲到了表单设计的基本原则，这一篇我们来了解表单的基本要素。我们知道每个表单至少都有三个基本要素：标签、输入框和动作。标签用来提出问题，输入框用来填写答案，动作则用来提交答案。每一个要素的设计好坏都会对表单产生影响。下面我们详细说明：

一、标签

标签应当采用简洁易懂的语言来提出问题，以便于回答。那在布局上标签是左对齐，右对齐，还是顶对齐？— —答案是根据需求而定。
这并不是一句废话，之前的文章中提过，脱离了业务需求和用户需求的设计是没有意义的，需求不同对表单的设计要求也不一样。比如：有的表单希望用户在最短时间内填完，而有的表单希望降低用户的填写速度，以此来让用户对每一个问题都能够深思熟虑的作答。
下面我们来看看标签的不同对齐方式都有哪些优缺点及其适用场景。

1.左对齐标签

下图是网易云课堂申请开课的表单，其标签为左对齐标签

左对齐标签的优点：
（1）容易浏览
标签左对齐更方便用户浏览，用户只需要上下阅读标签便可快速浏览表单，而不会被输入框打断；
（2）占用的垂直空间较少
由于标签与输入框在同一行，在页面中占用的垂直空间相对更少；

左对齐标签的缺点：
填写速度最慢
左对齐标签与输入框之间的间距由最长的标签决定，这就导致部分较短的标签和输入框之间的距离较大，用户将标签和对应输入框联系起来的时间也就稍微长一些。

这里引用《Web表单设计：点石成金的艺术》一书中提到的马泰奥·彭佐的左对齐标签眼动追踪数据：

人们一般都能将左对齐布局中的标签与相应输入框联系起来，只是花费时间较长。可能因为人们解析问题时眼球定位次数较多，问题与标签联系起来时有一些认知压力，典型扫视时间为500毫秒。

左对齐标签的适用场景：
虽然左对齐标签是3种方式中填写速度最慢的，但完成时间长并不一定是坏事。如果你希望用户仔细考虑表单中每个问题和答案时，左对齐标签是个好办法。
而当你选择采用左对齐标签时，你可以让标签长度尽量保持一致，来避免浏览不方便这一问题。
另外，如果表单中既有必填项也有选填项，而你想让用户能够很方便的整体浏览表单问题时，也可以采用左对齐标签。

2.右对齐标签

下图是腾讯课堂申请开课的表单，标签采用了右对齐的方式。

右对齐标签优点：
（1）输入框与标签相邻
标签与输入框相邻，使用户能很好的将二者联系在一起，从而更快速的回答问题。采用标签右对齐方式设计的表单其完成速度是3种方式中居中的一个。
（2）占用的垂直空间较少
由于标签与输入框在同一行，在页面中占用的垂直空间相对更少；

右对齐标签缺点：
表单的可读性降低
由于大部分人的浏览习惯是从左到右，所以左侧不齐的话，用户的视线需要来回移动，降低了整体表单的浏览效率。如果标签文字折行的话，效率会更低。
（这里需要注意，整体浏览效率与表单完成率不是一个概念，整体浏览效率可以理解为表单的可读性，表单完成率可以理解为完成表单所需的时间）。

右对齐标签的适用场景：
如果希望用户快速完成表单填写，且占用更少的垂直距离时，可以采用右对齐标签，但是要注意，不要让标签文字折行而影响表单可读性。

3.顶对齐标签

下图是蓝湖网站意见反馈页面，是一种顶对齐标签方式的表单。

顶对齐标签的优点：
（1）完成表单所需时间最短
顶对齐标签与输入框之间的位置紧密相邻，使表单填写变得很快，而且用户的浏览顺序是一直向下的，使得表单有清晰的完成路径。
（2）横向空间可延伸
由于标签和输入框是垂直排列的，这样在横向上就有充足的空间，标签文字也可以有更大的扩展性。

顶对齐标签的缺点：
占用较大的垂直空间
相对于前2种方式，顶对齐标签会占用额外的垂直空间。
如果你选用了顶对齐标签的设计方式，那么要注意采用合适的垂直间距，最好使用输入框50%-75%的高度作为相邻输入框的间距。

顶对齐标签的适用场景：
如果希望用户最快速的完成表单，或者表单的标签很长（如英文标签），希望在横向上有更大的扩展性且垂直方向不受限制时，可以采用顶对齐标签。

4.其他布局

标签的布局除上述三种外，还有输入框内标签和混合对齐标签。
输入框内标签适用于表单非常短，或屏幕空间极度有限的情况。如下图是新浪微博未登录时的首页，其中登录注册表单只占了很小的部分，所以采用了输入框内标签的方式。

如果你选择使用输入框内标签，需要注意以下几点：
（1）当焦点定位在输入框时，标签不要立即消失，而要保证用户能够看到问题（标签内容）；
（2）当用户输入时，标签应该消失，而不要成为答案的一部分；
（3）输入框内标签更适合只有一个输入框（比如搜索）或者用户对几个输入框的问题非常熟悉的表单（比如登录注册）；
（4）如果表单较长，不建议使用输入框内标签。因为用户会忘记要回答的是什么问题，而且填写完表单再检查时也会因为看不见问题而无法核对；

还有一种布局是混合对齐标签，我们是不建议使用的。因为混合对齐的方式浏览起来很不方便，也会破坏用户完成表单的明确路径。

二、输入框

1.输入框的类型

常见的输入框类型有以下几种：

文本框：允许用户输入任意数量（或限定数量）的字符；

单选框：允许用户从2个或多个选项中选择一个，由于选项之间互斥，因此建议有默认选项。当选项不多或希望将选项全部展示出来时，建议使用单选框；
使用时应当保证点击单选框或者标签都能选中。

复选框：允许用户选择一个或多个，或用于选择“是”或“否”的问题。
使用时应当保证点击复选框或者标签都能选中；

下拉菜单：允许用户从2个或多个选项中选择一个。适用于选项较多时使用，但是要注意控制选项数量。

2.输入框的长度

输入框不只被用来填写答案，其长度对用户填写答案还能起到暗示作用。
如下图所示：“手机号码”、“输入短信验证码”和“简介三个标签对应的输入框长度是不一样的，因为它们对答案的长度要求不同。

所以输入框的长度对人们填写答案时起到了有效的暗示，我们在设计时，如果答案有固定的规则（如邮编、电话号码、短信验证码、邮箱，备注、简介等），可通过长短不同的输入框来暗示用户。
如果答案没有规则无法暗示，则输入框应保持长度一致，足够填写答案即可，避免长度不一导致用户混乱。

三、动作

动作是完成表单的关键一步，因为我们填写完表单之后要“提交”。我们可以把一些重要的行为视为“主动作”，如：提交、保存、下一步等。另一些与完成表单填写的目标相悖的行为可以视为“次动作”，如：取消、撤销、返回等。
还有一些在表单填写过程中的动作可以视为“进程中动作”，如：查询、上传附件等。

在动作设计时，需要注意以下几点：

1.从视觉上区分主动作和次动作

表单中动作的数量不宜过多，不然会让用户无从选择。如果表单中既有主动作又有次动作，那么应该从视觉上区分。

在《Web表单设计：点石成金的艺术》一书中，作者通过眼动仪和可用性指标进行了一项测试，来评估主动作和次动作的最佳表现形式，如下图：

主动作和次动作的最佳表现形式.jpg

结果表明：
方案E最差，用户错误地点击了“取消”按钮；
方案F用户眼球定位时间最长，因为它们原本期望两个按钮会与输入框对齐，实际却没有，用户不得不四处搜寻；
方案B完成最快，但是按钮没做区分，用户会担心点击错误按钮；
方案C最满意，从视觉上区分了按钮，且按钮位置符合用户浏览习惯
注：由于截图为黑白，无法区分方案B、C，实际上在书中方案C的按钮是有颜色区分的。具体的测试过程和描述本文不再赘述，感兴趣的伙伴可详细阅读书籍。

2.主动作和输入框对齐

表单设计应当为用户提供明确的完成路径，减少填表所花费的时间，上文的可用性测试实验也验证了主动作与输入框对齐是表单完成最快的方案。
这里需要说明，由于PC端屏幕可视区域较大，因此信息的展示方式是重要考虑的因素，应该便于用户浏览，方便用户在复杂的信息中快速找到需要的信息并完成操作。而在手机端，我们发现大部分主动作放在了右侧，是因为手机端屏幕有限，信息已经是极度精简后的内容，此时在有限的空间内方便操作则变得更加重要。

3.进程中的动作

进程中的动作应该让进程可视化。当后台正在处理用户的某一“动作”时，用户是看不到的，所以我们最好能给予用户反馈，告知用户我们接到了指令并且动作正在进行，这样能够减少用户的焦虑，也可避免表单重复提交。

下图是邮箱上传附件的截图：

用户选择附件后能够看到当前上传的进程，这样既给了用户成功反馈，又能减少用户等待时的焦虑。

还有一种方式是把进程直接放在按钮上显示。如下图，正在登录和获取验证码按钮，用户点击按钮后有一个后台处理信息的过程可视化。将进程放在按钮上能够给予用户最轻量的提示，同时不会占用多余的空间。

关于动作按钮，还有一种常见的方式是禁用主动作，就是将主动作按钮置灰不可点击，只有当用户完成表单后才可点击。这时需要注意，后台要对每个问题的答案进行校验且要知道什么时候用户回答完所有问题。

总结

关于表单的基本要素就写到这里。都是我在工作中的积累和总结。其实，表单设计还有很多细节，且不同的场景和目标对表单的要求也各不相同，我们要不断的积累，寻求更好的解决方案，做出更符合产品和用户需求的设计。