【交互探讨】无限滚动还是分页展示，这是个问题！

我们都有过这样的经历。您可能有一个冗长的搜索结果、产品、订单或数据条目列表。虽然您已经使用各种筛选程序以及排序和搜索，但是您还是需要帮助客户查找相关条目。为此，您需要系统支持来加快条目浏览速度。

你天生的设计直觉一开始可能会告诉你要忠于老式的分页。然而，在您意识到之前，您可能会想无限滚动是否是一个不错的选择，因为您拥有非常独特的用例。那么无限滚动真的是个好主意吗？好吧，我们都对无限滚动通常有着强烈的不是很好的看法，而这也有很多很好的理由。

无限滚动存在的问题

无限滚动的问题是众所周知的， 最明显的一个是页面上的大量选项，这些选项通常过于庞大且难以管理， 这真就感觉像是淹没在一个看不到尽头的信息深渊中。一旦显示的选项数量超出了舒适范围，大量用户对此做出的反应就是会完全放弃该页面，而这也就不足为奇了。

此外，我们无法控制滚动的时间和条目。就像没有简单的方法在无限滚动的“旧”段和“新”段之间导航一样，鉴于所有的条目都落入同一个条目流中， 一旦你向上和向下滚动一些条目，除非我们仔细地浏览最后几个项目几次，否则就很难迅速区分我们已经看到的和我们还没有看到的条目。

分页vs. 无限滚动。老生常谈，没有明确的赢家。图片来源：Yogev Ahuvia

有时地址栏中的URL在滚动时会发生变化，但更多情况下不会发生变化。因此，如果我们想稍后继续浏览，我们就需要从头开始。如果我们想将 URL 发送给自己或我们所爱的人以迅速查找一组特定的项目，这通常会很痛苦，因为我们无法真正在列表中的位置添加标记。

如果我们想要到达页脚，每次滚动时，我们都需要滚动快一点，以便在新的项目流进入之前获得一个到达页脚的神奇机会。有时用户发现自己面临滚动挑战而同时按下 Esc键以便及时取消无限滚动。（通常不会成功）

最重要的是，无限滚动会破坏滚动条，因为每次滚动都必须重新校准用户对页面长度的预期。滚动条是对页面实际长度的预示，但是对于新加载的项目，预示总是错误的。更不用说向屏幕阅读器适时告知新加载项目的可访问性问题以及断断续续的连接上的性能问题。

上面列出的所有问题都表示可用性差。因此，无怪乎我们经常将无限滚动视为一种制造更多问题而不是提供解决方案的时尚技术。毫无疑问，作为设计师，我们倾向于其他选择：分页和“加载更多”按钮。

分页和“加载更多”

我们可以通过使用分页，来避免无限滚动所产生的问题。这做有很多好处，通过分页，用户可以看到一个清晰的开始和明确的结束。当用户完成一页的浏览，并且开始下一页的内容时，这里有个非常明显的“切断”，用来区分已看过的和未看到的内容，以及在整个导航过程中完成的状态。

也许有一点过时，但非常可靠：Thinkific.com.上的分页(大图预览)

另外，还能让用户控制页面上显示数据的多少（通常使用控件来更改每页项目展示的个数），每个页面的URL都不同，页脚很容易到达，页面上出现的内容的多少可以由用户自己选择，更易于管理。

不幸的是，在可用性测试中，有时分页效果并不好。分页能够让用户感知到未来内容的数量，并且易于管理，但与无限滚动相比，效率也下降了许多。因此，用户经常浏览的次数明显减少，还会有一种“慢下来”的感觉，在前几页上花费的时间相对更多一些，并且在前几页浏览时，会更频繁地使用过滤器和排序。与无限滚动相比，它们查看项目的总数更少，并且参与度较低。

如果我们既想保留分页的好处，同时还想避免无限滚动给用户带来的不堪重负，我们可以使用“加载更多”模式来代替。使用这种模式，可以让用户在开始时滚动，最终他们可以选择点击按钮来加载更多项目。在一些实际案例中，当用户开始向下滚动时，先是会自动出现更多项目，一旦浏览内容数量达到某个阈值时，就会出现“加载更多”按钮。

