原文：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端設(shè)計筆記
當頁面中內(nèi)容比較多時，你需要依賴這三種方式中的其中一種去加載它。那么哪種是最好的選擇呢？你的用戶喜歡哪種呢？大部分平臺使用的又是哪種呢？這些將是我們接下來要探討的問題。
在正式開始之前，我想推薦一下我寫的另外兩篇相關(guān)的備忘單，一個是用戶體驗備忘單：搜索和瀏覽，另一個是用戶界面?zhèn)渫鼏危毫斜砗蜄鸥?/a>。盡管它們對于理解這三種方式類型并不是決定性的，但它們會為您提供一些背景和上下文知識。
今天的備忘單將包含以下內(nèi)容：
1.介紹
2.分頁
2.1.事實表
2.2.每頁項數(shù)
2.3.組件：導航
2.4.組件：過濾
2.5.組件：排序
2.6.組件：每頁項數(shù)
2.7.組件：顯示結(jié)果
2.8.組件：柵格到列表的切換器
2.9.組件：字母索引
2.10.組件：跳轉(zhuǎn)
3.無限滾動
3.1.事實表
3.2.組件：固定導航欄
3.3.組件：Instagram上“您已經(jīng)到底了”的組件
3.4.組件：加載器
4.“加載更多”按鈕
4.1.事實表
4.2.組件：“加載更多”按鈕
4.3.組件：加載器
4.4.組件：搜索建議標簽
4.5.組件：“滾動至頂”按鈕
5.總結(jié)
6.延伸閱讀和參考資料
1.介紹
想象一下你在大型服務(wù)器機房里是一臺快樂的小服務(wù)器。你可以一次性處理一些數(shù)據(jù)任務(wù)，大部分時間只是在人們需要的時候響應(yīng)服務(wù)請求，生活如此美好。有一天，系統(tǒng)要求你給4百萬個不同的人發(fā)送926萬億條信息項。這時你可能會崩潰而死，而需要這些結(jié)果的人們也會因為在等待加載的過程中過度無聊而死。這就是為什么我們需要分頁、無限滾動和“加載更多”按鈕的原因。
這些方式使服務(wù)器只需要一次性發(fā)送一部分內(nèi)容給用戶，從而減少了加載時間。但它們又有各自的優(yōu)缺點，所有你必須為你的產(chǎn)品決定最佳的那一個方式。
簡單來說：
分頁只是一個個頁面。常見于線上商店。
無限滾動讓你誤以為所有的內(nèi)容都已經(jīng)下載完了，但其實只是在你滾動時下載的。Instagram就是運用這種方式。
加載更多按鈕是一個在頁面底部的按鈕，它可以讓你加載更多結(jié)果。比如谷歌圖片。
我不知道服務(wù)器是怎么死掉的。我想象它們一定是在一聲巨響中陣亡，并唱到“別為我哭泣，阿根廷”。但我也不能確定。我能確定的是，這實際上并不足以殺死一臺服務(wù)器，頂多是使其崩潰或怎么樣。
2.分頁
由于我網(wǎng)上購物的時間很長（我懷疑在COVID-19鎖定期間我單槍匹馬都可以推進當?shù)匦∑髽I(yè)的繁榮發(fā)展），我可以肯定地說分頁仍然是展示產(chǎn)品最受歡迎的方式。如果你不相信我的話，可以去看看SMASHING MAGZINE，它也是這樣說的。
當用戶處于“搜索模式”時，他們正在尋找特定的內(nèi)容。下面這些網(wǎng)站在他們的搜索結(jié)果中就使用了分頁。
2.1.事實表
盡管下面是一些已經(jīng)研究的事實，但其中許多也是我的觀點；因此在決定使用正確的方式之前，請持保留態(tài)度。
優(yōu)點
在電子商務(wù)網(wǎng)站上很受歡迎
允許用戶研究和查閱頁面（“Oh，我喜歡的那些耳飾在第三頁”）
對項目順序很重要的網(wǎng)站很有用
缺點
人們認為它很慢并且需要花費很長時間去加載（參考鏈接）
如果谷歌的搜索結(jié)果值得一看，那也不會存在第二頁了。話雖這么說，如果我要買東西，我會逐一點進該死的每一頁。
作為一個相當“古老”的方式，我猜想大多數(shù)人都覺得它和無限滾動和惰性加載相比有點過時。
由于手指過粗，移動設(shè)備上的導航元素必須更加簡單（可能只有我？*迅速隱藏手指*）
有趣的事：
盡管大部分方式包括了頁碼鏈接，但用戶通常只點“下一頁”或”上一頁”。（參考鏈接）
雖然大部分人都對此種方式有所抱怨——但分頁仍然是三種方式中最受歡迎的。
人們花費更多的時間在第一頁的內(nèi)容。（參考鏈接）
受歡迎的地方：
電子商務(wù)
搜索結(jié)果
參考目錄
2.2.每頁應(yīng)該有多少項
所以，你應(yīng)該在每頁上放多少項呢？這取決于——a.你使用的是網(wǎng)格視圖還是列表視圖？b.你有“每頁項數(shù)”組件嗎？c.你有多大體量的項數(shù)？
下面的列表呈現(xiàn)了各種網(wǎng)站上每頁加載多少項的情況：
網(wǎng)格視圖：
Sears：50
Toy's R Us：100
Shutterstock: 27
Amazon: 48
列表視圖
Udemy: 20
Alibaba: 48
CNN: 10
Google search: +/- 10 items (取決于你是否把廣告計算在內(nèi))
Amazon: 16
帶有“每頁項數(shù)”組件的網(wǎng)格視圖
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
帶有“每頁項數(shù)”組件的列表視圖
eBay: 25 or 50 (默認) 或100或200
以上“每頁項目”的數(shù)量統(tǒng)計于2020年5月14日。
問題：那么，每頁展示多少項是最完美的呢？
答案：我無法回答這個問題。當你查看以上數(shù)值的時候，你將會發(fā)現(xiàn)不同網(wǎng)站之間幾乎難以在這個問題上達成一致（那些帶有網(wǎng)格視圖和“每頁項數(shù)”組件的網(wǎng)站除外）。當在設(shè)計您自己的目錄頁面時，我將決定用戶要進行多少次向下滾動以及每頁要顯示多少項。
2.3.組件：導航
下一個/上一個按鈕是用戶瀏覽于頁面之間的主要方式，所以讓它們突出一些是十分合理的。因為用戶更傾向于尋找“下一個”按鈕，所以要確保它有一個更加主導的樣式或者把它作為一個“主按鈕”（如果你閱讀過我的按鈕備忘單這篇文章）。
由于移動設(shè)備沒有足夠空間時，所以請將頁碼僅用作指示目的，并使用導航按鈕。
還有一點需要時刻注意的是，如果當前是在首頁或末頁，你需要隱藏或禁用“上一頁”或“下一頁”按鈕。我本人更像一個“隱藏”女孩，但是選擇權(quán)是你的。
分頁中需要使用這種組件嗎？需要的，沒有它，你根本不能瀏覽頁面。
2.4.組件：過濾器
過濾器幫助你的用戶找到更加準確的結(jié)果。當然這依賴于你的內(nèi)容是否被準確打上標簽和分類。
這里主要有兩種過濾器，第一種是位于結(jié)果內(nèi)容上面，與頁面頂部對齊。如果只有很少幾個方面，或者你希望列表或網(wǎng)格占據(jù)頁面網(wǎng)格的整個寬度，請使用這種樣式。頂部過濾器也可以用在有“加載更多按鈕”的頁面，比如谷歌圖片。
第二種過濾器樣式是左對齊。如果你有很多目錄需要展示或你的列表/網(wǎng)格不需要頁面的整個寬度，我建議可以使用這種樣式的過濾器。
分頁中需要使用這種組件嗎？它只是可期望的要素，但并不是必要的。
2.5.組件：排序
排序功能讓用戶用他們希望的方式去組織內(nèi)容。雖然我們大多數(shù)人吃千禧一代的拉面會以“最低價格”去選購——但這對每個人來說不是最重要的。如果你通過搜索查詢進入該頁面，則應(yīng)該默認將其設(shè)置為“最相關(guān)”。如果用戶僅僅點擊了目錄但沒有添加任何搜索字詞，你也可以將其設(shè)置為默認“最相關(guān)”，但可能也要考慮“最受好評”或“最新”，甚至是針對您的網(wǎng)站定制標準條件，例如“最明亮的”或最近Z世代所說的任何話。
當你創(chuàng)建選項去進行排序時，你可以考慮使用以下列表中的一些選項。它們可能并不總是相關(guān)的，比如“A-Z”這種排序方式在瀏覽手提包的場景下就毫無作用，但是在查找班級學生時卻很有用。
最相關(guān)
最受關(guān)注
最受好評
最受喜歡
最新
價格最低
價格最高
字母順序：A-Z
按名字的字母順序：A-Z
按姓氏字母順序：A-Z
最高分
最低分
等等
分頁中需要使用這種組件嗎？它僅僅是可期望的要素，但并不是必需的。
2.6.組件：每頁項數(shù)
這個功能可以讓用戶在頁面上看到更多或更少的內(nèi)容。用戶通常會根據(jù)他們的網(wǎng)速和想在一頁上顯示多少項來進行調(diào)整。我在研究時發(fā)現(xiàn)，英國網(wǎng)站使用這種組件比美國網(wǎng)站要多。我不確定這是我選擇的網(wǎng)站的原因還是這是一種普遍現(xiàn)象？ 如果您也注意到了這一點，請在評論中告訴我。 :)
分頁中需要使用這種組件嗎？用戶會很高興有。
2.7.組件：顯示結(jié)果
你的用戶可能想知道一共有多少項內(nèi)容可供他們查看。這將表明他們的搜索標準的受歡迎程度和他們有多少選項。這是一個無法交互的靜態(tài)組件。
通常沒有每頁項數(shù)組件時，這個組件也不會顯示。有時他們兩個甚至可以手拉手同時出現(xiàn)。
分頁中需要使用這種組件嗎？它是被期望的，但不是必需的。
2.8.組件：網(wǎng)格到列表的切換器
這個組件讓你可以在網(wǎng)格和列表視圖之間切換。如果你不完全明白你的用戶希望如何瀏覽你的內(nèi)容，這個組件將會非常有用。我也建議您可以做一些AB測試以觀察你的用戶更喜歡哪種方式。
你還可以用這種組件去切換網(wǎng)格寬度。我發(fā)現(xiàn)這在網(wǎng)購時特別有用，因為它可以讓我選擇“瀏覽”視圖還是“評估”視圖。
分頁中需要使用這種組件嗎？是個好方法，但絕對不是必需的。
2.9.組件：字母索引
每當我遇到這種組件時，我就知道自己在已過時的網(wǎng)站上。字母索引組件是一個“電話簿”類型的樣式，它可以讓你根據(jù)某人名字大寫首字母輕松地找到他。我認為它們已經(jīng)不再流行了，我的意思是說網(wǎng)站上有那么多人名，這樣的字母索引功能無論如何也不能起到什么作用，而搜索的效率要高的多。
分頁中需要使用這種組件嗎？可能沒有必要，除非你在設(shè)計詞匯表之類的東西。讓你的用戶休息一下吧，改用搜索組件。
2.10.組件：跳轉(zhuǎn)
我很喜歡這些家伙，但很少見到他們了。它確實是瀏覽大型文檔和參考網(wǎng)站的好方法，或者只是回到有我喜歡的砂鍋菜的第36頁。
分頁中需要使用這種組件嗎？可以使用，但絕對不是必需的。
3.無限滾動
還記得那些說“滾動已死”、“用戶不喜歡滾動”和“如果某個站點上的內(nèi)容不在‘非常規(guī)’范圍內(nèi)時，就將不被人看到”的每一個人嗎（也包括我那年老的老板）？請和我一起嘲笑他們吧：哈哈哈哈哈哈哈哈哈
繼續(xù)我們的話題
無限滾動是“瀏覽行為”的精髓（原諒我使用了“精髓”一詞，我最近看了《沃爾特·米蒂的秘密生活》，現(xiàn)在這是我最喜歡的高大上詞匯）。它在娛樂領(lǐng)域是最好的選擇，你只滾動、滾動、滾動，你的時間和生活就開始逝去。但這對于電子商務(wù)來說實在是太糟糕了。想象一下試著用這種方法去尋找你滾動30次之前看到的內(nèi)容？因此，它主要存在于社交娛樂領(lǐng)域。
“滾動是一種延續(xù)，點擊是一個決定”——約書亞波特
3.1.事實表
盡管下面一些點是研究的事實，但其中很多也是我的觀點，所以在決定使用正確的方式時請持保留態(tài)度。
優(yōu)點：
無限滾動會讓人上癮
它能讓用戶擁有快速加載的感知
它是一種趨勢
它有長期的用戶參與度
滾動是一種預期的行為，尤其是在觸摸屏上
適用于圖片
缺點
無限滾動會讓人上癮
對搜索內(nèi)容很不友好，并且難以找到之前看到過的內(nèi)容
分散用戶對內(nèi)容的關(guān)注度（參考鏈接）
用戶幾乎永遠看不到頁腳（如果有）
對文本搜索結(jié)果不友好
導航會變成問題，而且用戶可能需要一直滾動到頂才能到達導航欄（如果導航?jīng)]有固定的話）
最近有一些禁止無限滾動的風聲（參考鏈接）
跟蹤分析更加困難（對此我沒有任何個人見解，但designshack.com上有關(guān)于如何處理這個問題的建議）
如果用戶的信號不好，則可能會出現(xiàn)性能問題。
有趣的事:
具有無限滾動功能使得平臺能持續(xù)為用戶生成內(nèi)容（相關(guān)性有所不同）。Pinterest就是一個很好的例子，當你無限滾動時，它會顯示出越來越多跟你興趣相關(guān)的內(nèi)容。
這種方式有時候也被稱為無目的滾動。
示例：
我還沒有遇到過使用無限滾動的電子商務(wù)網(wǎng)站，據(jù)我所知，主要是娛樂&社交網(wǎng)站使用它，比如：
YouTube
Google play
*發(fā)布后的補充編輯：Saurav Pandey 提醒我一些移動版本的電子商務(wù)是使用了無限滾動的，比如 https://m.snapdeal.com/ 。在此表示感謝！
3.2.組件：固定導航欄
由于無限滾動模式可以無限滾動，所有你必須確保導航是固定的——否則你可憐的用戶將永遠無法在您的平臺上找到出路。對于在瀏覽器中查看的平臺，我建議將導航置于屏幕的頂部。對于APP來說，你可能具有更多的靈活性，比如像Instagram，你可能會在頂部和底部停靠導航。
無限滾動需要使用這種組件嗎？是必需的。
3.3.組件：Instagram上的‘你已經(jīng)滑到底啦’ 組件
還記得我們以前躺在沙發(fā)上花費數(shù)小時瀏覽Instagram嗎？然后有一天我們看到”你已經(jīng)滑到底啦”這條信息，它是不是正對你尖叫著“滾出沙發(fā)，你正在浪費生命！”？是的，這對我來說也是艱難的一天。
Instagram曾經(jīng)受到很多批判，因為人們不能跟蹤他們所瀏覽過的和未曾見過的內(nèi)容，因此Instagram專門介紹了這個組件。盡管一開始我并不喜歡它，但是它使我的體驗變得更好了，而且我個人十分感激這10分鐘的滾動會議（尤其是在鎖定中）。
受Instagram啟發(fā)的“你已經(jīng)到底啦”組件示例
無限滾動中需要這個組件嗎？這取決于您的平臺。
3.4.組件：加載器
在理想世界里，你將永遠不會知道一個APP的加載器長什么樣子。唉，但是我們并不生活在那個世界里。也許臺灣真是那個理想世界。如果您來自臺灣，能否在評論里證實一下是否仍然能看到加載器呢？我的意思是說，假裝你看到過——起碼還能給女孩們帶來一點希望。
如果你的網(wǎng)速連接不佳或者你下載的服務(wù)器速度很慢，你就只能一直盯著加載器，永永遠遠。加載器只是一個指示作用，讓你知道平臺沒有崩潰，它只是在掙扎加載。它就像脈搏一樣——讓你知道盡管在一百萬次的Instagram滾動后你的內(nèi)心已經(jīng)死去，但你的身體還是活的。
無限滾動需要這個組件嗎？是的，而且必需。
4.加載更多按鈕
加載更多按鈕是沒人真正談?wù)摰牡谌齻€孩子，當他們提到它的時候，也只是跟其他孩子作比較。我們常常聽到“分頁顯示”、“無限滾動顯示”，可憐、過氣的加載更多按鈕只能在后臺玩神奇寶貝tazos，等待有人與它們交談。奇怪的是，雖然這個組件被擁有世界最大搜索引擎之一的Google使用了，但它仍然沒有得到應(yīng)有的關(guān)注。Google在移動設(shè)備和谷歌圖片上使用了它（可能還有其他地方，但我覺得這兩處已足以證明我的觀點，我也不想再去檢驗了）。
4.1.事實表
請記住，盡管下面的觀點是已經(jīng)研究的事實，但很多也是我自己的觀點。
優(yōu)點：
像分頁一樣，它讓您仍然可以組織結(jié)果內(nèi)容。
像無限滾動一樣，它適合在移動設(shè)備上使用。
缺點：
像無限滾動一樣，它讓您很難再次找到結(jié)果
有意思的事：
它有一個“結(jié)束”字樣，不能像Pinterest那樣繼續(xù)創(chuàng)建出內(nèi)容。
案例：
Google (on mobile)
Google Images
Harvard Business Review (in search)
Stitcher
Marks and Spencer
Google（在移動設(shè)備上）
谷歌圖片
哈佛商業(yè)評論（搜索狀態(tài)下）
Stitcher
4.2.組件：加載/顯示更多結(jié)果按鈕
這是這種方式必不可少的按鈕。一旦你抵達頁面底部，這個按鈕就會出現(xiàn)，表示你仍然可以加載更多結(jié)果。
你必須決定的事之一是在按鈕上顯示什么文字。“加載更多”“顯示更多結(jié)果”和“更多結(jié)果”是最常見的。
點擊加載更多的方式需要這種按鈕嗎？對，是必要的。
4.3.組件：加載器
像無限滾動一樣，你可能也需要一個加載器。這個加載器只有在你點擊“加載更多按鈕”的時候才會被觸發(fā)。
加載更多按鈕需要加載器嗎？是必要的。
4.4.組件：搜索建議標簽
這種小小的搜索建議標簽是一種鼓勵您的用戶圍繞一個話題瀏覽更多內(nèi)容的好方式。你也可以在另外兩種方式上使用它們，但它們最好和“加載更多”按鈕一起使用。
加載更多按鈕需要這種標簽組件嗎？不是必需的，但加上去會比較好。
4.5.組件：滾動至頂按鈕
這個方便的小家伙能讓你無須手動操作就可以一路滾到頂部。
加載更多按鈕組件需要這個按鈕嗎？不是必需的，但如果使用的話會比較好。
5.總結(jié)
問題：所以，分頁、無限滾動或加載更多按鈕——你應(yīng)該使用哪一個呢？
回答：這完全取決于你想要創(chuàng)建什么樣的產(chǎn)品體驗。
如果你創(chuàng)建的是一個供用戶參考和瀏覽您的內(nèi)容的網(wǎng)站，那么請用分頁吧。但如果你要創(chuàng)建的是一個期望用戶瀏覽的社交平臺，請使用無限滾動。在兩者之間或在場景適當時，請使用“加載更多”按鈕。
愉快地去設(shè)計吧！
6.延深閱讀和參考
無限滾動的優(yōu)缺點: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/
使用無限滾動、分頁還是“加載更多”按鈕呢？電子商務(wù)中的可用性調(diào)查結(jié)果https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/
