巧用這3種分頁(yè)模式，頁(yè)面加載不再生硬

時(shí)間：2023-06-07 06:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-07 06:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

巧用這3種分頁(yè)模式，頁(yè)面加載不再生硬：當(dāng)頁(yè)面內(nèi)容很多需要分頁(yè)時(shí)，可以通過(guò)3種模式來(lái)呈現(xiàn)——分頁(yè)、無(wú)限滾動(dòng)、加載更多按鈕。那么哪個(gè)最好？用戶會(huì)喜歡哪種？大多數(shù)平臺(tái)都用了什么？今天就來(lái)和大家一同探討下。

01 三種模式簡(jiǎn)介

想象一下，當(dāng)服務(wù)器承載的內(nèi)容不多時(shí)，它可以快速處理分發(fā)給用戶；然而有一天，它被要求為400萬(wàn)不同的人發(fā)送926萬(wàn)億個(gè)項(xiàng)目，如此龐大的信息量，如果加載時(shí)長(zhǎng)過(guò)慢會(huì)讓你和用戶都非常抓狂！這也是為什么要給頁(yè)面設(shè)置分頁(yè)、無(wú)限滾動(dòng)與加載更多的按鈕的原因。

3種模式允許服務(wù)器一次將部分內(nèi)容發(fā)送給用戶，從而減少加載時(shí)間。但它們也有各自的優(yōu)點(diǎn)和缺點(diǎn)，你需要依據(jù)情境使用。你可以簡(jiǎn)單將它們理解為：

-分頁(yè)，即多個(gè)頁(yè)面組合（想想那些在線商店程序）；

-無(wú)限滾動(dòng)，讓用戶產(chǎn)生所有內(nèi)容都加載好的感覺(jué)，但實(shí)際上，信息是在上下滑動(dòng)時(shí)才加載出來(lái)的（想想Instagram）；

-加載更多按鈕，常出現(xiàn)在頁(yè)面底部，通過(guò)用戶點(diǎn)擊操作，出現(xiàn)更多信息（想想Google圖片）。

02 分頁(yè)模式

網(wǎng)上購(gòu)物時(shí)不難發(fā)現(xiàn)，分頁(yè)模式是展示產(chǎn)品時(shí)最受歡迎的一種形式。以下網(wǎng)站呈現(xiàn)用戶的搜索結(jié)果，使用的就是分頁(yè)：Google、Amazon、Udemy、eBay和Shutterstock。

2.1 特點(diǎn)

需要明確的是，雖然以下列舉的要點(diǎn)都是已被研究證實(shí)的，但我也會(huì)帶一點(diǎn)兒個(gè)人的小建議，你可以根據(jù)相關(guān)情境判斷是否使用。

優(yōu)點(diǎn)：

-電子商務(wù)網(wǎng)站廣泛應(yīng)用；

-幫助用戶研究和參考頁(yè)面，比如喜歡的物品在第3頁(yè)上，能夠快速找到；

-適用于非常注重項(xiàng)目順序的網(wǎng)站。

缺點(diǎn)：

-它需要很長(zhǎng)時(shí)間才被加載；

-在移動(dòng)設(shè)備上的分頁(yè)導(dǎo)航必須更加簡(jiǎn)潔清晰，以防手誤點(diǎn)錯(cuò)。

通常只需單擊“下一個(gè)”或“上一個(gè)”就能快速操作，盡管大多數(shù)用戶抱怨翻頁(yè)很慢，或是過(guò)多的翻頁(yè)鏈接會(huì)讓人不想再瀏覽產(chǎn)品列表，但分頁(yè)仍然是3種模式中最受歡迎的模式，更有趣的是，用戶普遍喜歡在第1頁(yè)上花更多時(shí)間瀏覽。

2.2 每頁(yè)應(yīng)有多少個(gè)項(xiàng)目？

每個(gè)頁(yè)面放置的內(nèi)容，取決于以下3個(gè)因素：

