c# ui 滚动分页_UI备忘单：分页，无限滚动和“加载更多”按钮

最新推荐文章于 2022-09-14 09:12:33 发布

weixin_26732881

最新推荐文章于 2022-09-14 09:12:33 发布

阅读量1.2k

点赞数

文章标签： java javascript python vue ViewUI

原文链接：https://uxdesign.cc/ui-cheat-sheet-pagination-infinite-scroll-and-the-load-more-button-e5c452e279a8

版权

这篇博客聚焦于C# UI设计中的滚动分页技术，探讨如何实现滚动时自动加载更多内容和使用‘加载更多’按钮的功能。内容来源于对原文的翻译，旨在为开发者提供UI设计的备忘指导。

摘要由CSDN通过智能技术生成

c# ui 滚动分页

重点 (Top highlight)

When you have a lot of content, you have to rely on one of these three patterns to load it. So, which is best? What will your users like? What do most platforms use? These are the questions we will explore today.

当内容很多时，必须依靠这三种模式之一来加载它。那么，哪个最好？您的用户会喜欢什么？大多数平台使用什么？这些是我们今天将探讨的问题。

Before you start, I would recommend checking out my other two related cheat sheets, one on searching and browsing and the other on grids and lists. While these aren’t critical to understanding the three pattern types, they will give you some background and context.

在开始之前，我建议您检查一下我的另外两个相关的备忘单，一个关于搜索和浏览，另一个关于网格和列表。尽管这些对于理解这三种模式类型不是至关重要的，但它们将为您提供一些背景和上下文。

在本备忘单中，我们将介绍： (In this cheat sheet we will cover:)

1. Introduction

1.简介

2. Pagination2.1. Fact-ish sheet2.2. How many items per page2.3. Component: Navigation2.4. Component: Filters2.5. Component: Sorting2.6. Component: Items per page2.7. Component: Showing results2.8. Component: Grid to list switcher2.9. Component: Alphabetical index2.10. Component: Jump to

2.分页 2.1。事实表2.2。每页多少个项目2.3。组件：Navigation2.4。组件：Filters2.5。组件：Sorting2.6。组件：每页项目2.7。组件：显示结果2.8。组件：网格以列出switcher2.9。组件：按字母顺序索引2.10。组件：跳转至

3. Infinite scroll3.1. Fact-ish sheet3.2. Component: Sticky nav bar3.3. Component: Instagram’s ‘You are all caught up’ component3.4. Component: Loader

3.无限滚动 3.1。事实表3.2。组件：粘性导航栏3.3。组件：Instagram“所有人都被赶上了” component3.4。组件：装载机

4. Load more button4.1. Fact-ish sheet4.2. Components: ‘Load more’ button4.3. Component: Loader4.4. Component: Search suggestions tags4.5. Component: Scroll to top button

4.加载更多按钮 4.1。事实表4.2。组件：“加载更多”按钮4.3。组件：Loader4.4。组件：搜索建议标签4.5。组件：滚动到顶部按钮

5. Closing thoughts

5.结束语

6. Further reading & references

6.进一步的阅读和参考

1.简介 (1. Introduction)

Imagine you’re a happy little server in a big server room. You can handle a few tasks at a time, mostly just sending stuff to people when they ask for it, life is good. And then one day, you are asked to send 926 trillion items for 4 million different people. You would probably freak out and die* and the people asking for these results would also die (but of boredom waiting for them to load). And this is why we have pagination, infinite scroll and the load more button.

想象一下，您是一个位于大型服务器机房中的快乐小服务器。您可以一次处理一些任务，大部分时间只是在有人要求时向他们发送东西，生活是美好的。然后有一天，您被要求为400万不同的人发送926万亿个项目。您可能会吓死而死*，要求这些结果的人也会死(但无聊地等待着他们)。这就是为什么我们有分页，无限滚动和加载更多按钮的原因。

These patterns allow the server to send through only a portion of the content to a user at a time, thus reducing load time. But they each have their own strengths and weaknesses, and you have to decide which is better for your product.

