四個(gè)設(shè)計(jì)要點(diǎn),提升商品列表頁“逼格”

3 評論 30027 瀏覽 78 收藏 16 分鐘

電子商務(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)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 總結(jié)性文章就不要學(xué)人家講理論的語氣好嗎?

    回復(fù)
    1. 這些內(nèi)容都是筆者平時(shí)工作的一點(diǎn)小總結(jié),正是因?yàn)榭吹胶芏嗑W(wǎng)站做的不友好的一面,才想要把好的內(nèi)容歸納整理方便自己查閱。也歡迎各位大神多多指點(diǎn)

      回復(fù)
    2. 作者就是寫的流水賬,闡述了表面淺層次的東西,泛泛而談,沒有自己的思想(可能用猜想更合理)。產(chǎn)品背后的邏輯并沒有進(jìn)行分析,就拿最后的排序來說,到了排序這個(gè)層面,都是看曝光量了,除了前臺的分析,應(yīng)該加入產(chǎn)品業(yè)務(wù)邏輯的考慮,不單單是選擇了按照銷量就真的是按照銷量排。作者是做UED的吧

      來自上海 回復(fù)