此网站为Newar技术博客模板演示网站,此处文字请后台 系统基本参数-站点设置 修改!
当前位置:主页 > HTML技巧 > 正文

案例讲解:移动端的长表单应该如何设计?

02-27 HTML技巧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  app的反馈页面大多都属于情况2,必填的内容未被键盘覆盖,却为何提交按钮都是放在内容区而不是导航栏?

  如果分类很多呢,做过OA类的移动端,动辄就四五个信息分类,二三十条字段填写,这个时候用哪种方案更合适呢?

  提交按钮是放在顶部导航栏、信息内容区内还是底部悬浮?这个问题你的第三个情况也是极其容易遮盖到手机键盘的。当一个问题发生矛盾的时候还是得看一下是选择牺牲部分用户体验来提高流程的连贯性,还是相反为之。

  情况5:必填的表单未超过一屏,已被键盘覆盖必填表单,请问采取哪种方式比较好?

  主方案一非要选一个那么1.0会好点,当然也看情况,总结里面我放了四种情况,但是主方案一并不好。其次B端常喜欢使用的卡片之间使用展开收起, 我也没说,因为我不喜欢展开收起方案

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

版权保护: 本文由 主页 原创,转载请保留链接: http://www.csv8.com/html/429.html