編者按：這篇文章出自于用戶體驗設(shè)計領(lǐng)域的專業(yè)機構(gòu) NNGroup，他們從電商產(chǎn)品頁的用戶體驗和交互的角度入手，詳細梳理了分頁的設(shè)計要點，不同的方案的使用場景和優(yōu)劣對比，結(jié)合實際的設(shè)計案例進行了演示和解讀：

許多電子商務(wù)網(wǎng)站正在擺脫傳統(tǒng)的分頁控件，轉(zhuǎn)而選擇交互成本更低的設(shè)計模式，比如無限滾動。那么是否應(yīng)該采用這些模式嗎？通常，這取決于頁面的產(chǎn)品數(shù)量。

傳統(tǒng)的分頁模式會將項目列表拆分為多個頁面，每個頁面包含特定數(shù)量的條目。要查看更多選項，用戶必須通過翻頁切換到下一頁——通常通過單擊或點擊 屏幕頂部或底部的「下一頁」 按鈕。每個頁面都有編號，用戶可以通過點擊相應(yīng)的按鈕來移動到特定編號的頁面。

在亞馬遜列表頁面的底部，有一排按鈕，一個指向上一頁的左向箭頭、一系列數(shù)字按鈕，然后是指向下一頁的右向箭頭。

亞馬遜的分頁設(shè)計采用了傳統(tǒng)的分頁控件（在藍綠色框中突出顯示），這種控件對于這個平臺豐富的產(chǎn)品而言，非常具有實用性。

像亞馬遜這樣的大型零售平臺確實應(yīng)該堅持傳統(tǒng)的分頁控制設(shè)計，因為當購物者探索他們龐大的產(chǎn)品集時，這種機制提供了精確的控制。對于產(chǎn)品較少或加載性能良好的網(wǎng)站，可能能夠簡單地一次加載頁面上的所有產(chǎn)品。

但是，如果您的網(wǎng)站有產(chǎn)品數(shù)量較少的分支頁面，你可以考慮使用「無限滾動」或使用「顯示更多」 按鈕作為傳統(tǒng)分頁控件的替代方案。

無限滾動，動態(tài)加載

有些電子商務(wù)網(wǎng)站會提供一個產(chǎn)品列表頁面，當用戶向下滾動頁面時，頁面會不斷加載更多項目。 無限滾動 或 延遲加載（在用戶滾動到頁面底部時加載更多項目）可以很好地適用于具有以下特性的電商網(wǎng)站：

• 產(chǎn)品數(shù)量相對較少（通常產(chǎn)品數(shù)量少于 40 個）
• 有高質(zhì)量的 過濾器 可以幫助用戶縮小結(jié)果范圍
• 有明確 告知用戶要現(xiàn)實的條目數(shù)量（比如 42 件物品）

Christian Louboutin 網(wǎng)站上的一位客戶注意到，每次她滾動到頁面底部時，都會加載更多產(chǎn)品——也就是采用了無限加載的頁面加載方式。她說她不介意，因為加載時間非?？?。

「只要它加載，就可以了。如果我滑動到底部，結(jié)果需要再花 30 秒加載下面的內(nèi)容，我就會失去興趣。不過這個節(jié)奏還好。而且我是一個非常果斷的購物者。我只是盯著看東西，看看有什么吸引我的眼球。」

雖然此解決方案可以很好地適用于包含有限數(shù)量產(chǎn)品的網(wǎng)站列表頁，但在下面兩個情況下（在以下部分中詳細討論），應(yīng)避免使用無限滾動的技術(shù)：

• 用戶有需要訪問網(wǎng)站頁腳導(dǎo)航中的重要信息。
• 當頁面包含大量產(chǎn)品時，用戶可能會迷失方向，并且不知道他們在產(chǎn)品列表中的位置。

訪問頁腳導(dǎo)航

因為一旦用戶向下滾動到頁面底部，新項目通常會自動添加，因此可能在有限的滾動下，到達頁腳區(qū)域。使用無限滾動的網(wǎng)站經(jīng)常讓用戶感到極度沮喪，因為每次他們試圖導(dǎo)航到頁腳時，頁腳都會不斷地被自動加載的新條目推離到更遠的地方。

當用戶向下滾動 Louboutin 網(wǎng)站上的列表頁面時，會自動加載更多產(chǎn)品，這會將頁腳推到頁面下方。

