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

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

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

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

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

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

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

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

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

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

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

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

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

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

訪問頁腳導(dǎo)航

因?yàn)橐坏┯脩粝蛳聺L動(dòng)到頁面底部，新項(xiàng)目通常會(huì)自動(dòng)添加，因此可能在有限的滾動(dòng)下，到達(dá)頁腳區(qū)域。使用無限滾動(dòng)的網(wǎng)站經(jīng)常讓用戶感到極度沮喪，因?yàn)槊看嗡麄冊噲D導(dǎo)航到頁腳時(shí)，頁腳都會(huì)不斷地被自動(dòng)加載的新條目推離到更遠(yuǎn)的地方。

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

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

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

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

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

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

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

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

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

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

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

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

無限滾動(dòng)頁面，通常會(huì)破壞標(biāo)準(zhǔn)瀏覽器右邊的滾動(dòng)進(jìn)度條，因此用戶不能依靠它來確定他們在頁面上的位置。

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

「查看更多」按鈕

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

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

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

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

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

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

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

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

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

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

不過，這個(gè)網(wǎng)站未能顯示這一類別中商品的總數(shù) ，也沒有說明已經(jīng)查看了多少產(chǎn)品，也沒有說明還要加載多少產(chǎn)品。沒有這些信息，一些用戶可能會(huì)猶豫是否要加載額外的項(xiàng)目，因?yàn)樗麄儾恢篮螘r(shí)會(huì)翻到達(dá)產(chǎn)品列表的末尾。

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

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

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

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

Lululemon 的頁面設(shè)計(jì)比 Home Depot 的效果更好，因?yàn)樗峁┝艘扬@示的產(chǎn)品數(shù)量以及產(chǎn)品總數(shù)。

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

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

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

標(biāo)識(shí)用戶的所在位置

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

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

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

結(jié)語

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

延伸閱讀：