5个改进web表单设计的建议

野性酷女 2022-12-21 03:29 132阅读 0赞

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

表单（不是表格），作为最为常见的页面模块，是不是都快忽略它的存在了？回想一下你登录网站填写信息、购物填写地址、填写调查问卷、修改个人中心信息时……都是在和表单发生互动。

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

对于[设计师][Link 1]而言，如何设计出一个体验优秀的表单？我总结了这 5 大策略：

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

填写流程与问题设计

**1. 足够精简的填写流程**

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

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

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

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

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

**3. 问题设计的4个方法**

每一个问题该保留还是删减，是一个值得思考的事情。用户希望填写的信息越少越好，可以快点使用产品。所以去掉那些可有可无的问题，保留有价值的问题。

延迟指的是一些特殊问题后置，让用户输入信息时、不会觉得突兀、门槛太高，比如要收集银行卡这样比较重要的信息，不要让用户第一个填写，而是将问题后置。

对于解释，依旧以收集银行卡信息为例，需要说明为何收集这条信息，比如用于支付，或者是绑定后支付可以获得优惠等。

**4. 用户不关心冒号**

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

**5. 主动作与次动作**

表单中的主动作包括提交、保存、继续等，它们都带有继续操作下去或者完成操作的属性，在表单中的视觉效果应更突出。

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

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

选择合适的输入框

**1. 输入框的类型**

输入框是提供回答问题的方式，有输入框和输入框组之分。

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

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

完整类型的输入框可以参考ant design组件，它包含了几乎会使用到的所有类型。

**2. 标签、输入框的对齐**

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

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

慎用框内提示，当输入内容过多时，可能会忘记这个提示，适用于简单的输入框，如注册、登录界面的表单。

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

**3. 选填与必填**

经过无数产品长时间的教育，用户已经知道带星号\*（或是红点 · ）的必填项，当必填项多于选填项时，可以标记清楚选填项，而不是所有必填项加星号，这样可以减轻视觉负担。

合理使用帮助提示

**1. 尽可能减少帮助提示**

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

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

**2. 帮助提示的5种样式**

常见的帮助提示有弹窗、toast（常见于移动端）、snackbar、气泡和行内提示 5 种样式，每一种提示的使用场景不同，对用户当前操作影响也不同。

弹窗提示是直接打断当前的操作；行内提示可清晰定位提示位置；气泡提示多用于指示性、信息提示等场景；snackbar 类似于 toast，都是在顶层出现短时间的操作提示，但 snackbar 可以附带操作属性，如带有撤销的按钮。

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

**3. 自动即时帮助**

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

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

**4. 成功提示**

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

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

信息验证

**1. 错误提示的验证**

错误提示适用于错误率较高，有特定格式要求的问题。

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

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

错误提示需要和输入位置紧密相关，以便用户可以清晰看到是什么位置出现了什么错误。

**2. 即时验证的时机**

即使验证要在输入之后，而不是输入过程中。

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

**3. 输入限制需实时提示**

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

其他输入

**1. 默认状态**

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

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

**2. 层叠样式**

当需要显示很多输入信息时，或者选项需要单独考虑时，都可以考虑使用层叠样式，最常见的层叠样式就是下拉选择框、时间日期选择等。层叠不应遮挡住底部信息（尤其选择信息比较复杂时可能会忘记底部信息），这样可能会造成选择困扰。

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

总结

以上内容主要来自 Luke Wroblewski 的《Web表单设计》这本书，书虽然是 2010 年出版的，但其中的很多基础的知识点到现在依旧通用，同时也适用于移动端产品设计。

[5_Web]: /images/20221120/7836e43949a14cc98f91530b5a962729.png
[Link 1]: https://www.uisdc.com/tag/%E8%AE%BE%E8%AE%A1%E5%B8%88
[5_Web 1]: /images/20221120/4086d1a6e75d42b4a81780d47dbe6b32.png
[Link 2]: https://www.uisdc.com/tag/%E4%BA%A7%E5%93%81
[5_Web 2]: /images/20221120/096efc74b8ef49a2873a05e7c7d8c3c3.png
[5_Web 3]: /images/20221120/da3b7df49d76442ab736bc727c5b4147.png
[5_Web 4]: /images/20221120/b81aa46aaead4c969786e46c6f50ddcc.png
[5_Web 5]: /images/20221120/39d36cd20cd14046b97c4b0a335d98c4.png
[5_Web 6]: /images/20221120/14dce89be3624ebfb79efc3f9ba1166a.png
[5_Web 7]: /images/20221120/3afee7cc31024a90b459f1523fa2944a.png
[5_Web 8]: /images/20221120/f707209bca454293b8461f32af1e3100.png
[5_Web 9]: /images/20221120/d566863f99ec46c9bf3949443a7129f5.png
[5_Web 10]: /images/20221120/8ca648a7415d4d7981cbfcfaeddfb0bd.png
[5_Web 11]: /images/20221120/063d7d8a340b487aa5b01e26f1e04d49.png
[5_Web 12]: /images/20221120/74327161077644b5aad4fb83e1bafdc5.png