移动端的长表单应该如何设计?

基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单。针对于移动端长表单,我们应该如何去正确的设计呢?

优点:流程分步操作,相对于方案1,简化任务,让用户感觉到自己在一点点往前进行中,减轻了用户操作和心理压力,并且不会漏掉重要内容,减少犯错几率,操作成功率大幅度提高。

2.主方案1的设计讨论

主方案1的设计优缺点

优点:一个界面将所有表单信息展示出来,如果想查找某些填写的信息也变得更容易,相对于主方案二和三,减少了页面跳转操作和查看。

缺点:基于移动端界面承载能力较弱,一个界面将表单所有展示出来,用户一次性浏览和操作起来压力较大,容易使操作流程失败,导致成功率大大降低。

针对于主方案一,用户完成表单完成后,提交按钮有三种主要的设计方法,一种是提交按钮放在表单最后,一种是提交按钮放在导航栏上。另一种是,提交按钮底部悬浮。如下图所示:

主方案一

方案1.0,如果提交按钮放在表单之后,那么用户的视觉流和操作感觉是一致的,流畅而自然。但是会出现一个问题,用户在输入信息时,键盘调用会遮挡到提交按钮。Android手机上的输入法都可以点击输入法上的按钮将键盘推下去。而iOS 原生输入法没办法推下去,只能点击其他非编辑区域才能推下键盘。这样就显得很麻烦,用户可能会忽略掉提交按钮。

方案1.1解决了提交按钮会被键盘挡住的缺陷,但是视觉流和操作行为错乱,用户在屏幕底部输入完成之后,视觉和手指要返回到底部操作操作。

方案1.2提交按钮底部悬浮,解决了方案1.1的视觉流和操作紊乱的问题,解决了方案1.0提交按钮被隐藏的问题,但是当输入文本,调出键盘时,依旧会被挡住。

底部悬浮按钮

使用底部悬浮按钮的场景是操作按钮非常重要,例如手机淘宝的立即购买和加入购物车。

同时底部悬浮按钮不适用于文本操作类。例如文章说的长表单文本输入。当输入文本,调出键盘时,依旧会被挡住。

底部悬浮按钮适用于非文本输入的使用场景。从手机淘宝、新浪微博可以看出,适用于在界面中非文本输入、提供一个功能入口或者是界面非文本输入的选择信息的确认。

① 分步数量以及分步逻辑要合理。尽量让分步数量较少,一般3-5步比较合适。

1.三种主方案

针对长表单的设计,按照设计思路的不同,可以分为三种主方案,如下所示:

PS:图中的举例的关键字段仅仅为举例需要。

主方案1:我们常见的设计形式,一个界面将所有表单信息展示出来。

主方案2:将不同的分组表单放在不同的下一级界面,用户填写之后返回。

主方案3:分步操作,一个界面完成一组表单内容,点击下一步进入下一组表单。

图片 1

移动端长表单设计总结

主方案1、2和3,都有各自不同的优缺点。

一个交互流程的好坏,一个最重要的标准之一是让用户顺利完成操作流程,保证操作流程的成功率,才能完成用户的目标。以此标准来看,主方案3是最好的。

接下来探讨一个细节问题,就是提交按钮是放在顶部导航栏、信息内容区内还是底部悬浮?

这里分为4种情况:

1.内容区加上操作按钮不被键盘覆盖。建议按钮放在内容区内

1

2.必填的内容未被键盘覆盖,非必填被覆盖,建议操作按钮放在导航栏上,例如朋友圈、QQ空间和新浪微博。

2

3.必填的表单超过一屏,建议按钮放在内容区。

放在导航栏上不行的原因有两个:

a.视觉流错误,从上往下,信息量很大,用户滑动浏览时,会忽略且很难联想点击右上角下一步,行业常见放在导航栏上是因为必填的不超过一屏  ;

b.当必填项过多时,要滑动屏幕才能填完。 把按钮放在右上角的导航栏,当用户还没填写完成,那么在按钮放在导航栏上很容易去点击,这是引导用户犯错。

4.必填超过一屏,且无非文本输入,建议适用底部悬浮。

图片 2

本文大纲:

1.三种主方案

2.主方案1的设计讨论

3.主方案2的设计讨论

