用一篇超全面的文章，帮你掌握「表单设计」知识点

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

王M争：表单是产品设计中的重要组成部分，如果说弹框的主要作用是完成信息反馈，那么表单的主要作用就是完成信息录入。任何一个表单都可以被拆解成三个最基本要素：标签（标题）、输入框和按钮。

标签是用来告诉用户这个列表项是什么；输入框是供用户完成信息录入的；按钮是供用户完成信息录入后点击进入下一个流程的。

标签

根据标签所处的位置，可以将其分为左标签、顶部标签和行内标签。

1. 左标签

左标签在目前来说是最常见的一种标签样式，但是这并不意味着我们可以无所顾虑地使用它。以手机端为例，手机端的屏幕尺寸（宽度）有限，左标签会占据屏幕较大的空间，此时右边的输入框就可能无法展示完整的信息。

例如，如果用户输入的地址过长，就会造成信息的展示不完全，这对用户体验来说是致命的。因为用户在进行下一步操作之前都会对输入的内容进行审核确认，如果连完整的内容都无法获知或者获知的难度较大，则用户根本不会进行下一步操作，这就造成了操作流程的中断。所以，我们在使用左标签的时候，一定要考虑对多行文本的展示。

2. 顶部标签

顶部标签是指位于输入框上方的标签，这样输入框就可以独占整个页面，信息可以得到更完全的展示。

与左标签相比，顶部标签可以给输入框的内容腾出足够的空间。在界面设计中，更多的空间还意味着具有更高的信息层级。同一个表单中会有很多的输入项，有些输入项的优先级很高，我们可以考虑使用顶部标签的样式来进行凸显。

但是这种布局方式也有缺点：会占据更多的纵向空间，之前一屏就可以展示的内容，现在用户需要滑动页面才可以看完。

3. 行内标签

行内标签又可以被看成是输入提示，其样式看起来很适合手机端的表单设计，因为它可以极大地节省页面空间。但是一旦用户点击切换到输入状态以后，就看不到这些标签了。如果操作提示字数很多，例如密码规范，那么用户记忆会很吃力。我们可以在调起的键盘顶部加上提示，减少用户的记忆成本。

但是，如果表单项目过多，则用户在填写的时候很容易串行，可能会出现把家庭住址填到毕业院校一栏中的情况。更严重的是，用户因为无法看到标签，这类错误是无法被检查出来的。为了解决这个问题，我们可以在行内标签前加一个图标来标识这个列表项，图标所占据的空间不会太大，而且会提高页面的美观性。

当表单项目过多时，我们要对其进行整合分组来提升内容的可读性。如下图所示，这里将 15 个字段分成 3 组。同样的内容，但给用户的印象却大不相同。

输入框

输入框的作用是供用户完成信息录入，这里我们的设计思路是如何提升信息的录入效率。我见过很多设计师偷懒，把所有的输入框都做成文本框样式，用户必须调起键盘一个字一个字地输入，这种体验是非常不友好的。如果我们想让用户录入个人信息，其中的生日和城市就应该使用日期和城市组件，而不是让用户手动输入。

即使非要让用户手动输入，我们同样可以根据不同的场景给用户提供更友好的体验。如果要输入的是数字，那么应该给用户调起数字键盘；如果要输入文本，那么应该给用户调起全键盘，避免用户手动切换键盘。

即使用户输入符号，我们也要考虑如何减少用户的操作步骤。例如，我们发现当光标位于周星星三个字右边的时候，点击「“」键，会出现左右双引号；当光标位于周星星三个字中间的时候，点击「“」键，只会出现左双引号。这是因为光标在文本右边，用户只要输入「“」，那么就必然需要「”」来结尾，这里直接提供左右双引号更合适。如果光标是文本中间，无法确定「”」需要在哪里出现，所以只展示「“」。

容错性设计

在理想状态下，用户填写完表单信息，然后点击「提交」按钮，系统显示提交成功。但是，现实情况却是用户在填写过程中经常会发生错误，那么如何将容错性原则融入表单设计中呢？

首先我们需要给予用户足够的操作提示，日期录入就是最典型的例子。不同的地区对于日期录入的格式也不一样，「02/12/2019」到底是2019年2月12日还是2019年12月2日？如果我们不提示用户，用户就不知道应该怎么输入。

为了避免用户犯错和提升用户的信息录入效率，我们可以提供自动完成录入功能，当用户在文本框里输入时，系统可以猜测可能的答案，显示可选列表，避免了用户手动输入造成的错误。