这些模式允许服务器一次仅将部分内容发送给用户，从而减少了加载时间。但是它们每个都有自己的优点和缺点，因此您必须确定哪种产品更适合您。

In a nutshell:

简而言之：

Pagination is just pages. Think most online stores.

分页只是页面。想想大多数在线商店。

Infinite scroll tricks you into thinking that everything has been downloaded, but is, in fact, downloading as you scroll. Think Instagram.

无限 滚动使您以为所有内容都已下载，但实际上是在滚动时下载。想想Instagram。

Load more button is a button at the bottom of a page that allows you to load more results. Think Google Images.

加载更多按钮是页面底部的按钮，可让您加载更多结果。想想Google图片。

Image for post — Example of pagination, infinite scroll and load more button

*I have no idea how servers die. I imagine that they go out in a BOOM while singing ‘don’t cry for me Argentina’. But I can’t be sure. I am also pretty sure this wouldn’t actually kill a server. Just crash it or something.

*我不知道服务器如何死亡。我想象他们在BOOM中外出，一边唱歌“别为我哭泣阿根廷”。但是我不能确定。我也很确定这实际上不会杀死服务器。只是崩溃或什么。

2.分页 (2. Pagination)

Due to my hours of online shopping (I suspect that I am single-handedly keeping local small businesses going during the COVID-19 lockdown), I can safely say that pagination is still the most popular way to display products. And if you don’t believe me, Smashing Magazine says so too.

由于我的网上购物时间很长(我怀疑在COVID-19锁定期间我会单枪匹马地让当地的小企业继续前进)，因此我可以肯定地说分页仍然是展示产品的最受欢迎方式。如果您不相信我， Smashing Magazine也会这样说。

When a user is in ‘search mode’ they are looking for something specific. The following sites use pagination in their search results:

当用户处于“ 搜索模式 ”时，他们正在寻找特定的东西。以下站点在其搜索结果中使用分页：

2.1。事实表 (2.1. Fact-’ish’ sheet)

While some of the below bullet points are researched facts, a lot of them are also my opinion; so please take them with a grain of salt when deciding on the right pattern to use.

尽管以下一些要点是研究事实，但我认为很多也是事实。因此，在确定使用正确的图案时，请带一点盐。

Pros:

优点：

Popular on eCommerce sites.
在电子商务网站上很受欢迎。
Allows users to research and reference pages (“Oh, those earrings I liked were on page 3”).
允许用户研究和参考页面(“哦，我喜欢的耳环在页面3上”)。
Good for sites where the order of items are important.
适用于项目顺序很重要的网站。

Cons:

缺点：

People perceive it as being slow and taking a long time to load. (reference)
人们认为它很慢并且需要很长时间才能加载。 ( 参考 )
If Google’s search results is anything to go by — anything on page 2 might as well not exist. That being said, if I am shopping for something, I will click through every. Damn. Page.
如果需要Google的搜索结果，那么第2页上的任何内容都可能不存在。话虽这么说，如果我要买东西，我会逐一点击。该死的。页。
Being a fairly ‘old’ pattern, I suspect that most people find it a bit old-fashioned compared to infinite scroll & lazy load.
作为一个相当“古老”的模式，我怀疑与无限滚动和惰性负载相比，大多数人都觉得它有点过时。
Navigation elements have to be simpler on mobile due to fat fingers (or maybe that’s just me? *quickly hides hands*).
由于手指粗大，导航元素在移动设备上必须更加简单(或者也许就是我？*快速隐藏手*)。

Interesting:

有趣：

While most patterns include the page number’s links, users usually just click ‘next’ or ‘previous’. (reference)
虽然大多数模式都包括页码的链接，但用户通常只需单击“下一个”或“上一个”。 ( 参考 )
While most people complain about it — pagination still seems to be the most popular of the three patterns.
尽管大多数人对此表示抱怨，但分页似乎仍然是这三种模式中最受欢迎的一种。
People spend more time looking at the content on page one. (reference)
人们花更多时间在第一页上查看内容。 ( 参考 )

Popular with:

在....中很流行：

eCommerce
电子商务
Search results
搜索结果
Reference catalogues
参考目录

