B端交互模式(二):APP表单录入模式

释放双眼,带上耳机,听听看~!

在B端业务中,数据信息录入是很常见和重要的环节,是数据线上化管理的基础。在贝壳庞大的B端业务体系中,由于设计师和产品需求的不同,我们发现看似相同的表单录入设计却常有着“微妙”差异。这些小差异点积累起来造成了体验不一致,也降低了设计的复用性。

B端交互模式(二):APP表单录入模式

另一方面,由于房产行业B端用户特有的工作性质,使得在移动端实现复杂录入能力的诉求越来越强烈,现有的录入表单组件并不能很好地满足功能实现。因此,我们对贝壳B端业务中的APP录入表单进行梳理和重新设计,总结了三类常见表单录入模式。

什么是表单录入模式

一直以来,设计师们致力让录入环节变得更易理解、更便于操作和更有动力完成,也沉淀了达成共识的设计方法,网上能看得到很多相关文章。但大多文章是从表单组成元素角度进行分析(比如表单布局、字段标签、操作反馈等),本文的切入点有所不同:针对不同使用场景定义整个表单的样式和交互逻辑,我们称之为表单录入模式。

1.表单布局

在表单录入模式中,我们将表单页分为内容区和操作区两部分。内容区由表单标题和若干个输入控件组成,输入控件指单选/多选控件、输入框等。操作区指对表单输入内容的操作,比如提交、保存等。使用场景决定了内容区和操作区的不同形式。

1.1 表单内容区

内容区是承载着表单最核心的内容,层级区分、合理排序将使得表单结构更清晰,也能够让用户对表单的感知更加清晰。建议内容呈现遵循以下原则:

1)必填项尽量集中放在前面,非必填项放在后面。若字段之间有逻辑依赖关系,则优先按照逻辑依赖关系排列,允许用户最小成本地完成表单。

2)将表单字段分组,关系紧密的字段放在一起,更方便定位。

3)突出标题内容,使用户视觉瞬间聚焦。

4)使用导航将长表单分成几个短表单,让用户提前有心理感知。

B端交互模式(二):APP表单录入模式

图1 表单内容区的3种形式

1.2 表单操作区

根据主操作的位置不同,有3种布局方式:主按钮跟随表单最下方、主按钮在标题栏、主按钮吸底。

前两者更适合表单内容较少的轻量式录入场景,信息集中在页面上方位置,视觉聚焦感较强。后者则表单内容较多的场景,当表单内容超过手机屏幕一屏时,用户需滑动查看更多填写内容,建议使用吸底按钮,在编辑表单场景下用户只需修改部分字段,更利于快速完成编辑。

B端交互模式(二):APP表单录入模式

图2 表单主操作区的3种位置

2.表单交互逻辑

表单交互逻辑指用户与产品之间信息交流的过程。用户输入信息后,产品将对填入的内容进行结果反馈,包括是否有错、有错如何修改、能否退出、能否提交、提交后后续可以做什么。APP表单录入模式对错误反馈、成功反馈、退出确认进行了归纳。

2.1 错误反馈

错误反馈分为录入中校验和录入后校验两种交互逻辑,录入中校验指完成某个字段填写后失焦即校验该字段,常用于校验数据为空、数据格式等基础错误,一般以标红形式呈现。

录入后校验指点击完成按钮后校验全部需校验的字段,反馈形式可以是标红形式、toast提示或者弹窗。可根据实际需求选择反馈形式:

1)错误可定位至字段时,采用标红形式。告知用户具体的不通过原因,并滚动至所有表单中首个出错字段。同时显示toast全局提示,告知用户信息有误。

2)错误无法定位时,采用toast提示。

3)错误反馈需要更多解释时,采用弹窗提示。

B端交互模式(二):APP表单录入模式

图3 表单的错误反馈形式

2.2 成功反馈

录入成功的反馈有不同程度的形式:

1)Toast:轻量反馈,只需告知用户成功,一般成功后会自动跳转至其他页面(列表页或详情页),方便用户继续录入或查看已提交的内容。

2)弹窗:中级反馈,需告知用户必要的说明信息,通常内容简短,或引导用户完成进一步操作(最多2个)。

3)结果页:强引导反馈,需告知用户必要的说明信息,通常内容较多,或引导用户完成进一步操作(3个及以上)

B端交互模式(二):APP表单录入模式

图4 表单的成功反馈形式

2.3 退出确认