-是否使用網(wǎng)格視圖或列表視圖；

-是否有每頁(yè)預(yù)計(jì)的項(xiàng)目數(shù)量；

-展示項(xiàng)目的尺寸大小。

比如網(wǎng)格視圖網(wǎng)站加載的項(xiàng)目數(shù)量——Sears，50個(gè)；Amazon，48個(gè)；Shutterstock，27個(gè)；而列表視圖的網(wǎng)站——Udemy，20個(gè)；阿里巴巴，48個(gè)；CNN，10個(gè)。

每頁(yè)顯示的最佳項(xiàng)目數(shù)并沒(méi)有準(zhǔn)確限制，而且不同站點(diǎn)之間似乎很少達(dá)成一致。在設(shè)計(jì)自己的目錄頁(yè)面時(shí)，你可以直接決定每頁(yè)要顯示多少項(xiàng)。

2.3 組件：導(dǎo)航

點(diǎn)擊“下一頁(yè)/上一頁(yè)”按鈕，是用戶瀏覽頁(yè)面的主要方式，因此使它們突出是非常有意義的。由于用戶更容易選擇“下一頁(yè)”按鈕，請(qǐng)確保其具有更明顯的風(fēng)格。

移動(dòng)設(shè)備上如果沒(méi)有足夠的空間，可以只把頁(yè)碼當(dāng)作指示器，與導(dǎo)航按鈕。

需要記住的一點(diǎn)是，如果位于第一頁(yè)或最后一頁(yè)，則需要隱藏或是禁用“上一頁(yè)”或“下一頁(yè)”按鈕。

2.4 組件：篩選

篩選可幫助用戶找到更準(zhǔn)確的結(jié)果，不過(guò)也這取決于對(duì)內(nèi)容是否進(jìn)行了準(zhǔn)確的標(biāo)記與分類。有2種主要的篩選樣式：

-第一種，與頁(yè)面頂部對(duì)齊。如果只有幾個(gè)篩選條件，或是希望列表或網(wǎng)格占據(jù)頁(yè)面網(wǎng)格的整個(gè)寬度，可以使用此樣式。頂部篩選也可以在帶有“加載更多按鈕”的頁(yè)面上使用，比如Google圖片。

-第二種，與頁(yè)面左對(duì)齊。如果有很多類別，并且列表/網(wǎng)格不需要全寬，我是非常建議大家使用這種樣式的。

2.5 組件：排序

允許用戶以他們想要的方式對(duì)內(nèi)容進(jìn)行排序，在默認(rèn)情況下，如果通過(guò)搜索進(jìn)入該頁(yè)面，則應(yīng)將其設(shè)置為“最相關(guān)”。如果用戶在沒(méi)有添加任何搜索詞的情況下點(diǎn)擊目錄，也可以默認(rèn)“最相關(guān)”，或是按“最受好評(píng)”或“最新”來(lái)設(shè)定。

創(chuàng)建排序選項(xiàng)時(shí)，你可以參考使用以下列表中的一些選項(xiàng)詞。并不是每次都要全部用上，依據(jù)實(shí)際情況來(lái)，例如：“ Sort A-Z”，可以檢索品牌或是學(xué)生姓名的首字母。檢索參考類型：

-最相關(guān)的/最受關(guān)注/評(píng)論最多/評(píng)分最高/最喜歡的/最新/最低價(jià)格/最高價(jià)格；

-字母順序：AZ/按字母順序排列的名字：AZ/按姓氏字母順序排列：AZ/最高分/最低分等。

2.6 組件：每頁(yè)項(xiàng)目

使用戶可以在頁(yè)面上選擇展示的項(xiàng)目數(shù)，用戶通常會(huì)根據(jù)他們的網(wǎng)速，以及他們希望在頁(yè)面上看到的數(shù)量來(lái)進(jìn)行調(diào)整。

2.7 組件：顯示結(jié)果