2.2。每页应有多少个项目 (2.2. How many items should you have per page)

So, how many items should you have on your page? Well, it will depend on a couple of factors, a) Are you using a grid or list view, b) Do you have a ‘items per page component’? c) How big are your items?

那么，页面上应该有多少个项目？好吧，这取决于几个因素，a)您是否使用网格视图或列表视图，b)您是否有“每页项目数量”？ c)您的物品有多大？

Below is a list of how many items load per page on the following sites:

以下是在以下网站上每页加载多少项目的列表：

Grid viewSears: 50Toy’s R Us: 100Shutterstock: 27Amazon: 48

网格视图 Sears：50Toy's R Us：100Shutterstock：27Amazon：48

List viewUdemy: 20Alibaba: 48CNN: 10Google search: +/- 10 items (depending on if you count ads)Amazon: 16

列表视图 Udemy：20阿里巴巴：48CNN：10 Google搜索：+/- 10个项目(取决于您是否计算广告)亚马逊：16

Grid view with an ‘items per page’ componentMacy’s: 60 (default) or 120Superbalist: 24 (4 across) (default) or 72 (6 across) or 72 (8 across)Newegg: 36 (default) or 60 or 90Currys PC World: 20 (default) or 30 or allWondery: 10 or 20 (default) or 50 or 100Foyles: 10 or 20 (default) or 50 or 100 or 200Barns & Noble: 20 (default) or 40

带有'每页项目数'组件的网格视图 Macy's：60(默认)或120Superbalist：24(4跨)(默认)或72(6跨)或72(8跨)新蛋：36(默认)或60或90Currys PC世界：20(默认)或30或全部妖怪：10或20(默认)或50或100鞋类：10或20(默认)或50或100或200谷仓和贵族：20(默认)或40

List view with an ‘items per page’ componenteBay: 25 or 50 (default) or 100 or 200

带有“每页项”组件的列表视图 eBay：25或50(默认)或100或200

The above ‘item per page’ counts were gathered on the 14th of May 2020.

以上``每页项目''计数是在2020年5月14日收集的。

Question: So, what is the perfect number of items to display per page?

问题：那么，每页显示的最佳项目数是多少？

Answer: I can’t tell you. If you look at all the above values, you will see that there seems to be very little agreement between different sites (except for the sites with a grid view and ‘items per page’ component).When designing your own catalogue page, I would decide on how many ‘scroll downs’ your user would want to do, and how many items you would want to expose them to per page.

答：我不能告诉你。如果您查看所有上述值，您会发现不同站点之间似乎几乎没有一致性(具有网格视图和“每页项”组件的站点除外)。在设计自己的目录页面时，确定您的用户要进行多少次“滚动滚动”，以及每页要显示多少项。

2.3。组件：导航 (2.3. Component: Navigation)

Next/Previous buttons are the main way that users navigate through pages, so it makes sense to make them fairly prominent. Because users are more likely to look for the ‘next’ button, make sure it has a more dominant style (or is a ‘primary action button’ if you have read my cheats sheet on buttons.)

“下一个/上一个”按钮是用户浏览页面的主要方式，因此使其相当突出是有意义的。因为用户更可能会寻找“下一个”按钮，所以请确保它具有更主导的风格(如果您已阅读按钮上的备忘单，则该样式为“主要动作按钮”。)

Without the luxury of space on mobile, rather use the page number as indicators only, and the buttons for navigation.

在移动设备上没有足够的空间时，请使用页码仅作为指示器，并使用导航按钮。

Something else to keep in mind is that you will need to either hide or disable a ‘previous’ or ‘next’ button if you are on the first or last page. I am more of a ‘hidden’ girl myself, but the choice is yours.

要记住的另一点是，如果您位于第一页或最后一页，则需要隐藏或禁用“上一页”或“下一页”按钮。我本人更像是一个“隐藏”女孩，但选择权是您的。

DO YOU NEED IT FOR PAGINATION? Yes. You can’t navigate pages without it.

您是否需要分页？ 是。没有它，您将无法浏览页面。

2.4。组件：过滤器 (2.4. Component: Filters)

