移动端表单设计有哪些细节？

最近我在对公司产品的表单进行优化时，总会被很多琐碎的细节卡住，会纠结表单的对齐方式，到底用左对齐还是右对齐？会纠结按钮位置应该放在何处？为了解决我的疑惑，我就去了解学习了表单填写页的相关知识，并体验了一些大厂的表单填写页，最直观的感受就是好的表单设计不需要我怎么思考，会主动引导我完成表单填写，都具有“浏览清晰，填写顺畅，不易误操作”的特点。

表单页的基本组成

要对表单页进行合理的优化，首先我们先了解一下表单页到底是什么。

我们平时在使用APP时，免不了需要进行登录注册、填写订单、录入个人资料等等操作，像这样用于采集数据信息的页面称之为表单。

表单主要由表单标签、表单域、表单按钮三部分组成。

表单标签：针对表单域的提示标签，让用户知道这里应该录入什么信息；

表单域：用户需要录入各种信息的区域，包括输入框、数字步进器、单选框、多选框、开关、下拉选择等等组件控件；

表单按钮：提交、保存、取消等用于数据传送或取消的操作按钮。

表单页细节优化

好的表单页不需要用户思考，会引导用户完成填写，具有“浏览清晰，填写顺畅，不易误操作”的特点。我们从表单三大基本组成出发，依次思考每一部分应该如何做好细节优化。

1.表单标签对齐方式

移动表单页不同于PC端，屏幕更小，使用环境更加多变，再选择表单标签的对齐方式时，既要保证与输入域内容有联系，也要尽可能提高屏幕利用率。

移动表单标签与输入域文字有三种常见的对齐方式，分别是顶部对齐、左对齐、右对齐（这里的右对齐不是表单标签右对齐，而是输入域文字右对齐）。

1）顶部对齐

表单标签置于对应输入域内容顶部，用户从上向下依次浏览，不易停顿，浏览速度快，水平屏幕占比小，但垂直屏幕占比大，不适用与内容过多的表单。

顶部对齐的表单标签由于其垂直屏幕占比大，常用与简易的表单页面，比如登录注册页；但水平屏幕占比小，会用在外露选择标签、滑块等输入域的表单标签。

2）左对齐

表单标签置于对应输入域内容左边，输入域左对齐，与表单标签留有小段间距(2倍图下大致在30PX~60PX左右)，浏览时有一定停顿，水平屏幕占比大，垂直屏幕占比小，常用于输入框的表单标签。

3）右对齐

表单标签置于对应输入域内容左边，输入域右对齐，二者与页面留出相同的边距。浏览时用户停留时间长，水平屏幕占比大，垂直屏幕占比小，常用于呼出选择、开关等有操作的表单标签。

右对齐由于浏览用时较长，还适用在仅需要用户确认信息的表单列表，比如订单详情页。

左右对齐的选择

同一张表单页往往既有输入类的表单，也有选择、开关等有操作的表单，这时候表单标签对齐方式还可进行一些简单的处理，以此保证整个表单的整洁。如下图：

贝壳找房的贷款计算器表单，表单标签与输入域文字采用的是左对齐的方式，但右边放置了单位以及选择呼出图标，使得整体界面不会过于左重右轻，也保证了对齐方式的统一性，浏览更加顺畅。

2.外模块分割方式选择

表单页的外模块分割方式常见有留白分割、背景栏分割以及卡片分割，选择合适的外模块分割方式能够进一步帮助表单进行类别分组，便于用户清晰查看内容。

1）留白分割

利用大间距留白进行分割，割裂感不太强，垂直屏幕占比大，适合用在内容简单的表单页。

2）背景栏分割

利用背景灰色进行分割，割裂感强，适合配合表单分组进行外模块分割，可拓展性强，内容简单或复杂表单都可使用。

3）卡片分割

利用卡片进行分割，割裂感强且视觉轻量，适用于表单内容特别多的长表单，几乎是电商平台订单表单首选外模块分割方式，可拓展性极强。

3.选择器优化

输入域的优化要遵循填写顺畅这点，能选择的就不输入，能放置默认值的就直接展示，且尽量保证在当前页进行操作，不要跳转到另一个页面，以此减少操作用时。

在选项小于5个且可控的时候，还可将其全部展示出来。以闲鱼信用回收填写估价信息为例，所有表单内容都以标签选项平铺在表单页，每选择一个再展示下一个表单项，用户只需按顺序点点点即可完成表单填写。

4.输入框增加一键清除

在对输入域进行优化时，尤为重要的一点就是尽量让用户快速操作，减少用户的思考时间。在输入框增加一键清除图标，就可以方便用户快速删除默认值或多内容文字。

5.数字步进器做极值限制

数字步进器，常用在订单表单中，帮助用户增减购买数量。看似简单的数字步进器也有一个不易注意的点需要我们进行优化，那就是对数字做极值限制，尤其是数字步进器中间数字可输入的情况。

常见的处理方式就是使中间数字不可输入，仅能通过加减按钮修改。这样的好处是用户可控感更强，在加减到最大最小值时，加减按钮便不可点击，不需要用户过多思考。

另一种保留了中间数字可输入的操作，但在输入小于0、大于最大值时会自动填充为最小值1以及最大值。

注意：中间数字可输入时还要对小数点进行处理，要么屏蔽使用户不可输入小数点，要么再输入后四舍五入为整数。

6.按钮位置

表单按钮位置有三种，分别是跟随表单、固定底部以及导航栏右上角。

1）跟随表单

表单按钮跟随在内容最下方，视觉查看流畅，在调出键盘时会被遮挡，且长表单超过一屏会看不见，适合用在仅一屏内容的表单。

2）固定底部

表单按钮固定在页面底部导航栏，适合用与超过一屏的长表单页，在调出键盘时按钮也会被遮挡。飞猪填写订单页对底部按钮做了跟随键盘顶上去的处理，在输入中也可进行提交操作。

3）导航栏右上角

表单按钮置于导航栏右上角，调出键盘不会被遮挡，适用于必填内容不会被键盘遮挡的表单，比如动态发布表单。

划重点

表单页看似样式简单，但有许多可优化的细节，好的表单页不需要用户过多的思考，能够顺畅的完成表单填写。我们在优化时可针对表单页的三大基本组成（表单标签、输入域、表单按钮）一一进行优化，重点是对输入域的细节优化，要尽可能让用户少操作。