編輯導(dǎo)讀：電商產(chǎn)品中，商品始終是最核心的內(nèi)容。商品的表現(xiàn)形式可能決定了用戶的后續(xù)行為，最終影響商品轉(zhuǎn)化。本文作者對(duì)各大電商平臺(tái)的“猜你喜歡”頻道商品展示方式進(jìn)行了深入分析并總結(jié)了設(shè)計(jì)要點(diǎn)，與大家分享。

文章主要內(nèi)容：

1. 電商商品展示場(chǎng)景分析
2. 體驗(yàn)設(shè)計(jì)目標(biāo)
3. 展示形式分析

一、“人場(chǎng)貨”概念

電商購(gòu)物改變了傳統(tǒng)零售業(yè)“人、場(chǎng)、貨”之間的關(guān)系，不再是單向的“人找貨”模式。通過(guò)大數(shù)據(jù)分析，商家對(duì)于用戶的認(rèn)知無(wú)限趨近于用戶的內(nèi)心需求，可以較為精準(zhǔn)的實(shí)現(xiàn)“貨找人”，為商家提供了更多的售賣機(jī)會(huì)。商家可以根據(jù)用戶（人）的需求，推送商品（貨），并為用戶打造消費(fèi)的場(chǎng)景（場(chǎng)）。

無(wú)論是“人找貨”、還是“貨找人”，用戶都需要經(jīng)過(guò)商品展示頁(yè)面，查看商品詳情后，才會(huì)做出購(gòu)買決策。因此需要通過(guò)設(shè)計(jì)不斷提升商品展示形式，吸引用戶點(diǎn)擊，從而提升平臺(tái)的商品轉(zhuǎn)化。

二、“貨找人”場(chǎng)景

電商平臺(tái)基于用戶特征、過(guò)往購(gòu)物行為，為用戶推薦商品，就是“貨找人”模式，例如我們常見(jiàn)的“猜你喜歡”、“推薦”等頻道。內(nèi)容通常包含用戶瀏覽過(guò)、加購(gòu)、或者購(gòu)買過(guò)的商品，以及穿插曝光的推廣活動(dòng)、店鋪、商品等，主要有兩個(gè)目的：

（1）占領(lǐng)用戶時(shí)間，形成心智認(rèn)知，培養(yǎng)用戶瀏覽習(xí)慣

通過(guò)符合用戶偏好的商品，吸引用戶沉浸其中，產(chǎn)生“逛街”的感覺(jué)，激起用戶的購(gòu)物欲望，喚醒用戶潛在的購(gòu)物需求，提升商家的銷售量。

（2）促進(jìn)用戶轉(zhuǎn)化

通過(guò)關(guān)鍵的價(jià)值激勵(lì)點(diǎn)，例如滿減信息、商品賣點(diǎn)等信息，增強(qiáng)用戶購(gòu)買動(dòng)機(jī)，實(shí)現(xiàn)用戶轉(zhuǎn)化。

三、體驗(yàn)設(shè)計(jì)維度

在商品展示頁(yè)設(shè)計(jì)時(shí)，需要考量?jī)蓚€(gè)方面，提升效率和價(jià)值點(diǎn)傳導(dǎo)。

1. 提升效率

（1）內(nèi)容顯示效率

為了增加用戶與商品的觸點(diǎn)，必須要考慮一屏之內(nèi)有效展示商品數(shù)量。通過(guò)盡可能多的商品露出，不斷激發(fā)用戶的興趣點(diǎn)，喚醒用戶需求，吸引用戶持續(xù)瀏覽。

另外頁(yè)面中還會(huì)嵌入運(yùn)營(yíng)活動(dòng)、店鋪推廣等內(nèi)容，提高相關(guān)頁(yè)面的流量。例如淘寶、京東瀑布流展示方式中增加了會(huì)場(chǎng)活動(dòng)廣告進(jìn)行引流。

拼多多“推薦”頻道中，通過(guò)榜單形式增加商品曝光和引流，同時(shí)可以改變展示頁(yè)面的視覺(jué)表現(xiàn)形式，避免頁(yè)面過(guò)于單調(diào)造成用戶視覺(jué)疲勞，導(dǎo)致失去耐心而過(guò)早的退出。

（2）信息傳遞效率

商品展示中包含了各類信息，圖片則是重中之重，并且圖片的信息傳達(dá)效率要高于文字信息。因此不論是大圖模式還是列表模式，都是通過(guò)圖片吸引用戶，實(shí)現(xiàn)商品的快速篩選，提高用戶的識(shí)別效率。

另外為了提升信息傳遞效率，直播、視頻、動(dòng)圖逐漸開始應(yīng)用開來(lái)。相對(duì)于靜態(tài)圖片，視頻和動(dòng)圖在有限的展示空間中，可以承載更多信息內(nèi)容，用戶不需要進(jìn)入詳情頁(yè)，就可以獲得更多的商品細(xì)節(jié)，從而提升購(gòu)買決策的效率。

另一方面視頻和直播信息更加豐富，更容易吸引用戶點(diǎn)擊，從而為更多商品引流。

（3）用戶操作效率

由于“猜你喜歡”商品差異性較大，當(dāng)用戶點(diǎn)擊某件商品后，為了抓住用戶一閃而過(guò)的購(gòu)買動(dòng)機(jī)，需要提供更多的相似商品或者同類商品，促進(jìn)用戶轉(zhuǎn)化。

