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

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

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

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

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

京東商品列表頁全面展示商品信息，包括圖片、價(jià)格、名稱、標(biāo)簽、評價(jià)、服務(wù)等

亞馬遜商品列表頁

什么值得買商品列表頁，添加文字簡介，方便用戶在列表頁深入了解商品，引導(dǎo)用戶點(diǎn)擊進(jìn)入

品牌類電商，凸顯品牌個(gè)性，價(jià)格仍是核心

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

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

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

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

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

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

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

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

2. 強(qiáng)化商品列表頁的功能體驗(yàn)，滿足用戶定制化需求

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

分類與篩選

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

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

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

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

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

實(shí)時(shí)刷新：

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

篩選條件可刪除：

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

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

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

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

天貓商品列表頁的多項(xiàng)篩選功能

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

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

螞蜂窩商品列表頁每一個(gè)篩選項(xiàng)都對應(yīng)限定的商品數(shù)量

排序

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

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

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

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

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

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

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

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

分頁顯示

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

分頁優(yōu)勢：

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

分頁的劣勢：

分頁停頓會在一定程度上打斷用戶的思路，存在流失用戶的風(fēng)險(xiǎn)

亞馬遜商品列表頁分頁

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

連續(xù)加載

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

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

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

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

結(jié)合使用

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

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

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

小結(jié)：

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

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

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

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

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

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

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

小結(jié)：

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

總結(jié)

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

本文由 @108huangqing 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。