分页器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图片搜索结果页面

结论

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349