赞助商
立即赞助

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

UI设计3年前 (2021)发布 流光
2.7K 0 0

随着移互联行的飞速发展,人们原本习惯在 PC 端填写的长表单,渐渐地在移端越来越见。本将基于驴妈妈移端供应商盟项目,从 PC 端和移端的同之处入手,探讨移端长表单的设计有哪些注意事项。

供应商盟项目的交互设计及原制作:陈梦蝶(此作者),视觉设计:陈丛哲。受限于开发成本,中分示例的功并未上线。

相较于PC端,移动端要减少手动输入

PC 端移动端手动输入的便捷程度不同的。PC 端的输入较便捷(键盘鼠标触控板,效率较高);移动端的输入较不便捷(手指与屏幕的触碰面积较,效率精准程度远不及 PC 端的键盘鼠标)。因此,了打造便捷优的操作体验,移动端表单需尽减少用户的手动输入。以下方法可以减少手动输入。

方法1:当场景下的常用选项

提供当场景下的常用选项,用选择替输入基本的思。得注意的,如果常用选项不能涵盖用户可能填写的全部内,那么手动输入自义选项的功能也提供给用户。

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

法2:利用移动端设备能获取信息

尽管移动端在输入上没有那么便捷,获取到信息类与精确度,却具有定优势。比如,移动端设备能较为精确地获取到用户前地理位,这为某些需要填写位表单提供了便捷(如收货地址、联系地址等)。再如,调用讯录功能也经常出现在各需要填写手号表单。

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

方法3:提供用户的历史输入项

一表中出现了多相同类型的表项,这可以提供用户的历史输入项供其选择。另外,多填页也会将用户输入的息动保存为常用收货人等,同也是用了这一方法。

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

方法4:采用拍照识别的功能

由 OCR 技术(Optical Character Recognition,光学字符识别)的展,拍照识别文字的速度和准确度有大的提升,最常见的就是各大金融服务应用中拍照识别银行卡号的功能。下所示,三证合一的营业执照中有 18 位的统一信用代码,由阿拉伯数字和英文字母组成。果采用手动输的方式,不仅效率低,还容易输错。在里应用 OCR 技术,旨在降低输成,提升用户验。

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

相比于PC端,移动端需考虑调出的键盘类型及方式

相对于 PC 端的物键盘,移端的虚拟键盘由于受限于屏幕尺寸,在各种类键盘间进行切换的成本较,且在数字和各类中英标点符号的输入上效率较低。因此,在移端长表单的设计中,需要更多考虑:默认调哪种类的键盘,才是当前场景最为效的择。

另外,当连续个表单项的输方式各不相同时,考虑使用联动键盘。下面的案例所示:

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

不难现,案例中连续 3 个表单项对应的输方式分别是:时间选择器、数字键盘、选项选择器。果采用传统的方式按顺序填写,不仅需要依次点击 3 个表单项,而且对应的选择器和键盘也需要分别弹出和收各 1 次(弹出和收共计3*2=6次),操为繁琐。改为联动键盘,以在同 1 个底部弹出中,流畅地填写完 3 个表单项,有助打造更为便捷高效地填写验。

PC端可在一个页面中承载长表单,移动端则需分页面展示

移动端设备相比 PC 端设备,屏幕尺寸小得。一份在 PC 端以用 1-2 屏展示完的表单,在移动端能需滑动 7-8 屏才能完整查看。果在移动端用一个页面承载 7-8 屏才能看完的长表单,能造成高跳出率和低完成率。表单设计领域的专 Adam Silver 通过实际项目发现:将较长表单拆解为若干分,若干页面展示,升户满意及支付转率。除此之外,Adam 还总结了这种设计念的 16 个优点,我觉得中最要的 3 个优点如:

  • 降低认知负荷,让用户能专注完任务;
  • 使得每一页的错数得到降低,从而降低错误带给户的挫败感及跳率;
  • 合进度指示器,能给用户一种前进的正面感。

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

那么,分页面展示就足够了么?还不一。根据具体的况,时还需将一页面中的内划分不同的模块。具体的法:将相关表单项行分类组合,并通过卡片、分割线或间距将它们分不同的语义组,并添加对应模块标题以突出页面的节奏感,从帮用户加高效浏览填写表单。

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

