2022 年 12 月 05 日

导航搜索结果：分页、无限滚动和加载更多

了解导航搜索结果的不同方式，以及哪种方式可能适合您。

Maryam Sulemani技术文档撰写 @ Meilisearch

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 研究所的研究中阅读更多关于桌面和移动设备上加载产品设计模式的信息。

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

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

加载更多

与无限滚动类似，“加载更多”是一种移动设备友好的选项，它通过无限扩展一个页面来工作。但是，与无限滚动不同，“加载更多”允许用户通过单击页面底部的“加载更多”按钮来选择是否要查看更多结果。这种关键的区别为用户提供了更多的控制权，例如，使用户更容易访问页脚或跟踪特定结果。研究表明，它还可以增加用户对每个商品的关注度。

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