编辑导语：用户要完成表单总要采取输入、选择、提交等等动作，这就涉及到了用户与表单的交互。这篇文章从用户填写表单的几个主要场景出发对表单交互设计进行了分析，总结了每个场景下有效的交互设计经验。

一、单表单输入

单表单输入是指只考虑某一个表单的输入情况，此种情况主要是指的单个文本框的输入。

1. 输入前：给出建议

有些情况下用户并不知道自己应该怎么决定答案，这个时候我们可以提前给出一些建议来帮助用户做出决定。

看一下这个例子：用户需要给自己的账户设置一个昵称，但是想不到合适的内容，这个时候我们可以自动给出一个昵称，用户如果不喜欢可以点击切换，或者在给出的昵称基础上进行编辑。

通过给出建议，大大减轻了用户思考的负担，帮助用户快速做出决定，既贴心又增加了表单的完成效率。

2. 输入时：及时验证

文本框由于本身不限制输入的数据类型，当业务上要求输入特定格式的数据时，就会出现用户输入的数据格式不符合要求的情况。

针对这种情况，首先我们应该在提交时做数据验证，如果输入的数据格式不符合要求就不允许提交。

但是这样的方式会导致用户只有在提交的时候才能发现自己的错误，效率比较低。

我们可以在用户输入时就进行验证，比如：

注册时用户需要输入一个用户名，但是不能使用已被他人使用的用户名。

这个场景下用户是不知道哪些用户名已经被他人使用的，只能一次次的试探才能最终确定用户名，所以我们可以在用户输入完用户名的当时就对用户名称是否可用进行校验并提示，而不是在用户提交表单时进行提示；这样用户就可以及时发现错误及时修改，极大的提升了输入效率。

注：实时验证一般只在用户输入完成后自动触发验证，不在输入过程中进行验证，一是避免带给用户困惑，同时也能降低服务器压力。

但是有一种情况可以在输入时即进行验证：对用户的输入内容给出的意见参考而不是对错的提示。

常见的例子有用户设置密码时，会自动显示当前输入密码的密码强度。

3. 输入后：自动纠错

文本框支持输入的数据格式是多种多样的，有时候同一个内容有多种表达形式，当用户输入的表达形式不符合业务的要求时，比及时提示用户正确的格式要求然后让用户去修改更好的做法是：自动将用户的输入内容转换为符合要求的格式。

用户要输入一个英语单词，业务上要求首字母必须大写，当用户习惯性的用小写输入完成时我们可以自动将单词的首字母转换为大写后重新显示给用户。

用户在输入一个日期，业务上要求的格式是XXXX/XX/XX，但是用户输入的格式是XXXX-XX-XX，在用户输入完成后我们可以自动将日期格式转换为XXXX/XX/XX。

注：转换需要在用户输入完成后转换，不可在用户输入过程中转换以免打断用户的输入。

二、关联输入

关联输入是指多个表单之间存在联动关系的输入，比如选了A之后就不用再填写B。

1. 数据关联：做到数据联动

当两个表单之间的数据有关联关系时，需要隐藏联动条件下不允许选择的数据而不是用户选择后进行提示所选的数据不符合要求。

比如有年龄和书单两个表单，当填写的年龄小于18周岁时就不可再选择某些类型的书单；用户选择书单时即应该即时校验用户输入的年龄，若小于18周岁则不对用户展示禁用书单。

2. 表单关联

表单关联是指多个表单是否需要填写相互之间有制约关系，最常见的是调查问卷的场景，某个题目选择了A答案会跳到第X题，选择了B答案则会跳到Y题目。

此时涉及到的情况会比较复杂，我们可以试着用多个方式逐一对比，并根据具体情况选择合适的处理方式。

1）分页处理

分页处理适用于关联关系存在于多组表单之间而不是多个表单之间，此时可以将多组表单分别放在不同的页面，采用分步填写的方式逐页完成表单。

优点：

• 流程清晰，用户对表单的完成路径理解成本低。
• 能保证每一步表单填写时都是已满足上一步条件（否则不会进行到下一步），不易出错。

缺点：仅适用于流程类表单无法处理平行表单，对于三个表单任选一个的情况无法处理。

2）分组处理

分组处理即将所有有关联关系的表单进行分组，比如选择A之后只能选择123，选择B之后只能选择456，选择C之后只能选择789；同时ABC之间为互斥关系，选择某一个之后即不能选择另外两个；此时我们可以将A+123、B+456、C+789在页面上分为三组，选择一组之后禁用其他两组。

优点：掌控全局，用户对所有内容一目了然，能根据需要迅速做出选择。

缺点：视觉干扰过于严重，特别是分组较多时大量堆积的内容会给用户带来压力。

3）选项卡

选项卡也是一种分组处理，不同的是选项卡将不同组的内容分别隐藏在了不同的选项卡内，每次只展示当前选择的选项卡的内容。