Filters help your users find more accurate results. This is, of course, relying on your content being accurately tagged and categorized.

筛选器可帮助您的用户找到更准确的结果。当然，这取决于对您的内容进行正确的标记和分类。

There are two main filtering styles, the first being aligned to the top of the page above the results. Use this style if there are only a few facets, or if you want your list or grid to take up the full width of the page grid. Top filtering can also be used on pages with a ‘load more button’, like Google Images.

有两种主要的过滤样式，第一种与结果上方的页面顶部对齐。如果只有几个方面，或者您希望列表或网格占据页面网格的整个宽度，请使用此样式。顶部过滤也可以在带有“加载更多按钮”的页面上使用，例如Google图片。

The second filtering style is aligned to the left. I would suggest using this style if you have a lot of categories and your list/grid doesn’t need the full width.

第二种过滤样式向左对齐。如果您有很多类别，并且列表/网格不需要全角，我建议您使用这种样式。

DO YOU NEED IT FOR PAGINATION? It’s an expected element, but not a required one.

您是否需要分页？ 这是一个预期的元素，但不是必需的元素。

2.5。组件：排序 (2.5. Component: Sorting)

Sorting allows the user to order the content in the way they want. While most of us ramen eating millennials will choose to order by ‘lowest price’ — this isn’t what is most important to everyone. By default, it should be set to ‘most relevant’ if you got to that page via a search query. If the user just clicks on a catalogue without adding any search terms, you could also default by ‘most relevant’ but maybe consider going by ‘most rated’ or ‘newest’, or even a criteria that’s specific to your site, e.g. ‘most lit’ or whatever gen Z is saying these days.

排序允许用户以他们想要的方式对内容进行排序。尽管我们大多数吃千禧一代的拉面会选择以“最低价格”订购-这并不是每个人都最重要的事情。默认情况下，如果您通过搜索查询进入该页面，则应将其设置为“最相关”。如果用户仅单击目录而未添加任何搜索词，则也可以默认为“最相关”，但可以考虑按“最受好评”或“最新”，甚至是针对您网站的标准，例如“最关注”点燃”或Z世代所说的话。

When creating your options to sort through, you might consider using some of the options from the list below. They may not always be relevant, e.g. ‘Sort A-Z’ won’t be useful when looking at handbags, but will be useful when looking at students in a class.

创建选项进行排序时，您可以考虑使用以下列表中的一些选项。它们可能并不总是相关，例如，“ Sort A-Z”在看手提包时不会有用，但在看班上的学生时会有用。

Most relevant
最相关的
Most viewed
最受关注
Most reviewed
评论最多
Most rated
评分最高
Most favourited
最喜欢的
Newest
最新
Lowest price
最低价格
Highest Price
最高价
Alphabetical: A-Z
字母顺序：AZ
Alphabetical by first name: A-Z
按字母顺序排列的名字：AZ
Alphabetical by surname: A-Z
按姓氏字母顺序排列：AZ
Highest score
最高分
Lowest score
最低分

Etc.

等等。

DO YOU NEED IT FOR PAGINATION? It’s an expected element, but not a required one.

您是否需要分页？ 这是一个预期的元素，但不是必需的元素。

2.6。组件：每页项目 (2.6. Component: Items per page)

This allows the user to see either more or less items on a page. A user will usually adjust this depending on their internet speed and how many items they want to see on the page. While doing my research, I noticed that this component was used more on British sites than American ones. I’m not sure if it was the sites I picked or if this is a thing? If you have noticed this too — let me know in the comments. :)

这使用户可以在页面上看到更多或更少的项目。用户通常会根据他们的互联网速度以及他们希望在页面上看到多少项目来进行调整。在进行研究时，我注意到在英国网站上使用此组件的比例高于在美国网站上。我不确定这是我选择的网站还是这件事？如果您也注意到了这一点，请在评论中告诉我。 :)

DO YOU NEED IT FOR PAGINATION? Nice to have.

您是否需要分页？ 很高兴有。

2.7。组件：显示结果 (2.7. Component: Showing results)

