電子商務網站中的商品列表頁也被稱為商品聚合頁，用戶可以在一個頁面中概覽數以千計的商品。商品列表頁的重要特點是信息量大，所以布局清晰合理，功能易用是突出商品列表頁“逼格”的設計關鍵點。

1. 展示商品列表，聚合多樣信息內容

用戶通過導航或搜索到達商品列表頁后，理想的結果就是看到最需要的商品展示在列表頁面供自己挑選。商品列表頁的功能就是將商品核心信息展示出來以吸引用戶，并提供相應鏈接供用戶點擊購買。

綜合性電商，突出價格、品質、服務、優惠等內容來吸引用戶購買

天貓、京東、亞馬遜等綜合性電商平臺，由于其商品資源豐富，因此在部署商品列表頁展示商品核心信息時，以突出價格、品質、服務、優惠等內容來吸引用戶購買。如果你的網站是綜合類電商性質的網站，在列表頁突出這些信息會幫助你的用戶更多了解商品，更快作出決策。

京東商品列表頁全面展示商品信息，包括圖片、價格、名稱、標簽、評價、服務等

亞馬遜商品列表頁

什么值得買商品列表頁，添加文字簡介，方便用戶在列表頁深入了解商品，引導用戶點擊進入

品牌類電商，凸顯品牌個性，價格仍是核心

與綜合類電商不同，品牌類電商網站除了售賣產品之外，更重要的作用是宣傳品牌，彰顯獨特的品牌個性品牌個性滲透到網站的視覺、交互、功能等等各個層面之中。尤其是在簡潔、純粹的風格逐漸被網站設計者和使用者所接受的當下，越來越多的品牌類電商選擇拋棄冗余的商品介紹，回歸簡潔和個性。

zara官網商品列表頁采用LOOKBOOK展示形式，商品信息包含圖片、名稱和價格等最基本信息

使用更大的圖片展示，設計者會有更多的空間去布局其他內容，例如同一空間展示商品的多個圖片，使用戶無需進入詳情頁即可了解更多商品信息。

HM官網商品列表頁，鼠標懸停商品圖片后展示更多圖片

小結：平衡簡潔美觀與核心信息，選擇最適合網站的商品展示形式

不拘泥于網站類型，平衡簡潔美觀與核心信息，才能選擇適合網站的商品展示形式。

如果網站需要展現商品多種信息，那么合理的板塊分割、字體字號平衡、色彩的搭配都可以幫助網站呈現內容豐富且不雜亂的商品列表頁；如果網站需要簡潔內斂，那么生動的圖片、誘人的文字描述也可以幫助網站吸引潛在消費者。

小紅書商品列表頁，創意的文字介紹也可以成為吸引用戶進入的利器

2. 強化商品列表頁的功能體驗，滿足用戶定制化需求

為了讓用戶在數以萬計的商品中高效地找到所需商品，列表頁往往會存在功能強大的分類、篩選和排序功能，強化這些功能體驗是衡量列表頁能否高效運轉的標準之一。

分類與篩選

嚴格意義上來說，分類和篩選并不是同一種功能，一些網站中還可以見到分類和篩選功能分開的形式。但是隨著網站功能的日趨完善，分類和篩選作為統一功能模塊出現的情況也越來越多。

HM官網商品列表頁仍采用分類與篩選功能分開的方式

什么值得買商品列表頁，分類內容較少與篩選位于統一板塊區域內

天貓官網商品列表頁，有較多分類內容時，與篩選功能稍作區別

關于分類與篩選功能優化的幾點注意：

實時刷新：

用戶每進行一次篩選選擇及時對結果進行更新，且商品列表內容隨著篩選結果而發生實時變更；如果網站篩選功能需要用戶全部選擇完成后再統一更新（這種方式比較繁瑣，不建議使用），則需要明確提示用戶，并設計“選擇”和“確認”按鈕提示用戶點擊。

篩選條件可刪除：

保證刪除功能的可用性，使用明顯的視覺元素（通常為紅色×號表示）說明功能及使用方式，并實時更新列表結果。

京東商品列表頁篩選條件的刪除功能

篩選條件支持多選或自定義：

為了方便用戶選擇多個篩選條件或者自定義篩選（多為價格等因素），網站提供篩選條件多選功能，滿足這部分用戶的需求；同時需要明確的確認、取消以及刪除模塊保證多選篩選條件的功能可用性。

天貓商品列表頁的多項篩選功能

可選內容提示：

可選內容提示一般用于商品列表內容有限的情況下，為了避免用戶限定過多造成無商品對應的問題，網站會在篩選條件旁標記對應的商品數量，方便用戶做出合理篩選。

螞蜂窩商品列表頁每一個篩選項都對應限定的商品數量

排序

相對于分類和篩選功能，排序功能就單純很多，通常網站都是使用綜合、價格、銷量、人氣、時間等作為排序依據對商品展示的順序進行調整，以符合用戶的需求。