优点：分类明确，遇到分组较多时，仍能在不对用户产生严重视觉干扰的情况下让用户对所有内容一目了然。

缺点：不利于表达表单的完成路径，即：用户无法清晰的理解多个选项卡是需要全部填写完才能提交表单，还是只填写其中一个才能提交表单；也无法理解多个选项卡分别填写后是需要分别提交还是一起提交。

三、增加输入

增加输入是当前的表单数量不是固定的，需要用户根据需要自由增加。

比如要求用户填写家庭成员时我们没有办法预测用户有多少家庭成员，常见的做法时初始提供两个成员的录入表单，用户可根据需要点击“添加成员”向页面添加更多的成员录入表单。

此种情况有两种常用的方式：弹窗添加和显示隐藏。

弹窗添加即用户点击添加时出现一个弹窗，在弹窗中输入相关内容，确认添加后在页面上显示添加内容；此种方式适用于需要添加的表单内容过多时，比如对播放器的复杂设置，在弹窗中展示完整的设置项，设置完成后在页面上只显示设置的结果。

显示隐藏即点击添加时在页面上即时增加显示更多的表单，这种方式优点不打断用户的输入，操作比较流畅，但是表单数量较多时会导致页面比较混乱。

四、提交表单

提交表单是完成表单的最后一步，此处最需要关注的是基于各种验证的提示，这些可以在上一篇文章中详细了解。

这次主要说明一个常见的操作处理：很多情况下我们都会要求用户提交表单时勾选一些必须同意的服务条款，否则就不允许提交。

比较常见的做法有：

• 在提交时检测是否已经勾选，未勾选时进行提示，这种是体验最差的做法，因为这种做法只有在用户提交时才会告诉用户必须勾选服务条款。
• 在未勾选服务条款时将提交按钮灰色显示，这种是标准的做法，能通过灰色显示提交按钮给用户一定的预期，也达到了要求用户必须勾选服务条款的目的。
• 还有一种操作效率更好但是不太普遍适用的办法：将同意服务条款与提交按钮合并处理。这种做法将前两种做法中勾选服务条款、点击提交两步操作合并成了一步，提高了输入效率；但是此种做法容易导致用户忽视阅读条款内容，对于服务条款比较重要，希望用户必须阅读的场景不建议使用此种做法。

五、其他技巧

在前两篇文章中我们说过表单设计的一个重要原则就是提高用户操作效率，填写表单不是用户的需求，用户在填写表单时是痛苦的，我们必须想办法让用户尽快完成表单结束这种痛苦。

所以万变不离其宗，只要是有助于实现这一目标的策略都是可取的，除了上边以及前两篇文章讲到的内容，还有很多可以参考借鉴的小技巧。

1. 预测输入

预测输入即根据用户已经输入的内容做推测，自动给出当前输入的可能答案，最常见的就是根据当前的热门电影自动给出建议搜索内容；比如当前爆火的电影《八佰》，当用户输入“八”或者“8”时都会以下列列表的形式给出预测电影名“八佰”。

2. 自动对焦

自动对焦是自动帮用户激活下一个输入表单，经常使用于初始打开表单填写页面时，或者隐藏搜索框的搜索功能；当用户点击搜索图标时会显示搜索框，此时可以自动将光标定位在搜索框中而不需要用户再点一次文本框来激活文本框。

3. 个性化定制

大数据技术的发展让计算机了解每个人的习惯成为可能，那么我们就可以根据每个人不同的操作习惯给出不同的表单交互形式；比如：有些人习惯发表电影评论时长篇大论，我们就可以对这个人显示一个较大的文本框；有些人只喜欢只言片语，我们就可以显示一个较小的文本框，将多余的位置展示更多的常用词组。

4. 引入新技术

随着科技的发展，人机交互的方式不再局限于用双手操作键盘，语音转文本的技术已经十分成熟；图像识别技术让人们可以利用手机的摄像机扫描图片或者卡片直接获取信息；也可以借助外部硬件来辅助输入；比如使用身份证读卡器直接读取证件信息来代替手工录入、使用指纹识别来代替密码认证。

科技发展日新月异，在提高效率方面机器总是不会让我们失望；因此我们也需要多多关注科技在表单输入方面带给我们的各种便利，及时引进成熟的技术方案提升表单输入体验！

六、结语

《360°全方位表单设计指南》系列最后一篇到此就结束了，三篇文章分别从表单的选取与组织、表单的元素设计、如何与表单交互三个方面完整讲述了如何设计一个优秀的表单体系。

本系列文章覆盖了表单从“出生”到“死亡”的全过程，希望对大家有所帮助！

360°全方位表单设计指南（一）

360°全方位表单设计指南（二）

作者：时光时光慢些吧，公众号：pmreport

本文由 @时光时光慢些吧 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议