“我应该选择“无限滚动”还是“分页”的形式来展示我的内容呢？”这是不少设计师存在的困扰。其实，两种方法展现形式都有各自的优点和缺点，在本专题内容中我们将概述这两种方法并决定我们的项目应该使用哪一种。

无限滚动

无限滚动是一种允许用户通过滚动浏览大量内容而不刷到页面最底层的技术。当你向下滚动页面时，这种技术将会持续地刷新页面。这虽然听起来很诱人，这种技术并不是一种适用于各种网站和app的万能解决方式。

无限滚动方案

优点：

1.用户参与和内容发现

当你使用滚动作为探索数据的主要方法时，它极有可能会让用户在你的网页上停留更长时间，从而增加参与度。随着社交媒体的普及，大量的数据正在被消费。而无限滚动提供了一种有效的方式来让用户浏览信息的海洋，而无需等待页面的预加载。

无限滚动几乎是所有探索界面的必备功能。当用户没有定向搜索某一特定的内容时，他们就需要通过查看大量的条目才能够找到他们感兴趣的东西。

Pinterest内容的海洋

以Facebook新闻feed流为例，你可以以此来衡量无限滚动的益处。通过非口头协议，用户意识到他们无法查看Feed流上的所有内容，因为内容更新地过于频繁。而Facebook正在尽最大努力通过无限滚动向用户展示尽可能多的信息，并确保他们正在查阅和消费这些信息流。

用户通过滚动Facebook新闻feed流获得更多内容更新

2.“滚动”比“单击”效果更佳

用户能够通过滚动获得比“单击”或“点击”更好的体验。鼠标滚轮或触摸屏的形式使滚动速度比点击来的更简单、快捷。对于连续且冗长的内容，比如说教程，滚动提供的可用性，比将文本分割成几个单独的屏幕或页面的体验更棒。

对于单击或点击：每个内容更新都需要额外的点击操作和等待页面加载时长。滚动：单一操作滚动时，使内容更新。

3.“滚动”对移动设备更友好

屏幕越小，滚动时间越长。移动端浏览的普及是另一种持续性滚动的重要因素。移动端的手势控件使滚动直观且易于使用。因此，用户无论使用哪种设备，都可以享受到真正的快速响应体验。

缺点：

1.页面性能和设备资源

页面加载速度是影响用户体验的重要因素。多项研究表明，缓慢的加载时间会导致人们离开你的网站或删除你的应用程序，致使形成低转化率。对于那些习惯使用无限滚动的用户来说，这无疑是个坏消息。因为用户向下滚动页面越多，页面上承载的内容就越多，最终会导致页面性能越来越慢。

另一个问题是用户设备的资源有限。在许多无限滚动网站上，尤其是那些有大量图片的网站中，资源有限的设备（如iPad）可能由于其已加载的内容信息过多而开始降速。

2.项目搜索和位置

无限滚动的另一个缺点是，当用户浏览到某个节点时，他们无法标记该位置，也就意味着用户无法在离开后回到该位置。如果他们离开了该网站，他们将丢失所有的加载数据，并且只能通过再次向下滚动才能返回相同的位置。滚动的形式使位置无法确定，这不仅会给用户带来烦恼和困惑，而且还会不利于整体用户体验。

在2012年，Etsy花了很多时间来实现一个无限的滚动界面，却发现新的界面表现并不如分页的表现形式出色。尽管购买量大致保持不变，但用户参与度却大大下降——现在人们不再那么频繁地使用搜索了。

Etsy的无限滚动搜索界面（当前版本有分页）

正如Dmitry Fadeyev所指出的那样：“人们会希望回到搜索结果列表中，查看他们刚才看到的项目，并将其与他们在列表中其他位置发现的其它项目进行比较。

无限滚动不仅会打破这种动态，还会使列表上下移动变得十分困难，特别是当你又一次返回页面时，发现自己回到顶部，然后被迫再次向下滚动列表并等待加载结果。通过这种方式，无限滚动界面实际上比分页界面更低效。

