话说,移动端表单你真的了解吗?

前言:

用App时每次遇到填写表单都会是一件头疼的事情,所以作为设计师,每次设计表单界面时也不可以忽略她的重要性,我们需要先了解表单的基本组件样式和使用场景,然后运用到设计当中,在不同的情境下适应最合理的组件来搭建表单,让表单填写变更轻松。

目录

第一部分:什么是表单?

第二部分:表单中的基本样式及使用场景

第三部分:如何提升用户信息录入效率


一、什么是表单?

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

二、表单中的基本组件及使用场景

正确设计表单的前提则是了解表单中常用的组件以及他们的特性,在不同场景下如何选择表单组建的使用,这里再次强调下,下面的组件讲的都是在表单中的运用。


1.文本框

接受用户主动输入文本的区域,当用户主动点击输入区域时,会唤起键盘。输入完毕后,点击键盘的确认键,应用会自动根据输入的信息显示给用户所对应的内容。当然,相比那些只需要点击或者滑动的组件来说,输入框对用户来说是比较繁琐的,所以我们在选择用输入框时,应该考虑还有其他组件能否代替,例如下拉菜单,可以直接选择其中的内容。(如图)


2.分段控件

分段控件来源于iOS规范,通常在单选项为2-5个的场景下使用。(如图)在界面中分段控件起到分割和筛选同类数据的作用。另外它可以把所有的选项都呈现给用户,用户可以快速的做出选择。交互部分,分段控件只能通过点击控件本身的分段来进行操作,不可横滑切换。


3.状态切换器

状态切换器又称开关,是仿照真是的开关理念而形成的。选择开关的前提是需要两种简单且直接对立的选项。例如“开”和“关”;“显示”和“隐藏”。(如图)使用状态切换器的项目通常重要性相对较低,都是附加功能,不会影响表单的提交流程。


4.滑动控制器

当表单中存在选择一个值或一个范围时,可以舍弃复杂的下拉菜单或者系统默认的选择控件改用滑动控制器。即减少用户的操作,又增加界面的设计感。(如图)滑动控制器在表单中的应用常出现于调整额度,相对输入和步进器来说更加方便,但占据界面中的空间比较大。当然其他产品中也有用到滑动控制器的,例如keep,京东金融,不过都不是在表单中的运用这里就不一一列举了。


5.数字步进器

可以被用在只能递增/递减其数量的选项上,以便让用户能便捷地微调数值,使用步进设计代替下拉列表,既可以降低操作失误率,也在一定程度上减少点击次数。(如图)在产品中经常出现在购物列表中,相比单纯的选择数字和输入数字,这种数字不进器当大数额时用户可以手动输入,当小数额变化时又可以通过点击逐步增减。


1

三、如何提升用户信息录入效率

1.防止输入框的遮挡(案例:掌上生活App)

错误示例:当我们要输入最下面“亲友公司名称”时,键盘被唤醒,同时遮挡了所以需要填写的表单组件,我们需要滑动底层界面才能继续填写。这种体验是十分糟糕的。

正确示例:我们在用户输入完当前表单的某一段落时,底层界面位置应该自动往上移动,显示当先该填写的项目且完整的输入框,确保表单在填写时无任何元素的遮挡,方便用户的输入。


2.实时校验(案例:阿里卖家)

错误示例:每次需要用户填完了所有信息提交时,才反馈存在很多错误,用户需要根据系统所给出的提示再次修改提交,我认为此时心情应该不是很好。

正确示例:如果优化为每当用户离开当前输入时,系统根据用户输入的信息进行判断并及时告知用户输入的正确性,甚至还能引导用户进行接下来一系列有关联性的输入。就会减少用户的反复操作,表单也会变得更容易让用户接受。


3.键盘匹配(案例:火枪买手、豆瓣)

在App中通常会出现不同的输入方式,有需要输入文字的,有需要输入英文的,有需要输入数字的,届时我们应该对不同的输入需求去匹配不同样式的键盘,减少用户的切换操作,提高用户的输入体验。例如:输入电话号码时就可以只存在数字键盘,省去了用户对键盘的切换操作。例如:输入邮箱时不需要拼音,我们的键盘就只保留英文和数字即可。


4.智能预设(案例:每日优鲜)

