前往主页Meilisearch的标志
返回文章
2022年12月5日

导航搜索结果:分页 vs 无限滚动 vs 加载更多

了解导航搜索结果的不同方式,并找出适合您的方法。

Maryam Sulemani
Maryam SulemaniMeilisearch 技术文档撰写人
Navigating search results: pagination vs infinite scroll vs load more

Meilisearch v0.30 已发布,带来了创建带编号页面选择器的功能。您可以在我们的发布博客文章中阅读更多关于v0.30的新功能和更新。本文将介绍导航搜索结果的不同方式,以及每种方法的优缺点。

什么是分页,以及有哪些常见的替代方案?

假设您去一个电商网站购买一双新鞋。如果页面一加载就显示700双鞋供您选择,那会相当令人应接不暇——更不用说,获取每一双鞋的数据肯定会拖慢网站速度。

为避免这种情况,大多数网站会将搜索结果分成块(例如页面),并根据用户的输入每次加载一定数量的结果。

显示大型数据集主要有三种方式:分页、无限滚动和加载更多。每种方法都有其优缺点,使其适用于特定的用例和内容类型。例如,谷歌使用带编号的分页,使得再次查找特定结果变得更容易,而Twitter、Facebook和Instagram则使用无限滚动来让用户持续沉迷于屏幕。谷歌在移动设备上使用加载更多来显示搜索结果。

从一种分页类型切换到另一种,可以彻底改变用户体验。 想象一下,一觉醒来发现Twitter变成了分页版本,您必须不断点击“下一页”按钮才能查看更多动态(谢谢你,埃隆)。这会彻底改变您与网站的互动方式!

在选择如何显示搜索结果时,您需要决定一次向用户显示多少内容,他们需要采取什么行动才能查看更多内容,以及再次查找特定结果的便利程度。

分页

分页通过将搜索结果分解为独立的页面来工作。分页界面主要有两种类型:带编号的分页,您可以在每个页面底部找到一个带编号的页面列表;以及无编号的分页,您可以使用“上一页”和“下一页”按钮在页面之间导航。

分页是显示搜索结果最流行的方式之一,在电商网站上尤为常见。分页将内容分解,使其更容易处理。由于每个页面都是独立的,用户可以轻松返回到他们喜欢的项目或与他人分享。这有助于用户搜索特定内容,而不是浏览无休止的项目列表。

分页最大的缺点是大多数用户不会查看前几页以外的内容,因此永远无法看到更多结果。您上次访问谷歌搜索结果的第二页是什么时候?

由于每次新页面加载都会替换结果,用户需要频繁切换页面来比较结果。此外,分页对移动设备不是很友好。移动用户更喜欢加载更多或无限滚动,因为它们更直观。它还需要用户进行额外的操作:点击“下一页”按钮并等待页面加载。这可能还会给人一种分页速度慢的印象。

带编号的页面选择

页码为搜索过程增加了清晰度,并引导用户找到他们正在搜索的内容。带编号的页面选择提供了许多优势,例如

  • 可以向用户显示总结果页数,让他们估算出找到特定项目需要多长时间。(“我有25页的鞋子需要筛选!”)
  • 有了带编号的页面,很明显有些页面的相关性高于其他页面。(“我在前五页没有找到那些鞋子,所以这个网站可能不卖。”)
  • 用户可以记住项目的位置,带编号的页面允许他们更快地返回。(“我喜欢第3页上的粉色鞋子。”)
  • 用户通常可以在会话中途暂停,并从上次离开的地方继续。(“我昨天停在第5页。”)

“上一页”和“下一页”按钮

在无编号分页中,用户通过“下一页”和“上一页”按钮进行导航,而不是通过带编号的页面列表。这种带编号分页的替代方案常用于移动设备显示,因为没有足够的空间显示页码。由于只有两个按钮,它提供的精度较低,用户无法跳转到特定页面。然而,它提供了更好的性能,因为它无需计算搜索结果的总数。

