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圖片。

*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:

當用戶處于“ 搜索模式 ”時，他們正在尋找特定的東西。 以下站點在其搜索結果中使用分頁：

• Google (Desktop)

  Google(桌面)

• Amazon

  亞馬孫

• Udemy

  烏迪米

• eBay

  易趣

• Shutterstock

  快門

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!

設計愉快！

6.進一步的閱讀和參考 (6. Further reading and references)

• The Pros and Cons of Infinite Scroll: https://www.webdevelopmentgroup.com/2017/06/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/

  滾動比單擊更容易： http : //bokardo.com/archives/scrolling-easier-clicking/

• Infinite Scrolling: Pros and Cons: https://designshack.net/articles/layouts/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/

  ?無限滾動，分頁或“加載更多”按鈕？ 電子商務中的可用性調查結果https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/