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

01/

展示商品列表，聚合多樣信息內(nèi)容

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

‍‍綜合性電商，突出價格、品質(zhì)、服務、優(yōu)惠等內(nèi)容來吸引用戶購買

‍‍

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

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

亞馬遜商品列表頁

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

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

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

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

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

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

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

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

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

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

02/

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

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

分類與篩選

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

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

什么值得買商品列表頁，分類內(nèi)容較少與篩選位于統(tǒng)一板塊區(qū)域內(nèi)

天貓官網(wǎng)商品列表頁，有較多分類內(nèi)容時，與篩選功能稍作區(qū)別

關于分類與篩選功能優(yōu)化的幾點注意：

實時刷新：

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

篩選條件可刪除：

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

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

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

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

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

可選內(nèi)容提示：

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

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

排序

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

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

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

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

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

03/

分頁顯示和連續(xù)加載

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

目前電商網(wǎng)站主要采用以下三種加載方式進行商品內(nèi)容的加載：

分頁顯示

分頁可以將大篇幅的內(nèi)容分成小塊，顯示在單獨的連續(xù)頁面上，便于用戶理解和查找。可以讓用戶清楚的知道，自己所要瀏覽的內(nèi)容到底有多少、已經(jīng)瀏覽到哪個部分、還剩余多少。分頁可以使用戶對所瀏覽的內(nèi)容有清楚的預期。

分頁優(yōu)勢：

   告訴用戶要瀏覽信息的量；

   分頁使用戶快速的跳過信息，自主的選擇想要瀏覽的內(nèi)容；

   分頁非常便于定位和回找；

分頁的劣勢：

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

亞馬遜商品列表頁分頁

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

連續(xù)加載

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

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

連續(xù)加載劣勢：一味的加載會讓用戶產(chǎn)生迷失感。

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

結(jié)合使用

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

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

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

小結(jié)：

結(jié)合網(wǎng)站自身的特質(zhì)，選擇合適的內(nèi)容展示方式，既可以提升用戶的沉浸感，也不會讓用戶迷失在眾多的商品內(nèi)容里。

04/

推薦內(nèi)容與商品列表內(nèi)容的分離融合

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

亞馬遜的推薦內(nèi)容位于商品列表頁底部位置

京東的推薦內(nèi)容位于商品詳情頁頂部及側(cè)邊欄

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

淘寶app的商品列表頁，推薦板塊嵌套在商品列表內(nèi)

小結(jié)：

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

總結(jié)

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