无限滚动之利
得益于AJAX和懒加载技术,最初由Pinterest发明的瀑布流式布局开始在国内流行开来,开始只是图片分享类网站采用,而基于此演变出的无限滚动更是风靡各类APP和社交媒体、电商网站。
极优的浏览体验
如今无限滚动这一交互设计方案已经被各种类型的网站和APP所采用,早已不再新鲜,成为了一种十分常见的设计模式。
其首要好处在于:用户只需要下拉,网页就能自动加载新的内容。
是的,人就那么懒,往下一拉(滚动或用鼠标拖拽或用手指触摸上拉拖拽)等加载,十分的舒服。这无疑很高效,极大的减少了用户的操作成本和时间成本。
传统网页上需要点击”下一页“或”载入更多“的操作步骤就这么直接了当的被秒杀了。用户不再需要点击复杂的页码导航条就能看带新的内容。
往往就是这么一个微交互能影响整个应用、网站的用户体验,懒果然是人类进步的阶梯,尤其在这个快餐时代,懒就是生产力,快就是硬道理。
沉浸式浏览
传统网页,用户在浏览过程中,需要点击”下一页“或”载入更多“来查看新内容。这步操作无疑打断了用户在浏览时的沉浸度,也花费了不少时间去点击按钮,然后等待页面重新加载。
无限滚动却只要简单的往下拉,然后等待内容呈现就行了,花费的仅仅是网络加载新内容所花的时间。用户可以更好地关注内容,而不是思考如何操作在各式各样的导航条。
对移动设备友好
对触屏设备用户来说,下拉查看是一个不能再正常的操作了。无限滚动正符合了这样的操作习惯。用户完全不用学习怎么使用无限滚动,只要下拉就会发现页面/应用在自动加载新的内容。
但无限滚动显然并不适用于所有网站。
无限滚动之弊
谈完以上优点,现在谈谈缺点。
难以查看页脚
举个例子,当我试图在新浪微博首页(未登录状态)寻找通常网页页脚应存在的官方信息而下拉网页时,网页却开始自动加载新的微博内容。本来下意识的觉得应该自动加载两三次就停止了,没想到随着我的下拉,内容也在不断加载:每当页脚内容一出现,网页也开始自动loading载入新内容,页脚就闪现而过变得离我越来越远,滚动条也越来越长。
仿佛在考验我的手速和网速一样,让我十分抓狂。以至于我不断地在其各分栏跳转,试图找到没有无限滚动、可以点击到页脚的页面。结果发现每个分栏也都是用的无限滚动(心累)。最后不得不直接F12,抓HTML源码看页脚。
无限滚动导致截图都试了好多次才能截到页脚,更何提点到页脚。
这也是我写这篇文章的出发点,因为实在太蛋疼了。虽然这样的情况并不普遍,但随着我的调查,发现也有很少一部分用户在抱怨。
是的,仿佛在考验用户手速和网速的配合。
难以定位
无限滚动的另一缺点在于,用户难以定位看过的内容,且难以返回页首。
在网页的哪一位置?滚动条会随着无限滚动的新内容载入而变得越来越长,想找到之前的内容显然并不简单。也许你会说,CTRL+F啊,多easy!但实际上大多数用户并不是极客,尽管这样来定位内容相当简单,但学习成本还是过高:浏览器什么时候有快捷键的入门演示了?
同时随着网页不断变长,用户想返回页首时就得花费不少力气在往上划了。
相比传统网页使用的分页模式,传统分页模式单页内的内容数量是固定的,用户可以很容易地在一定的内容范围内定位想找的内容,网页长度也是固定的,能很快地一划返回页首。
其页脚也是处于可及位置。
耗费大量资源
无限滚动会使得网页内容变得越来越多,浏览器/应用的资源占用肯定也变得越来越大。
在配置相对低的设备上,优化不好容易出现卡顿、甚至死机崩溃的现像。这简直就是用户所不能忍的:卡顿本来就让人觉得很烦了,一崩溃,请问用户体验是什么东西来着???
合适的解决方案
当然这些缺点也不是并不能解决的。
针对页脚问题
有的网站会在自动加载一定次数过后停止,就像我刚开始等待微博停止载入那样。例如京东官网,在自动加载滚动一定次数后会停止而显示页脚。这其实已经对无限加载进行了改良,但并不完美。如果用户还想继续查看新内容怎么办?怎么在页脚内容和新内容自动载入做较好的权衡?
个人认为,如果在自动加载一定次数过后(5次以上为一循环),自动停止载入新内容,并显示”加载更多“的手动点击按钮以进入下一次循环。(如图对京东附加的改良示图)这样做,既能在抓到页脚的同时,又保持有无限滚动在用户体验上带来的优势。
知乎在这个问题上处理的也不错,将页脚放至另一边。
内容在无限滚动的同时不影响页脚的位置。
针对定位问题
灵感来自Discourse(国外新兴的论坛系统),其很好地做到了如何在无限滚动的情况下又能让用户很好地定位到内容所在位置。
Discourse在页面上又放置了一个竖滚动条,滚动条上以图形显示评论位置的同时,注释了当前所在回复的位置,给出了一个具体位置数字,而不是在无限变长的滚动条上让瞎猜内容位置。
同时应在滚动条旁边附加个返回页首的按钮,方便用户一点就回页首查看其它页面内容,而不是让用户疯狂的费力上划。
当然无限滚动并不能完全适配所有类型的网站,这得看网站的需求和客户类型了。以上表述分析的仅供参考。