這里啰嗦一句，很多時候用戶期望看到人氣高的、銷量好的、更新時間近的內容，因此在這些排序指標上不用做太多說明，用戶即可明白這些商品的排序是從高到低的；但是其中“價格”是個比較特殊的排序指標，既有用戶想看價格低的，也有用戶想看價格高的，因此在“價格”這個排序指標上，需要明確是從高到低，還是從低到高。

蘇寧易購商品列表頁的排序功能

小結：保證分類、篩選及排序功能的可用性，提升功能易用性

分類、篩選和排序功能時是商品列表頁一個特殊且重要的功能，用戶借助這些功能能夠高效的尋找到合適的信息，避免迷失在一大片商品的海洋中。用戶越快找到心儀的商品，越有利于促進他們完成訂單，網站需要保證功能可用性的同時提升易用性，不僅僅是為了服務用戶，更重要的是提升這個流程的轉化和留存。

3. 分頁顯示和連續加載

商品列表頁是網站中信息量較大的頁面類型，涉及到的商品內容會有很多，通常一頁是無法完整顯示全部內容的，需要根據頁面情況使用分頁顯示內容、加載顯示內容或是結合使用。

目前電商網站主要采用以下三種加載方式進行商品內容的加載：

分頁顯示

分頁可以將大篇幅的內容分成小塊，顯示在單獨的連續頁面上，便于用戶理解和查找?？梢宰層脩羟宄闹?，自己所要瀏覽的內容到底有多少、已經瀏覽到哪個部分、還剩余多少。分頁可以使用戶對所瀏覽的內容有清楚的預期。

分頁優勢：

1. 告訴用戶要瀏覽信息的量；
2. 分頁使用戶快速的跳過信息，自主的選擇想要瀏覽的內容；
3. 分頁非常便于定位和回找；

分頁的劣勢：

分頁停頓會在一定程度上打斷用戶的思路，存在流失用戶的風險

亞馬遜商品列表頁分頁

分頁模塊的設計已經很完善，我在這里就不贅言，但需要注意的是分頁模塊的尺寸和布局位置，應最大程度滿足用戶的使用體驗。

連續加載

連續加載是一個與分頁相對的交互模式，信息之間沒有明顯的界限或是停頓。當頁面滾動到底部，新的信息就會被自動加載進來。

連續加載優勢：用戶不會被打斷，可以順暢的一直瀏覽下去，沉浸其中。

連續加載劣勢：一味的加載會讓用戶產生迷失感。

如今很多的移動端的社交app都樂于使用連續加載，例如微博、新聞等，使用戶沉浸其中，避免打擾；

結合使用

分頁顯示和連續加載都存在其優缺點，因此目前有些網站結合兩者使用，在幾次連續加載后提供用戶分頁的停頓，既保證了瀏覽的流暢完整性，也同時兼顧了定位和找回功能。

微博在加載一段內容后，提示用戶點擊查看更多

電商平臺通常采用的模式為：PC端使用分頁展示商品內容，而移動端采用連續加載的方式展示商品內容，以此適應移動端用戶更深度沉浸的閱讀習慣。

小結：

結合網站自身的特質，選擇合適的內容展示方式，既可以提升用戶的沉浸感，也不會讓用戶迷失在眾多的商品內容里。

4. 推薦內容與商品列表內容的分離融合

用戶在瀏覽PC端頁面時，推薦內容區域與商品列表內容區域一般是分開的。推薦內容一般可以分為兩個大類，從人的屬性角度是個性化推薦，從商品的屬性角度是相關推薦；推薦內容與列表內容分離形成較為獨立的區域模塊，用戶可以清晰分辨哪些是推薦內容，哪些是商品列表內容。

亞馬遜的推薦內容位于商品列表頁底部位置

京東的推薦內容位于商品詳情頁頂部及側邊欄

如今，這種明顯帶有廣告成分的推薦內容悄然發生著改變，尤其是在移動app上。由于移動端的展示區域有限，更加壓縮了推薦內容的展示位，因此推薦內容開始與商品列表的融合，一方面解決了移動端缺少推薦內容展示空間的問題，另一方面優秀的推薦內容也會提高用戶的購買轉化和深度瀏覽。

淘寶app的商品列表頁，推薦板塊嵌套在商品列表內

小結：

如今用戶變得越來越聰明，傳統“貼片”般的推薦方式已經無法有效的吸引關注，推薦內容就像是網站的“站內廣告”，內容和展示兩手都抓才是致勝王道。

總結

四個簡單的要點，為提升商品列表頁的“逼格”做一些微小的工作。選擇合理布局，展示商品列表，聚合多樣信息內容；強化商品列表頁的功能體驗，滿足用戶定制化需求；結合網站自身的特質，拓展顯示更多商品內容；創新優化推薦板塊，緊抓內容和展示。做好這些微小的工作，提升的不僅僅是商品列表頁的“逼格”，更重要的是承接更多流量，擴大轉化效益。

本文由 @108huangqing 原創發布于人人都是產品經理。未經許可，禁止轉載。