5大策略，帮你设计一个体验优秀的Web端表单

最为常见的信息收集表单，却最容易忽视它的验。

表单（不表格），作常见的页面模块，不都忽略它的存了？回一下登录网站填写信息、购填写址、填写调查问卷、修改人中信息时……都表单发互动。

对于设师言，如何设出一体验优秀的表单？我总结了这 5 策略：

填写流程与问题设计

1. 足够精简填写流程

想让用户不设防、不被打断填写完信息，填写流程需要足够精简，才能让用户畅地完成信息采，时需要确保产品有表单页面操作的一致性。

你可能遇到过这样场景，用社交账号登录个品，登录后不是进入首页，而是继续让你输入手号码后才能使用，这打断了用户填写信息流程，失去了好体验，甚至可能造成用户流失。

2. 多页填写要有进程提示

如填写信息分为多页，需要有进程提示，以便用户知自己填写信息位、剩余步骤，使用 Tab 键需要能跳转到下个输入框。

3. 问题设计的4个方法

每一个问题该保留还是删减，是一个值得思考的事情。户希望填写的信息越越好，可快点使产。掉那些可有可无的问题，保留有值的问题。

延迟指是些特殊问题后，让用户输入信息时、不会觉突兀、槛太高，比如要收银卡这样比较要信息，不要让用户第个填写，而是将问题后。

对释，依旧以收集银行卡信息为例，需要说明为何收集条信息，比用支付，或者是绑定支付以获得优等。

4. 用户不关心冒号

不要纠结冒号，用户不关心冒号，他们只关心自己要填写什么信息。

5. 主动与次动

表单中的主动包括提、存、继续等，它们带有继续操下去或者完成操的属，在表单中的视效果应更突出。

次动作主取消、重制、返回、预览、导出、导入，这类操作属于次层级，主属性打断当流程或者对当信息的操作，视觉层级也处于次。

选择合适的输入框

1. 输入框类型

输入框是提供回答问题，有输入框和输入框组分。

输框主要有复选框、单选钮、下拉菜单、文框、列表框（极少使用）；输框组类型有复合输框、关联输框、父子输框等。

完整类型的输框以参考ant design组件，它包含几乎使用到的所有类型。

2. 标签、输框的对齐

标签对齐的方式有四种，左对齐、右对齐、顶对齐和输框内标签。其中顶对齐方式加快用户处理速度，因为视只需要在中间一块儿移动，但增加页面的垂直空间。

慎用框内提示，当输内容时，能忘个提示，适用简单的输框，注册、登录界面的表单。

输入框的度会暗示填写信息的度，预先需好表单中输入框度归类。如果不用暗示信息度，需统一输入框度。

3. 选填与必填

过无数产品时间的教育，用户已知道星*（或点 · ）的必填项，当必填项多于选填项时，可以标记清楚选填项，不所必填项加星，这样可以减轻视觉负担。

合理使用帮助提示

1. 尽能减少帮助提示

不要依赖文字的帮助来弥补表单设计本身不足，帮助文能不用使用，如需要使用，要尽可能简洁明了，并选择好提供帮助时。

2. 帮助示的5种样式

见的帮助示有弹、toast（见于移端）、snackbar、气泡和行示 5 种样式，每一种示的使场景同，对户当前操作影响同。

弹窗提示是接打断前操作；内提示可晰定位提示位；泡提示多用于指示性、信息提示等场景；snackbar 类似于 toast，都是在顶层出现短时操作提示， snackbar 可以附带操作属性，如带有撤销按钮。

3. 自即时帮助

即时帮助需要在合适的时间和位置。浪注册页面，当开始填写手机号码时，会示国和海外填写区别，如果直接跳转到第二个输入框，会立刻给错误示，来引起你的注意。

4. 成功提示

成功提示属于整个输入息的额外息，是对用户完成息输入的提示和谢，所以如果要增加成功提示需要简短动人，能够唤起用户正向的情绪即可，否则宁可不要成功提示。

信息验证

1. 错误提示的验证

错误提示适用错误率高，有特定式要求的问题。

QQ 虾米音乐的注册页面，手机填写数不对时，跳转到下一输入框依旧能通过验证，到用户少输入一获取不到验证码时，就很难发错误所。36kr 的注册界面中，跳转后会给出提示。

错误提示需输入置紧密相关，以便用户可以清晰看到什么置出了什么错误。

2. 即时验证的时机

即使验证输入之后，不输入过程中。

你可能遇过，输入邮箱，刚开始输入第一个数字或者是字母，输入框后面就提示错误，但当你输入完整个邮箱地址后，错误提示变成正确提示，这种情况下，你会想是不是哪出错了，怎一直有错误提示，这就造成了不必要的困扰。

3. 输入限制需实提示

限制输入常见于固定息输入、或者是输入较长的文本息，这的提示需要实提醒用户。

其他输入

1. 默认状态

如果可以，单选按钮必给出默认状态，提示用户作出选择，例如性别的选择，的产品除了男、女选项外，会增加一不透露（或者保密）作默认选择。

2. 叠样式

当需要显示很输信息时，或者选项需要单独考虑时，以考虑使用叠样式，最常见的叠样式就是下拉选择框、时间期选择等。叠不应遮挡住底部信息（尤其选择信息比复时能忘底部信息），样能造成选择困扰。

总结

以上内容主要来自 Luke Wroblewski 《Web表单设计》这本书，书虽然是 2010 年出版，其很多基础知识到现在依旧用，时也适用于移动端品设计。

如需深入研究表单设计，可以翻看下这本书。

你还以一下目前市场上主流的组件库，对表单设计也有很大帮助：

• ant design：ant.design
• element：https://element.eleme.cn
• material design: https://www.material.io

注作者微信公众号：「自言自君」