1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

移动端的长表单应该如何设计? 学UI网--九分科技

时间:2020-06-10   分类:设计管理    作者:网络   来源:网络整理   点击:110

西湖鱼

内容采集来自9fen.net

www.9fen.net

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

西湖鱼 APP设计 2017-10-27 13503浏览 copyright 9fen.net

本文来自九分网络

内容采集来自9fen.net

www.9fen.net

基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单。针对于移动端长表单,我们应该如何去正确的设计呢?

本文来自九分网络

本文大纲:

三种主方案 本文来自九分网络

主方案1的设计讨论 九分网络

主方案2的设计讨论 九分网络

主方案3的设计讨论 九分网络

总结

www.9fen.net

1. 三种主方案

针对长表单的设计,按照设计思路的不同,可以分为三种主方案,如下所示: copyright 9fen.net

PS:图中的举例的关键字段仅仅为举例需要。 本文来自九分网络

1-222

本文来自九分网络

九分网络

主方案1:我们常见的设计形式,一个界面将所有表单信息展示出来。

九分网络

主方案2:将不同的分组表单放在不同的下一级界面,用户填写之后返回。 copyright 9fen.net

主方案3:分步操作,一个界面完成一组表单内容,点击下一步进入下一组表单。

九分网络

2.主方案1的设计讨论 主方案1的设计优缺点

优点:一个界面将所有表单信息展示出来,如果想查找某些填写的信息也变得更容易,相对于主方案2和3,减少了页面跳转操作和查看。 九分网络

缺点:基于移动端界面承载能力较弱,一个界面将表单所有展示出来,用户一次性浏览和操作起来压力较大,容易使操作流程失败,导致成功率大大降低。 本文来自九分网络

针对于主方案1,用户完成表单完成后,提交按钮有三种主要的设计方法,一种是提交按钮放在表单最后,一种是提交按钮放在导航栏上。另一种是,提交按钮底部悬浮。如下图所示: 内容采集来自9fen.net

2-171 本文来自九分网络

copyright 9fen.net

方案1.0,如果提交按钮放在表单之后,那么用户的视觉流和操作感觉是一致的,流畅而自然。但是会出现一个问题,用户在输入信息时,键盘调用会遮挡到提交按钮。Android手机上的输入法都可以点击输入法上的按钮将键盘推下去。而iOS 原生输入法没办法推下去,只能点击其他非编辑区域才能推下键盘。这样就显得很麻烦,用户可能会忽略掉提交按钮。

本文来自九分网络

方案1.1,解决了提交按钮会被键盘挡住的缺陷,但是视觉流和操作行为错乱,用户在屏幕底部输入完成之后,视觉和手指要返回到顶部操作。

内容采集来自9fen.net

方案1.2,提交按钮底部悬浮,解决了方案1.1的视觉流和操作紊乱的问题,解决了方案1.0提交按钮被隐藏的问题,但是当输入文本,调出键盘时,依旧会被挡住。 九分网络

3-154

copyright 9fen.net

九分网络

使用底部悬浮按钮的场景是操作按钮非常重要,例如手机淘宝的立即购买和加入购物车。

九分网络

同时底部悬浮按钮不适用于文本操作类。例如文章说的长表单文本输入。当输入文本,调出键盘时,依旧会被挡住。 九分网络

底部悬浮按钮适用于非文本输入的使用场景。从手机淘宝、新浪微博可以看出,适用于在界面中非文本输入、提供一个功能入口或者是界面非文本输入的选择信息的确认。

九分网络

3.主方案2的设计讨论 主方案2的设计优缺点

优点:与主方案3相比不同分组表单之前切换查看信息方便快捷。申请流程的首页简洁,填写信息全部隐藏到下一级界面。

www.9fen.net

缺点:来回跳转,操作负荷较大,会把用户绕晕。 九分网络

4-117

本文来自九分网络

本文来自九分网络

在方案2.0中用户填写完成的分组和未分组填写分组区分不开,将方案2.0进行优化,例如填写完成后,会出现已完成的标签,提示用户已完成和未完成不同的状态(如方案2.1)

内容采集来自9fen.net

4.主方案3的设计讨论

标签: APP设计 设计理论 经验 UI设计经验

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----