原文：UI cheat sheet: pagination, infinite scroll and the load more button
原文链接：https://uxdesign.cc/ui-cheat-sheet-pagination-infinite-scroll-and-the-load-more-button-e5c452e279a8
翻译：B端设计笔记
当页面中内容比较多时，你需要依赖这三种方式中的其中一种去加载它。那么哪种是最好的选择呢？你的用户喜欢哪种呢？大部分平台使用的又是哪种呢？这些将是我们接下来要探讨的问题。
在正式开始之前，我想推荐一下我写的另外两篇相关的备忘单，一个是用户体验备忘单：搜索和浏览，另一个是用户界面备忘单：列表和栅格。尽管它们对于理解这三种方式类型并不是决定性的，但它们会为您提供一些背景和上下文知识。
今天的备忘单将包含以下内容：
1.介绍
2.分页
2.1.事实表
2.2.每页项数
2.3.组件：导航
2.4.组件：过滤
2.5.组件：排序
2.6.组件：每页项数
2.7.组件：显示结果
2.8.组件：栅格到列表的切换器
2.9.组件：字母索引
2.10.组件：跳转
3.无限滚动
3.1.事实表
3.2.组件：固定导航栏
3.3.组件：Instagram上“您已经到底了”的组件
3.4.组件：加载器
4.“加载更多”按钮
4.1.事实表
4.2.组件：“加载更多”按钮
4.3.组件：加载器
4.4.组件：搜索建议标签
4.5.组件：“滚动至顶”按钮
5.总结
6.延伸阅读和参考资料
1.介绍
想象一下你在大型服务器机房里是一台快乐的小服务器。你可以一次性处理一些数据任务，大部分时间只是在人们需要的时候响应服务请求，生活如此美好。有一天，系统要求你给4百万个不同的人发送926万亿条信息项。这时你可能会崩溃而死，而需要这些结果的人们也会因为在等待加载的过程中过度无聊而死。这就是为什么我们需要分页、无限滚动和“加载更多”按钮的原因。
这些方式使服务器只需要一次性发送一部分内容给用户，从而减少了加载时间。但它们又有各自的优缺点，所有你必须为你的产品决定最佳的那一个方式。
简单来说：
分页只是一个个页面。常见于线上商店。
无限滚动让你误以为所有的内容都已经下载完了，但其实只是在你滚动时下载的。Instagram就是运用这种方式。
加载更多按钮是一个在页面底部的按钮，它可以让你加载更多结果。比如谷歌图片。
我不知道服务器是怎么死掉的。我想象它们一定是在一声巨响中阵亡，并唱到“别为我哭泣，阿根廷”。但我也不能确定。我能确定的是，这实际上并不足以杀死一台服务器，顶多是使其崩溃或怎么样。
2.分页
由于我网上购物的时间很长（我怀疑在COVID-19锁定期间我单枪匹马都可以推进当地小企业的繁荣发展），我可以肯定地说分页仍然是展示产品最受欢迎的方式。如果你不相信我的话，可以去看看SMASHING MAGZINE，它也是这样说的。
当用户处于“搜索模式”时，他们正在寻找特定的内容。下面这些网站在他们的搜索结果中就使用了分页。
2.1.事实表
尽管下面是一些已经研究的事实，但其中许多也是我的观点；因此在决定使用正确的方式之前，请持保留态度。
优点
在电子商务网站上很受欢迎
允许用户研究和查阅页面（“Oh，我喜欢的那些耳饰在第三页”）
对项目顺序很重要的网站很有用
缺点
人们认为它很慢并且需要花费很长时间去加载（参考链接）
如果谷歌的搜索结果值得一看，那也不会存在第二页了。话虽这么说，如果我要买东西，我会逐一点进该死的每一页。
作为一个相当“古老”的方式，我猜想大多数人都觉得它和无限滚动和惰性加载相比有点过时。
由于手指过粗，移动设备上的导航元素必须更加简单（可能只有我？*迅速隐藏手指*）
有趣的事：
尽管大部分方式包括了页码链接，但用户通常只点“下一页”或”上一页”。（参考链接）
虽然大部分人都对此种方式有所抱怨——但分页仍然是三种方式中最受欢迎的。
人们花费更多的时间在第一页的内容。（参考链接）
受欢迎的地方：
电子商务
搜索结果
参考目录
2.2.每页应该有多少项
所以，你应该在每页上放多少项呢？这取决于——a.你使用的是网格视图还是列表视图？b.你有“每页项数”组件吗？c.你有多大体量的项数？
下面的列表呈现了各种网站上每页加载多少项的情况：
网格视图：
Sears：50
Toy's R Us：100
Shutterstock: 27
Amazon: 48
列表视图
Udemy: 20
Alibaba: 48
CNN: 10
Google search: +/- 10 items (取决于你是否把广告计算在内)
Amazon: 16
带有“每页项数”组件的网格视图
Macy’s: 60 (默认) 或120
Superbalist: 24 (4列) (默认) 或72 (6列) 或72 (8列)
Newegg: 36 (默认) 或60或90
Currys PC World: 20 (默认) 或30或all
Wondery: 10 or 20 (默认) 或50或100
Foyles: 10 or 20 (默认) 或50或100或200
Barns & Noble: 20 (默认)或40
带有“每页项数”组件的列表视图
eBay: 25 or 50 (默认) 或100或200
以上“每页项目”的数量统计于2020年5月14日。
问题：那么，每页展示多少项是最完美的呢？
答案：我无法回答这个问题。当你查看以上数值的时候，你将会发现不同网站之间几乎难以在这个问题上达成一致（那些带有网格视图和“每页项数”组件的网站除外）。当在设计您自己的目录页面时，我将决定用户要进行多少次向下滚动以及每页要显示多少项。
2.3.组件：导航
下一个/上一个按钮是用户浏览于页面之间的主要方式，所以让它们突出一些是十分合理的。因为用户更倾向于寻找“下一个”按钮，所以要确保它有一个更加主导的样式或者把它作为一个“主按钮”（如果你阅读过我的按钮备忘单这篇文章）。
由于移动设备没有足够空间时，所以请将页码仅用作指示目的，并使用导航按钮。
还有一点需要时刻注意的是，如果当前是在首页或末页，你需要隐藏或禁用“上一页”或“下一页”按钮。我本人更像一个“隐藏”女孩，但是选择权是你的。
分页中需要使用这种组件吗？需要的，没有它，你根本不能浏览页面。
2.4.组件：过滤器
过滤器帮助你的用户找到更加准确的结果。当然这依赖于你的内容是否被准确打上标签和分类。
这里主要有两种过滤器，第一种是位于结果内容上面，与页面顶部对齐。如果只有很少几个方面，或者你希望列表或网格占据页面网格的整个宽度，请使用这种样式。顶部过滤器也可以用在有“加载更多按钮”的页面，比如谷歌图片。
第二种过滤器样式是左对齐。如果你有很多目录需要展示或你的列表/网格不需要页面的整个宽度，我建议可以使用这种样式的过滤器。
分页中需要使用这种组件吗？它只是可期望的要素，但并不是必要的。
2.5.组件：排序
排序功能让用户用他们希望的方式去组织内容。虽然我们大多数人吃千禧一代的拉面会以“最低价格”去选购——但这对每个人来说不是最重要的。如果你通过搜索查询进入该页面，则应该默认将其设置为“最相关”。如果用户仅仅点击了目录但没有添加任何搜索字词，你也可以将其设置为默认“最相关”，但可能也要考虑“最受好评”或“最新”，甚至是针对您的网站定制标准条件，例如“最明亮的”或最近Z世代所说的任何话。
当你创建选项去进行排序时，你可以考虑使用以下列表中的一些选项。它们可能并不总是相关的，比如“A-Z”这种排序方式在浏览手提包的场景下就毫无作用，但是在查找班级学生时却很有用。
最相关
最受关注
最受好评
最受喜欢
最新
价格最低
价格最高
字母顺序：A-Z
按名字的字母顺序：A-Z
按姓氏字母顺序：A-Z
最高分
最低分
等等
分页中需要使用这种组件吗？它仅仅是可期望的要素，但并不是必需的。
2.6.组件：每页项数
这个功能可以让用户在页面上看到更多或更少的内容。用户通常会根据他们的网速和想在一页上显示多少项来进行调整。我在研究时发现，英国网站使用这种组件比美国网站要多。我不确定这是我选择的网站的原因还是这是一种普遍现象？ 如果您也注意到了这一点，请在评论中告诉我。 :)
分页中需要使用这种组件吗？用户会很高兴有。
2.7.组件：显示结果
你的用户可能想知道一共有多少项内容可供他们查看。这将表明他们的搜索标准的受欢迎程度和他们有多少选项。这是一个无法交互的静态组件。
通常没有每页项数组件时，这个组件也不会显示。有时他们两个甚至可以手拉手同时出现。
分页中需要使用这种组件吗？它是被期望的，但不是必需的。
2.8.组件：网格到列表的切换器
这个组件让你可以在网格和列表视图之间切换。如果你不完全明白你的用户希望如何浏览你的内容，这个组件将会非常有用。我也建议您可以做一些AB测试以观察你的用户更喜欢哪种方式。
你还可以用这种组件去切换网格宽度。我发现这在网购时特别有用，因为它可以让我选择“浏览”视图还是“评估”视图。
分页中需要使用这种组件吗？是个好方法，但绝对不是必需的。
2.9.组件：字母索引
每当我遇到这种组件时，我就知道自己在已过时的网站上。字母索引组件是一个“电话簿”类型的样式，它可以让你根据某人名字大写首字母轻松地找到他。我认为它们已经不再流行了，我的意思是说网站上有那么多人名，这样的字母索引功能无论如何也不能起到什么作用，而搜索的效率要高的多。
分页中需要使用这种组件吗？可能没有必要，除非你在设计词汇表之类的东西。让你的用户休息一下吧，改用搜索组件。
2.10.组件：跳转
我很喜欢这些家伙，但很少见到他们了。它确实是浏览大型文档和参考网站的好方法，或者只是回到有我喜欢的砂锅菜的第36页。
分页中需要使用这种组件吗？可以使用，但绝对不是必需的。
3.无限滚动
还记得那些说“滚动已死”、“用户不喜欢滚动”和“如果某个站点上的内容不在‘非常规’范围内时，就将不被人看到”的每一个人吗（也包括我那年老的老板）？请和我一起嘲笑他们吧：哈哈哈哈哈哈哈哈哈
继续我们的话题
无限滚动是“浏览行为”的精髓（原谅我使用了“精髓”一词，我最近看了《沃尔特·米蒂的秘密生活》，现在这是我最喜欢的高大上词汇）。它在娱乐领域是最好的选择，你只滚动、滚动、滚动，你的时间和生活就开始逝去。但这对于电子商务来说实在是太糟糕了。想象一下试着用这种方法去寻找你滚动30次之前看到的内容？因此，它主要存在于社交娱乐领域。
“滚动是一种延续，点击是一个决定”——约书亚波特
3.1.事实表
尽管下面一些点是研究的事实，但其中很多也是我的观点，所以在决定使用正确的方式时请持保留态度。
优点：
无限滚动会让人上瘾
它能让用户拥有快速加载的感知
它是一种趋势
它有长期的用户参与度
滚动是一种预期的行为，尤其是在触摸屏上
适用于图片
缺点
无限滚动会让人上瘾
对搜索内容很不友好，并且难以找到之前看到过的内容
分散用户对内容的关注度（参考链接）
用户几乎永远看不到页脚（如果有）
对文本搜索结果不友好
导航会变成问题，而且用户可能需要一直滚动到顶才能到达导航栏（如果导航没有固定的话）
最近有一些禁止无限滚动的风声（参考链接）
跟踪分析更加困难（对此我没有任何个人见解，但designshack.com上有关于如何处理这个问题的建议）
如果用户的信号不好，则可能会出现性能问题。
有趣的事:
具有无限滚动功能使得平台能持续为用户生成内容（相关性有所不同）。Pinterest就是一个很好的例子，当你无限滚动时，它会显示出越来越多跟你兴趣相关的内容。
这种方式有时候也被称为无目的滚动。
示例：
我还没有遇到过使用无限滚动的电子商务网站，据我所知，主要是娱乐&社交网站使用它，比如：
YouTube
Google play
*发布后的补充编辑：Saurav Pandey 提醒我一些移动版本的电子商务是使用了无限滚动的，比如 https://m.snapdeal.com/ 。在此表示感谢！
3.2.组件：固定导航栏
由于无限滚动模式可以无限滚动，所有你必须确保导航是固定的——否则你可怜的用户将永远无法在您的平台上找到出路。对于在浏览器中查看的平台，我建议将导航置于屏幕的顶部。对于APP来说，你可能具有更多的灵活性，比如像Instagram，你可能会在顶部和底部停靠导航。
无限滚动需要使用这种组件吗？是必需的。
3.3.组件：Instagram上的‘你已经滑到底啦’ 组件
还记得我们以前躺在沙发上花费数小时浏览Instagram吗？然后有一天我们看到”你已经滑到底啦”这条信息，它是不是正对你尖叫着“滚出沙发，你正在浪费生命！”？是的，这对我来说也是艰难的一天。
Instagram曾经受到很多批判，因为人们不能跟踪他们所浏览过的和未曾见过的内容，因此Instagram专门介绍了这个组件。尽管一开始我并不喜欢它，但是它使我的体验变得更好了，而且我个人十分感激这10分钟的滚动会议（尤其是在锁定中）。
受Instagram启发的“你已经到底啦”组件示例
无限滚动中需要这个组件吗？这取决于您的平台。
3.4.组件：加载器
在理想世界里，你将永远不会知道一个APP的加载器长什么样子。唉，但是我们并不生活在那个世界里。也许台湾真是那个理想世界。如果您来自台湾，能否在评论里证实一下是否仍然能看到加载器呢？我的意思是说，假装你看到过——起码还能给女孩们带来一点希望。
如果你的网速连接不佳或者你下载的服务器速度很慢，你就只能一直盯着加载器，永永远远。加载器只是一个指示作用，让你知道平台没有崩溃，它只是在挣扎加载。它就像脉搏一样——让你知道尽管在一百万次的Instagram滚动后你的内心已经死去，但你的身体还是活的。
无限滚动需要这个组件吗？是的，而且必需。
4.加载更多按钮
加载更多按钮是没人真正谈论的第三个孩子，当他们提到它的时候，也只是跟其他孩子作比较。我们常常听到“分页显示”、“无限滚动显示”，可怜、过气的加载更多按钮只能在后台玩神奇宝贝tazos，等待有人与它们交谈。奇怪的是，虽然这个组件被拥有世界最大搜索引擎之一的Google使用了，但它仍然没有得到应有的关注。Google在移动设备和谷歌图片上使用了它（可能还有其他地方，但我觉得这两处已足以证明我的观点，我也不想再去检验了）。
4.1.事实表
请记住，尽管下面的观点是已经研究的事实，但很多也是我自己的观点。
优点：
像分页一样，它让您仍然可以组织结果内容。
像无限滚动一样，它适合在移动设备上使用。
缺点：
像无限滚动一样，它让您很难再次找到结果
有意思的事：
它有一个“结束”字样，不能像Pinterest那样继续创建出内容。
案例：
Google (on mobile)
Google Images
Harvard Business Review (in search)
Stitcher
Marks and Spencer
Google（在移动设备上）
谷歌图片
哈佛商业评论（搜索状态下）
Stitcher
4.2.组件：加载/显示更多结果按钮
这是这种方式必不可少的按钮。一旦你抵达页面底部，这个按钮就会出现，表示你仍然可以加载更多结果。
你必须决定的事之一是在按钮上显示什么文字。“加载更多”“显示更多结果”和“更多结果”是最常见的。
点击加载更多的方式需要这种按钮吗？对，是必要的。
4.3.组件：加载器
像无限滚动一样，你可能也需要一个加载器。这个加载器只有在你点击“加载更多按钮”的时候才会被触发。
加载更多按钮需要加载器吗？是必要的。
4.4.组件：搜索建议标签
这种小小的搜索建议标签是一种鼓励您的用户围绕一个话题浏览更多内容的好方式。你也可以在另外两种方式上使用它们，但它们最好和“加载更多”按钮一起使用。
加载更多按钮需要这种标签组件吗？不是必需的，但加上去会比较好。
4.5.组件：滚动至顶按钮
这个方便的小家伙能让你无须手动操作就可以一路滚到顶部。
加载更多按钮组件需要这个按钮吗？不是必需的，但如果使用的话会比较好。
5.总结
问题：所以，分页、无限滚动或加载更多按钮——你应该使用哪一个呢？
回答：这完全取决于你想要创建什么样的产品体验。
如果你创建的是一个供用户参考和浏览您的内容的网站，那么请用分页吧。但如果你要创建的是一个期望用户浏览的社交平台，请使用无限滚动。在两者之间或在场景适当时，请使用“加载更多”按钮。
愉快地去设计吧！
6.延深阅读和参考
无限滚动的优缺点:https://www.webdevelopmentgroup.com/2017/06/the-pros-and-cons-of-infinite-scroll/
滚动比点击容易:http://bokardo.com/archives/scrolling-easier-clicking/
无限滚动的有点和缺点:https://designshack.net/articles/layouts/infinite-scrolling-pros-and-cons/
使用无限滚动、分页还是“加载更多”按钮呢？电子商务中的可用性调查结果https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/