Your user may want to know how many items are available for them to see. This will indicate how popular their search criteria is and how many options they have. This is a static component and won’t be interactable.

您的用户可能想知道有多少项目可供他们查看。这将表明他们的搜索标准的受欢迎程度以及他们有多少选择。这是一个静态组件，将无法交互。

Usually, you wouldn’t show this component without the items per page component. Sometimes the two can even sit hand in hand.

通常，没有每页项目组件不会显示此组件。有时两个人甚至可以手拉手坐在一起。

DO YOU NEED IT FOR PAGINATION? It’s expected, but not required.

您是否需要分页？ 这是预期的，但不是必需的。

2.8。组件：网格到列表切换器 (2.8. Component: Grid to list switcher)

This component allows you to switch between a grid and a list view. This can be helpful if you don’t fully understand how your users want to view your content. I would also suggest doing some AB testing to see which style your users prefer.

该组件使您可以在网格和列表视图之间切换。如果您不完全了解用户如何查看您的内容，这将很有帮助。我还建议您进行一些AB测试，以查看您的用户喜欢哪种样式。

You can also switch between grid widths using this component. I find it quite helpful when doing online shopping so that I can alternate between a ‘scanning’ view and an ‘evaluating’ one.

您也可以使用此组件在网格宽度之间切换。我发现在进行网上购物时非常有帮助，因此我可以在“扫描”视图和“评估”视图之间进行切换。

DO YOU NEED IT FOR PAGINATION? It’s nice to have, but definitely not required.

您是否需要分页 ？很高兴，但绝对不是必需的。

2.9。组成部分：字母索引 (2.9. Component: Alphabetical index)

Whenever I come across one of these components — I know I’m on an old site. Alphabetical index components are a ‘phone book’ type style that allows you to easily find someone by their initial. I suspect these aren’t that popular anymore — I mean, usually, there are so many people on a site, that an index like this won’t help anyway — and search is just so much more effective.

每当我遇到这些组件之一时，我就会知道自己在一个旧站点上。按字母顺序排序的索引组件是“电话簿”类型的样式，可让您轻松地按字母开头查找某人。我怀疑这些不是流行了-我的意思是，通常情况下，有这么多的人在网站上，像这样的指标无论如何也不会帮助-和搜索就是这么有效得多。

DO YOU NEED IT FOR PAGINATION? Probably not, unless you are designing a glossary or something. Give your users a break and use a search component instead.

您是否需要分页？ 可能不是，除非您正在设计词汇表之类的东西。让您的用户休息一下，改用搜索组件。

2.10。组件：跳转至 (2.10. Component: Jump to)

I like these guys, but seldom see them anymore. It really is a great way of navigating through big documents and reference sites, or just getting back to page 36 which had the casserole dish I liked.

我喜欢这些家伙，但很少再见到他们了。这确实是浏览大型文档和参考网站的好方法，或者只是回到第36页，那里有我喜欢的砂锅菜。

DO YOU NEED IT FOR PAGINATION? It’s nice to have, but definitely not required.

您是否需要分页 ？很高兴，但绝对不是必需的。

3.无限滚动 (3. Infinite scroll)

Remember when everyone (a.k.a. my old boss) said ‘scroll is dead’, ‘users don’t like scrolling,’ and if something isn’t ‘above the fold’ on a site then no one would ever see it? Well, I invite you to laugh at them with me:

还记得当每个人(又名我的老老板)说“ 滚动已死 ”时，“ 用户不喜欢滚动 ”，并且如果某个站点上的内容不是“ 超出折叠范围 ”，那么没人能看到吗？好吧，我邀请你和我一起嘲笑他们：

BAHAHAHAHAHAHAAHAHAHAHAHAHAHAHAHAAHAHAHAHHA.

巴哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

Moving along.

前进。

Infinite scroll is the quintessence of ‘browsing behaviour’ (apologies for the use of quintessence, I have recently watched The Secret Life of Walter Mitty and now it is my favourite big word). It’s best for entertainment, you just scroll and scroll and scroll and as you do so, time (and your life) just starts to disappear. However — it is kind of awful for eCommerce. Imagine trying to find something you saw 30 scrolls earlier? Hence, it lives mostly in the realms of social entertainment.

