一、 返回顶部悬浮按钮的出现

返回顶部悬浮按钮大家都不陌生,在pc端浏览网页的时候都会在右下角出现,方便用户点击后直接返回到顶部。产品功能都是为了解决用户的需求而出现的,返回顶部悬浮按钮也是如此。那么这个小小的悬浮按钮解决了用户什么痛点呢?

  • 纵向页面太长,用户重新回看顶部内容时需要较多的滚动。

  • 对页面顶部控件有需求,如搜索框、确定按钮等控件放置在页面顶部。

随着智能手机的普及,许多网站也纷纷开发出移动端的app,作为功能之一,返回顶部悬浮按钮也跟着迁移到了移动端。但不同于pc,手机屏幕寸土寸金,因此在悬浮按钮单一功能上做出了改进,加入了动画交互(如下图左下角手淘按钮),随着页面的不断滑动悬浮按钮会产生动画形变,增加了和用户的互动,也提醒用户这个功能按钮的存在。这就是目前返回顶部悬浮按钮在移动端的现状。

二、 哪些类型的应用需要返回顶部

返回顶部的出现是为了页面太长的问题,那些会出现长页面的应用会加入这个功能,我们可以总结出以下这几个类型:

  • 购物类:如淘宝、京东等,商品图片展示和文字描述会占据较大空间,因此需要增加页面的长度。

  • 美食佳饮类:同购物类应用类似。

  • 新闻类:新闻常常以图文并茂的形式出现,因此也需要用户不断滑动才能看完全文。

相信大家都能看出这几类应用类型的相同点,都是图文并茂,并且需要足够的展示空间。也就是常说的“瀑布流”展示形式。说到“瀑布流”,就不得不提我们的微信朋友圈了。

三、 微信朋友圈的返回顶部

随着社交圈的拓宽,每个用户添加的微信好友越来越多,每天要“批阅”的朋友圈也越来越多,瀑布流要展示的内容大有“飞流直下三千尺”的气势,自然也会出现页面过长,回滚过慢的情况。微信的产品经理们也注意到这一点,很快,微信版的返回顶部功能也面世,但不是采用传统的悬浮按钮的形式,而是推出了双击顶部返回功能。

相比悬浮按钮,双击顶部的设计显得更加聪明:不需要在页面中“塞入”一个悬浮按钮,页面能够保持简洁;将顶部标题本身变成“按钮“,使得页面更具整体化。不过这个聪明的交互方法可不是微信原创,最先使用的应该是苹果的ios系统。

四、 苹果ios系统的返回顶部

从iphone4 开始,苹果手机开始风靡,ios操作系统也开始影响人们的生活。随着系统的不断更新,苹果的产品经理们也注意到了用户返回顶部这一痛点,于是点击状态栏返回顶部的功能应运而生。

这一人性化功能的推出,让返回顶部不再是局限于一个app内,而是扩展到整个系统,这一功能也使得众多手机厂商效仿,经笔者测试,目前魅族、华为都适用,小米不是点击状态栏,而是第三方插件实现此功能。

受微信和操作系统的影响,如今大部分的应用软件都采用新的返回顶部方式,以下是几款软件的对比。

五、 部分软件返回顶部的对比

笔者分别从购物类、美食类、新闻类中选择几个应用作为代表,从上面的对比图我们可以看出,其他的应用都使用了点击顶部返回的交互方式,只有淘宝、京东等购物类软件仍然保留返回顶部的悬浮按钮。那么,为什么淘宝京东仍保留悬浮按钮这种形式呢?悬浮按钮还有存在的价值吗?我们不妨来探究一下。(京东淘宝互为竞品,相似性较大,因此这里只选择下载人数多的淘宝为例)