Crutchfield 上使用的“加载更多”模式。在初始的几屏页面上，新项目会通过滚动操作出现。只有当用户阅读数达到58个项目时，“加载更多”按钮才会开始出现。

例如，我们可以在初始页面加载时显示10-30个产品项目（移动设备上显示10个，桌面设备上显示30个）。当用户到达列表末尾时，我们可以自动加载接下来的10-30个产品。当用户浏览达到30-70个项目时，我们切换到“加载更多”。同时，我们还提供了“返回”按钮，可以返回到前边的项目，因此用户可以随时掌控自己的位置。

我们允许用户发送指向列表中当前位置的链接，便于后续继续浏览。一款基于 Crutchfield UI 的模型。

我们还允许用户通过输入他们的电子邮件，然后获得一个稍后继续浏览的选项链接，该链接会将他们带到他们当前所在的列表中的位置。用户可能会更换到另一台设备上，或者在不同的时间段继续浏览，这解决了以后无法继续浏览的问题。

“加载更多”在电子商务中应用效果很好 ——因为所有项目都显示在一个页面上，并且页脚总是可以到达的，因此用户可以很好控制他们看到的所有项目。另外，如果每次用户点击“加载更多”按钮时 URL 都会更改，我们将无限滚动的速度与分页的舒适安全性结合在一起。用户似乎会浏览到更多的内容并且参与度更高。这种模式是长列表的首选解决方案。

这是否意味着我们可以完全放弃无限滚动？并不是这样的。无限滚动最大的优势是显示结果的速度——当用户想要查看更多内容时才直接显示新项目。事实证明，有一些技巧和策略可以让无限滚动变得更好。但这需要解决我们之前描述过的所有问题。

给列表的某个位置添加书签

改善无限滚动的最简单方法是在列表中标记“新”和“旧”项目之间的分界处进行区分。当有新的内容加载进来时，我们在视觉上将项目分开，并允许用户在列表中标记他们以后想要继续浏览的位置。我们还可以允许他们在单独的页面上查看他们看到的所有产品，这样他们就可以将查看过的选项与所有选项分开。下面显示了这种交互的一个示例。

在列表中的“新”和“旧”之间给出足够留白，以及给出允许用户稍后继续浏览的按钮。一个基于 Crutchfield UI 的模型。

一旦用户点击“稍后继续”，我们可以显示一个复选标记并将位置存储在浏览器中，或者在模态弹窗中让用户留下邮箱地址。

当用户点击稍后继续浏览时出现的弹窗。一个基于 Crutchfield UI 的模型。

另外，我们可以直接展示通讯框，允许用户复制当前页面当前位置的链接。还有一个好处就是能让我们收集用户的电子邮件，以便稍后向他们发送有关新项目的提醒。

将文案改为“复制当前列表位置的链接”。一个基于 Crutchfield UI 的模型。

页脚显示

上面的解决方案可能会解决了对用户所在位置缺乏了解的问题，但由于项目会自动加载，我们仍然存在一些其他问题——例如到达页脚。不过，这很容易解决。

就像我们习惯于使用粘性头部一样，我们可以集成一个页脚显示：一个小助手，它会保持在右下角的栏中，并在需要时显示页脚，而页面的其余部分使用无限滚动。一个很好的例子是 Dahmakan，它是来自马来西亚吉隆坡的送餐服务（目前没有无限滚动）。值得强调的是，页脚也应该可以通过键盘导航访问，而不仅仅是点击或点击打开。

页脚显示，有一个按钮在需要时显示和隐藏页脚

结合分页和无限滚动

当用户向下滚动页面并加载项目时，我们可以将其作为动态分页呈现给用户（参见 Pepper.pl）。滚动时，页面的 URL 会发生变化，并且页码会在吸底底部栏中更新。用户还可以在分页下拉菜单中导航到特定页面。当然，折叠面板也可以在点击时打开页脚。（可在原文中查看视频案例）

将分页和无限滚动结合在一起 - 以及屏幕底部的粘性页脚。

但是，我们如何处理“返回”按钮？例如，一旦用户浏览了“页面”1、2 和 3，现在已经登陆“页面”4，是否应该单击“返回”按钮将他们从第4页带到第3页，或者到他们在第1页之前访问过的上一页 ？一般来说，我们可能不想在其中添加无限滚动的每一步，使用户的浏览器历史记录混乱。所以选择带有下拉菜单到特定页面确实是个好主意。

