恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
移动表单设计中那些令人纠结的细节
0.0°
2020-01-02 原创文章 经验/观点 举报 2490 44 15 3

表单页细节设计要点

最近我在对公司产品的表单进行优化时,总会被很多琐碎的细节卡住,会纠结表单的对齐方式,到底用左对齐还是右对齐?会纠结按钮位置应该放在何处?


为了解决我的疑惑,我就去了解学习了表单填写页的相关知识,并体验了一些大厂的表单填写页,最直观的感受就是好的表单设计不需要我怎么思考,会主动引导我完成表单填写,都具有“浏览清晰,填写顺畅,不易误操作”的特点。



一、表单页的基本组成

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


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

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


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


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


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



二、表单页细节优化

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


1.表单标签对齐方式

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


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


1)顶部对齐

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


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


2)左对齐

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


3)右对齐

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


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


左右对齐的选择

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

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


2.外模块分割方式选择

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


1)留白分割

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


2)背景栏分割

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


3)卡片分割

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



3.选择器优化

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


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


4.输入框增加一键清除

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


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

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


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


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

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


6.按钮位置

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


1)跟随表单

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


2)固定底部

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


3)导航栏右上角

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



三、划重点

表单页看似样式简单,但有许多可优化的细节,好的表单页不需要用户过多的思考,能够顺畅的完成表单填写。

 

我们在优化时可针对表单页的三大基本组成(表单标签、输入域、表单按钮)一一进行优化,重点是对输入域的细节优化,要尽可能让用户少操作。

 

 

参考引文:

《常见的表单设计,如何最大化提升用户体验?》http://1t.click/bj2A

《表单设计进阶——7招提升表单体验》https://dwz.cn/IVdcs1f1

《移动端Cell栏表单设计问题汇总》http://1t.click/bj3d

《案例讲解:移动端的长表单应该如何设计?》http://1t.click/bj3k


Powered by Froala Editor

更新:2020-01-02

收藏

44人已收藏

  • 9

    作品

  • 23

    粉丝

  • 5

    关注

  • 2019-2020简历作品集
  • 啥?你说我不懂如何设计消息中心?
  • 勋章设计怎么搞?浅析勋章页面设计细节
  • 你居然不知道默认头像有这么多种设计方式?
相关标签
ui经验

    猜你喜欢

      2020-01-02 原创文章 经验/观点 举报 2490 44 15 3

      移动表单设计中那些令人纠结的细节

      0.0°

      你确定要举报移动表单设计中那些令人纠结的细节

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年12月30日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      44
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录