移动端的返回顶部悬浮按钮还需要存在吗?相关推荐

  1. 【前端】HTML底部返回顶部悬浮按钮

    CSS样式: .back-to {bottom: 55px;overflow: hidden;position: fixed;right: 10px;width: 110px;z-index: 999 ...

  2. HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮

    博客园页面添加返回顶部 TOP 按钮 TOP 按钮 进入网页管理 -> 设置 在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式 此处可 ...

  3. 使用 React Hooks实现一个返回顶部的按钮

    [回到顶部]是许多网页非常常用的按钮,通常放在长页面的右下角,点击可以直接让页面回到顶端. 要实现这个组件,需要以下几个要点: 设置定位 按钮定位设置为position: fixed,并且设置位置到屏 ...

  4. axure下移固定地方_axure固定元件位置 教程:使用axure动态面板制作一个返回顶部的按钮...

    许多网站上都有一个"返回页首"按钮.无论屏幕如何滚动,"返回顶部"按钮始终浮动在固定位置,随时可用.一旦点击它,他就像一个小小的火箭,摇晃起来,页面将返回页面顶 ...

  5. 手机端html返回顶部,移动端H5页面返回顶部按钮无效问题的解决

    一直都是在PC端写返回顶部的按钮,今天的项目是移动端,页面内容比较多,也有滚动顶部的功能,于是一开始用了原生的的写法,没有用,经过调试,滚动时获取不到滚动的高度.接着又换了一个gototop.js插件 ...

  6. js编写简易返回顶部按钮

    之前ui设计让我做个返回顶部的按钮,我一定头绪都没,感觉真要加上这个功能,自己编写就得一个下午,工作量大为由,所以就推脱了; 当静下心,有时间捣鼓之后才发现原来so easy!!! 以下是我的js代码 ...

  7. html5 回到顶部按钮,“返回顶部”按钮效果

    "返回顶部"按钮效果 pc端: 返回顶部 .wrapper { width: 1150px; height: 3582px; border: 2px solid black; } ...

  8. html页面返回顶部如何实现,如何实现“返回顶部”的页面效果

    在很多网站中,如果滚动到页面下方,会在右下角一个固定位置出现"返回顶部"的按钮,点一下浏览器滚动条就自动回到顶部了,今天研究了一下,实现的效果如图: 首先必须感谢知乎,因为这个按钮 ...

  9. html页面刷新回到顶部_HTMl页面中返回顶部的几种实现小结

    这篇文章我们来讲一下在网站建设中,HTMl页面中返回顶部的几种实现小结.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 最近在开发网站需要制作返回顶部按钮,但是我主要为后端开 ...

最新文章

  1. HBase 在京东人资数据预处理平台中的实践!
  2. 汪卫华院士:无序中找有序 复杂中寻规律
  3. PS调出通透唯美阳光外景女生照片
  4. linux 挂载错误 mount: unknown filesystem type LVM2_member 解决方法
  5. 哦豁?这个程序员…… 有、东西!
  6. 为自己而活,这很难吗?
  7. lol新服务器怎么发信息,《英雄联盟手游》国服新消息 最新玩法发布
  8. 第十节:实现vue组件之间的通信
  9. ubuntu croncab定时任务 shell脚本单独可行 定时任务执行命令不可行
  10. CVPR 2021 论文开放下载了!
  11. 管理端口_内网渗透 | 红蓝对抗:Windows利用WinRM实现端口复用打造隐蔽后门
  12. 开课吧Java课堂:什么是抽象类?如何使用抽象类?
  13. 从socket中可以获取信息
  14. html 伪元素原理,CSS伪类伪元素详解
  15. iPhone NFC刷卡没反应的原理剖析和解决方案
  16. Managed DirectX中的DirectShow应用(简单Demo及源码)
  17. 信息发布类网站后台界面设计一点思考(整体布局)
  18. 汽车无钥匙进入系统工作原理、汽车无钥匙进入系统简介
  19. 强大的Android系统,可自由修改手机型号、SDK版本号等信息。
  20. 网络爬虫-tx滑块验证码

热门文章

  1. ripples-library@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.j
  2. 中国石油和化工行业人工智能联盟正式成立;饿了么入局无人值守零售,取名“e点便利”...
  3. ubuntu上播放PCM音频
  4. gcc指定头文件搜索路径及动态链接库搜索路径
  5. 苹果怎么用计算机,苹果电脑itunes怎么用,教您怎样使用
  6. 计算机类国外经典书籍
  7. 为omap3530使用BusyBox构建linux文件系统及添加telnet服务
  8. ensp模拟企业网络
  9. 麒麟990和骁龙865哪个好
  10. 运维堡垒机的起源、发展和未来趋势