你的用戶可能想知道有多少項(xiàng)目可供他們查看，這是一個(gè)靜態(tài)組件，不能交互。

通常，如果沒(méi)有“每頁(yè)項(xiàng)目”就不會(huì)顯示此組件，有時(shí)二者也會(huì)同時(shí)出現(xiàn)。

2.8 組件：網(wǎng)格&列表切換

該組件使你可以在網(wǎng)格&列表視圖之間切換，如果不太好判斷用戶偏好的查看方式，這將很有幫助。提前做一些AB測(cè)試，也能幫助你確定風(fēng)格。

如果有需要，還可以使用下圖組件在網(wǎng)格寬度之間切換。我發(fā)現(xiàn)在網(wǎng)購(gòu)時(shí)非常有幫助，用戶可以在不同視角間切換。

2.9 組成部分：字母索引

這個(gè)組件在現(xiàn)在看來(lái)有些過(guò)時(shí)了，按字母順序排序的索引組件是“電話簿”類型的樣式，可以輕松地按姓名首字母查找。換句話說(shuō)，有這么多的人在網(wǎng)站上，像這樣的檢索方式非常無(wú)效。

2.10 組件：跳轉(zhuǎn)

跳轉(zhuǎn)形式現(xiàn)在已經(jīng)很少再見(jiàn)到了，瀏覽大型文檔網(wǎng)站的話，是一個(gè)非常實(shí)用的組件。

03 無(wú)限滾動(dòng)模式

記得有人對(duì)我說(shuō)“滾動(dòng)條已死”、“用戶不喜歡滾動(dòng)瀏覽”和“網(wǎng)站內(nèi)容超出折疊范圍，沒(méi)人能看到”，我本人非常不贊同。無(wú)限滾動(dòng)是“瀏覽行為”的精髓，滾動(dòng)瀏覽也讓時(shí)間過(guò)得飛快，對(duì)于電子商務(wù)來(lái)說(shuō)還是很糟糕的，看過(guò)的瞬間內(nèi)容找不到了，所以這種模式更多的在社交、娛樂(lè)領(lǐng)域中應(yīng)用。

“滾動(dòng)是一種延續(xù)；點(diǎn)擊是一個(gè)決定”
——約書(shū)亞·波特

3.1 特點(diǎn)

以下列舉的要點(diǎn)都是已被研究證實(shí)的，但我也會(huì)帶一點(diǎn)兒個(gè)人的小建議，你可以根據(jù)相關(guān)情境判斷是否使用。

優(yōu)點(diǎn)：

-無(wú)限滾動(dòng)可以讓用戶上癮；

-滾動(dòng)是一種可預(yù)期行為（尤其在觸屏上）；

-加載速度非常快；

-適用于圖像多的頁(yè)面；

-用戶粘性度高。

缺點(diǎn)：

-搜索內(nèi)容時(shí)體驗(yàn)差，很難找到之前瀏覽的內(nèi)容；

-非粘性導(dǎo)航欄，用戶必須一直滾動(dòng)到底部才能看到導(dǎo)航欄；

-用戶幾乎永遠(yuǎn)不會(huì)看到頁(yè)腳（如果有的話）；

-網(wǎng)速差的時(shí)候，會(huì)影響瀏覽體驗(yàn)；

-用戶較少關(guān)注內(nèi)容；

-不利于文本搜索。

無(wú)限滾動(dòng)功能使平臺(tái)可以連續(xù)為用戶生成內(nèi)容，Pinterest就是一個(gè)很好的例子，當(dāng)你瀏覽頁(yè)面時(shí)，滾動(dòng)顯示出越來(lái)越多與你興趣相關(guān)的內(nèi)容（這種模式有時(shí)也被稱為無(wú)盡滾動(dòng)），還有大家熟識(shí)的Instagram/Twitter/Facebook/ YouTube等。

3.2 組件：粘性導(dǎo)航欄