无限滚动是“浏览行为”的精髓(为使用精髓而道歉，我最近看了《沃尔特·米蒂的秘密生活》 ，现在这是我最喜欢的大词)。最好的娱乐方式是，只要滚动滚动，然后滚动，时间(和您的生活)就开始消失。但是，这对于电子商务来说实在是太糟糕了。想像一下，想找到一些您之前看过30卷的东西吗？因此，它主要生活在社交娱乐领域。

“scrolling is a continuation; clicking is a decision”- Joshua porter

“滚动是一种延续； 点击是一个决定”- 约书亚·波特

3.1。事实表 (3.1. Fact-’ish’ sheet)

While some of the below bullet points are researched facts, a lot of them are also my own opinion, so again, please take them with a grain of salt when deciding on the right pattern to use.

尽管以下一些要点是经过研究的事实，但许多观点也是我自己的观点，因此，再次决定正确的使用方式时，请带一点盐。

Pros:

优点：

Infinite scroll can be addictive.
无限滚动可能会上瘾。
It has a perceived quick load time.
它具有快速的加载时间。
It’s ‘trendy’.
这很“时髦”。
It has long periods of user engagement.
它具有长期的用户参与度。
Scrolling is an expected behaviour, especially on touch screens.
滚动是一种预期的行为，尤其是在触摸屏上。
It’s good for images.
这对图像很有好处。

缺点： (Cons:)

Infinite scroll can be addictive.
无限滚动可能会上瘾。
It’s really bad for searching for content and is difficult to find something you found earlier.
这对于搜索内容确实很不好，而且很难找到您之前找到的内容。
Users focus less on the content. (reference)
用户较少关注内容。 ( 参考 )
Your user will almost never see the footer (if you have one).
您的用户几乎永远不会看到页脚(如果有的话)。
Not good for text search results.
不利于文本搜索结果。
Navigation can become tricky and users may have to scroll all the way up to get to the nav bar (if it isn’t sticky).
导航可能会变得棘手，并且用户可能必须一直滚动到导航栏(如果它不是粘性的)。
There are vague whispers about banning infinite scroll. (reference)
关于禁止无限滚动有模糊的耳语。 ( 参考 )
Tracking the analytics is harder (I haven’t got any personal insight into this, but designshack.com has suggestions on how to deal with it).
跟踪分析更加困难(我对此没有任何个人见解，但是designshack.com上有关于如何处理它的建议)。
You can have performance issues if the user has a bad signal.
如果用户的信号不好，则可能会出现性能问题。

Interesting:

有趣的是 ：

Having infinite scroll allows the platform to continually generate content for the user (varying in relevance). Pinterest is a perfect example of this, as you scroll, it brings up more and more content related to your interests.
具有无限滚动功能使平台可以连续为用户生成内容(相关性有所不同)。 Pinterest是一个很好的例子，当您滚动时，它会显示出越来越多与您的兴趣相关的内容。
This pattern is also sometimes called endless scroll.
这种模式有时也称为无尽滚动。

Examples:

例子：

I have yet to come across an eCommerce site using infinite scroll*, and as far as I can tell, it is mostly entertainment & social sites that use it, for example:

我还没有看到使用无限滚动*的电子商务网站，据我所知，主要是娱乐和社交网站使用它，例如：

Instagram
Instagram
Twitter
推特
Pinterest
Pinterest
Facebook
脸书
YouTube
的YouTube
Google play
谷歌播放

*Post publish edit: Saurav Pandey reminded me that some mobile versions (m.) of eCommerce sites use infinite scroll, for example: https://m.snapdeal.com/ . Thank you!

*发布后编辑： Saurav Pandey 提醒我，某些电子商务网站的移动版本(m。)使用无限滚动，例如： https : //m.snapdeal.com/ 。 谢谢！

3.2。组件：粘性导航栏 (3.2. Component: Sticky nav bar)

