B端交互模式干货集(2)——APP表单录入模式
在B端业务中，数据信息录入是很常见和重要的环节，是数据线上化管理的基础。在贝壳庞大的B端业务体系中，由于设计师和产品需求的不同，我们发现看似相同的表单录入设计却常有着“微妙”差异。这些小差异点积累起来造成了体验不一致，也降低了设计的复用性。
另一方面，由于房产行业B端用户特有的工作性质，使得在移动端实现复杂录入能力的诉求越来越强烈，现有的录入表单组件并不能很好地满足功能实现。因此，我们对贝壳B端业务中的APP录入表单进行梳理和重新设计，总结了三类常见表单录入模式。
什么是
表单录入模式
一直以来，设计师们致力让录入环节变得更易理解、更便于操作和更有动力完成，也沉淀了达成共识的设计方法，网上能看得到很多相关文章。但大多文章是从表单组成元素角度进行分析（比如表单布局、字段标签、操作反馈等），本文的切入点有所不同：针对不同使用场景定义整个表单的样式和交互逻辑，我们称之为表单录入模式。
1.表单布局
在表单录入模式中，我们将表单页分为内容区和操作区两部分。内容区由表单标题和若干个输入控件组成，输入控件指单选/多选控件、输入框等。操作区指对表单输入内容的操作，比如提交、保存等。使用场景决定了内容区和操作区的不同形式。
1.1 表单内容区
内容区是承载着表单最核心的内容，层级区分、合理排序将使得表单结构更清晰，也能够让用户对表单的感知更加清晰。建议内容呈现遵循以下原则：
1）必填项尽量集中放在前面，非必填项放在后面。若字段之间有逻辑依赖关系，则优先按照逻辑依赖关系排列，允许用户最小成本地完成表单。
2）将表单字段分组，关系紧密的字段放在一起，更方便定位。
3）突出标题内容，使用户视觉瞬间聚焦。
4）使用导航将长表单分成几个短表单，让用户提前有心理感知。
图1 表单内容区的3种形式
1.2 表单操作区
根据主操作的位置不同，有3种布局方式：主按钮跟随表单最下方、主按钮在标题栏、主按钮吸底。
前两者更适合表单内容较少的轻量式录入场景，信息集中在页面上方位置，视觉聚焦感较强。后者则表单内容较多的场景，当表单内容超过手机屏幕一屏时，用户需滑动查看更多填写内容，建议使用吸底按钮，在编辑表单场景下用户只需修改部分字段，更利于快速完成编辑。
图2 表单主操作区的3种位置
2.表单交互逻辑
表单交互逻辑指用户与产品之间信息交流的过程。用户输入信息后，产品将对填入的内容进行结果反馈，包括是否有错、有错如何修改、能否退出、能否提交、提交后后续可以做什么。APP表单录入模式对错误反馈、成功反馈、退出确认进行了归纳。
2.1 错误反馈
错误反馈分为录入中校验和录入后校验两种交互逻辑，录入中校验指完成某个字段填写后失焦即校验该字段，常用于校验数据为空、数据格式等基础错误，一般以标红形式呈现。
录入后校验指点击完成按钮后校验全部需校验的字段，反馈形式可以是标红形式、toast提示或者弹窗。可根据实际需求选择反馈形式：
1）错误可定位至字段时，采用标红形式。告知用户具体的不通过原因，并滚动至所有表单中首个出错字段。同时显示toast全局提示，告知用户信息有误。
2）错误无法定位时，采用toast提示。
3）错误反馈需要更多解释时，采用弹窗提示。
图3 表单的错误反馈形式
2.2 成功反馈
录入成功的反馈有不同程度的形式：
1）Toast：轻量反馈，只需告知用户成功，一般成功后会自动跳转至其他页面（列表页或详情页），方便用户继续录入或查看已提交的内容。
2）弹窗：中级反馈，需告知用户必要的说明信息，通常内容简短，或引导用户完成进一步操作（最多2个）。
3）结果页：强引导反馈，需告知用户必要的说明信息，通常内容较多，或引导用户完成进一步操作（3个及以上）
图4 表单的成功反馈形式
2.3 退出确认
用户点击返回按钮后需判断本次是否进行内容变更，若有变更进行二次确认，弹窗中点击“确定”后离开返回上一级页面，并清空此次编辑内容。若无变更则直接返回上一级页面。
图5 退出表单时二次确认
三种APP
表单录入模式
总体上，我们可以把APP录入表单分为简单表单和复杂表单。
简单的表单都是相似的，即内容较少（一般指不超过手机屏幕两屏）、操作简单，用户只要填完内容再提交即可完成录入，比如常见的登录表单。
复杂的表单则各有各的复杂，常见的情况是：内容较多、信息之间存在联动或嵌套关系、不同场景下的同一录入流程差异较大。再加上移动端屏幕空间的限制，使得表单的操作成本变得更高。
1.单步录入模式：适用于简单表单
单步录入表单一般指在一个页面即可完成的表单，有两种模式：常规形式和询问引导式。常规形式指内容区由常见的输入控件组成，询问引导式则改变了输入控件的展示形式，通过更加友好、易理解的对话方式，引导用户完成信息录入，常用于获取评价、反馈、用户偏好等需要用户贡献信息的场景。
图6 单步录入模式
2.分步录入模式：适用于复杂表单
一般建议在以下两种场景时选择分步录入：
1）表单内容过多（超过两屏）。
2）表单内容的录入方式存在较大差异，不适宜在同一表单中完成。
2.1 弱导航与强导航
我们将分步导航分为弱导航和强导航两种展示形式：
1）弱导航在操作按钮处展示了下一步内容标题，建议用于2步录入表单。
2）强导航在页面顶部使用步骤条显示了所有步骤内容标题，建议用于3-5步的录入表单。
图7 分步录入-强导航与弱导航
2.2 顺序录入与不定序录入
多数情况下，分步录入表单需按照步骤顺序依次完成录入，步骤之间存在明显的顺序关系，比如想要为用户填写买房需求，首先需要先录入客户基本信息，再录入对应客户的需求信息。
而在另一些使用场景，用户录入信息的顺序不是固定的，或者有些步骤是可以跳过的。比如在用户买新房的签约场景下，需要录认购、录草签、录网签、录成销等各步骤内容，但有些用户可不用草签，直接网签。
因此我们设计了顺序录入和不定序顺序录入两种模式。
在顺序录入模式中，用户只能按照设定好的顺序依次录入，如果想要修改则需要反向退回至对应步骤。
图8 分步录入-定序录入
在不定序录入模式中，用户依旧可以按照设定好的顺序依次录入，同时可以通过点击导航标签直接跳转至对应步骤。
图9 分步录入-不定序录入
3.循环录入：适用于简单和复杂表单
循环录入是指表单中可自定义添加录入字段，完成更多内容的填写。既适用于简单表单，也适用于复杂表单。添加单个字段一般应用于录入多个手机号等场景。
图10 循环录入-添加单个字段
当添加多个字段时，可将字段整合为一个子模块。每次添加即添加一个含有多个表单字段的子模块。当子模块中的表单较多时，可展开收起子模块内容，以保证用户每次填写时能够聚焦到一个子模块上。
图11 循环录入-添加多个字段
表单中也经常会出现非表单字段样式的内容形式，比如在经纪人向用户邀约看房的场景下，经纪人需要录入看房时间、看房地点和房源信息，其中房源信息是房源卡片样式。此时也可以通过子模块的形式承载内容。
图12 循环录入-非表单字段
结语
本文介绍了APP录入表单模式，从用户使用表单的角度阐释了模式定义，并列举了三种常见的录入模式类型，涵盖了大多数APP录入场景。表单录入模式提供的是一致的设计体验，本身也需要不断进行迭代、优化和拓展，以适应更多的应用场景。后续我们也将持续完善表单录入模式，希望本文的总结思路能给更多设计师启发。
参考文献：
1.app表单设计的最佳实战 （上）
2.APP里的分步导航设计
更多关于B端交互模式的设计方法持续更新中，不要错过精彩内容哦。
【往期B端交互模式文章】
- E N D -
负责新房B端产品，
读书不多的伪文青，自学键盘的钢琴爱好者。
希望成为理智有见解的人。
感觉好看就点个 在看 👇