這個就是不應(yīng)該對有大量產(chǎn)品的頁面使用無限加載的部分原因——當用戶想要抵達頁面底部的時候，不應(yīng)該為此滾動 15 分鐘，尤其是當頁腳是為了訪問諸如退款退貨或者別的功能的時候。

產(chǎn)品數(shù)量

如果在單個頁面上查看一個類別中的所有條目是不合理的，那么使用無限滾動的控件也是不合理的。

Tory Burch 的網(wǎng)站沒有提供傳統(tǒng)的分頁控件，而是在用戶滾動時，自動讓其他的產(chǎn)品加載到產(chǎn)品列表頁面的下面。大多數(shù)情況下，產(chǎn)品加載速度足夠快，以至于用戶看不到加載指示器，還得等待產(chǎn)品加載完成。由于網(wǎng)站的產(chǎn)品數(shù)量有限，加載速度快，所以效果很好。

一位在 Tory Burch 網(wǎng)站上購物的用戶，贊賞產(chǎn)品列表總能完整顯示在一個頁面上，因此她可以簡單地使用滾動，就瀏覽完所有可用的項目。

「我喜歡可以滾動瀏覽所有內(nèi)容的布局。有些網(wǎng)站會得一頁一頁地翻頁。在這里，我可以非常輕松瀏覽完網(wǎng)站的所有商品。」

Tory Burch 網(wǎng)站在一個產(chǎn)品列表頁面上展示了一個類別中的所有產(chǎn)品。每個類別包含足夠少的條目（此處為 69），以至于單個頁面就足以承載。

在實現(xiàn)無限滾動時，顯示產(chǎn)品總數(shù)很重要 。Tory Burch 網(wǎng)站在產(chǎn)品列表頂部標識了產(chǎn)品總數(shù)，靠近頁面左側(cè)有過濾篩選的功能。不過，這個篩選結(jié)果的數(shù)字標識并不是很明顯。

Tory Burch 網(wǎng)站上的列表頁左上角有過濾器和條目總數(shù) ，只是這些信息很難發(fā)現(xiàn)。

Ann Taylor 的網(wǎng)站采取了一種更引人注目的方法來顯示產(chǎn)品總數(shù)。這個數(shù)字在用戶滾動頁面時，保持固定在頁面上，并在長頁面下方顯示用戶的當前位置——當用戶進一步向下滾動頁面時，深黑色邊框的大小會延伸以標識進度。該指標幫助用戶跟蹤他們當前的位置，幫助他們了解已經(jīng)查看了多少項目，以及還有多少項目有待查看。

Ann Taylor 在產(chǎn)品列表右側(cè)的頁面上顯示了可瀏覽的產(chǎn)品總數(shù)，并且借助它的黑色邊框來作為進度指示器。

無限滾動頁面，通常會破壞標準瀏覽器右邊的滾動進度條，因此用戶不能依靠它來確定他們在頁面上的位置。

隨著新條目被添加到列表的底部，頁面被拉長，又會改變標準滾動指示器的位置。曾經(jīng)位于中間的頁面的部分，很快就會變成現(xiàn)在更長頁面的前八分之一。最好增加一個自定義進度指示器，來高速用戶當前的位置。

「查看更多」按鈕

有些電商網(wǎng)站沒有采用傳統(tǒng)的分頁模式或無限滾動，而是 在其列表頁面的底部放置「查看更多」 按鈕。例如，時尚服裝零售商 Aritzia 的網(wǎng)站就使用了這種模式。

Aritzia 的網(wǎng)站在其結(jié)果列表的末尾提供了一個「查看更多」的按鈕（以藍綠色框突出顯示）。

除了 「查看更多」之外，一些網(wǎng)站還使用了類似的標簽，例如：

• 展示更多
• 加載更多
• 查看更多產(chǎn)品

與傳統(tǒng)的分頁相比，這種方法合乎邏輯，因為絕大多數(shù)用戶無論如何都會線性地瀏覽產(chǎn)品列表。此外，與頁碼式的分頁按鈕相比，尺寸更大的 「查看更多」 按鈕更容易點擊。

這種方法與無限滾動的本質(zhì)區(qū)別在于，用戶必須通過點擊交互才能加載下一組產(chǎn)品，而不是讓它們自動加載。因此，與無限滾動相比，「查看更多」 按鈕允許用戶直接查看站點頁腳。