Because infinite scroll scrolls well, infinitely, you have to make sure your navigation sticks — otherwise your poor user will never be able to find their way around your platform. For platforms viewed in a browser, I would recommend sticking the nav to the top of the screen. With apps, you probably have more flexibility, and like Instagram, you could probably get away with docking a nav at the top and bottom.

因为无限滚动可以无限地很好地滚动，所以您必须确保导航棒–否则，可怜的用户将永远无法在平台上找到自己的方式。对于在浏览器中查看的平台，建议将导航栏放在屏幕顶部。有了应用程序，您可能会具有更大的灵活性，就像Instagram，您可能可以避免在顶部和底部停靠导航。

DO YOU NEED IT FOR INFINITE SCROLL? Yes, it’s required.

您需要无限滚动吗？是的，这是必需的。

3.3。组件：Instagram“全都赶上了”组件 (3.3. Component: Instagram’s ‘You’re all caught up’ component)

Remember when we used to spend hours scrolling through Instagram on the couch? And then one day we saw the ‘You’re all caught up’ message and it screamed “get off the couch, you’re wasting your life!” at you? Yeah, it was a hard day for me too.

还记得我们过去花费数小时在沙发上浏览Instagram吗？然后有一天，我们看到“你们都被赶上了”的消息，它尖叫着“滚下沙发，您正在浪费生命！” 在你身上？是的，对我来说也是艰难的一天。

Instagram received a lot of criticism in the past because people couldn’t keep track of what they had and hadn’t seen, which is why they introduced this component. While I didn’t like it at first, it has made my experience much better, and I personally appreciate my 10 minute scroll sessions so much more (especially in lockdown).

Instagram过去曾受到很多批评，因为人们无法跟踪自己所拥有和未曾看到的东西，这就是他们引入此组件的原因。虽然我不喜欢它在第一，它使我的经验好多了，我个人比较欣赏我的10分钟滚动会话这么多(尤其是在锁定)。

DO YOU NEED IT FOR INFINITE SCROLL? It’s a nice to have depending on your platform.

您需要无限滚动吗？取决于您的平台，这是一个很好的选择。

3.4。组件：装载机 (3.4. Component: Loader)

In an ideal world — you will never know what an app’s loader looks like. But, alas, we don’t live in that world. Or maybe Taiwan does? If you are from Taiwan, can you confirm in the comments if you still see loaders? I mean, I assume you do — but give a girl hope.

在理想的世界中-您将永远不知道应用程序的加载器是什么样。但是，a，我们不生活在那个世界中。也许台湾呢？如果您来自台湾，能否在评论中确认是否仍然看到装载机？我的意思是，我认为您会这样做-但给女孩带来希望。

If you have poor internet connection or the server you are downloading from is slow, you will have to stare at a loader for what seems like forever. Loaders are just an indicator to let you know that the platform hasn’t crashed — it’s just struggling. It’s kinda like a pulse — it let’s you know that your body is alive, even though you feel dead on the inside after that millionth Instagram scroll.

如果您的互联网连接状况不佳，或者从中下载的服务器速度较慢，则您将不得不盯着装载机，以永久解决问题。加载程序只是一个指示器，可以让您知道平台还没有崩溃—只是在挣扎。这有点像一个脉搏-它使您知道自己的身体还活着，即使在百万分之一的Instagram滚动之后您内心深处也死了。

DO YOU NEED IT FOR INFINITE SCROLL? Yes, it’s required.

您需要无限滚动吗？ 是的，这是必需的。

4.加载更多按钮 (4. Load more button)

The load more button is the third child that no one really talks about, and when they do, it is to compare it to its siblings. It’s always ‘pagination this’ and ‘infinite scroll that’, and the poor old load more button is just playing with their Pokémon tazos in the background waiting for someone to come talk to them. It is strange that this pattern doesn’t get as much attention, seeing as it’s used by one of the biggest search engines in the world — Google. They use it on mobile and in Google Images (and probably more places, I just felt like these two proved enough of a point and I didn’t feel like checking anymore).

