怎样通过更友好的方式来呈现一系列的资料内容，包括文章、链接、图片、搜索结果等等——对于设计师来说，这不是一件很轻松的事。在这方面，页码导航 (pagination) 是一种经过时间验证的、还算值得信赖的解决方案。
不过最近几年，我们可以发现越来越多的网站开始使用无限滚动 (infinite scrolling) 的方式来呈现内容了——当多用户浏览到页面底部时，传统意义上的 “下一页” 资料会自动载入，并输出到当前页面中。
对于某些类型的网站或移动应用来说，无限滚动确实是一种不错的模式；但在在某些情况下，它也会造成灾难性的后果。
我们先来看一下无限滚动载入的优缺点。
优点
1. 有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。
2. 对触屏装置来说，互动方式更符合直觉：在移动应用的互动环境当中，通过向上滑动进行滚屏的操作已经成为最基本的多用户习惯，而且所需要的操作精准程度远远低于点选链接或按钮。
3. 更高的参与度：以上两点所带来的互动便捷性可以使多用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。
缺点
1. 有限的用例：无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。例如，在 WooCommerce 跨境电商网站当中，多用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助多用户更稳妥和准确的回到某个特定的列表页面当中。
2. 额外的复杂度：那些用来打造无限滚动的 JS 库虽然都自称很容易使用，但您总会需要在自己的产品中进行不同程度的定制化处理，以满足您们自己的需求；另外这些 JS 库在浏览器和装置相容性等方面的表现也参差不齐，您必须做好充分的测试与调整工作。
3. 再见了，页尾：如果使用了比较典型的无限滚动载入模式，这就意味著您可以和页尾说拜拜了。最好考虑一下页尾对于您的网站，特别是多用户的重要性；如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。千万不要耍弄您的多用户，当他们一次次的浏览到页面底部，看到页尾，却因为自动载入的内容突然出现而无论如何都无法点选页尾中的链接时，他们会变的越发愤怒。
4.SEO 站群：集中在一页当中动态载入资料，与一页一页的输出相比，究竟那种方式更利于 SEO 站群，这是您必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。
5. 关于页面数量的印象：其实站在多用户的角度来看，这一点并非负面；不过，如果对于您的网站来说，通过更多的内容页面展示更多的相关信息 (包括广告) 是很重要的策略，那么单页无限滚动的方式对您并不适用。
了解了相关的优缺点，接下来我们看一看我个人认为在无限滚动的运用方面比较到位的两个网站。
Twitter
Twitter 适合采用无限滚动载入的一个重要原因，就是每个内容单元都很短小精炼，其本身就是内容整体，多用户不需要在 “列表索引” 与 “内容详情” 之间切换就可以获取全部信息，而且当滑鼠悬停在某个内容条目范围内的时候，对应的操作 (回复、删除、收藏等) 就会呈现；所有内容与功能全部集中在当前的上下文环境中。
Tumblr
预设情况下，Tumblr 是通过无限滚动的方式载入内容的，但他们在设置当中为多用户提供了禁用无限滚动的选项，这种做法非常体贴。 Tumblr 的产品特色决定了其内容类型的广泛性，不同类型的多用户所关注的内容在形式方面可能有很大的区别；允许多用户自主设置内容载入方式的做法可以照顾到不同的多用户群体。
预设的无限滚动方式
多用户可以选择是否启用无限滚动
禁用后，回到页码导航的传统方式
下面是我个人认为不大适合采用无限滚动的例子。
Bing 的图片搜索
与 Google 相仿，Bing 在图片与视频的搜索结果页面当中采用了无限滚动载入的做法。不过当多用户点选某张缩图从而进入图片详情页面后，再回到搜索结果列表时会失去之前的定位，这使得多用户必须重新滚动页面，寻找点选之前的位置。如果您的 SEO 站群关键词会产生大量的搜索结果，这种方式将给您带来极大的不便。 (现在 Bing 已经改变了这一做法，当多用户点选了搜索结果中的缩图时，会直接在当前页面输出包含大图及相关信息在内的弹出层；新的流程使多用户不会再脱离当前环境 – 译者 C7210 小注)
YouTube
我爱 YouTube 的整体设计，同时也理解他们不断修改和调整设计方案的初衷，不过他们最近将首页的页码导航改为无限滚动的做法还是让我有些不爽。和 Bing 的问题类似，YouTube 的实际内容 (视频) 是在一个独立的页面中的，多用户显然不希望在看过一个视频后回到列表页面却发现列表重新载入了。
另外有些尴尬的是，YouTube 的无限滚动载入不是那么的 “自动”，多用户需要点选一个按钮来使列表载入更多的视频内容；从某种角度上讲这不算坏，因为它确实是将控制权交给了多用户，实现了类似前面提到的 Tumblr 的做法，但直接将无限滚动与手动触发结合在一起的形式多少有些不伦不类。
最佳实践
希望您能通过以上这些内容了解到自己的产品是否适合采用无限滚动载入的方式。如果答案是肯定的，那么下面这些要点也许可以帮助您避免掉实践当中的一些关键问题：
1. 提供降级方案：前端开发人员要考虑到在特殊环境下 Scrit 无法正常执行的状况，提供平稳降级的解决方案。
2. 可设置：如果可能的话，考虑向多用户提供设置选项，方便他们选择最适合自己的浏览方式。这会让多用户感到贴心，从而提升对您的产品的满意度与忠诚度。
3. 视觉反馈提示：在自动载入新内容的时候，要向多用户提供必要的视觉反馈，例如各种能够表达 “载入中” 的动画效果，否则多用户将无法了解当前的状况；在没有视觉提示的情况下，如果载入时间过长，会让多用户误以为接下来不再有内容了。
4. 帮多用户定位：不要因为多用户访问内容详情并点选了浏览器上的回退按钮就失去掉之前的列表位置。如果确实没有办法做到，而这一点对您的产品又很重要，那么还是考虑传统方式为好。
5. 测试：使用目标多用户群有可能用到的各种装置进行测试，检验无限滚动载入方案的实际表现。