灵活选择分页方式 

当页面内容很多需要分页时，可以通过3种模式来呈现——分页、无限滚动、加载更多按钮。那么哪个最好？用户会喜欢哪种？大多数平台都用了什么？今天就来和大家一同探讨下。

01 三种模式简介

想象一下，当服务器承载的内容不多时，它可以快速处理分发给用户；然而有一天，它被要求为400万不同的人发送926万亿个项目，如此庞大的信息量，如果加载时长过慢会让你和用户都非常抓狂！这也是为什么要给页面设置分页、无限滚动与加载更多的按钮的原因。

3种模式示例

3种模式允许服务器一次将部分内容发送给用户，从而减少加载时间。但它们也有各自的优点和缺点，你需要依据情境使用。你可以简单将它们理解为：

-分页，即多个页面组合（想想那些在线商店程序）；

-无限滚动，让用户产生所有内容都加载好的感觉，但实际上，信息是在上下滑动时才加载出来的（想想Instagram）；

-加载更多按钮，常出现在页面底部，通过用户点击操作，出现更多信息（想想Google图片）。

02 分页模式

网上购物时不难发现，分页模式是展示产品时最受欢迎的一种形式。以下网站呈现用户的搜索结果，使用的就是分页：Google、Amazon、Udemy、eBay和Shutterstock。

2.1 特点

需要明确的是，虽然以下列举的要点都是已被研究证实的，但我也会带一点儿个人的小建议，你可以根据相关情境判断是否使用。

优点：

-电子商务网站广泛应用；

-帮助用户研究和参考页面，比如喜欢的物品在第3页上，能够快速找到；

-适用于非常注重项目顺序的网站。

缺点：

-它需要很长时间才被加载；

-在移动设备上的分页导航必须更加简洁清晰，以防手误点错。

通常只需单击“下一个”或“上一个”就能快速操作，尽管大多数用户抱怨翻页很慢，或是过多的翻页链接会让人不想再浏览产品列表，但分页仍然是3种模式中最受欢迎的模式，更有趣的是，用户普遍喜欢在第1页上花更多时间浏览。

2.2 每页应有多少个项目？

每个页面放置的内容，取决于以下3个因素：

-是否使用网格视图或列表视图；

-是否有每页预计的项目数量；

-展示项目的尺寸大小。

比如网格视图网站加载的项目数量——Sears，50个；Amazon，48个；Shutterstock，27个；而列表视图的网站——Udemy，20个；阿里巴巴，48个；CNN，10个。

每页显示的最佳项目数并没有准确限制，而且不同站点之间似乎很少达成一致。在设计自己的目录页面时，你可以直接决定每页要显示多少项。

2.3 组件：导航

点击“下一页/上一页”按钮，是用户浏览页面的主要方式，因此使它们突出是非常有意义的。由于用户更容易选择“下一页”按钮，请确保其具有更明显的风格。

分页导航

移动设备上如果没有足够的空间，可以只把页码当作指示器，与导航按钮。

手机端分页导航

需要记住的一点是，如果位于第一页或最后一页，则需要隐藏或是禁用“上一页”或“下一页”按钮。

上图禁用了“上一页”按钮，下图则进行了隐藏

2.4 组件：筛选

筛选可帮助用户找到更准确的结果，不过也这取决于对内容是否进行了准确的标记与分类。有2种主要的筛选样式：

-第一种，与页面顶部对齐。如果只有几个筛选条件，或是希望列表或网格占据页面网格的整个宽度，可以使用此样式。顶部筛选也可以在带有“加载更多按钮”的页面上使用，比如Google图片。

顶部筛选

-第二种，与页面左对齐。如果有很多类别，并且列表/网格不需要全宽，我是非常建议大家使用这种样式的。

侧面筛选

2.5 组件：排序

允许用户以他们想要的方式对内容进行排序，在默认情况下，如果通过搜索进入该页面，则应将其设置为“最相关”。如果用户在没有添加任何搜索词的情况下点击目录，也可以默认“最相关”，或是按“最受好评”或“最新”来设定。

创建排序选项时，你可以参考使用以下列表中的一些选项词。并不是每次都要全部用上，依据实际情况来，例如：“ Sort A-Z”，可以检索品牌或是学生姓名的首字母。检索参考类型：

-最相关的/最受关注/评论最多/评分最高/最喜欢的/最新/最低价格/最高价格；

-字母顺序：AZ/按字母顺序排列的名字：AZ/按姓氏字母顺序排列：AZ/最高分/最低分等。

2.6 组件：每页项目

使用户可以在页面上选择展示的项目数，用户通常会根据他们的网速，以及他们希望在页面上看到的数量来进行调整。

选择展示的项目数

2.7 组件：显示结果

你的用户可能想知道有多少项目可供他们查看，这是一个静态组件，不能交互。

显示结果

通常，如果没有“每页项目”就不会显示此组件，有时二者也会同时出现。

每页组件显示结果和项的组合

2.8 组件：网格&列表切换

该组件使你可以在网格&列表视图之间切换，如果不太好判断用户偏好的查看方式，这将很有帮助。提前做一些AB测试，也能帮助你确定风格。

