分页器vs无限加载

“我到底要用分页器呢,还是不断自动加载来设计内容呢?”

每个设计师都会遇到这个问题。当然,这两种方式各有利弊,我们来看下这两种方式分别适用于那些场景以及有什么利弊。

无限加载

无限加载是一种当用户在浏览大波信息的时候,滚动到内容底部,可以不停地自动加载内容的技术。当然它看起来好像挺好的,用户不用点击,系统自动加载内容。但是这种方式也不是一劳永逸的。

优势1:用户沉浸与内容发现

当你使用滚动作为交互方式来让用户浏览信息,那么这可能会让用户花更多时间在你的产品上面,从而增加用户的参与度。随着很多社交媒体应用的流行,这种一直滑动/滚动页面自动加载内容的方式,让你的用户可以开心地浏览信息,不需要额外的点击。

无限加载这种方式,在“发现内容”这种场景下,几乎是一个“必须有”的功能。这时候用户并不需要搜寻指定或明确的内容,而需要在海量量的信息中通过浏览寻找到他们合适的/喜欢的内容。


Pinterest

举个例子,你会看到Pinterest上面,用户并不需要把所有内容一一看完,因为内容是实时更新的,并且更新很快。所以平台尽可能地展示更多内容给用户,通过滚动无限加载的方式,让用户可以快速扫描并且消化这些内容。

优势2: 滚动比点击方便

不管是在PC断还是移动端,一直滚动都会比点击/触屏来得方便一些。举个例子,就像一些教学文案,长篇的图文,滚动加载内容的体验肯定会比点击翻页更好一些。

优势3: 滑动在移动端是很友好的交互方式

越小的屏幕,内容长度会更长,需要滚动的距离就越长。当人们越来越倾向于在移动端浏览内容,特别是社交媒体,这一趋势使得越来越多人习惯于通过滚动来加载内容的方式。这种交互方式让他们觉得不用思考,渐渐习惯。所以就算是换了其他设备,他们有时候也会期望有这种交互方式。

劣势1: 需要考虑页面性能和设备资源

页面加载速度基本是好的用户体验的必备条件。越来越多研究发现,页面加载速度越慢,你的用户离开这个页面的频率就越高,或者直接删除App。所以当页面加载出来的内容越多,越考验当前页面的性能,很可能会导致这个页面变卡,体验变差。

另外一个要考虑的是设备的资源和性能了。有些内容涵盖了大量图片,设备的资源如果不够,可能也会让加载速度变慢。

劣势2: 搜索和页面定位

当用户在大量的信息中浏览到某个地方的时候,他们没办法把这个地方定位住,等下再回来这个地方。或者当用户离开这个站点的时候,又回来,可能就找不回刚刚浏览的地方在哪里了,而且大部分时候页面又重新回到了顶部了,然后可能又要一直一直往下滚动,等待内容加载出来。

劣势3: 没有明确意义的滚动条

通过滚动来加载内通,不管在什么平台上,都会附带滚动条。然后这个滚动条并不能告诉你接下来还有多少内容。每次你可能都会想,快到底部了吧?怎么还没有?或者,如果已经使用了滚动条的话,可以优化一下,让滚动条可以体现出真实的页面长度,让用户知道大概总体的页面长度/内容长度。



劣势4: 跟页面footer冲突

大部分站点都会在底部设置footer来展示网站或者公司的信息。如果采用无限滚动这种方式,那么footer就可能要想办法挪到其他地方去了。或者,不自动加载,内容浏览到底部,加一个“手动加载”的按钮,来避免这种冲突。


Dribbble - 手动点击加载


分页器

分页器就是一个控件,可以把一大片内容分成多个“页面”。


Google搜索结果页的分页器

优势1: 传达明确的信息

当用户在一些结果列表里面搜寻一些特定信息,而不是毫无目的地浏览时,分页器会是一个很好的交互方式。以google搜索结果页为例子, 用户可以决定要看多少个结果页。



优势2: 控制感

无限加载就像一个无终止的游戏,不管你滚动到哪里,感觉永远都没有尽头。当用户通过分页器知道结果总量有多少的时候,对比无限加载的方式,用户更加能够从中作出更明智的决定。根据HCI心理学一个教授的说法,“能够到达终点,会让人觉得有控制感。” 研究还表明,当用户看到有限的并且相关的信息在一起,他们更容易地知道,他们想要找的内容到底是不是在这里。

同时,一般用户可以从分页器看出来内容有多少,结果有多少页(当然前提是内容是有限的),用户就会对自己在这上面花费多少时间,心里有数。

优势3: 定位浏览位置

当用户看完大量信息之后,想要找到刚刚看到的一个条目时,分页器就提供了让用户方便回退的方式。用户可能不太记得具体那个条目在第几页,但是能大概猜测出在哪里,通过点击分页器,就可以追溯到之前浏览过的位置。

对于商业性网站和应用来说,分页器提供了一个很好的体验,那就是当用户想要回去刚刚离开的位置,或者把两个距离比较远的物体进行比较,就可以通过分页器来定位到。

劣势:需要多一个点击

很明显的,当用户想要看下一页的内容,他必须要去点击分页器中的下一页。最大的问题是,现在很多网站默认每一页会给用户展示很少的条目(可能10-20条),如果页面性能影响不大的话,可以一次过展示多些条目,这样用户就可以点击少一点。或者让用户自己选择每页可以展示多少(一般是展示更多,比如100条),这种情况下,他们大部分人可能习惯于通过页面搜索字段(快捷键 Cmd+f)来更快找到他们想要的内容。


用户可以自定义每页展示的条目数量

什么时候用分页器/无限加载?

其实只有少量的场景中,无限加载的交互方式是更佳的。最佳的场景是在当用户想要浏览/扫描海量的UGC(用户生成的内容)时(比如微博,Facebook,推特,抖音等),这时候用户是没有明确的意图想要找到什么。相反地,分页器的最佳使用场合是,当用户是有目标的,想要找到明确的条目或信息的时候。

还有就是,内容形式也可以作为选择这两种交互方式的参考。你的内容是图像多,还是文字多?哈,熟悉Google 的朋友可以发现,Google搜图片用的是无限加载的方式,因为用户可以通过快速扫描图片来寻找而不是通过读文字。而正常的Google搜索结果页中,会有一个典型的分页器在底部。那是因为用户需要更多时间来浏览文字。


Google图片搜索结果页面

结论

总之,设计师们应该权衡利弊来选择合适的交互方式,这也取决于你的产品类型和你想用什么方式来呈现内容。