用户可以跳转到特定页面，同时在浏览过程中使用无限滚动。也许当前页码旁边添加v字形下拉按钮会使它更加明显。Pepper.pl图片

将分页和无限滚动结合在一个地方的一个很好的例子；唯一的改进可能是稍微更好的焦点样式和更好的可访问性导航跳转。此外，在当前页面旁边添加某种下拉V形标志会非常棒，这样可以清楚地看到实际上可以跳转到特定页面。然后，“返回”按钮会将用户带回到他们从其来到他们目前面前的列表的页面。

滚动条的范围区间

另一个有用的方法是由Baymard研究所提出的，该研究所是一家测试电子商务网站的研究公司。其想法是通过添加垂直间隔的动态标签，使滚动条更有帮助。这将告诉用户他们当前的位置，以及他们可以跳转到哪里。当用户继续向下滚动时，标签会随着滚动条的增长而变化，还可以根据用户选择的对项目进行排序的任何条件进行使用。

如果用户按价格排序，我们可以在滚动条旁边显示动态的价格标签。图片来源：Baymard研究所。

迷你地图上的标记区域

我们还可以让它变得更有用，通过允许用户将感兴趣的区域标记或添加书签，这样他们就可以更快地返回收藏夹。这类体验的一个有趣原型是Rauno Freiberg创造的迷你地图试验（目前只适用于Firefox），以及其他许多很棒的试验。

迷你地图试验允许用户标记屏幕上的某些区域，并更快地跳转。目前只用于Firefox。

总结

有了所有这些技术，我们解决了无限滚动的许多问题。我们现在可以更好地控制滚动条上显示的项目数量，并且可以随时停止浏览，稍后继续。我们可以很容易地发现“旧”和“新”部分。当用户向下滚动页面时，URL会被更新，我们也允许他们将URL复制到列表中的当前位置。

用户总是可以到达页脚，滚动条指示他们当前所在的位置以及可以跳转到的位置。他们也可以跳转到任何特定的页面，因为我们也提供分页。此外，我们仍然需要实现无限滚动，以确保键盘的可访问性并宣布新项目。但是：我们利用了无限滚动提供的所有好处：尤其是浏览速度。

现在，所有这些似乎都是为了让无限滚动更好。所有工作是否值得的最终问题必须由您的用户应该实现的目标来回答。无限滚动并不适合每个网站，无穷无尽的选项列表需要通过适当的过滤、排序和搜索来补充。一般来说，如果您的用户倾向于比较选项或寻找非常具体的内容，无限滚动就不那么适用了。

不过，如果您的用户经常探索许多选项，并且浏览是您网站上非常典型的属性，尤其是当客户在购物车中添加多个商品或一次操作大量数据条目时，无限滚动可能非常有用——但前提是可访问性和性能考虑，这才是其设计的核心。

本文中强调的想法只是一种想法。其中一些可能在您的可用性测试中失败，而另一些可能表现得相当好。但是：如果你绝对需要让无限滚动工作，有一些方法和解决方法可以做到这一点——它并不像一开始看起来那么简单。

无限滚动清单

这里有一些设计时需要考虑的重要指南的列表可帮助设计更好的无线滚动：

• 如果有疑问，请始终选择分页。
• 使用无限滚动，始终集成页脚显示。
• 考虑从视觉上分离“旧”和“新”项目。
• 提供以后继续浏览的选项。
• 考虑使用“加载更多”+无限滚动一起。
• 考虑使用分页+无限滚动一起。
• 在加载新项目时更改URL，并将其公开给用户。
• 允许用户跳转到带有分页下拉列表的任何页面。
• 考虑使用滚动条范围间隔。
• 考虑允许用户对感兴趣的领域标记或加入书签。
• 确保可访问性和性能是实现过程中的主要考虑因素。

原文：

https://www.smashingmagazine.com/2022/03/designing-better-infinite-scroll/

作者：Vitaly Friedman

翻译：青青、罗辑、Fiona、陶陶然、山石君

感谢阅读，以上内容由花火译文小组翻译