“加载更多”按钮是没人真正谈论的第三个孩子，当他们这样做时，它将把它与其兄弟姐妹进行比较。总是“分页显示”和“无限滚动显示”，可怜的旧负载更多按钮只是在后台播放其神奇宝贝tazos，等待有人与他们交谈。奇怪的是，这种模式没有得到世界上最大的搜索引擎之一-Google的广泛关注。他们在移动设备和Google图片中使用了它(可能还有更多地方，我只是觉得这两个点足以证明我的意思，所以我不想再检查了)。

4.1。事实表 (4.1. Fact-’ish’ sheet)

Remember, while some of the below bullet points are researched facts, a lot of them are also my own opinion.

请记住，尽管以下一些要点是经过研究的事实，但其中许多也是我自己的观点。

Pros:

优点：

Like pagination, you can still order results.
像分页一样，您仍然可以订购结果。
Like infinite scroll, it works well on mobile.
就像无限滚动一样，它在移动设备上也能很好地工作。

Cons:

缺点：

Like infinite scroll, it’s hard to find a result again.
就像无限滚动一样，很难再次找到结果。

Interesting:

有趣：

It has an ‘end’ and won’t carry on creating content like Pinterest.
它有一个“终点”，不会继续创建像Pinterest这样的内容。

Examples:

例子：

Google (on mobile)
Google(在移动设备上)
Google Images
谷歌图片
Harvard Business Review (in search)
哈佛商业评论(搜索中)
Stitcher
订书机
Marks and Spencer
马莎百货

4.2。组件：加载/显示更多结果按钮 (4.2. Component: Load/Show more results button)

This is the button that this pattern couldn’t work without. Once you reach the bottom of the page, it will appear, signalling that you can still load more results.

这是该模式无法使用的按钮。到达页面底部时，它将出现，表明您仍然可以加载更多结果。

One of the things that you will have to decide on, is what to say on the button. ‘Load more’, ‘Show more results’ and ‘More results’ seem to be the most common.

您必须决定的事情之一就是在按钮上说什么。 “加载更多”，“显示更多结果”和“更多结果”似乎是最常见的。

DO YOU NEED IT FOR LOAD MORE BUTTONS? Yes, it’s required.

您是否需要加载更多按钮？ 是的，这是必需的。

4.3。组件：装载机 (4.3. Component: Loader)

Like the infinite scroll, you will probably need a loader. The loader will only be triggered when you click the ‘load more button’.

像无限滚动一样，您可能需要一个加载程序。仅当您单击“加载更多按钮”时，才会触发加载程序。

DO YOU NEED IT FOR LOAD MORE BUTTONS? It’s required.

您是否需要加载更多按钮？ 这是必需的。

4.4。组件：搜索建议标签 (4.4. Component: Search suggestions tags)

These little search suggestion tags are a lovely way to encourage your user to browse more around a topic. You can also have them on the other patterns, but they seem to work best with ‘load more’ buttons.

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

DO YOU NEED IT FOR LOAD MORE BUTTONS? No, but it’s nice to have.

您是否需要加载更多按钮？ 不，但是很高兴。

4.5。组件：滚动到顶部按钮 (4.5. Component: Scroll to top button)

This handy little guy allows you to scroll all the way to the top without you having to do it manually.

这个方便的小家伙让您无需手动进行操作即可一直滚动到顶部。

DO YOU NEED IT FOR LOAD MORE BUTTONS? No, but it’s nice to have.

您是否需要加载更多按钮？ 不，但是很高兴。

5.结束语 (5. Closing thoughts)

Question: So, pagination, infinite scroll or a load more button — which should you use?

问题：那么，分页，无限滚动或加载更多按钮-您应该使用哪个？

The answer: It depends entirely on what kind of product experience you’re trying to build.

答案：这完全取决于您要构建什么样的产品体验。

If you’re building a site where people will reference and browse your content — look at using pagination. But if you’re looking at building a social platform where you expect users to browse — use an infinite scroll. Use a ‘load more’ button somewhere in between those two or when the situation makes sense.

如果您要建立一个供人们参考和浏览您的内容的网站，请使用分页。但是，如果您要构建一个希望用户浏览的社交平台，请使用无限滚动。在两者之间或情况适当时使用“加载更多”按钮。

Happy designing!

设计愉快！