错误示例:用户填写表单这个事件本身对用户来说就是一件很头痛的事情,如果每次表单中的信息我们都需要重新填写,不仅增加了用户的操作,出错了也会相对提升。

正确示例:每日优鲜中第一次添加收货地址时,由于产品不了解我们的个人信息所以所有项目都需要我们自己手动完成,但当我们再次添加地址时,产品会自动默认当前我的姓名、电话、城市等信息的预设,这就减少了我的填表时间。用户一定会对此感激不尽。


总结

通过明确表单中组件的运用以及在不同场景的使用,让表单的设计变得清晰易懂,提高用户的填写率。同时我们应该思考如何优化用户在使用时的交互效果,别面造成反复的操作。

参考文献:
https://www.25xt.com/appdesign/15435.html《APP设计必修课:如何设计出规范的移动表单组件》
http://www.woshipm.com/ucd/714300.html《移动端下拉表单的更好选择》
http://baijiahao.baidu.com/s?id=1601570718200932713&wfr=spider&for=pc《干货!移动端表单最佳实践》
http://www.woshipm.com/pd/362912.html《如何设计选择菜单》
http://www.woshipm.com/pd/374314.html《表单中的勾选框和开关》
http://www.woshipm.com/pd/1213814.html《小功能、大细节丨关于选择菜单的套路》
https://www.jianshu.com/p/313805f2d9ce《【译文】移动端表单设计小妙招》
https://www.jianshu.com/p/e32d038c82ae《这个控件叫:Segment Control/分段控件(附录与Tabs的区别)》

海盐社(公众号)

作者:小溜Epik
(0)

相关推荐

  • 【干货】5大移动端表单设计原则及案例赏析

    当我们在享受手机App为生活带来的巨大便利时,无形中已经经历了多种多样的移动表单设计形式.而表单设计又是移动应用设计中与用户产生最多交互的步骤,包括用户注册.订阅服务.用户反馈.问卷表单.买卖交易等等 ...

  • 干货!移动端表单最佳实践

    作为UI设计师,不可避免的要进行表单设计,但是你知道在设计的过程中需要遵循哪些原则,以及需要避免哪些事项才能更好的提升用户体验吗?以下分享的10条黄金法则,分分钟提升你的Mobile表单体验,一起来学 ...

  • 优秀表单设计应遵循的原则

    小编:表单是网站的重要组成部分.表单的目标是引导用户沿着一条路径,提高用户填写表单的效率,防止他们出错或中途流失,提升愉悦度及转化率.最好的表单用最少的文本来引导用户. 设计师常犯的错误,以及正确做法 ...

  • 移动端的长表单应该如何设计?

    基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单.针对于移动端长表单,我们应该如何去正确的设计呢? 本文大纲: 三种主方案 主方案1的设计讨论 主方案2的设计讨论 主 ...

  • FineReport怎么进行表单设计

    FineReport是一款报表软件,它的报表操作功能是报表软件中的佼佼者。下面小编就为大家进行介绍一下FineReport简单的一些表单设计功能,希望能帮到大家 新建表单点击文件>新建表单,如下 ...

  • 9个新人容易中枪的表单设计问题

    在网站中,表单是用户跟我们沟通的主要桥梁.透过表单,用户可以买东西.订阅新文章.更新资料--可以说网站最重要的功能,都是靠表单来完成.然而这个跟顾客打交道的重要环节,我们真的有做好了吗?以下分享的是一 ...

  • 44个漂亮的注册表单设计

    小编:注册表单在网页应用中十分重要,好的注册表单是可以让用户喜欢使用,大大的提升用户体验的.所以把注册表单设计好也是非常重要的一件事.今天就为大家带来44个漂亮的注册表单设计,看上去真的是有种赏心悦目 ...

  • 表单设计:一页只做一件事

    小编:形形色色的表单我们几乎每天都会接触,如何让用户顺利的完成表单填写.提交是我们应该想的事.一起去看看表单最高的工作效率:一页只做一件事. 2008年的时候,我在*Boots.com*工作.他们想做 ...

  • 如何高效完成表单输入 ?

    表单是收集用户信息的方式.如果你的产品需要收集大量用户信息来完成为其提供的服务,那么在用户进行信息输入的过程中一定要考虑到输入成本和输入效率对用户体验的影响. 针对复杂表单信息多.填写慢.体验差等问题 ...