4.主方案3的设计讨论

5.总结

所以,必填表单和按钮不被键盘覆盖时或者必填表单超过一屏时,适用此方案。

3.主方案2的设计讨论

主方案2的设计优缺点

优点:与方案三相比不同分组表单之前切换查看信息方便快捷。申请流程的首页简洁,填写信息全部隐藏到下一级界面。

缺点:来回跳转,操作负荷较大,会把用户绕晕。

主方案二

在方案2.0中用户填写完成的分组和未分组填写分组区分不开,将方案2.0进行优化,例如填写完成后,会出现已完成的标签,提示用户已完成和未完成不同的状态(如方案2.1)

③ 每一步的目的要明确。3步以上建议采用下图方案3.0的方案,导航栏上显示此分步操作目的的简短说明,每一步都有清楚准确的分步标题。

4.主方案3的设计讨论

Facebook曾针对分步注册与非分步注册做过A/B Test,其结论指出分步注册的转化率远高于非分步注册。由此可见,非分步注册强行减少注册页面,不如适当拉长战线,给用户轻负荷的操作,让用户在不知不觉中完成注册流程。

主方案3的设计优缺点

优点:流程分步操作,相对于方案1,用户操作成功率大幅度提高。

缺点:如果用户操作到了第三步,需要返回第一步确认填写信息的准确性,那么用户需要两次返回。

方案三

用户填写的信息做保存(缓存),用户返回上一步,填写的数据做保留。H5依旧适用,用户填写的数据保存在数据库,用户返回上一步时,同时刷新载入数据库记录的数据。

对于方案3.0和3.1 。下一步按钮不同。究竟采取哪种?方案3.0视觉流和操作流是正常情况,且不存在按钮被键盘挡住,所以方案3.0最佳。

3.方案2的设计讨论

优点:用户的视觉流和操作行为是一致的,顺畅自然的。

移动长表单的三种设计方案

本文是我在学习了《案例讲解 | 移动端的长表单应该如何设计?》后,结合日常工作经验后的习作。新手上路,总结学习居多。再次感谢Echo君的原作。

表单里的按钮有三种摆放位置,分别是内容区、顶部导航栏和底部悬浮。如下图:

图片 3

所以,底部悬浮按钮适用于非文本输入的界面,或者给一个界面提供一个功能入口。适用于在界面中非文本输入、提供一个功能入口或者是界面非文本输入的选择信息的确认。

③ 表单加上操作按钮不被键盘覆盖,建议采用按钮放在内容区的方案;

基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单。针对于移动端长表单,我们应该如何去正确的设计呢?

规则是死板的,产品经理或者设计师应具体情况具体分析,避免被规则框住。

⑨ 可以在操作完成之前,提供所有信息的整体汇总预览,让用户在最后点击“提交”之前,重新检查一遍自己所输入的内容。此条应按照具体需求决定是否加入此功能。

③ 表单加上操作按钮不被键盘覆盖,建议采用按钮放在内容区的方案;


综上所述

针对长表单的设计,按照设计思路不同,可以分为三种方案,如下所示:

缺点:由于移动端界面承载能力较弱,所有的表单内容在一个界面展示出来,用户一次性浏览和操作起来的压力较大,容易使操作流程失败,导致成功率大大降低。

6.总结

② 必填表单表单超过一屏,且无文本输入时,建议采用按钮底部悬浮的方案;

方案2的注意点

文本大纲:

缺点:用户操作到了第三步的时候,如果需要返回第一步确认填写信息的准确性,那么用户需要两次返回操作。分步太多,容易引起用户的心理抵触情绪。一般3-5步比较合适。

优点:提交按钮比较明显,不会被忽略。

缺点:用户输入信息时,调用的键盘会遮挡到提交按钮。Android系统的键盘可以点击键盘上的隐藏按钮将键盘推下去;iOS系统原生键盘没有隐藏按钮,只能通过点击其他非编辑区域才能将键盘推下去。当表单下面是非必填选项的时候,用户需要滑动到底部才能看到提交按钮,操作过于繁重,用户可能会忽略掉提交按钮。

② 表明步骤的进行方向(从左到右还是从上到下)。



4.方案3的设计讨论

图片 4

方案3的设计优缺点及注意点

Facebook曾针对分步注册与非分步注册做过A/B Test,其结论指出分步注册的转化率远高于非分步注册。由此可见,非分步注册强行减少注册页面,不如适当拉长战线,给用户轻负荷操作,让用户在不知不觉中完成注册流程。

2.方案1的设计讨论

注意点:要将用户填写完成的分组和未填写完成的分组区分开来。可以加上已经完成的标签或符号来进行区分。如下图:

① 必填表单超过一屏时,建议采用按钮放在内容区的方案;

3.方案2的设计讨论

缺点:来回跳转,操作负荷较大,加大用户的用脑力度。

④ 要清楚地标识出当前的步数和总步数,让已完成步骤和其他步骤有所区别,标明接下来还剩几步,让用户清楚自己处于过程中的哪一步,最后一步完成时,给一个鼓励性的提示。

图片 5

⑦ 用户返回前面的步骤时,同时刷新加载入数据库记录的数据。

缺点:当输入文本,调出键盘时,iOS系统上的底部悬浮按钮依旧会被挡住,需要来回调用推下键盘才可以看到提交按钮,操作繁重;Android系统的按钮会被钉在键盘上,但是减少了用户可视区域的面积。

④ 必填表单未被键盘覆盖,建议采用按钮放在导航栏上的方案。

图片 6

表单里按钮的三种摆放位置

⑧ 去掉界面上不必要的元素。让用户专注于任务。

1.三种方案

方案2:将表单分组,在界面上展示分好的组。将组里的表单内容放到下一级页面,用户在下一级页面填写完成后,返回上一页进行下一步操作。

② 必填表单表单超过一屏,且无文本输入时,建议采用按钮底部悬浮的方案;

方案3的两种展现形式

5.表单内按钮摆放位置的设计讨论

所以,必填表单未被键盘覆盖,非必填被覆盖时,适用此方案。必填表单超过一屏的时候,不适用把按钮放在顶部导航栏的方案。


注意点:


方案3:分步骤操作,一个界面完成一个组的表单内容,点击下一步进入下一组表单界面。

方案2的设计优缺点及注意点

缺点:视觉流和操作行为不一致,视觉流从上往下。当必填表单超过一屏时,信息量很大,用户集中注意力滑动屏幕完成填写后,视觉流被打断,很容易忽略导航栏上的按钮,而且用户需要移动手指到屏幕顶部才能进行操作,降低提交的成功率。并且,在上述情况下,用户还没有填写完成时,很容易引导看到提交按钮的用户去点击提交按钮,导致用户犯错,容易使用户产生烦躁心理,降低提交的成功率。

6.总结

按钮放在顶部导航栏的优缺点

按钮摆放在内容区的案例


图片 7

④ 必填表单未被键盘覆盖,建议采用按钮放在导航栏上的方案。

方案1的设计优缺点

方案1:在一个界面上展示所有的表单内容。

方案1、方案2和方案3各有自己的优缺点,一般情况下,方案3好一些。

1.三种方案

按钮悬浮在底部的案例

优点:所有表单内容在一个界面展示出来,与方案2、方案3相比,减少了页面的跳转,可以很方便地查看表单里面的内容。

⑥ 用户填写的内容做实时保存(H5依旧适用),记录在数据库。

表单内按钮的摆放位置基本规则如下:

优点:填写信息的首页简洁,填写信息全部隐藏到下一级界面。与方案3相比不同的分组之间切换查看表单内容更为方便。

2.方案1的设计讨论

5.表单内按钮摆放位置的设计讨论

4.方案3的设计讨论

⑤ 允许重做每一步。让用户可以修改前几步的内容,后者检查一下。除当前步骤外所有已填写的步骤上加上跳转链接(点击跳转到对应的步骤)。

按钮在底部悬浮的优缺点


优点:按钮的位置一直在视野内,不会被键盘挡住。

① 必填表单超过一屏时,建议采用按钮放在内容区的方案;

按钮摆放在顶部导航栏的案例

影响按钮摆放位置的还有其他因素,比如还有其他按钮等等,不是绝对的,要具体情况具体分析。

按钮放在内容区的优缺点

本文由开元棋牌发布于数据库,转载请注明出处:移动端的长表单应该如何设计?

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。