当前位置: 首页 > 科技观察

移动端长表单设计有哪些注意事项?这都总结出来了!

时间:2023-03-18 20:41:47 科技观察

随着移动互联网行业的快速发展,过去人们在PC端填写的长表格在移动端逐渐变得越来越普遍。本文将基于驴妈妈移动供应商加盟项目,从PC端和移动端的差异入手,探讨在移动端设计长表单的注意事项。与PC端相比,移动端需要减少人工输入。PC端和移动端手动输入的便利性是不一样的。PC端输入更方便(键盘、鼠标、触摸板,效率更高);移动端输入不太方便(手指与屏幕的接触面积更大,效率和准确度远不及PC端键盘鼠标)。因此,为了营造便捷优雅的操作体验,移动表单需要尽量减少用户的手动输入。有一些方法可以减少手动输入。方法一:当前场景常用选项提供当前场景常用选项,最基本的思路是用选择代替输入。值得注意的是,如果常用选项无法涵盖用户可能填写的所有内容,那么也应该向用户提供手动输入自定义选项的功能。方法2:使用可从移动设备获取的信息。移动端虽然在输入上不是那么方便,但是在获取信息的种类和准确性方面具有一定的优势。例如,移动终端设备可以更准确地获取用户当前的地理位置,这为一些需要填写位置的表格(如收货地址、联系地址等)提供了便利。再比如,调用通讯录的功能经常出现在各种需要填写手机号码的表格中。方式三:提供用户历史输入项当一个表单中出现多个相同类型的项目时,可以提供用户历史输入项供选择。另外,很多填表页面会自动保存用户输入的信息为共同收货人等,也是采用这种方式。方法四:使用照片识别功能。由于OCR技术(OpticalCharacterRecognition,光学字符识别)的发展,通过拍照识别文字的速度和准确率有了很大的提高。最常见的一种是在主要的金融服务应用程序中拍照。识别银行卡号的功能。如下图,三合一营业执照有一个由阿拉伯数字和英文字母组成的18位统一社会信用代码。如果采用人工输入,不仅效率低下,而且容易出现输入错误。这里应用OCR技术,降低投入成本,提升用户体验。与PC端相比,移动端需要考虑调用键盘的类型和方法。与PC端的物理键盘相比,移动端的虚拟键盘受限于屏幕尺寸,切换各类键盘的成本相对较高,而且在数字和各种中英文的输入效率方面标点符号少。因此,在移动端的长表单设计中,需要更多考虑:默认调出哪种类型的键盘是当前场景下效率最高的选择。另外,当多个连续表单项的输入法不同时,可以考虑使用联动键盘。如下例所示:不难发现,该例中三个连续的表单项对应的输入法分别是:时间选择器、数字小键盘、选项选择器。如果采用传统的方式依次填写,不仅需要依次点击这3个表单项,对应的选择器和键盘也需要弹出收起一次(共3*2=6弹出和折叠的时间)。操作比较复杂。改用联动键盘后,可在同一底部弹出层流畅填写3个表单项,打造更便捷、更高效的填写体验。PC端可以在一个页面中承载一个长表单,而移动端则需要分页展示。与PC端相比,移动端的屏幕尺寸要小很多。一个完整的表单在PC端可以显示1-2屏,但在移动端可能需要7-8屏才能完整查看。如果在移动端使用页面承载需要7-8屏才能阅读的长表单,可能会导致跳出率高,完成率低。表单设计领域的专家AdamSilver通过实际项目发现,将一个长表单拆解成几个部分并在多个页面上展示可以提高用户满意度和支付转化率。此外,亚当还总结了这种设计理念的16个优点。我认为主要有以下三个优势:降低认知负荷,让用户更专注地完成任务;可以减少,从而减少错误给用户带来的挫败感和跳出率;有了进度指示器,它可以给用户一种积极的进步感。那么,一页一页的展示就够了吗?不必要。根据具体情况,有时需要将一个页面的内容分成不同的模块。具体做法是:将相关的表单项进行分类组合,通过卡片、分割线或间距将其划分为不同的语义组,并添加相应的模块标题,以突出页面的节奏感,方便用户浏览和填写更多内容有效地形成。移动端长表单填写完成后,可以考虑提供预览功能。为什么要考虑预览功能?对于分页填写的表格,如果需要查看之前填写的内容,必须逐步返回到上一页查看,非常不方便。因此,有必要提供一个专门的预览页面,供用户查看和确认表单。而这也符合尼尔森可用性原则中的Recognitionratherthanrecallprinciple,将用户的回忆负担降到最低,直接展示用户需要记住或确认的内容。与PC端相比,移动端的长表单需要考虑更多的异常。这就要从PC端和移动端的使用场景说起。PC端的使用场景比较有限,人们使用时大多坐在办公桌前;而移动端的使用场景则要广泛得多,无论站着、坐着、走路还是躺着,都可以用手机。增加滥用的可能性。此外,两端的使用场景也受到各自网络环境的影响。PC端的网络质量相对稳定,而移动端的网络质量由于“移动”的特性,容易出现波动。电梯内。对于异常情况的发生,可以从这两点考虑设计:尽可能帮助用户保存填写的表单信息;如果确实无法保存所填写的表单信息,则以友好、明确的方式提醒用户该风险。当长表单需要上传文件时,移动端支持的文件类型不如PC端多。这主要针对iOS操作系统。与Android操作系统相比,iOS系统对数据读写有限制,这是由iOS系统的Sandbox机制决定的。所谓沙箱机制,就是每个应用的数据都保存在一个独立的沙箱中,应用只能访问自己沙箱中的文件,不能访问其他沙箱中的内容。对于iOS系统的APP,一般只能访问设备的相册资源(如果用户允许其访问相册权限)。因此,如果移动端表单需要上传文件,需要考虑iOS操作系统的数据读写限制,根据限制规范上传支持的文件格式。小结综上所述,文章中提到的内容可以归纳成一个表格。供应商加盟项目交互设计及原型制作:陈梦蝶(本文作者),视觉设计:陈从哲。由于开发成本有限,本文示例的部分功能尚未上线。