「查看更多」按鈕可能會更加流行，尤其是作為表率的谷歌開始在其移動端結(jié)果頁面上使用它們來代替分頁的機制。我們經(jīng)常警示設(shè)計師 不要一味抄襲大公司的設(shè)計，但谷歌是搜索的結(jié)果頁的一個特殊例外。純粹是因為它們的使用非常廣泛，它對于塑造用戶的習慣和預(yù)期有著極大的影響。

谷歌在其移動搜索結(jié)果頁面上使用了 「查看更多」 按鈕而不是分頁。

允許用戶自己選擇是否加載更多商品，對于移動端的購物者來說是特別好的，他們可能在網(wǎng)絡(luò)流量有限制的情況下瀏覽頁面，因此不一定想持續(xù)加載額外的產(chǎn)品內(nèi)容。此外，如果用戶未連接到 WiFi，那么在移動設(shè)備上的加載速度可能會比較慢。

Lowes 的移動端頁面向用戶展示了一個「加載更多」的按鈕，以查看其產(chǎn)品列表頁面上的其他項目。這種設(shè)計幫助用戶查看超出這個頁面的內(nèi)容，這種動態(tài)加載方式不僅兼顧到頁面導(dǎo)航的需求，而且提升了瀏覽的效率，減少了信息傳輸?shù)臄?shù)據(jù)浪費。

不過，這個網(wǎng)站未能顯示這一類別中商品的總數(shù) ，也沒有說明已經(jīng)查看了多少產(chǎn)品，也沒有說明還要加載多少產(chǎn)品。沒有這些信息，一些用戶可能會猶豫是否要加載額外的項目，因為他們不知道何時會翻到達產(chǎn)品列表的末尾。

Lowes 移動端網(wǎng)站的早期版本沒有顯示列表頁面上可用項目的總數(shù)，這使用戶很難確定他們需要加載多少內(nèi)容才會查看所有選項。

更新后的版本之一，是通過在產(chǎn)品列表頁面（左）的頂部添加搜索結(jié)果數(shù)量。但是，它沒有通知用戶屏幕底部還有多少項目需要加載（右）。

如果你的網(wǎng)站將采用 「查看更多」模式，請務(wù)必告知用戶：

• 列表中的項目總數(shù)
• 已加載多少項目
• 還有多少項目要加載

Lululemon 的頁面設(shè)計比 Home Depot 的效果更好，因為它提供了已顯示的產(chǎn)品數(shù)量以及產(chǎn)品總數(shù)。

Lululemon 在其移動端頁面上使用了查看更多產(chǎn)品按鈕，它還告訴用戶他們目前正在查看的產(chǎn)品總數(shù)（查看 40 of 333 ）。

當用戶到達列表頁面的末尾并且沒有更多要加載的產(chǎn)品時，就只顯示產(chǎn)品總數(shù)，就像 Lululemon 所做的那樣，去掉「加載更多」的按鈕。

當無法加載更多產(chǎn)品時，Lululemon 的「查看更多」按鈕消失了。

標識用戶的所在位置

無論您選擇「無限滾動」還是「查看更多」的設(shè)計模式， 請確保您的列表頁面支持 Pogo Sticking 功能 —— 這個通常指的是用戶在搜索頁面中打開一個結(jié)果之后，感覺不滿意又返回搜索結(jié)果頁面，再查看其他的一種行為。這種行為和 SEO 、網(wǎng)站排名、內(nèi)容推薦有非常緊密的關(guān)系。

一些網(wǎng)站不支持這種操作，當用戶在點擊了列表中某個條目之后返回之前的列表頁面時，他們必須向上或向下滾動才能重新找到他們當初所在的頁面位置。傳統(tǒng)分頁模式可能偶爾會出現(xiàn)此問題，但在使用「無限滾動」或 「顯示更多」模式的網(wǎng)站，這種問題會特別常見，且令人痛苦。

盡管使用了「無限滾動」模式，但 Christian Louboutin 的移動端網(wǎng)站在點擊了「后退」按鈕后，用戶能夠回到最初在列表頁面中所處的位置。當用戶使用移動端設(shè)備瀏覽信息時，這一點尤其重要，因為在移動設(shè)備上打開新標簽比在大屏幕上更麻煩。

結(jié)語

如果你的產(chǎn)品規(guī)模相對較小，「無限滾動」和「查看更多」 按鈕可能會幫助您的用戶更輕松地探索你的產(chǎn)品。請記住通過可用性測試來發(fā)現(xiàn)設(shè)計中的潛在問題——比如無法訪問頁腳或「 顯示更多」 按鈕難以被注意到。

延伸閱讀：