随着移动互联网行业的飞速发展，人们原本习惯在PC端填写的长表单，也渐渐地在移动端越来越常见。本文将基于驴妈妈移动端供应商加盟项目，从PC端和移动端的不同之处入手，探讨移动端长表单的设计有哪些注意事项。

供应商加盟项目的交互设计及原型制作：陈梦蝶（此文作者），视觉设计：陈丛哲。受限于开发成本，文中部分示例的功能并未上线。

1、较之于PC端，移动端要减少手动输入
PC端和移动端在手动输入的便捷程度上是不同的：PC端的输入较便捷（键盘鼠标触控板，效率较高）；移动端的输入较不便捷（由于手指与屏幕的触碰面积较大，效率和精准程度远不及PC端的键盘鼠标）。因此，为了打造便捷优雅的操作体验，移动端表单需要尽量减少用户的手动输入。在减少手动输入的方法上，有以下这些值得考虑。

方法1：当前场景下的常用选项
提供当前场景下的常用选项，是以选择代替输入最为基本的思路之一。值得注意的是：如果常用选项不能涵盖用户可能填写的全部选项，那么手动输入自定义选项的功能也要提供给用户。

方法2：利用移动端设备能获取的信息

尽管移动端在输入上没有那么便捷，但在能获取到信息种类与精确度上，却具有一定的优势。比如，移动端设备能较为精确地获取到用户当前的地理位置，这就为某些需要填写位置的表单提供了便捷（如收货地址、联系地址等）；再如，调用通讯录的功能也经常出现在各种需要填写手机号的表单中。

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

下面的示例是：一份表单中出现了多处相同类型的表单项，这时可以提供用户的历史输入项供其选择。另外，很多填单页也会将用户输入的信息自动保存为常用收货人/游玩人，同样也是用到了这一方法。

方法4：采用拍照识别的功能
由于OCR技术（Optical Character Recognition，光学字符识别）的发展，拍照识别文字的速度和准确度都有了较大的提升，最常见的就是各大金融服务应用中拍照识别银行卡号的功能。如下所示，三证合一的营业执照中有18位的统一社会信用代码，由阿拉伯数字和英文字母组成。如果采用手动输入的方式，不仅效率低，还容易输错。在这里应用OCR技术，旨在降低动输入成本，提升用户体验。

2、相比于PC端，移动端需考虑调出的键盘类型及方式
相对于PC端的物理键盘，移动端的虚拟键盘由于受限于屏幕尺寸，在各种类型键盘间进行切换的成本较高，且在数字和各类中英文标点符号的输入上效率上较低。因此，在移动端长表单的设计中，需要更多地考虑：默认调出哪种类型的键盘，才是当前场景下最为高效的选择。
另外，当连续多个表单项的输入方式各不相同时，可考虑使用联动键盘。如下面的案例所示。

不难发现，案例中连续3个表单项对应的输入方式分别是：时间选择器、数字键盘、选项选择器。如果采用传统的方式按顺序填写，不仅需要依次点击这3个表单项，而且对应的选择器和键盘也需要分别弹出和收起各1次（弹出和收起共计3*2=6次），操作较为繁琐。改为联动键盘后，可以在同1个底部弹出层中，流畅地填写完3个表单项，有助于打造更为便捷高效的填写体验。这里联动键盘的交互方式参考了「58同城简历发布」和「赶集网房产发布」，在此表示感谢[1]。

3、PC端可在一个页面中承载长表单，移动端则需分页面展示
移动端设备相比于PC端设备，屏幕尺寸小得多。一份在PC端可以用1-2屏展示全的表单，在移动端可能需滑动7-8屏才能完整查看。如果在移动端用一个页面承载7-8屏才能看完的长表单，可能会造成高跳出率和低完成率。表单设计领域的专家Adam Silver通过实际项目发现：将较长表单拆解为若干部分，用若干页面展示，能提升用户满意度以及支付转化率[2]。除此之外，Adam还总结了这种设计理念的16个优点[3]，我觉得其中最主要的3个优点如下：
1、降低认知负荷，让用户能更专注地完成任务；
2、使得每一页的出错数得到降低，从而降低错误带给用户的挫败感以及跳出率；
3、配合进度指示器，能给用户一种前进的正面感觉。

那么，分页面展示就足够了么？可能还不一定。根据具体的情况，有时还需要将一个页面中的内容划分为不同的模块。具体的做法是：将相关表单项进行分类组合，并通过卡片、分割线或间距将它们分成不同的语义组，并添加对应模块标题以突出页面的节奏感，从而帮助用户更加高效地浏览和填写表单[4]。

4、移动端的长表单在填写完毕后，可考虑提供预览功能
为什么要考虑预览功能呢？这是由于，对于分页面填写的表单，如需检查之前已填写的内容，要逐步返回之前的页面查看，十分不便。因此，提供一个专门的预览页面让用户对表单进行检查和确认，是很有必要的。而这也符合尼尔森可用性原则中的易取原则（Recognition rather than recall）--尽可能减少用户的回忆负担，把需要用户记忆或确认的内容直接展示出来[5]。

5、相比于PC端，移动端的长表单需更多地考虑异常情况
这点要从PC端和移动端的使用场景说起。PC端的使用场景相对比较局限，人们在使用时大多是坐在桌前；而移动端的使用场景则宽泛得多，无论是站着、坐着、走着还是躺着，都能使用手机，这就让发生误操作的可能性更多。另外，两端的使用场景同样影响着各自的网络环境，PC端的网络质量相对较稳定，而移动端由于其“移动着”的特性，网络质量容易波动[6]，比如，从信号较好的室外进入到信号较差的电梯内。对于异常情况的发生，设计时可从这2点进行考虑：
1、尽可能地帮助用户保存其已填写的表单信息；
2、如果实在无法保存已填写的表单信息，要友好且明确地提醒用户这一风险。

6、当长表单需要上传文件时，移动端支持的文件类型不如PC端多
这一点主要是对于iOS操作系统而言的。相比于Android操作系统，iOS系统对数据读写有限制，这是由于iOS系统的沙盒（SandBox）机制所决定的。所谓沙盒机制，就是各个应用程序的数据都放在独立的沙盒中进行储存，应用程序只能在自己的沙盒中访问文件，不可以访问其他沙盒中的内容[7][8]。对于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进阶第一天（数据处理之文件读写）- 简书