表单设计浅析

[fsiaonma]

近日读了《Web表单设计_点石成金的艺术》这本书，更多的从用户心理进行切入，分析表单的设计各个注意事项，体会很多，写下这篇笔记记录一些重点内容，同时希望能在真实使用中注意这些细节。

背景

我们必须知道，现实生活中大多数人讨厌表单，在流程中最容易丢失用户的环节。因此，基于这个背景，表单设计的目标貌似变得简单，就是让用户“填完”。

注意事项

至于如何能够让用户实现填完的目标，可能需要注意以下几点：

• 尽量减少痛苦，填写过程应尽量简洁，容易。
• 说明填写完成路径，表单应清晰告诉用户，如何才是正确完成路径。
• 考虑具体使用场景，需要根据特定场景，设计特定表单。
• 保持沟通一致，表单内容应和所有信息场景一致。

组织表单

选取问题

由于表单项都相当于是一个问题，所谓问题就是要通过思考才能回答的。因此，问题（表单项）的多少以及复杂度，都需要进行评筛选和优化，考虑没有该问题是否可以，如果必须要问，考虑是否有更合理的提问方式。

构建对话

表达是直接与用户对话的，现实生活中很少人愿意回答一个陌生人提出的一些列问题，因此对于表单问题的描述，需要平易近人。如：“生源地” 可以换成 “你可能来自”、 “发卡行” 可以换成 “哪家银行发行” 等。是的表单与用户的对话更贴近于交流。

内容组织

将表单的内容划分成多个有意义的组，这样给人更直观更整体的感觉。例如“必填” 与 “选填” 分开，“用户信息” 与 “组织信息” 分开等。

完成之路

表单命名

表单命名的重要性不仅仅在于能说明当前表单的用途，更重要的是能告诉用户完成后能干什么，这是很多设计者都忽略的。

清晰的浏览线

如果用户不知道当前填到哪个步骤，也不清楚接下来有多少需要继续填，放弃的几率很高。因此，流程复杂的表单，需要有清晰的浏览线，让用户知道当前的填写进度。

分散注意力最少

剔除所有可以剔除的分散注意力元素，让用户能集中与表单项，这样能使表单更加清晰，更加简洁。（当然，如果能让表单隐藏在用户不知不觉的操作中，这样就不需要突出表单，反而越多分散的点越好）

表单元素布局

每个表单基本都是有3个核心元素组成，标签，输入框，动作。标签提出问题，输入框让用户填写答案，动作让用户提交答案。
而这3者之间的不同布局却有不同的效果，

标签

标签的对齐方式分为：“顶对齐”，“左对齐”，“右对齐”。

顶对齐

用户名：
<输入框>
密码：
<输入框>
确认密码：
<输入框>

**优点：**由于问题与填答案区域异常接近，用户只需要向下操作，也提供了清晰的完成路线，这种对齐方式能使用户以最快速度完成表单填写。同是横向空间较大，较为灵活。
**缺点：**占用较大的垂直空间，当表单向很多的时候会显得臃肿，输入框间距需要控制在输入框高度的 50% 到 70%，标签间会被输入框阻断，不利于快速快速了解表单的整体状况。

左对齐

用户名：<输入框>
密码：<输入框>
确认密码：<输入框>

**优点：**标签都顶在左边，用户能迅速了解表单的整体状况，需要填写哪些内容。
**缺点：**由于填写过程需要从左到右，从上到下的操作，填写速度会受到很大影响。

右对齐

...用户名：<输入框>
.......密码：<输入框>
确认密码：<输入框>

**优点：**介乎上对齐与左对齐之间。
**缺点：**介乎上对齐与左对齐之间。

因此，如果需要用户库快速完成表单填写，可以选用顶对齐方式，如果需要用户缓慢填写，并清晰知道表单内容，可选择左对齐方式。

输入框

输入框有暗示答案的功能，正如：门上有把手，暗示着大家门能开，门上有“推"字样，告诉大家如何开。输入框的长度就能暗示答案长度，而 placeholder 属性将告诉大家如何填写答案。

动作

动作分为2种
主动作，如提交，保存
次动作，如重置，取消
应尽量减少次动作。