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

  • A+
所属分类:经验思维

本文来源: 人类君(公众号:海盐社), 共 2375 字

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

表单页的基本组成

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

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

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

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

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

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

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

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

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

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

表单页细节优化

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

1.表单标签对齐方式

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

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

1)顶部对齐

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

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

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

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

2)左对齐

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

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

3)右对齐

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

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

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

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

左右对齐的选择

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

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

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

2。外模块分割方式选择

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

1)留白分割

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

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

2)背景栏分割

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

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

3)卡片分割

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

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

3。选择器优化

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

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

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

4。输入框增加一键清除

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

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

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

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

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

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

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

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

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

6.按钮位置

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

1)跟随表单

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

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

2)固定底部

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

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

3)导航栏右上角

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

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

划重点

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

更多内容可查看作者的书籍:



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: