无限滚屏与分页展示优缺点详解【UXRen译#192】

由宝珠 · 发布日期 2017-12-15 · 已更新 2017-12-23

作者：Nick Babich | 翻译：甜辣酱，校审：天蛙

“对于要展示的内容，我应该采用无限滚动还是分页展示呢？”

一些设计师在心中拔河，纠结着在项目中究竟该使用这两种方式中的哪一种。每种方式都有自己的优势和劣势。本文中，我们将了解一下这两种方式并决定在我们的项目中该用哪种。

无限滚屏

无限滚动允许用户通过无限滚动来浏览大量内容。这种技术会在你向下滚动的时候不断地更新页面。尽管这听起来很诱人，但这种技术并不是所有网站和APP都适用的解决方案。

无限滚动

优势1：用户参与和内容发现

当你使用滚动作为探索信息的主要方式时，用户会在你的网页上停留更长的时间，因此增加了用户参与。随着社交媒体的流行，大量的内容被消费；无限滚动为用户提供了一种浏览海量信息的有效方式，用户不需要等待页面的预先加载。

无限滚动基本是探索信息页面的必备特征。当用户没有特定要寻找的信息的时候，他们需要在浏览海量信息，并从中找到自己喜欢的内容。

Pinterest中的海量信息

Facebook的新闻功能是无限滚动的一个好例子。在无声的约定下，用户知道他们不会看到所有的信息，因为新闻信息更新太频繁。Facebook通过无限滚动尽最大的努力给用户展示尽可能多的信息，让用户可以浏览和消费信息流。

Facebook新闻让用户无限滚动浏览更多信息

优势2：滚动比点击更好

相比于点击滚动能带来更好的用户体验。鼠标的滚轮或触摸屏的存在让滚动比点击更快更简单。对于很长的连续性的内容，比如教程，滚动提供了更好的可用性，因为它无需与把文本切分到几个页面里展示。

点击：每次内容更新都需要一次额外的点击操作，然后等待页面加载。滚动：单纯的滚动操作就能获取内容更新。图片来源：designbolts

优势3：滚动对移动设备很友好

屏幕越小，滚动越长。在移动设备浏览器中长浏览变得更有意义。移动设备的手势控制让滚动非常自然且容易使用。因此，无论用户使用什么设备，他们都享受到了一种真正的响应式体验。

劣势1：页面表现与设备资源

页面加载速度是好的用户体验的全部。许多研究表明加载速度慢会让用户最终离开你的网站，删除你的app，转化率降低。这对于使用无限滚动的产品来说是一个坏消息。用户往下滚动的越多，越多的内容就必须在同一页面中加载出来。最终，页面呈现出来的可能会是加载速度越来越慢。

另一个问题是用户的设备有着有限的空间。在许多无限滚动的网站上，尤其是那些有很多图片的网站，拥有有限空间的设备，比如iPad会因为其已经加载了许多内容而开始变得很慢。

劣势2：搜索和定位

无限滚动的另一个问题是，当用户在信息流中看到某一个点时，他们不能在某个位置放书签，方便他们过段时间再回到这个位置。如果他们离开了这个网站，他们将会失去他们的进度，不得不再次往下滚动到这个点。因为用户定位确切的位置，这引起了用户的不快和疑惑，伤害了用户体验。

2012年，Etsy把搜索页面改成了无限滚动的界面，在此之后它发现新的界面并没有表现的比之前的分页展示好。尽管用户购买情况几乎是一样的，但是用户参与下降了，用户都不怎么使用搜索功能了。后来Etsy又把搜索页面改回了分页展示。

Etsy的搜索结果页面，原来是无限滚动，现在已经改成了分页展示

正如Dmitry Fadeyev指出的：“用户想要回到一个网站的搜索结果页面去查看一个之前看过的东西，和他们在别的地方看到的东西作对比。无限滚动不仅打破了这种动态过程，也让列表中的上下移动变得困难，尤其是当你重新再次回来一个页面时，发现自己又位于页面的顶部，为了找到一个条目而被迫再次往下滚动列表等待内容加载。从这个方面讲，无限滚动确实比分页展示的页面要慢 ”。

劣势3：不相关的滚动条

另外一件讨厌的事情就是滚动条并不能反映出可得数据的实际数量。你会高兴地往下滚动，以为你正在接近底部，本质上讲这会不断诱惑你再往下滚动一点点，然后发现当你快到底部的时候，更多的结果又呈现出来。从可达性的角度讲，打破用户对滚动条的使用习惯是不好的。

劣势4：页脚缺失

页脚存在的理由：页脚包含了用户有时候需要的一些信息，比如当用户找不到某些信息或者需要额外的信息的时候，他们会去页脚寻找。但是，在无限加载页面中，当用户一接触底部的时就会有更多的数据加载出来，让页脚始终没有机会呈现在用户的视野中。

使用无限滚动的网站应该通过让页脚固定或在顶部或旁边等位置，展示页脚中那些链接的方式来保证页脚中的链接是用户可得的。

还有一种解决方式是使用一个加载更多的按钮来响应用户对更多内容的需求。只有当用户点击这个加载更多的按钮，新的内容才会加载出来。这样用户就可以比较容易地接触到页脚，不用一直滚动很久去查看你的页脚。

Instagram使用“加载更多”按钮来让页脚更易接近

分页显示

分页是一种将内容分为好几个页面进行展示的用户界面形式。如果你往下滚动到一个页面的底部，看到一排数字——这排数字就是一个网站或app的分页。

分页展示

优势1：好的转化

如果用户想在搜索结果中寻找一些特定的信息，而不是随意的浏览信息，使用分页导航会特别有帮助。

谷歌搜索的例子可以提现出分页展示的好处。在搜索结果中寻找最好的搜索结果可能会花上一秒钟或一个小时，取决于用户想要搜索什么样的信息。用户搜索之后会知道有多少搜索结果，用户可以自己决定在哪里停止阅读，有多少条目去细读。

Google的搜索结果

优势2：控制感

无限滚动就像一个无穷无尽的游戏——不管你滚动了页面多长，都感觉好像永远到达不了终点。当用户知道他们可获得结果的具体数量时，他们可以做出更加有把握的决定，而不是去刷一个无穷尽的页面。根据David Kieras人机交互心理学的研究：“到达一个终点给人一种控制感”。这个研究也阐明说，当用户得到有限的但保持相关的结果时，他们能较容易地确定所要寻找的东西是否在搜索结果中。

并且，当用户看到结果的数量时（当然这个数量不是无限的），他们将能够评估需要多少时间来找到他们想要的东西。

优势3：条目定位

拥有一个分页界面让用户在脑海中对特定内容有一个大概的定位。他们不需要知道特定内容确切在哪一页，但是他们会记得大概的位置，分页导航可以方便他们找到特定的内容。

用户有主动权来用分页导航来直接跳转到想要看的页面

分页展示适用于电商网站和app。当用户进行线上购物时，如果他们想要回头去找某个商品，他们可以找到这个商品继续购物。

MR Porter 网站用分页展示物品

劣势1：额外的操作

为了在分页界面中进入到下一页，用户得找到这个链接（比如“下一页”），然后鼠标移动到上面，点击，等待新的页面加载出来。

点击查看下一个内容

这里的主要问题是，大部分网站在单个页面中只展示给用户非常有限的内容，用户想要浏览更多的内容时只能不断点击分页按钮。弥补这个不足，可以让页面长一点，同时又不牺牲加载速度，用户在每个页面中获取更多的内容，不需要太多次点击分页按钮。

什么时候使用无限滚屏或者分页展示？

无限滚动只在部分情况下是有效的。它最适合用户原创内容网站（Twitter，Facebook）或视觉（Pinterest，Instagram）的网站和app。分页展示相对来说则是一种保险的选择，对于用户需要完成特定目标或任务的网站和app，分页展示是一个好的解决方案。谷歌产品的体验印证了以上的观点。谷歌图片采用了无限滚动，因为相对于文本，用户可以更快地浏览和操作图片。阅读搜索结果就需要花费更长的时间。这就是为什么谷歌搜索结果仍然使用的是更加传统的分页展示形式。

总结

设计师在选择无限滚动和分页展示这两种信息呈现方式之前需要权衡二者的优势和劣势。最终的选择取决于设计情境和内容的传递方式。一般而言，无限滚动适合像Twitter这样的产品，用户消费着无尽的信息流，不想要寻找某个具体的东西。而分页界面对搜索结果页面来说是非常的，因为用户在寻找着特定的信息，用户看过的信息的位置很重要。

无限滚屏与分页展示优缺点详解【UXRen译#192】