巧用这3种分页模式，页面加载不再生硬
时间：2023-06-07 06:36:01 | 来源：网站运营
时间：2023-06-07 06:36:01 来源：网站运营
巧用这3种分页模式，页面加载不再生硬：当页面内容很多需要分页时，可以通过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
The Pros and Cons of Infinite Scroll | WDG
-Scrolling is easier than clicking
Scrolling is easier than clicking
-Infinite Scrolling: Pros and Cons
Infinite Scrolling: Pros and Cons
-Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce
Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce — Smashing Magazine
-图片、GIF来自网络
欢迎关注我的公众号：UX辞典（微信号：uxpedia-design）
微信原文▶▶▶：辞典精译 | 巧用这3种分页模式，页面加载不再生硬
在线咨询
