作者：Nick Babich 

译者：UI头条

"我应该用无限滚动或者分页来表达我的内容吗?" 一些设计师仍然不确定该为他们的项目选择哪种样式。 每种样式都有自己的优缺点, 在本文中, 我们将概述这两种样式, 并决定我们的项目应该使用哪种样式。

无限滚动

无限滚动是一种允许用户滚动大量的内容技术, ,无法看到尽头。 当你向下滚动页面的时候, 这种方式会让页面内容不断更新。 虽然听起来还不错, 但这项技术并不是针对每个网站或应用程序的一刀切解决方案。

优点1: 用户参与和内容发现

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

无限滚动几乎是发现内容的很棒的方式。 当用户不搜索某个特定的东西时, 他们需要看到大量的信息来找到他们喜欢的东西。

 Pinterest

你可以用 Facebook 新闻源的例子来衡量无限滚动的好处。 因为信息流的规则, 用户意识到他们不可能看到信息流上的所有内容, 因为内容更新太频繁。 在无限滚动的情况下, Facebook 正在尽可能多地向用户展示信息, 让他们来浏览和阅读这些信息流。

     Facebook  的新闻 feed 使用户越来越多地滚动来更新内容

优点2: 滚动比点击要好

用户在滚动方面比点击和按压有更好的体验。 鼠标滚轮或者触屏滑动让移动速度比点击更快。 对于一个连续的和冗长的内容,  滚动比翻页文本到几个单独的屏幕或页面提供了更好的可用性。

对于点击 / 点击: 每个内容更新需要一个额外的点击操作和等待时间来加载页面。 滚动: 用于内容更新的单滚动操作。 图片来源:designbolts 设计图

优点3: 滚动对移动设备有好处

在移动端，屏幕越小, 卷轴越长。 移动浏览的普及是长时间滚动的另一个重要载体。 移动设备的手势控制使滚动直观易用。 因此, 无论他们使用什么设备, 用户都能享受到真正的响应式体验。

Source: 来源:Dribbble

缺点1: 页面性能和设备资源

页面加载速度对于良好的用户体验来说就是一切。 多项研究表明缓慢的载入时间会导致人们离开你的网站或删除你的应用程序, 从而导致低转化率。 对于那些使用无限滚动的人来说, 这是个坏消息。 用户滚动页面的次数越多, 同一页面上的内容就越多。 因此, 页面的性能会越来越慢。

另一个问题是用户设备的资源有限。 在许多无限滚动的网站上, 特别是那些有很多图片的网站, 有限资源的设备, 例如 iPad, 可能会因为它所加载的资源数量而开始放慢速度。

缺点2: 浏览进度丢失和搜索下降

另一个无限滚动的问题是当用户到某个信息时, 他们不能将内容用书签保存起来, 用于日后浏览。 如果他们离开这个网站, 他们将失去之前浏览进展, 并且不得不向下滚动才能回到原来的位置。 这种无法确定用户滚动位置的能力不仅会给用户带来烦恼或困惑, 而且还会损害整个用户体验。

2012年, Etsy 花费了大量时间来实现一个无限的滚动界面, 发现新的界面不如翻页。 尽管购买的数量基本保持不变, 但用户的参与度已经下降, 现在人们并没有太多地使用搜索引擎。

具有无限滚动的 Etsy 搜索界面。 当前版本有一个分页。正如 Dmitry Fadeyev 指出的那样:"人们会想回到搜索结果列表中去查看他们刚刚看到的东西, 把它们与他们在其他地方发现的东西进行比较。 无限滚动不仅打破了这个动态, 还使得上下移动列表变得困难, 特别是当你在另一个时间返回页面, 发现自己又回到了顶部, 被迫再次向下滚动列表, 等待结果加载。 这样, 无限滚动界面实际上比被分页的界面要慢。"

缺点 # 3: 滚动条不能准确表达信息量

另一个烦人的事情是, 滚动条不能反映实际可用的数据量。 你会兴奋地向下滚动, 假设你接近底部, 这会引导你再次下滑， 结果又加载了海量信息。 从可访问性的角度来看, 为用户打破滚动条的使用是相当糟糕的。

     滚动条应该反映实际页长

