表单作为帮助用户提交数据，完成前后端数据交互的组件，是产品中非常重要的一个组成部分。本文作者结合实际案例，分享了设计移动端表单的几点思考，希望对你有用。

前段时间参与设计了一个类问卷的小工具，想总结下设计移动端表单的一些小想法。

常见的表单设计流程是：

根据业务场景需要选择合适的组件

对组件增加高级限制和判断逻辑

那就以常见的开户进件作为案例来讨论表单的设计流程吧。目前我们需要设计一个表单用于“用户提交开户资料”的场景。首先我们根据银行和相关业务方的需要，确定了需要的字段，并选择对应的组件；其次对于各个组件做了高级限制和表单整体的判断逻辑，比如银行卡允许输入长度不超过19位；身份证号码和姓名需要通过一致校验等。

仅有上面两个设计流程是不够的，设计出来的表单会存在很多问题？

页面展示数据过多

操作复杂且繁琐

选用的组件样式和交互不适合移动端

提交的数据没有经过统一的数据处理等

这些问题会影响用户表单填写的体验和意愿，严重的话会影响到表单填写流程，甚至造成用户放弃填写表单从而导致业务流程无法推进。而对于收集上来的数据如果不做统一处理的话，会增加后台用户或者数据收集方关于“数据处理”的成本

怎么合理设计呢？

那么我们应该怎么设计合适的表单呢，这里我们可以结合移动端的特点去做下面几点考虑。

1. 分布式表单

iPhone目前主要的机型屏幕尺寸在4.7-5.8英寸，android的尺寸更多一些，但是总体上来说，移动端的载体手机屏幕不大，能承载的信息是非常有限的。当表单信息过多时，如果把所有组件堆积在同一个页面中，用户填写或者修改变单需要重复滑动页面，极大的增加了用户的心里负担和填写成本，很容易就产生放弃心理。这里我们就会考虑分布式表单，能很好的起到以下作用

（1）减少用户的心理负担

分布式表单的设计，可以减少用户对于每个页面剩余填写数量的感知，比如下图中1个页面，用户需要剩余填写10条数据；而分布式处理后，用户的感知是之一个页面剩余填写8条数据，第二个页面剩余填写2条数据。大大降低了心理负担，表单完成率会更高

（2）拆解了表单完成的动作

分布式表单的设计，把一整个表单分成多个步骤进行，每次填写都意味着一次“完成”，增加用户成就感的同时，让用户明确感知到已经完成多少，还剩余多少，也增加了放弃成本

2. 减少用户操作

用户行为都是“懒惰”的，过多的操作会给用户造成压力，影响用户继续填写和完成表单的欲望，造成填写流失。我们在设计产品的时候可以考虑通过减少操作，减少输入，合理化流程这3种方式来减少用户操作，减少用户的填写成本，增加填写完成率

（1）减少操作

减少操作，可以根据实际的场景出发，通过交互设计去减少用户填写表单的操作，起到降低用户的填写负担和成本，提高表单填写成功率。比如扩大了表单的可点击区域，方便用户点击可以直接唤醒键盘，照顾了不同点击习惯的用户。如果点击区域较小会增加部分用户重复点击的次数，甚至产生“是不是系统bug了”等心理从而放弃了对表单的填写；再比如唤起的键盘是根据表单定制的，点击“单行文本项-身份证”能唤醒的键盘是带“X”的数字键盘，就减少了“身份证尾号带X”的用户再填写身份证号码需要反复切换数字和大写英文字母的场景

（2）减少输入

我们希望用户在填写表单的时候能尽可能减少用户的负担心理，提高整体的表单填写成功率。我们可以通过“减少输入”来降低用户对于填写数量的感知，从而降低用户对于填写表单难度的心理预期。常常采用减少“输入项”，借助移动端载体手机的相机等硬件支持。看下我们对于开户进件输入银行卡的改造：

改动1：“单行文本项-开户银行”改造成“选择项-开户银行”，预设了可以选择的银行名称

改动2：增加“通过卡面拍照识别”功能，通过手机拍照获取银行卡照片后直接解析银行卡号，银行名称信息