无限滚动：何时使用，何时避免
总结: 无限滚动最小化了交互成本、提升了用户参与度，但并不适配每个网站。对于一些网站而言，分页或“加载更多”按钮会更加合适。
无限滚动（infinite scrolling）是一种列表页（listing-page）设计模式，即随着用户滚动屏幕持续加载内容。它消除了分页（pagination），即将内容分割成许多页的需求。
Adidas.com：在列表页，阿迪达斯使用了分页的方式向用户展现商品。
Nike.com：和竞争对手阿迪达斯相比，耐克使用了无限滚动的方式在列表页上展示商品。
自从2006年无限滚动被发明之后，它便在交互设计中得到广泛应用。如今，无限滚动最常用的使用场景是有着水平结构的网站和应用，它们的内容流持续更新，且内容与用户关联程度相当——例如，社交媒体网站（诸如TikTok，Instagram，Twitter），也见于新闻和电商网页（如Apple News，Nike.com）。
自从经典的无限滚动模式（即上述定义中的描述）被发明以来，也出现了一些变体。一种变体要求用户额外点击一个“加载更多”或“查看更多”按钮，在页尾显示更多内容。另一个变种是将无限滚动分成多个页面，让后者成为有价值的定位标记，帮助用户快速在内容间导航，因为整合进无限滚动的分页允许用户快速从一页跳到下一页。
那么，无限滚动的优势和局限有哪些呢？
经典无限滚动模式的优势
减少打断用户。可以说，无限滚动相较于分页的最大优势是它减少了对用户的干扰、打断。一篇发表在Information Systems Journal上的研究发现，即是很小的打断（如点击“下一页”按钮来跳转后面一页获取更多内容）也会促使社交电商的用户改变他们的任务。尽管这种干扰的效应大小可能随着用户任务类型而变化（例如，在用户搜索特定商品或信息时，干扰可能会没有那么大影响），最小化干扰对于社交媒体、娱乐和新闻类应用很重要，因为它帮助创造流畅体验、鼓励用户维持沉浸状态。
降低交互成本。如果页面持续、快速地加载新内容，无需用户点击按钮、等待新页面加载，交互成本就会极大降低。同时，如果用户想要回到他们之前看过的条目，也不需要点击“返回”按钮、等待上一页加载——可以简单地向上滚动来完成该操作。
适配移动端设备。无限滚动模式应用的大幅增长也与移动端设备使用的飞速增加有关。因为移动设备视角较小，用户已经习惯了不停地滚屏（在有滚屏理由的情况下）；他们的手指总是靠近屏幕、随时准备进行滑动。
无限滚动带来的可用性问题
尽管无限滚屏有上述优点，它也有一些可能会影响用户体验的缺点：
难以再次找到特定内容
完整性错觉
无法触及页面底部
无障碍问题
页面加载量增大
搜索引擎优化（SEO）表现更差
难以再次找到特定内容
无限滚动会导致页面缺乏帮助用户定位的标记。在有分页的情况下，用户可能会记住某个条目所在的页码，以及该条目在该页的位置（上部、中部或页尾）。但在一个无限列表中，记住某个特定条目的位置并且再次找到该条目是一件困难的事。
在用户使用高跷跳转（pogo sticking，即用户从路径选择页面，如搜索结果页、导航页、产品列表页到更深层的页面，又再次回到原路径选择页的行为）浏览页面时，如果网页没有保存用户之前在列表中所处位置，就会对用户体验产生极具破坏性的影响。这种情况时常会出现：在用户查看无限列表中的特定内容、跳转到详情页，然后再用“返回”按钮回到上一页时，他们发现自己回到了无限列表的顶端，不得不向下滚动无数次来跳过那些已经浏览过的内容。相反，在分页存在的情况下，用户会返回到单个页面。即使他们被带回到了该页顶部，他们需要滑动的次数也会远少于无限滚动的情况。
Bmwusa.com：宝马美国官网的产品列表页没有保存用户先前所在的位置。当用户查看一款车型，再用“返回”按钮回到产品列表页时，他们会被带到页面顶端。这让“找到用户之前在产品列表页所处的位置”这一任务变得非常繁琐。
完整性错觉
一些使用无限滚动而缺乏“加载更多”按钮的页面可能会存在完整性错觉：在新内容在后台、当前可见页面之下加载的同时，用户可能会认为他们已经浏览到了内容流的尽头。通常来说，该问题会在用户已经浏览到了预先加载的内容底部，而页面缺乏标示“额外内容正在加载”的情况下出现。
Miamifc.com：页面底端的巨大留白加上一条广告创建了一种完整性错觉。用户可能认为他们已经到达页面底端，然而实际上第一屏之下还有更多内容正在加载。
无法触达页脚
（缺少“加载更多”按钮的）无限滚动可能会让用户无法触碰到网站页脚。内容流的持续加载阻碍了用户接触到通常放置在页脚的有用信息（如联系方式、退换政策等）。
Nike.com：持续加载新商品的内容流阻碍了用户访问页脚。
无障碍问题
无限滚动可能会对需要无障碍设计的用户群体造成额外问题。对于只使用键盘的用户而言，无限滚动增大了网页导航的困难，因为海量的内容被放置在同一页面上。对于这些用户，他们需要使用“tab”键来遍历每一个链接；对他们而言，跳到无限滚动的底部是一个非常繁琐的任务。对于另一部分使用屏幕阅读器的用户，他们只能看到列表的第一屏内容，而无法加载新内容。
可喜的是，近年来，在帮助这些用户提升使用无限滚动的无障碍体验上，业界已取得了积极进步。例如，由万维网联盟（W3C）引进的 ARIA“feed”模块允许屏幕阅读器遍历无限滚动的内容。该模块也支持键盘用户跳过无限滚动部分，并跳转到在其之后的第一个可点击元素。
页面加载量增大
由于新内容的持续增加，包含无限滚动的页面往往需要更长时间来加载。如果在用户进行高跷跳转（参考上文的定义）时，网站正确地帮用户保存了他们跳转前的位置，在用户回到该页时就会有大量需要加载的内容。
这种加载速度的降低尤其会对移动端用户产生影响（因为连接强度的变动性更大），也会影响带宽不足或流量不够的用户。
一些公司，例如Facebook，试图通过发布需要更少流量的“轻量”版本的产品（Facebook lite和Instagram lite）来减少这些页面加载量的问题。尽管这可以帮助产品触达更大范围的用户，对于多数规模更小的公司而言，发布一个额外的轻量产品版本可能并不切实际。
搜索引擎优化表现更差
最后一点，无限滚动会对网站的搜索引擎优化表现产生消极影响。这是因为搜索引擎并不总能够接触到所有隐藏在第一屏页面之下的内容，而且页面速度（这是一个重要的搜索引擎优化影响因素）可能会因为被无限滚动拖慢。
折中方案：无限滚动结合“加载更多”按钮
为避免无限滚动的部分缺点，而又不用回到传统的分页模式，许多网站和应用使用了无限滚动的一种变体——无限滚动加上“加载更多”按钮。近来，“加载更多”按钮越来越流行，尤其是在移动端网站和应用中。这种方式不仅适用于电商网站，谷歌的移动端搜索结果页也使用了该方式。
Asos.com: 设置加载更多按钮让用户可以自主选择是否要加载更多条目。该方式有益于低带宽用户，并帮助所有用户轻松触达网站页脚。该区域也显示了用户已经看过的产品数量以及产品总数量，这可以帮助用户在列表页间导航。这是一个提升用户体验的绝佳例子。
添加“加载更多”按钮解决了部分由经典的无限滚动模式带来的可用性问题。“加载更多”按钮可以解决或缓解的主要问题包括：
触达页脚。“加载更多”按钮阻止了新内容的持续加载，从而确保用户可以滑动到网站的页脚部分。
完整性错觉。页面底部明显的“加载更多”按钮清楚地暗示了用户这并不是全部内容，后面还有很多内容可供探索。
带宽和流量限制。“加载更多”按钮减少了直接加载的内容，这可以帮到带宽或流量有限的用户。这种方式在用户可以控制他们一次性加载的内容数量时尤为有用。
与传统的无限滚动模式相比，“加载更多”按钮的一个弊端就是交互成本的上升——用户需要点击“加载更多”按钮来加载更多内容。即使是点击“加载更多”按钮这种微小的干扰也可能会让用户浏览更少内容、导致他们更换任务。
新的备选方案：将分页整合进无限滚动
经典无限滚动模式的一个新变体是整合了分页的无限滚动。在这种变体中，当用户到达第一页已加载完成的内容底部时，界面上会出现一系列页面标示物，接着新内容会自动进行加载。
Google.com：移动端的购物页面使用了分页整合进无限滚动的模式。页码和返回上一页按钮方便用户再次找到特定物品，帮助导航。
该方案有减少传统无限滚动模式带来的部分可用性问题的潜力，尤其是：
重新找到内容。页码和分页标示是很有价值的标记物，它们能够帮助用户在导航于页面间，更加轻松地重新找到特定内容，因为用户可能会记住该内容所在的页码。
改善页间导航。用户可以利用整合的分页设计在不同页面间来回跳转，高效地跳过无关内容。
即使整合式分页设计可能部分解决了无限滚动造成的可用性问题，该模式并不能解决所有问题。无法接触到页面底部、页面加载量增大等问题仍然存在。因而，该设计决策并不适用于页脚存放了有用信息，或是需要避免较长加载时间的网站。
另一个原因是，该模式太新了，我们还没有获得用户测试数据的支撑。即使将分页整合进无限滚动可以提升传统无限滚动模式的表现，至少在一段时间内，它给用户造成的困扰可能比带来的帮助要更多，因为用户对该模式很不熟悉。
无限滚动适合你的设计吗？
出于无限滚动可能会造成的可用性问题，在用户想用列表页内容达成以下目的时，我们不推荐使用该模式：
查找特定内容（例如，找到一篇特定的文章，或一个特定物品）
在一个长列表中对比若干条目（例如，在几个产品间做选择，而它们在列表中可能距离较远）
只查看列表最上端的几个条目（如，挑选最佳的搜索结果）
如果你有大量用户来自于低带宽地区，或是你经常服务有无障碍需求的用户，在网站上使用无限滚动也并不合适。
没有一种解决方案（无限滚动、分页、“加载更多”按钮，或分页整合进无限滚动）是最好的、适合所有网站的。这取决于网页的具体情况以及你的用户想要达成的目标。考虑这四种选项的优势和缺点来确定对你的网站而言最好的解决方案。可以从问自己下列问题开始：
你的用户群体是谁？
访问你的网站时，用户有哪些目标？
用户主要通过哪些设备来访问你的网站？
还有其他的限制因素（如，大量用户都有带宽限制或无障碍需求）吗？
无限滚动通常在用户没有特定任务或目标，仅仅想要浏览同质内容时效果最好——例如，娱乐、新闻或社交媒体。
Kim, J. et al. 2016. Pagination versus Scrolling in Mobile Web Search.Proceedings of the 25th ACM International on Conference on Information and Knowledge Management. (2016).
Sharma, S. and Murano, P. 2020.A usability evaluation of Web user interface scrolling types. First Monday. 25, 3 (2020).
原文地址：https://www.nngroup.com/articles/infinite-scrolling-tips/
版权声明
本文版权属尼尔森诺曼集团（Nielsen Norman Group）所有。欢迎转发至朋友圈，如需转载，请邮件Support@nngroup.com。未经授权的转载、翻译是侵权行为，版权方将保留追究法律责任的权利。