缺点4: 缺少一个页脚

页脚的存在是有原因的: 它们包含用户有时需要的内容——如果用户找不到或者他们想要经常想要的更多信息， 但是由于 feed 滚动无限, 当用户到达底部时, 更多的数据就会被加载, 每次都把页脚推出显示区域之外。

在2012年推出无限滚动时, 用户设法在新故事加载之前抓住屏幕

实现无限滚动的站点要么通过使页脚固定显示, 要么将链接移到顶部或侧栏。

Facebook 将所有链接从页脚移到右边栏

另一个解决方案是使用一个加载按钮来加载内容。 新内容在用户点击 More 按钮之前不会自动加载。 这样用户就可以轻松地访问你的页脚, 而不用去寻找它。

为了让用户可以访问页脚, Instagram 使用了"加载"按钮分页

分页是将内容分成不同页面的用户界面模式。 如果你滚动到一个页面的底部, 看到一行数字ーー那一行数字是一个站点或应用程序的分页。

 分页 

优点1: 良好的转换

当用户在搜索结果列表中的某个特定的东西时, 分页是好的。

你可以用 Google 搜索来衡量分页的好处。 根据研究, 寻找最好的搜索结果可能需要一秒或一个小时。 当你完成搜索时, 你就知道了搜索结果的确切数字。 你可以决定在哪里停止或者多少结果而做出判断。

优点2: 控制感

无限滚动就像一场永无止境的游戏ーー无论你向前滚动多远, 你都会觉得永远不会到达终点。 当用户知道可用结果的数量时, 他们能够做出更加明智的决定, 而不是无休止滑动刷新。 根据大卫•基拉斯(David Kieras)的《人机交互心理学》(Psychology in Psychology)指出:"达到一个终点提供了一种成就感"。 研究还表明, 当用户获得有限但相关的结果时, 他们能够很容易地确定他们寻求的东西是否真的存在。

同样, 当用户看到结果的总数时(当然, 当数据总量不是无穷大的时候) , 他们就可以估计出需要多少时间才能找到他们真正在寻找的东西。

优点3: 项目位置

拥有一个分页可以让用户保留项目的确切位置。 他们可能不一定知道页面的确切页码, 但是他们会粗略地记住它是什么, 而且页面的页码链接会让他们更容易地到达那里。

使用 pagtion 的用户可以控制导航, 因为他们知道点击哪个页面就可以返回到原来的位置

分页对于电子商务网站和应用程序是有好处的。 当用户在网上购物时, 他们希望能够回到他们离开的地方继续购物。

波特先生的网站使用了项目的分页

缺点: 多余操作

要在页面页面中找到下一页, 用户必须找到链接目标(例如"下一页") , 将鼠标悬停在其上方, 点击它, 等待新页面加载。

点击一个内容

这里的主要问题是, 大多数网站只用一个页面就能显示用户非常有限的内容。 通过在不影响加载速度的情况下让你的页面更长, 用户可以获得更多的页面内容, 而且不用点击或点击页码按钮。

何时使用无限滚动 / 分页？

只有少数情况下无限滚动是有效的。 它最适合信息流网站和应用(Twitter, Facebook, Pinterest, Instagram)。 另一方面, 分页很适合面向目标的网站和应用程序。

谷歌的经验就是一个很好的例子。 谷歌图片使用无限滚动, 因为用户能够比文本更快地扫描和处理图片。 阅读搜索结果使用分页浏览。 这就是为什么他们的谷歌搜索结果仍然使用更传统的分页技术。

结论

设计师在选择之前应该权衡无限滚动和分页的利弊。 这个选择取决于你的设计背景以及内容是如何传递的。 一般来说, 无限滚动对于像 Twitter 这样的东西来说是很有用的, 用户可以实时获取无穷无尽的数据流, 而页面页面对于搜索结果页面是有好处的, 因为人们正在寻找一个特定的项目, 而且用户查看的所有项目的位置都很重要。

谢谢阅读，记得点赞！

 信息注明：

作者：Nick Babich 

原文链接：http://babich.biz/ux-infinite-scrolling-vs-pagination/

版权声明：本文版权贵归作者所有，供个人使用。转载请注明来源信息。