无限滚动

在过去十年中,由于智能手机的兴起,无限滚动变得越来越流行。它在用户滚动时无缝加载更多内容,减少了摩擦。它也比分页更直观;您只需不断滚动即可查看更多内容!此外,由于所有内容都加载到单个页面,它可能比传统分页看起来更快。

![](/blog/content/images/2022/11/IMG_3391.GIF

无限滚动最大的缺点是可用性差。页面长度无限增加,使得很难再次找到之前查看过的结果,用户也无法书签或分享列表中的特定项目。随着加载内容的增多,页面性能会变慢,使页面“变重”。同时,网站页脚可能无法访问,因为无限滚动会随着内容的加载不断将其向下推。由于Googlebot无法模拟滚动,无限滚动也对SEO产生负面影响。

然而,到目前为止,最大的影响在于用户行为。在某个时刻,无限滚动的用户将停止关注单个结果,转而更多地专注于滚动本身,导致参与度下降。您可以在Baymard Institute关于桌面和移动设备产品加载设计模式的研究中阅读更多相关内容。

基于以上所述,无限滚动可能不是电商网站的最佳解决方案。您如何找到15次滚动前您喜欢的粉色鞋子呢?

有一种用例是无限滚动无法被超越的。对于那些主要目的是让用户在页面上停留尽可能长时间(无特定目标)的娱乐网站来说,无限滚动几乎可以保证更长的网站停留时间。这就是为什么无限滚动与社交媒体以及其他依赖广告或数据收集的商业模式紧密相连的原因。

加载更多

与无限滚动类似,加载更多是一种移动友好的选项,通过无限扩展一个页面来实现。然而,与无限滚动不同,加载更多允许用户通过点击页面底部的“加载更多”按钮来选择是否查看更多结果。这一关键区别赋予了用户更多的控制权,例如,使其更容易访问页脚或追踪特定结果。研究表明,它还增加了用户对每个独立项目的关注度。

加载更多与无限滚动有许多共同的缺点,例如页面性能不佳。与无限滚动一样,它对SEO来说并不理想,因为Googlebot无法点击“加载更多”按钮。这意味着它无法抓取或索引您的所有内容。

那么,我该使用哪种?

简短的答案:这取决于您想要的产品体验类型。

分页

  • 您的用户正在寻找高度具体的结果
  • SEO对您非常重要

无限滚动

  • 您正在建设一个社交媒体网站
  • 您的用户希望浏览大量内容

加载更多

  • 您想将内容隐藏在付费墙后
  • 您想构建一个道德的移动体验
  • 您想同时获得分页和无限滚动的一些好处

或者您可以选择混合模式!以宜家为例:他们使用“加载更多”按钮,但同时也显示搜索结果总数和进度条,让用户能够看到他们已经查看了多少结果。

虽然我们今天讨论了显示搜索结果的三种主要方式,但它们并非一成不变。归根结底,您的目标是帮助用户找到他们所需的内容。如果您清楚自己希望通过搜索导航界面实现哪些关键目标,并希望避免哪些陷阱,那么您或许能够设计出比以往任何时候都更好的东西。祝您好运,并告诉我们您用Meilisearch创造了什么!

How to build a search engine in PHP: Step-by-step guide

如何在PHP中构建搜索引擎:分步指南

在这份可操作的分步教程中,学习如何在PHP中轻松构建搜索引擎。

Ilia Markov
Ilia Markov2025年6月5日
Building a JavaScript Search Engine: Tutorial, Examples & More

构建JavaScript搜索引擎:教程、示例及更多

在这份可操作的分步教程中,学习如何在JavaScript中轻松构建搜索引擎。

Ilia Markov
Ilia Markov2025年6月3日
How to Make a Search Engine in Python: Step-by-Step Tutorial

如何在Python中制作搜索引擎:分步教程

在这份详细的分步教程中,学习如何在Python中轻松制作搜索引擎。

Ilia Markov
Ilia Markov2025年5月29日