例如淘寶和天貓?jiān)谟脩酎c(diǎn)擊部分商品后，會(huì)在商品卡片下方增加相似商品的二次推薦，方便用戶快速瀏覽相似產(chǎn)品，提升用戶轉(zhuǎn)化率。

2. 價(jià)值點(diǎn)傳導(dǎo)

價(jià)值點(diǎn)主要包括商品賣點(diǎn)、價(jià)格折扣或者服務(wù)優(yōu)勢(shì)等內(nèi)容。在商品展示中，價(jià)值點(diǎn)表現(xiàn)形式主要分為兩類，圖文結(jié)合和標(biāo)簽展示。

（1）圖文結(jié)合

為了在有限的空間中傳遞更多的商品信息，部分商品圖片中會(huì)增加文字信息，簡(jiǎn)單直白的說(shuō)明商品價(jià)值點(diǎn)。圖文方式可以將用戶注意力集中在圖片中，獲取商品關(guān)鍵信息。

但是圖片尺寸較小，會(huì)造成圖片信息元素較多，反而弱化了商品本身的內(nèi)容細(xì)節(jié)，對(duì)用戶的瀏覽造成一定的影響，因此對(duì)圖片的展現(xiàn)效果要求較高。

（2）標(biāo)簽展示

商品標(biāo)簽是一種非常好的價(jià)值點(diǎn)傳遞方式，一方面可以通過(guò)邊框線、底色、字色等形式與其他信息快速區(qū)分開來(lái)。另一方面簡(jiǎn)短的標(biāo)簽，可以保證用戶閱讀效率。

標(biāo)簽化的內(nèi)容在不同電商平臺(tái)中差異還是比較明顯的。例如天貓主打商品品牌、品質(zhì)，服務(wù)，因此發(fā)貨速度、物流效率、運(yùn)費(fèi)險(xiǎn)等內(nèi)容成為了首選標(biāo)簽。而拼多多為了改變平臺(tái)在用戶中的形象，在商品展示上，主打正品險(xiǎn)，極速退款，退貨包運(yùn)費(fèi)等標(biāo)簽，可以更好的打消用戶的下單顧慮。

四、商品展現(xiàn)形式

1. 展現(xiàn)方式

商品展示主要分為大圖模式（上圖下文）和列表模式（左圖右文）兩種方式。

大圖模式，主要是為了讓用戶通過(guò)更大尺寸的圖片查看商品細(xì)節(jié)信息。通常為兩列布局，一般采用卡片式設(shè)計(jì)。

受卡片寬度所限，文字內(nèi)容較少，可能會(huì)造成用戶無(wú)法清晰地確定商品信息。這就要求圖片盡可能地傳達(dá)出商品的詳細(xì)信息，例如商品規(guī)格，數(shù)量，品牌等信息。

列表模式，圖片空間占比下降，視覺(jué)空間上更加輕松。一般采用雙行商品名稱，有利于增加更多的文字信息，呈現(xiàn)商品賣點(diǎn)，但是用戶需要閱讀的信息量也會(huì)增加。

2. 展現(xiàn)策略

在不同用戶場(chǎng)景、對(duì)于不同的商品品類，各個(gè)平臺(tái)的展現(xiàn)策略有所差異。例如拼多多“推薦”頻道，并沒(méi)有采用其他平臺(tái)首頁(yè)“猜你喜歡”通用的大圖模式，而是采用了列表模式，拼多多首頁(yè)其他頻道則采用了兩列宮格大圖模式。

3. 頁(yè)面布局

對(duì)于不同的頻道內(nèi)容，商品同樣是大圖模式，有的產(chǎn)品采用了瀑布流方式，有的則采用了兩列宮格模式。

在“猜你喜歡”頻道中，淘寶、天貓、京東都采用了瀑布流的方式，瀑布流在內(nèi)容展示上更加靈活，可以更好的兼容各種類型的內(nèi)容信息。例如淘寶在“猜你喜歡”中加入了店鋪推廣，而京東則嵌入了滿意度調(diào)研。

在一定的場(chǎng)景下，瀑布流內(nèi)容展示量更大，展示效率更高。但是由于錯(cuò)落的布局，視覺(jué)動(dòng)線在不斷的跳躍，會(huì)導(dǎo)致一定的瀏覽困難。

寫在最后

以上就是“貨找人”場(chǎng)景下的商品展示的總結(jié)，可以看出不同平臺(tái)間還是存在一定的差異的。而造成差異的主要原因，莫過(guò)于平臺(tái)的定位和內(nèi)容引導(dǎo)。因此設(shè)計(jì)的基本原則就是“形式跟隨功能”。

當(dāng)然商品展示并不僅限于“猜你喜歡”頻道，搜索結(jié)果也是非常重要的展示場(chǎng)景。后續(xù)筆者將對(duì)淘寶、天貓、京東、拼多多4大電商平臺(tái)，在不同場(chǎng)景下的商品展示形式，進(jìn)行系統(tǒng)的分析和整理分享給大家，敬請(qǐng)期待。

#專欄作家#

子牧先生。公眾號(hào)：子牧UXD（HelloDesign），人人都是產(chǎn)品經(jīng)理專欄作家。產(chǎn)品體驗(yàn)設(shè)計(jì)師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn)，擅長(zhǎng)體驗(yàn)設(shè)計(jì)思維、設(shè)計(jì)方法論、交互設(shè)計(jì)研究。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議