如果你确定对用户足够了解，在用户进行信息录入时，可以提供合理的默认值。因为对用户来说，填写信息永远都不是一件有趣的事情，设置合理的默认值可以节省用户的操作时间。

能让系统完成的任务，就尽量不要让用户来操作。用户会犯错，而系统不会。表单容错性设计的另一个方向就是梳理表单中的鸡肋项目。

现在很多的购票类 APP 都提供送票上门的功能，这就需要用户填写收货地址。以交通出行类 APP 飞猪、途牛和去哪儿为例，其中，上图中左侧的两张图，飞猪和途牛都需要用户填写邮政编码，而在去哪儿中则是选填的。其实根据用户填写的地址，我们已经可以获取到邮政编码，邮政编码完全可以自动回显，不需要用户手动输入。

而在小米有品 APP 中就可以根据用户填写的地址回显邮政编码，这看起来很方便。这只是看起来很方便，我们可以继续思考一下：如果系统完全可以根据用户填写的地址获取到邮政编码，那么邮政编码这一项完全可以不在界面中露出。其实很多产品在用户填写收货地址的时候已经不需要用户填写邮政编码了。

对于容错性原则，我们还要考虑如何给用户展示合理的报错提示。目前来说，我们经常看到的一个报错提示样式是对话框。在我看来，对话框并不是一个好的选择。因为用户如果要进行修改，就必须要关闭对话框，那么用户就看不到错误信息了。如果错误原因和解决方案的字数较多，那么用户就需要花一定的时间记住这些信息，然后再来修改，这会增加用户的记忆负担。如何才能设计好表单的报错提示呢？表单中的报错提示可以分为两种：单行表单报错提示和多行表单报错提示。

单行表单中意味着在当前界面中表单只有一行输入框，其一般用于手机号、银行卡号、身份证号和金额的录入。对于此类场景，建议使用输入框底部的文字报错提示样式，并且要对录入的信息进行实时校验，不要等到用户进入下一个界面才告知用户在上一个界面中手机号输错了。

给多行表单进行报错提示时，除告知传统的错误原因和解决方案外，还应该告知用户错误的位置。因为在一个界面中，有很多的输入项，用户在短时间内无法把报错提示和错误项联系起来，因此，为了提升用户对于错误场景的感知效率，对错误项进行标记是非常有必要的。具体的实现方式有改变文字颜色、输入框背景色和设置提示文案抖动。

以上图为例，这里通过改变文字颜色或输入框背景色来标记错误位置，用 Toast 告知用户错误原因和解决方法。我们也可以不改变配色，让该输入框左右抖动也能起到快速标识的作用。

按钮

表单中的提交类按钮按照位置可以分为以下三种。

其中位置 A 是最常见的布局样式，这样的布局符合用户的视觉习惯和操作流程：用户由上而下完成表单信息的填写，最后点击「提交」按钮进入下一个页面。但是这种布局有一个问题：如果表单项目过多，则用户必须滑动页面才能完成提交操作。

位置 B 跟位置 A 很相似，唯一的区别在于位置 B 是固定在页面底部的。那么位置 B 跟位置 A 的适用场景有什么不同呢？位置 B 意味着用户在不用滑到页面底部的情况下就可以点击「提交」按钮，那么在什么样的场景下用户不用滑到页面底部就可以提交呢？

其实在很多表单中，不是所有的信息都需要用户手动录入的。以前面提到的邮政编码为例，只要用户输入了地址，系统就能获取邮政编码，相关信息是可以直接回显的，用户没有看到此类信息的必要性。所以，对于一些重要性不是很高、不强制用户看完的表单项目，很适合使用这类底部悬浮按钮。最常见的就是各种协议页。

位置 C 出现的原因在于，对于前两种方案，当调起键盘时就会遮住「提交」按钮，用户必须先关闭键盘才可以点击「提交」按钮，多了一步操作。而位置 C 可以完美解决键盘遮挡的问题，但是其不符合用户的视觉习惯和操作流程。而且手机大屏化是一个不可逆的趋势，用户在单手握持手机的情况下很难直接点击到界面右上角的「提交」按钮，增加了操作难度。

其实位置 C 完全可以被忽视，因为现在很多产品已经支持在调起键盘时滑动页面，所以位置 C 最大的优势已经不复存在。这里还介绍位置 C 的原因是希望读者知道交互规则是会随着技术的发展而不断改变的，可能在这本书里提到的一些技法过一段时间就会落伍了。要成为一名优秀的设计师，必须具备持续学习的能力。

本文节选自《争论点：用户体验设计师的交互指南》第五章第二节，有删改。

欢迎关注作者的微信公众号：「王M争」