尼爾森團隊出品！5個幫你做好電商產品列表頁的設計技巧！

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

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

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

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

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

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

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

無限滾動，動態加載

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

• 產品數量相對較少（通常產品數量少于 40 個）
• 有高質量的 過濾器 可以幫助用戶縮小結果范圍
• 有明確 告知用戶要現實的條目數量（比如 42 件物品）

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

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

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

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

訪問頁腳導航

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

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

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

產品數量

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

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

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

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

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

在實現無限滾動時，顯示產品總數很重要 。Tory Burch 網站在產品列表頂部標識了產品總數，靠近頁面左側有過濾篩選的功能。不過，這個篩選結果的數字標識并不是很明顯。

Tory Burch 網站上的列表頁左上角有過濾器和條目總數 ，只是這些信息很難發現。

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

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

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

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

「查看更多」按鈕

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

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

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

• 展示更多
• 加載更多
• 查看更多產品

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

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

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

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

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

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

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

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

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

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

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

Lululemon 的頁面設計比 Home Depot 的效果更好，因為它提供了已顯示的產品數量以及產品總數。

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

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

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

標識用戶的所在位置

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

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

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

結語

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

延伸閱讀：