3.滚动条无法展示真实数据量

另一个让人恼火的事情是滚动条无法展示真实数据量。当你逐渐接近滚动条底部时，你会兴奋地继续向下滚动，结果是在刷新后，发现滚动条又增加了一倍。对于用户来说，这无疑是一种非常糟糕的体验。

滚动条应该反映真实页面的长度

4.页脚缺失

页脚存在的原因是：它们包含用户有时需要的内容—如果用户找不到某些内容或他们需要的其它信息，他们通常会去页脚寻找。但是，由于Feed流无限滚动的特性，一旦用户到达底部，就会加载更多的数据，每次都将页脚再次推出视图之外。

当LinkedIn在2012年推出无限滚动功能时，用户会设法抓取加载新内容之前的屏幕信息

那些使用无限滚动的网站，其实应该使页脚更具用户粘性，又或者将链接放在顶部或侧边栏来使页脚更易于访问。

Facebook将页脚中的所有链接（例如’Legal’，’Careers’）移至右侧栏。

另一种解决方案是根据用户需求使用“ 加载更多”的按钮加载内容。即新内容不会自动加载，直到用户点击“更多”的按钮。这时候用户就可以轻松到达页脚，而无需去追踪它。

Instagram使用“加载更多”按钮，使用户达到访问页脚的目的。

分页设计

“分页”是一种将内容分为不同页面的用户界面模式。如果你滚动鼠标到页面底部并查看数字，这行数字是一个网址或应用程序的分页。

分页

优点

1.直观的数据体现

如果用户在列表中进行内容搜索，而不仅仅是为了浏览和消耗信息流时，这个时候分页效果很合适。

以 Google 搜索为例子来衡量分页设计的优点。通过你的实践，找到理想的搜索结果可能需要一秒也可能是一小时。但当你搜索停止时，你可以知道搜索结果的确切数量。您可以决定在哪里停止或者还有多少结果需要浏览。

Google搜索界面

2.让用户拥有控制感

无限滚动像一场无止境的游戏——不管你滚动到多远，都觉得自己永远无法到达终点。当用户知道可用结果时，就能做出更明智的决定，而不是继续浏览无限滚动列表。根据David Kieras研究的人机交互心理学：“ 到达终点提供了一种控制感 ”。研究还表明，当用户获得有限但相关的结果时，他们能很容易判断他们正在寻找的内容是否存在。

当用户看到结果的总数（总数据量不是无限的时候），他们将能够估计需要多少时间才能找到他们实际需要的内容。

3.快速到达目标位置

分页界面让用户记着该内容的大概位置。他们可能不一定知道页面的确切页数，但是会记住大概的内容，分页的链接让他们更容易到达自己的内容位置。

通过分页，用户可以控制导航，因为知道点击哪个页面返回到原来的位置

分页适合ecomerce网站和应用程序。用户在线购物时，他们希望能够快速回到他们离开的地方继续购物。

缺点：

1.额外的点击

要进入分页的下一页，用户必须找到链接目标（例如“下一步”），将鼠标悬停在上面，点击它并等待新页面加载。

点击内容

大多数网站向用户显示一个单页面，内容受限。通过在不影响加载速度的情况下延长页面的使用时间，用户将获得更多的页面内容，而无需点击或点按分页按钮。

何时使用无限滚动或分页设计呢?

无限滚动有效的场景比较少，更适合Twitter，Facebook，Pinterest，Instagram这种快速浏览内容和发现内容的场景。

例：谷歌就是一个很好的例证。Google图片使用无限滚动，因为用户能够比文本更快速地扫描和处理图片。

结论

无限滚动：

1.适用于Twitter这一类用户，可以实时生成无尽的数据流，而无需特别查找任何内容。

2.左面端和移动端来说，无限滚动对移动端更友好。

分页：

分页更适合与操作、管理大量条目且更需要专注、严谨的场景。所以工具类、检索类、归档页面、后台管理更倾向分页设计。

原文链接 Medium