用户点击返回按钮后需判断本次是否进行内容变更,若有变更进行二次确认,弹窗中点击“确定”后离开返回上一级页面,并清空此次编辑内容。若无变更则直接返回上一级页面。

B端交互模式(二):APP表单录入模式

图5 退出表单时二次确认

三种APP表单录入模式

总体上,我们可以把APP录入表单分为简单表单和复杂表单。

简单的表单都是相似的,即内容较少(一般指不超过手机屏幕两屏)、操作简单,用户只要填完内容再提交即可完成录入,比如常见的登录表单。

复杂的表单则各有各的复杂,常见的情况是:内容较多、信息之间存在联动或嵌套关系、不同场景下的同一录入流程差异较大。再加上移动端屏幕空间的限制,使得表单的操作成本变得更高。

1.单步录入模式:适用于简单表单

单步录入表单一般指在一个页面即可完成的表单,有两种模式:常规形式和询问引导式。常规形式指内容区由常见的输入控件组成,询问引导式则改变了输入控件的展示形式,通过更加友好、易理解的对话方式,引导用户完成信息录入,常用于获取评价、反馈、用户偏好等需要用户贡献信息的场景。

B端交互模式(二):APP表单录入模式

图6 单步录入模式

2.分步录入模式:适用于复杂表单

一般建议在以下两种场景时选择分步录入:

1)表单内容过多(超过两屏)。

2)表单内容的录入方式存在较大差异,不适宜在同一表单中完成。

2.1 弱导航与强导航

我们将分步导航分为弱导航和强导航两种展示形式:

1)弱导航在操作按钮处展示了下一步内容标题,建议用于2步录入表单。

2)强导航在页面顶部使用步骤条显示了所有步骤内容标题,建议用于3-5步的录入表单。

B端交互模式(二):APP表单录入模式

图7 分步录入-强导航与弱导航

2.2 顺序录入与不定序录入

多数情况下,分步录入表单需按照步骤顺序依次完成录入,步骤之间存在明显的顺序关系,比如想要为用户填写买房需求,首先需要先录入客户基本信息,再录入对应客户的需求信息。

而在另一些使用场景,用户录入信息的顺序不是固定的,或者有些步骤是可以跳过的。比如在用户买新房的签约场景下,需要录认购、录草签、录网签、录成销等各步骤内容,但有些用户可不用草签,直接网签。

因此我们设计了顺序录入和不定序顺序录入两种模式。

在顺序录入模式中,用户只能按照设定好的顺序依次录入,如果想要修改则需要反向退回至对应步骤。

B端交互模式(二):APP表单录入模式

图8 分步录入-定序录入

在不定序录入模式中,用户依旧可以按照设定好的顺序依次录入,同时可以通过点击导航标签直接跳转至对应步骤。

B端交互模式(二):APP表单录入模式

图9 分步录入-不定序录入

3.循环录入:适用于简单和复杂表单

循环录入是指表单中可自定义添加录入字段,完成更多内容的填写。既适用于简单表单,也适用于复杂表单。添加单个字段一般应用于录入多个手机号等场景。

B端交互模式(二):APP表单录入模式

图10 循环录入-添加单个字段

当添加多个字段时,可将字段整合为一个子模块。每次添加即添加一个含有多个表单字段的子模块。当子模块中的表单较多时,可展开收起子模块内容,以保证用户每次填写时能够聚焦到一个子模块上。

B端交互模式(二):APP表单录入模式

图11 循环录入-添加多个字段

表单中也经常会出现非表单字段样式的内容形式,比如在经纪人向用户邀约看房的场景下,经纪人需要录入看房时间、看房地点和房源信息,其中房源信息是房源卡片样式。此时也可以通过子模块的形式承载内容。

B端交互模式(二):APP表单录入模式

图12 循环录入-非表单字段

结语

本文介绍了APP录入表单模式,从用户使用表单的角度阐释了模式定义,并列举了三种常见的录入模式类型,涵盖了大多数APP录入场景。表单录入模式提供的是一致的设计体验,本身也需要不断进行迭代、优化和拓展,以适应更多的应用场景。后续我们也将持续完善表单录入模式,希望本文的总结思路能给更多设计师启发。

参考文献:

1.app表单设计的最佳实战 (上)

2.APP里的分步导航设计

给TA买糖
共{{data.count}}人
人已赞赏
产品设计

当产品目标不明确,那就试试用 OKR 的方式思考

2020-9-3 8:43:33

产品设计

产品体验设计——产品认知篇

2020-9-3 9:02:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索