因?yàn)闊o(wú)限滾動(dòng)，你必須確保導(dǎo)航欄是固定的，否則可憐的用戶將永遠(yuǎn)找不到按鈕。用瀏覽器查看的網(wǎng)站，建議將導(dǎo)航欄放在屏幕頂部。如果是應(yīng)用程序，會(huì)相對(duì)靈活些。

3.3 組件：Instagram，“全部閱讀完成”組件

Instagram過(guò)去曾受到很多批評(píng)，因?yàn)橛脩魺o(wú)法記錄他們看過(guò)或沒(méi)看過(guò)的內(nèi)容，這也是他們引入此組件的原因。雖然一開(kāi)始我并不喜歡，但這個(gè)功能讓我的體驗(yàn)變得更好了。

3.4 組件：加載

當(dāng)你的網(wǎng)絡(luò)連接很差或是你下載的服務(wù)器很慢時(shí)，你可能一直盯著加載圖標(biāo)轉(zhuǎn)圈兒。加載狀態(tài)像是一個(gè)指示器，讓你知道平臺(tái)并沒(méi)有崩潰，它在努力加載。

04 加載更多模式

“加載更多”按鈕經(jīng)常被拿來(lái)與前兩種模式比較，奇怪的是，這種模式也沒(méi)有得到世界上最大的搜索引擎之一的Google的廣泛關(guān)注。他們僅在移動(dòng)設(shè)備和Google圖片中使用了它。

4.1 特點(diǎn)

以下列舉的要點(diǎn)都是已被研究證實(shí)的，但我也會(huì)帶一點(diǎn)兒個(gè)人的小建議，你可以根據(jù)相關(guān)情境判斷是否使用。

優(yōu)點(diǎn)：

-像分頁(yè)一樣可以對(duì)結(jié)果排序；

-與無(wú)限滾動(dòng)一樣，也適用于移動(dòng)設(shè)備；

缺點(diǎn)：

-同無(wú)限滾動(dòng)一樣，很難再次找到結(jié)果。

4.2 組件：加載/顯示更多結(jié)果按鈕

這是該模式不能沒(méi)有的按鈕，到達(dá)頁(yè)面底部后，它的出現(xiàn)表明你可以繼續(xù)加載更多結(jié)果。

“加載更多”、“顯示更多結(jié)果”和“更多結(jié)果”是最常見(jiàn)的文字內(nèi)容。

4.3 組件：加載

與無(wú)限滾動(dòng)一樣，也需要加載狀態(tài)。只有當(dāng)你點(diǎn)擊“加載更多按鈕”時(shí)，才會(huì)觸發(fā)。

4.4 組件：搜索建議標(biāo)簽

這些小的搜索建議標(biāo)簽是鼓勵(lì)用戶瀏覽主題的一種好方法。你也可以將它們放在其他模式上，但它們與“加載更多”按鈕組合效果最佳。

4.5 組件：滾動(dòng)到頂部按鈕

這個(gè)方便的按鈕讓你瀏覽的頁(yè)面快速滾動(dòng)到頂部，完全不需要手動(dòng)操作。

寫(xiě)在最后

分頁(yè)、無(wú)限滾動(dòng)和加載更多按鈕，你應(yīng)該使用哪個(gè)？其實(shí)完全取決于你要構(gòu)建的產(chǎn)品。如果建立一個(gè)供人們參考瀏覽的內(nèi)容類型網(wǎng)站，請(qǐng)使用分頁(yè)；如果是一個(gè)社交平臺(tái)，請(qǐng)使用無(wú)限滾動(dòng)；若是介于兩者之間，可以嘗試加入“加載更多”按鈕。

相關(guān)引用

-翻譯自原文

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來(lái)自網(wǎng)絡(luò)

歡迎關(guān)注我的公眾號(hào)：UX辭典（微信號(hào)：uxpedia-design）

微信原文???：辭典精譯 | 巧用這3種分頁(yè)模式，頁(yè)面加載不再生硬