移动端的长表单在填写完毕后,可考虑提供预览功能

为什么要考虑预览功能呢?于分页填写表单,如需检查前已填写内容,要逐步返回前页查看,十分不便。此,提供个专预览页让用户表单进检查和确认,是很有必要。而这也符合尼尔森可用性原则易取原则(Recognition rather than recall),尽可能减少用户回忆负担,把需要用户记忆或确认内容接展示出来。

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

相比于PC端,移动端的长表单需更多地考虑异常情况

这点要从 PC 端和移动端的使用景说起。PC 端的使用景相对比较局限,人在使用大多是坐在前;而移动端的使用景则宽泛得多,无论是站着、坐着、着还是躺着,都能使用机,这就让发生误操作的可能性更大。另外,端的使用景同受各网络环的响,PC 端的网络质量相对稳定,而移动端由于「移动着」的性,网络质量容易波动,比如,从号较好的室外进入号较差的梯内。对于异常情况的发生,计可从这 2 点进行考虑:

  • 尽能地帮助用户存已填写的表单信息;
  • 如果实在无法保存已填写的表息,要友好且确地提醒用户这一风险。

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

当长表单需要上传文件时,移动端支持的文件类型不如PC端多

这一点主对于 iOS 操作系统言的。相比于 Android 操作系统,iOS 系统对数据读写限制,这由于 iOS 系统的沙盒(SandBox)机制所决的。所谓沙盒机制,就各应用程序的数据都独立的沙盒中行储存,应用程序只能自己的沙盒中访问文件,不可以访问其他沙盒中的内。对于 iOS 系统的 APP 言,一般只能访问设备的相册资源(用户允许其访问相册权限的况下)。因此,如果移动端表单需传文件,需考虑到 iOS 操作系统这一数据读写的限制问题,并根据限制规范化支持传的文件格式。

总结

综所述,可将文中提到的内归纳一张表格。

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

参考

[1]如何高效完表单输入?看这案例 – 优设
[2]16优点告诉,什么表单设应该用这方法? – 优设
[3]Better Form Design: One Thing Per Page (Case Study) – Smashingmagazine
[4]可能全面的表单设完全手册 – 优设
[5]尼尔森可用性原则 – Nielsen Norman Group
[6]从交互设角度,聊聊Web网站移动App的六差异 – 优设
[7]iPhone 20了也用!这些功能iOS永远不会 – TechWeb
[8]iOS阶第一天(数据处理之文件读写)- 简书

欢迎关注「驴妈妈UED」的微信公众:

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

工作中我们常常会听到或在撰写交互说明时提到“从底部向上出现弹层”、“出现浮层”、展示“对话框”、弹出“弹框”、“出现对话框”诸...
ui设计
编者注:本文腾讯设计师用「云游敦煌」的小程序设计实战案例,为你揭秘大厂的产品构思方法、设计历程等。 缘起 在工作中遇到...
云游敦煌
网易UEDC – 仉长娟 :从事 B 端产品交互设计工作的半年时间里,有幸接触了面向开发和运维人员的 B 端业务类列表交互设计工作...
Web设计
编者按:本文由途牛UED 出品,作者将结合实际案例,从7个方面介绍表单设计中的常见注意事项。 表单作为平台与用户联系最为紧...
UI 设计
金山 WPS Office 移动端是金山公司打造的、运行于多平台上的全方位全功能办公软件,国内同类产品长期排名领先,支持查看、创...
WPS
大家好,这里是 TCC 翻译情报局,我是李泽慧。数据表单是一种常见的平台设计样式,在看似乏味呆板的设计中,沉淀着许多优质的...
B端设计
前文已经提到:对于特别复杂的B端表单,「简化」只是提升其易用性的方法之一。遇到数据量大,层级深,数据之间有交叉或嵌套关...
B端产品
一套完整且比较优秀的移动端交互文档,我认为可以包含以下部分: 业务背景、产品目标、用户人群和用户目标 业务规则定义...
交互文档