『』如何设计合适的移动端表单？5个关键点助力提升用户体验( 三 )

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

本文插图
其次，移动端和PC端的使用者都是人，但是一个通过手指触发交互，另一个通过鼠标触发。人的手指虽然比鼠标更加灵活，但是在精准度方面没有鼠标更好，组件的设计就应该扩大可操作区域，降低手指的误操作。比如在移动端上的下拉选择项中，选项面板会设计成从页面底部弹出，更方便用户选择

本文插图
我们把组件设计的更符合移动端的一些特点，也是为了能简化用户的操作，让用户能更容易完成表单的填写。
5. 统一的数据格式处理
上文的3点都是针对移动端用户的，这一点是针对后台或者数据收集方用户的。因为用户填写的数据存在五花八门的可能性，收集的数据如果不做统一处理的话，可读性很低，增加了后台或者数据收集方用户的使用成本。这要求我们在移动端提交数据的时候，对数据进行抽象处理，根据业务场景按约定的数据格式统一处理。比如案例中的“家庭地址”选项，该组件有“省市区 – 选择项”和“详细地址 – 多行文本输入项” ，已经对于数据格式做了一步约束，省市区的填写是规范的

本文插图
但是收集上来的数据还是会存在问题，尽管我们对省市区的填写做了约束处理，但是仍有可能发生用户重复填写省市区；街道信息遗漏等情况。

用户1填写：浙江省杭州市滨江区 XX街道XX社区XX幢201
用户2填写：浙江省杭州市萧山区萧山区XX路XX社区XX幢801
用户3填写：浙江省杭州市江干区 XX社区XX幢401

所以我们有必要采取统一的规则对收集上来的数据进行处理：

省市区去重
如果用户没有填写街道信息，根据详细地址补全街道信息

统一处理后，展示给后台或者数据收集方用户的数据格式如下：XX省XX市XX区XX街道+详细地址。减少了数据清洗的成本，方便了后续业务的继续展开
总结
在移动端中，表单组件是被经常使用到的组件，但是我们却很容易忽略它。不合理的表单组件设计会影响用户填写的意愿和完成度，从而造成了业务流程的滞后甚至停顿，收集上来的数据可读性也会较差，加重了数据收集方处理数据的难度或者打回数据让用户重新填写，增加了两端用户的使用成本。而通过合理的表单组件，不仅仅能提升用户的使用体验，而且能增加用户填写表单的成功率，降低成本，对于产品具有积极的意义。
本文由 @晌午原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash ，基于CC0协议。