如果有需要，还可以使用下图组件在网格宽度之间切换。我发现在网购时非常有帮助，用户可以在不同视角间切换。

网格宽度组件

2.9 组成部分：字母索引

这个组件在现在看来有些过时了，按字母顺序排序的索引组件是“电话簿”类型的样式，可以轻松地按姓名首字母查找。换句话说，有这么多的人在网站上，像这样的检索方式非常无效。

字母索引组件

2.10 组件：跳转

跳转形式现在已经很少再见到了，浏览大型文档网站的话，是一个非常实用的组件。

03 无限滚动模式

记得有人对我说“滚动条已死”、“用户不喜欢滚动浏览”和“网站内容超出折叠范围，没人能看到”，我本人非常不赞同。无限滚动是“浏览行为”的精髓，滚动浏览也让时间过得飞快，对于电子商务来说还是很糟糕的，看过的瞬间内容找不到了，所以这种模式更多的在社交、娱乐领域中应用。

“滚动是一种延续；点击是一个决定”

——约书亚·波特

3.1 特点

以下列举的要点都是已被研究证实的，但我也会带一点儿个人的小建议，你可以根据相关情境判断是否使用。

优点：

-无限滚动可以让用户上瘾；

-滚动是一种可预期行为（尤其在触屏上）；

-加载速度非常快；

-适用于图像多的页面；

-用户粘性度高。

缺点：

-搜索内容时体验差，很难找到之前浏览的内容；

-非粘性导航栏，用户必须一直滚动到底部才能看到导航栏；

-用户几乎永远不会看到页脚（如果有的话）；

-网速差的时候，会影响浏览体验；

-用户较少关注内容；

-不利于文本搜索。

无限滚动功能使平台可以连续为用户生成内容，Pinterest就是一个很好的例子，当你浏览页面时，滚动显示出越来越多与你兴趣相关的内容（这种模式有时也被称为无尽滚动），还有大家熟识的Instagram/Twitter/Facebook/ YouTube等。

3.2 组件：粘性导航栏

因为无限滚动，你必须确保导航栏是固定的，否则可怜的用户将永远找不到按钮。用浏览器查看的网站，建议将导航栏放在屏幕顶部。如果是应用程序，会相对灵活些。

手机端上的粘性导航

3.3 组件：Instagram，“全部阅读完成”组件

Instagram过去曾受到很多批评，因为用户无法记录他们看过或没看过的内容，这也是他们引入此组件的原因。虽然一开始我并不喜欢，但这个功能让我的体验变得更好了。

3.4 组件：加载

当你的网络连接很差或是你下载的服务器很慢时，你可能一直盯着加载图标转圈儿。加载状态像是一个指示器，让你知道平台并没有崩溃，它在努力加载。

04 加载更多模式

“加载更多”按钮经常被拿来与前两种模式比较，奇怪的是，这种模式也没有得到世界上最大的搜索引擎之一的Google的广泛关注。他们仅在移动设备和Google图片中使用了它。

4.1 特点

以下列举的要点都是已被研究证实的，但我也会带一点儿个人的小建议，你可以根据相关情境判断是否使用。

优点：

-像分页一样可以对结果排序；

-与无限滚动一样，也适用于移动设备；

缺点：

-同无限滚动一样，很难再次找到结果。

4.2 组件：加载/显示更多结果按钮

这是该模式不能没有的按钮，到达页面底部后，它的出现表明你可以继续加载更多结果。

加载/显示更多按钮

“加载更多”、“显示更多结果”和“更多结果”是最常见的文字内容。

4.3 组件：加载

与无限滚动一样，也需要加载状态。只有当你点击“加载更多按钮”时，才会触发。

4.4 组件：搜索建议标签

这些小的搜索建议标签是鼓励用户浏览主题的一种好方法。你也可以将它们放在其他模式上，但它们与“加载更多”按钮组合效果最佳。

搜索建议标签

4.5 组件：滚动到顶部按钮

这个方便的按钮让你浏览的页面快速滚动到顶部，完全不需要手动操作。

滚动到顶部按钮

写在最后

分页、无限滚动和加载更多按钮，你应该使用哪个？其实完全取决于你要构建的产品。如果建立一个供人们参考浏览的内容类型网站，请使用分页；如果是一个社交平台，请使用无限滚动；若是介于两者之间，可以尝试加入“加载更多”按钮。

相关引用

-翻译自原文

https://uxdesign.cc/ui-cheat-sheet-pagination-infinite-scroll-and-the-load-more-button-e5c452e279a8

-阅读参考

-The Pros and Cons of Infinite Scroll

https://www.webdevelopmentgroup.com/2017/06/the-pros-and-cons-of-infinite-scroll/

-Scrolling is easier than clicking

http://bokardo.com/archives/scrolling-easier-clicking/

-Infinite Scrolling: Pros and Cons

https://designshack.net/articles/layouts/infinite-scrolling-pros-and-cons/

-Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce

https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/

-图片、GIF来自网络

欢迎关注作者微信公众号：UX辞典，获得更多UX设计干货