致产品设计师:页面中“返回顶部”还要么?

  国内的产品设计师/UI设计师们在设计稍长的网页时,经常会加个「返回顶部」的按钮,形式有固定在Bottom底部的,有飘浮的小图片(居多)。

  来看两个示例图:


  图1:新浪微博的返回顶部


  图2:腾讯微博的返回顶部

  有多少人会去用“「返回顶部」的按钮”呢?

  这是一个设计的细节、体验的细节,但表现出的意义却是这个功能真的是用户需求吗?是不是某个产品设计师YY出来的,继而各个平台互相抄袭,形成了一股“「返回顶部」的按钮”的风暴,它存在的意义在哪儿?

  下面是在网上搜集的关于「返回顶部」按钮的讨论:

  问题:国外的很多网站,即使很多时候页面会拉的很长,也没有「返回顶部」这个按钮

  Q1:这个问题单独抽出来本身就有问题。割裂了具体环境如何能判断“返回顶部”按钮好还是坏呢?

  不是所有页面很长的网站都需要返回顶部。关键看这个网站的布局如何,返回顶部做什么,需不需要时常返回顶部。

  有些网站本身就有相对屏幕定位的菜单,已经可以解决各种跳转,即便页面很长也不需要返回顶部。比如google图片搜索。鼠标移动去点LOGO刷新页面和点返回顶部按钮的距离差不多。

  有些网站顶部并无关键的操作按钮。比如所有菜单链接、发微博框什么的。返回顶部干什么去。

  有些网站局部内容有折叠展开按钮,内容长折起来就是了,不用特意返回顶部。

  另外不排除有些网站就是希望你多看几遍,不要走。希望你慢慢滚滚动条,慢慢看。

  还要说明的是,很多国外网站都有返回顶部链接。并不是都没有。

  最后还有一个操作习惯问题。比如我个人习惯键盘 PageUp,PageDown,Home,End。速度还快些。返回顶部按钮就是无用的。

  电脑屏幕和手机也不一样。

  Q2:那个啥……区域差别应该算一点,还有就是习惯问题

  中国人已经习惯有这种auto的方式去返回,其实国外有很多用户习惯跟国内不一样,也不是很好的用户体验。这个“返回顶部”我觉得还是比较好滴~

  Q3:其实返回顶部的按钮,设计的初衷是为了用户看完了当页的所有内容,需要更换频道或更换其他页面的需求时,返回顶部点击“首页”“私信”什么的快捷键,如果取消返回顶部,用户需要手动拉滚动条或鼠标滚轮,对于用户的“懒”是一种考验,如果将网站的header固定到浏览器顶部,没有“返回顶部” 也挺好。

  老外没有返回顶部,我想是两方面考虑:

  首先,他们希望阅读是从上之下的,不需要打扰。就像你看一本书,不是说看完一章,还要重新回到目录,选择下一章,直接翻页看就好了。

  其次,阅读完毕,点击固定的header,不用返回顶部再点啦。

  老外没有返回顶部,header也不固定的,用户体验肯定不好,不过,苹果的机器,触摸板向上一拉,回顶部并不麻烦。

  Q4:其实很少会有人去用那个按钮的,有些是忽略了,因为过多关注内容部分了;有些是习惯,怎么下来的,就怎么上去,上去的过程中还可以对重点内容重复阅读一遍;

  就我个人,知道这个按钮的功能,但也很少会用,记忆中只用过1、2次,所以没有也罢,keep it simple and stupid。

  注:本文部分内容来源于百度产品、知乎上的内容

  作者:修泽

  文章来源:一个产品经理的博客 转载请注明出处链接。

时间: 2024-11-02 17:26:28

致产品设计师:页面中“返回顶部”还要么?的相关文章

javascript实现博客园页面右下角返回顶部按钮

 这篇文章主要介绍了使用javascript实现博客园页面右下角返回顶部按钮的思路及源码,非常不错,这里推荐给小伙伴们     博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素.所以我们选择使用fixed来实现图标固定.   absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进

网页中返回顶部代码(多种方法)另附注释说明_jquery

下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 复制代码 代码如下: <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) 复制代码 代码如下: <a href=&qu

web网页中返回顶部怎么实现?

问题描述 web网页中返回顶部怎么实现? 就像csdn的这个.是浮动的.到一定的位置才会显示出来.!!!!!!!!!!!!!!!! 解决方案 scroll事件中判断document.body.scrollTop或者document.documentElement.scrollTop,超过多少显示浮动导航 javascript滚动到导航条时如何固定在顶部 解决方案二: http://jingyan.baidu.com/article/6181c3e0678e1a152ff15372.html 解决

javascript中返回顶部按钮的实现

 炫酷的返回顶部功能 js核心代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "g

javascript中返回顶部按钮的实现_javascript技巧

炫酷的返回顶部功能 js核心代码 window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "go" ); if( t >= 300 ) { top_div.style.display = "block"; } else { top_div.

wordpress怎么在页面加返回顶部功能

 代码如下 复制代码 <script language="javascript" type="text/javascript"> var w3c = (document.getElementById) ? true : false; var agt = navigator.userAgent.toLowerCase(); var ie = ((agt.indexOf("msie") != -1) && (agt.ind

javascript实现博客园页面右下角返回顶部按钮_javascript技巧

博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧.      一. 图标右下角固定. 1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素.所以我们选择使用fixed来实现图标固定. absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right"

js 页面增加返回顶部功能

 代码如下 复制代码 // ==UserScript== // @name           Scroll To Top // @namespace      sunnylost // @include        http://* // @include        https://* // ==/UserScript== (function(global) {  if(global !== window) return;    function bind(context, name)

设计的细节体验的细节:返回顶部按钮意义何在

文章描述:产品设计师,"返回顶部"还要么? 国内的产品设计师/UI设计师们在设计稍长的网页时,经常会加个「返回顶部」的按钮,形式有固定在Bottom底部的,有飘浮的小图片(居多). 来看两个示例图: 图1:新浪微博的返回顶部 图2:腾讯微博的返回顶部 有多少人会去用"「返回顶部」的按钮"呢? 这是一个设计的细节.体验的细节,但表现出的意义却是这个功能真的是用户需求吗?是不是某个产品设计师YY出来的,继而各个平台互相抄袭,形成了一股"「返回顶部」的按钮&qu