提交表单后怎么防止重新提交_案例分析：移动端长表单的9个设计思路

表单主要负责数据的采集，是产品从用户侧获取信息的常用途径，表单可承载的内容有很多，如输入框、复选框、下拉选择、开关等控件。表单常见于PC端，随着互联网的发展，在移动端的使用也越来越多，那么在设计移动端的表单时应当遵循什么样的原则或者说注意什么呢？下面将结合在工作中的实际的案例从9个方面讲述移动端表单的设计思路。

1. 选择合理的表单结构

合理的表单结构能够提高用户阅读表单的效率，降低填写表单时的出错率。在移动端常见的布局结构有左右布局和上下布局两种，由于移动端横向空间有限，在选用时优先推荐使用上下布局，即标签和输入内容各占一行，这样用户的阅读效率也较高。当表单内容很多且每项内容比较简单时，可以考虑使用左右布局，更好的节省页面的纵向空间，避免用户频繁上下滑动屏幕，也能减少用户填写长表单的焦虑。

2. 将内容分页展示

移动端设备屏幕小，单屏内承载的内容极其有限，通常情况下PC端一份正常的表单如果转到移动端可能需要滚动好几屏才能填写完，如果不分页展示，会降低页面的完成率。表单设计领域的专家 Adam Silver 发现：将较长表单拆解为若干部分，用若干页面展示，能提升用户满意度以及支付转化率。

将长表单进行分步处理，还可以：

• 减小用户的认知负荷和心理压力，让用户更专注的完成任务；
• 降低用户的出错率，减少挫败感；
• 保持所有步骤和用户当前位置随时可见，给用户合理的心理预期。

3. 文字信息简洁且够用

保持页面中的提示信息简洁，避免使用冗长且无意义的描述给用户造成沉重感，浪费用户的时间和经历去获取无用的信息。当然也不能过分的追求简单，将主要的信息忽略，对于用户来说够用就好，即能够理解所表达的意思不造成困惑就好。

4. 减少用户输入

相比PC端，移动端的输入更为不便，其效率和精准度远不如PC端的鼠标键盘，因此移动端要尽可能的减少用户的手动输入。

(1)以选择代替输入

能选择尽量不要让用户输入，哪怕使用选择的方式会导致用户的操作路径变长，只要在合理且可控的范围内，优先推荐使用选择的方式。

(2)充分利用移动设备的性能

虽然移动端手动输入信息的效率相比PC端较低，但其获取信息的方式却比PC端更加多样化。如移动端能够更为准确地获取用户的地理位置，为表单中地址的填写提供了便捷。

除了利用GPRS之外，移动端的拍照功能也提供了更为便捷的输入方式，随着OCR技术的成熟，通过拍照识别文字来代替用户输入的方式也越来越多见，最常见的就是金融服务应用中的拍照识别银行卡号的功能，大大降低的用户的输入成本和出错率。

(3)提供默认选项

提供默认选项是指在表单填写过程中对于一些较为特殊的输入项提供通用选项，减少用户填写表单的负担，如证件类型、手机区号和国籍等。

(4)减少输入的二次确认

输入的二次确认常见于PC端在设定或重置密码时的场景中，一来可以防止用户出错，二来可以加深用户的印象，避免遗忘。若照搬至移动端会大大增加用户的输入负担，此时我们可以考虑使用“明文显示”或“输入2s后密码由明文转为密文”的方式，来提升用户的输入体验。

(5)合理调用第三方或系统信息

可以通过直接调用第三方应用软件或系统的信息来代替用户输入。如输入电话号码时为用户提供唤起系统通讯录的操作，使用第三方应用授权登录时可获取用户的性别、年龄、收货地址等信息。

5. 定义键盘类型

根据表单输入内容的不同，定义不同的键盘类型，在用户输入时直接唤起对应的键盘，避免让用户进行键盘选择和切换，同时也能够让用户对可输入文本的类型有所预期。如中文输入时唤起中文键盘、英文输入时唤起锁定大写的英文键盘，手机号、身份证号等输入时唤起数字键盘。

除此之外，还要合理的定义键盘右下角的功能键，帮助用户实现换行/完成/搜索等操作，避免让用户手动收起键盘后再进行相关的操作。

6. 避免输入项被遮挡

对于长表单，在激活输入项后，若输入项被唤起的键盘遮挡，会影响用户的输入和使用。因此在用户激活表单中某一项内容时，底层界面位置应该自动往上移动，确保表单在填写时不被键盘遮挡，方便用户的输入。

当点击“经营范围”的输入框时，唤起手机中英文键盘，此时“经营范围”的输入框被键盘挡住，此时页面应自动向上滚动，保证用户能看到已输入内容，便于即时校验和修改

7. 实时校验并保存信息

填写长表单本来就是一件很痛苦的事情，若用户在点击提交时，页面中出现了许多红框提示用户输入错误，此时用户的心情可想而知。因此，在用户输入时应尽可能的做到实时校验，如中英文数字校验、输入字符数的校验都可以实时校验，用户输入出错时及时提示用户，减少的反复操作。

此外，移动端由于自身的特性导致了用户发生误操作的可能性更大，且移动端更容易受到网络波动的影响，因此要尽可能地帮助用户保存已填写过的信息，避免用户在信息丢失时重新输入。

8. 提供预览功能

对于已分页展示的长表单，在用户填写完信息想要检查之前填写的内容时，就要一步步返回之前的页面进行查看，还要担心返回之前的页面时当前已填写的信息会不会丢失。因此在用户输入完成后提供一个预览页面让用户对已填写的信息进行确认和检查，能够降低用户的操作成本和出错率。

9. 正确选择下一步/提交的位置

对于分页长表单来说，每页中都需要放置“下一步”或“提交”的操作来帮助用户完成任务。常见的操作位置有三种：位于表单右上角、跟随表单和悬浮置底，在选用时要根据实际情况选择正确的位置。

表单右上角：适用于内容复杂且极其重要的表单，在用户完成表单后视线会从下往上移动，有助于用户再次检查已填写的内容。

跟随表单：适用于所有内容都必须填写完成后才能进行提交的表单。

悬浮置底：适用于不需要全部填写的表单，能够让用户快速完成提交或进行下一步。

结语

以上是在设计移动长表单时遇到的一些问题以及设计思路，欢迎大家留言交流。

作者：墨白，公众号：UED_family

本文由 @墨白 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议