手机版网站建设中长表单如何设计才能满足用户体验需求？

作者：网站建设公司 来源：佛山网站建设日期：2020-11-09 浏览： 次

网站建设 - 建站教程 - 网页设计 - 手机版网站建设中长表单如何设计才能满足用户体验需求？
移动端的应用越来越广泛，用户不再局限于B端产品的需求，网站建设中越来越多的企业选择同步做手机版网站。基于客户业务需求，有时候用户在操作过程中，不可避免的需要填写很多表单，针对于移动端长表单，应该如何设计才能给用户更好的体验呢？


佛山网站建设


移动端网页长表单的设计，按照设计思路的不同，一般有三种主方案，如下所示：

佛山网站建设

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

主方案2——将不同的分组表单放在不同的下一级界面，用户填写之后返回；

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

主方案1的设计讨论


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

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

针对于主方案1，用户完成表单完成后，提交按钮有三种主要的设计方法，一种是提交按钮放在表单后，一种是提交按钮放在导航栏上。另一种是，提交按钮底部悬浮。如下图所示：

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

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

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

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

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

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

主方案2的设计讨论

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

缺点：来回跳转，操作负荷较大，会把用户绕晕。

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

主方案3的设计讨论

Facebook曾针对分步注册与非分步注册做过A/B Test，其结论指出分步注册的转化率远高于非分步注册。由此可见，非分步注册强行减少注册页面，不如适当拉长战线，给用户轻负荷的操作，让用户在不知不觉中完成注册流程。

优点：流程分步操作，相对于主方案1，用户操作成功率大幅度提高。

缺点：如果用户操作到了第三步，需要返回步确认填写信息的准确性，那么用户需要两次返回。

佛山网站建设
用户填写的信息做保存(缓存)，用户返回上一步，填写的数据做保留。H5依旧适用，用户填写的数据保存在数据库，用户返回上一步时，同时刷新载入数据库记录的数据。

对于方案3.0和3.1 。下一步按钮不同。究竟采取哪种?方案3.0视觉流和操作流是正常情况，且不存在按钮被键盘挡住，所以方案3.0理想。

网站健身中的移动端长表单设计总结分析：

主方案1、2和3，都有各自不同的优缺点。

一个交互流程的好坏，一个重要的标准之一是让用户顺利完成操作流程，保证操作流程的成功率，才能完成用户的目标。以此标准来看，主方案3是知名的。

接下来探讨一个细节问题，就是提交按钮是放在顶部导航栏、信息内容区内还是底部悬浮？

这里分为4种情况：

情况1：内容区加上操作按钮不被键盘覆盖。建议按钮放在内容区内。

佛山网站建设
情况2：必填的内容未被键盘覆盖，非必填被覆盖，建议操作按钮放在导航栏上，例如朋友圈、QQ空间和新浪微博。

佛山网站建设

情况3：必填的表单超过一屏，建议按钮放在内容区。

放在导航栏上不行的原因有两个：

视觉流错误，从上往下，信息量很大，用户滑动浏览时，会忽略且很难联想点击右上角下一步，行业常见放在导航栏上是因为必填的不超过一屏；

当必填项过多时，要滑动屏幕才能填完。 把按钮放在右上角的导航栏，当用户还没填写完成，那么在按钮放在导航栏上很容易去点击，容易引导用户犯错。

情况4：必填超过一屏，且无非文本输入，建议可适用底部悬浮。


综上，我们在网站建设的过程中总结了很多设计经验，网页设计并非简单的内容组合排版，网页设计需要站在用户的角度思考问题，方便用户，为用户解决问题。更多人性化的体验因素直接影响网页作品的完整度及成熟度。

网页设计

企业网站建设一条龙
找零度飞易网络公司-fslingdu所做php网站建设方案、网站设计、网站制作由北京上海深圳龙岗衢州兰州常州东营南通济宁桂林淮安烟台长春无锡天津昆山苏州合肥贵洛阳昆明天津唐山泉州惠州万州新乡商丘台州哈尔滨太原摄影海口随州学校商丘广东湖南广西江西海南广州企业中小企业武汉南山罗湖福田虎门肇庆汕尾汕头广州佛山成都杭州济南重庆福州西安厦门昆山沈阳青岛徐州郑州南京宁南宁长沙大连淄博石家庄南昌温州珠海番禺顺德南三水高明中山东莞合肥江门嘉兴西宁大良容桂伦教勒流陈村均安杏坛龙江乐从北滘祖庙石湾南庄等地区企业网站建设(广告)公司提供专业做网站价格规划书及营销型网站制作,网站建设基础知识
标签：佛山网站建设网页设计网页制作网站制作企业网站建设做网站佛山网络营销佛山网站优化

上一篇：如何做好网站维护,提高网站访问量

下一篇：如何让微信订阅号推送的内容更加传播性?

网页设计

网站案例

网站案例

建站经验   建站经验

教育网站设计方案
建材网站设计方案
机械网站设计方案
广告网站设计方案
家居照明网站设计方案
环保设备网站设计方案
五金网站设计方案
电器网站设计方案
家具网站设计方案
机械网站设计方案

网站建设费用

网站制作电话：137 1543 1176

网站开发QQ:378780108

E-mail：sale@ilingdu.cn如何制作网站QQ :378780108

网站建设服务

网站建设公司零度飞易是一家专业网站设计,网站制作、seo优化,网站推广,网站建设的佛山网络运营公司。零度飞易在家具网站建设、小家电网站建设、服装网站建设、电器网站建设、机械网站建设等行业的网站设计、网络运营都得到行业认可，在上海、深圳、北京、广州、佛山、中山、东莞地区有着良好的口碑品牌的网站建设公司。我们的使命是打造创新型的网站建设企业，能轻易地开展“互联网+”业务、实现“互联网+企业”的企业愿景。

粤ICP备2025386773号-3Copyright © 网站建设 零度网络建站公司 2026版权所有建站公司RSS订阅 标签地址：佛山市顺德区大良凤翔商业广场二座670

Hi,Are you ready?

准备好开始了吗?
那就与我们取得联系吧

有一个互联网项目想和我们谈谈吗？您可以填写右边的表格，让我们了解您的项目需求，这是一个良好的开始，我们将会尽快与你取得联系。当然也欢迎您给我们写信或是打电话，让我们听到你的声音！

零度飞易 互联网整合营销

地址：佛山市顺德区大良凤翔商业广场二座670

业务QQ：378780108

策划专线：13715431176

E-mail：sale@ilingdu.cn

合作意向表

您需要的服务

现有网站改版
我需要做微信营销
建设全新的企业网站
要找长期合作公司，需要年度服务
我需要做购物商城
我需要做系统平台

您最关注的地方

对功能要求比较高
对设计创意要求比较高
需要可以购物支付
搜索引擎排名

价格预算

1-3万3-5万5-8万8-10万10万以上大型项目需要招标

业务QQ13715431176 提交需求网站建设