UX Pedia Presents
本文约4435字，阅读需要12分钟
灵活选择分页方式
当页面内容很多需要分页时，可以通过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 组件：滚动到顶部按钮
这个方便的按钮让你浏览的页面快速滚动到顶部，完全不需要手动操作。
滚动到顶部按钮
写在最后
分页、无限滚动和加载更多按钮，你应该使用哪个？其实完全取决于你要构建的产品。如果建立一个供人们参考浏览的内容类型网站，请使用分页；如果是一个社交平台，请使用无限滚动；若是介于两者之间，可以尝试加入“加载更多”按钮。
／End. 
相关引用
-翻译自原文
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 Pedia允许不得转载
往期推荐：
辞典说 | 2021Pantone年度组合色，给生活添束「光」
辞典精译 | 资深设计师精选全年经验，总结2020 UX/UI技巧「秘籍」（下）
辞典说 | Glassmorphism，是新拟物风格的“进化”？
辞典精译 | 资深设计师精选全年经验，总结2020 UX/UI技巧「秘籍」（上）
  UX 辞典  
策划│雪诗
翻译│梦奇
编辑│梦奇
• 扫码加辞典酱 •
• 成为学习交流小队一员吧 •
形象理解用户体验，时刻关注设计趋势
Powered by Canopy Institute of Design
2020©UX Pedia. All Rights Reserved
「喜欢UX辞典的推送，请设置个 星标☆ 」
「下次就能 第一时间 看到惹」
 赞了吗  在看吗 
 戳下这里呗  别害羞 :  ) 
继续阅读
阅读原文