详细解析网页浮动条设计的细节体验

2022-02-03 0 586

顾名思义,浮动条是在页面沿一定轨迹浮动的表现形式。

不再固定在某一指定位置,而是随鼠标拖动而动,巧妙的设计会使得在不妨碍网友浏览的同时,满足其增加曝光率的需求。其特殊的表现形式与传统的形式相比更能聚集网络访客的眼球,使得其影响力更深三尺。但是过度的曝光不加思考的一味所有页面都用浮动条或者叠加大量功能入口,有可能造成用户使用上的视觉干扰和产生厌烦的心理。

可用于浮动条上的功能主要有————回到顶部、在线客服、用户反馈/调查问卷、分享。

回到顶部

可以帮助访客在浏览页面时,尤其是页面底部没有导航的网页,重新找到导航,或者重温一遍网页。主要用于页面比较长,需要回到顶部进行一些操作。

在线客服

基于网页的即时通讯工具,它不需要安装任何软件,只需要在浏览器窗口就可以进行实时交谈。常出现在用户在流程中比较容易产生疑问的页面。

用户反馈/调查问卷

想倾听用户对网站或业务的想法和期望,使用这些信息来改善最常使用的产品和服务,解决用户在使用中的问题,更优化的实现用户期望。用于新业务上线,改版,AB testing…

分享

使浏览者可以方便的将网页分享到一系列SNS站点。通过分享按钮,网页将更容易被百度搜索引擎所发现,从而有机会带回更多的流量。同时也可以增加互动,拉近网民与网站的距离。常出现在活动页面,产品详情页,特色版块等。

综合携程网站现状,我的建议是:

全站首页和机票、酒店、高铁频道首页都比较短,内容较密集。用户还在建立网站印象阶段。不建议放任何浮层。

度假的首页及二级页面都比较长,且底部也无导航。建议增加”回到顶部”,可以帮助用户浏览。

惠选、团购等携程的活动版块及特色产品。建议增加”分享按钮”,吸引用户,增加网站流量。

预订流程中各个功能的使用大致如下图:

详细解析网页浮动条设计的细节体验

目前网上的浮动视觉样式、位置并不统一,也没有任何的逻辑。看了一下其他的网站,也大多如此。

详细解析网页浮动条设计的细节体验

我个人比较赞同的浮层设计是全站统一,局部变化。不要各个页面都杂乱无章,也不要完全一味的追求所有页面功能设计一模一样。

综合研究发现,我定义的浮层规则是:

回到顶部

业务相关页面:当业务相关的版块页面长度超过两屏,则显示浮层。

流程相关页面:需要用户回到页首进行操作功能的,页面长度超过两屏的,显示浮层。

在线客服

业务相关页面:当特色业务相关的版块上线时,用户需要培养习惯时,则显示。

流程相关页面:用户在操作过程中容易产生疑惑,错误的页面,显示。

用户反馈/调查问卷

业务相关页面:当特色业务相关的版块上线、改版时,则显示。

流程相关页面:需要用户进行复杂操作过程的页面,显示。

分享

业务相关页面:特色业务版块、具体的产品、网站促销活动时,则显示。

流程相关页面:不需要。

补充规则(也是我认为最重要的一点):

整个浮层功能不能影响用户的正常浏览习惯。

:本文采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可, 转载请附上原文出处链接。
1、本站提供的源码不保证资源的完整性以及安全性,不附带任何技术服务!
2、本站提供的模板、软件工具等其他资源,均不包含技术服务,请大家谅解!
3、本站提供的资源仅供下载者参考学习,请勿用于任何商业用途,请24小时内删除!
4、如需商用,请购买正版,由于未及时购买正版发生的侵权行为,与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中,请提前注册好百度网盘账号,下载安装百度网盘客户端或其他网盘客户端进行下载;
6、本站部分资源文件是经压缩后的,请下载后安装解压软件,推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益,请邮件联系: 442469558@qq.com 进行处理!

猪小侠源码-最新源码下载平台 前端教程 详细解析网页浮动条设计的细节体验 http://www.20zxx.cn/328881/xuexijiaocheng/qdjc.html

猪小侠源码,优质资源分享网

常见问题
  • 本站所有资源版权均属于原作者所有,均只能用于参考学习,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,建议提前注册好百度网盘账号,使用百度网盘客户端下载
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务