设计移动端表单有哪些注意事项?

来源：千锋教育

发布人：xqq

时间： 2023-10-21 02:22:47

1、分布式表单

iPhone目前主要的机型屏幕尺寸在4.7-5.8英寸，android的尺寸更多一些，但是总体上来说，移动端的载体手机屏幕不大，能承载的信息是非常有限的。

当表单信息过多时，如果把所有组件堆积在同一个页面中，用户填写或者修改表单需要重复滑动页面，极大的增加了用户的心理负担和填写成本，很容易就产生放弃心理。这里我们就会考虑分布式表单，能很好的起到以下作用。

减少用户的心理负担：分布式表单的设计，可以减少用户对于每个页面剩余填写数量的感知。拆解了表单完成的动作：分布式表单的设计，把一整个表单分成多个步骤进行，每次填写都意味着一次“完成”，增加用户成就感的同时，让用户明确感知到已经完成多少，还剩余多少，也增加了放弃成本。

2、减少用户操作

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

减少操作：可以根据实际的场景出发，通过交互设计去减少用户填写表单的操作，起到降低用户的填写负担和成本，提高表单填写成功率。减少输入：我们希望用户在填写表单的时候能尽可能减少用户的负担心理，提高整体的表单填写成功率。我们可以通过“减少输入”来降低用户对于填写数量的感知，从而降低用户对于填写表单难度的心理预期。合理化流程：通过合理化填写流程，也能起到减少用户的操作，特别是用户不必要的重复操作。一起看下用户进件案例中关于两种填写验证码的方式。一种是验证码是本表单内的一个填写项，另一种是验证码是表单内信息提交后再填写的。

3、提供明确的反馈

用户的认知是有高低差异的，不同用户对于表单的填写容易度也是不同的。我们通过明确的反馈，帮助大部分用户能正确填写表单，顺利完成对表单的填写；同时增加了整体表单填写的成功率和回收率。明确的反馈包括引导用户正确填写的反馈和用户误操作后的错误提醒。

4、组件设计符合移动端

表单组件在移动端和PC端是有差异的，同样一个组件在移动端上使用时，我们的设计应该更符合移动端。首先，考虑到移动端的界面远小于PC，没有办法和PC一样做到把所有的元素都展示出来，所以组件的设计也应该尽可能地简单，从而突出重点。比如单选项为是否的情况下，在移动端就可以设计成开关样式，简化了布局突出了重点。

其次，移动端和PC端的使用者都是人，但是一个通过手指触发交互，另一个通过鼠标触发。人的手指虽然比鼠标更加灵活，但是在精准度方面没有鼠标更好，组件的设计就应该扩大可操作区域，降低手指的误操作。比如在移动端上的下拉选择项中，选项面板会设计成从页面底部弹出，更方便用户选择。我们把组件设计的更符合移动端的一些特点，也是为了能简化用户的操作，让用户能更容易完成表单的填写。

5、统一的数据格式处理

这一点是针对后台或者数据收集方用户的。因为用户填写的数据存在五花八门的可能性，收集的数据如果不做统一处理的话，可读性很低，增加了后台或者数据收集方用户的使用成本。这要求我们在移动端提交数据的时候，对数据进行抽象处理，根据业务场景按约定的数据格式统一处理。

延伸阅读1：什么是表单

表单中的内容有很多，例如：复选框、单选框、输入框、下拉选择、开关、分段控等元素。表单对于用户而言是数据的录入和提交的界面；对于网站而言是获取用户信息的途径。表单的出现可以帮助我们通过采集更多的用户信息，来给用户提供更贴切的服务。

声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。