京東的UI設(shè)計(jì)師講解“猜你喜歡”的做法

一. 什么是長(zhǎng)尾

長(zhǎng)尾（The Long Tail）這一概念是由Chris Anderson在2004年十月的「長(zhǎng)尾」 一文中最早提出，用來(lái)描述諸如亞馬遜和Netflix之類網(wǎng)站的商業(yè)和經(jīng)濟(jì)模式。

長(zhǎng)尾理論是網(wǎng)絡(luò)時(shí)代興起的一種新理論，當(dāng)商品的銷售成本急劇降低時(shí)，幾乎任何以前看似需求極低的產(chǎn)品，只要有賣，都會(huì)有人買。這些需求和銷量不高的產(chǎn)品所占據(jù)的共同市場(chǎng)份額，可以和主流產(chǎn)品的市場(chǎng)份額相比，甚至更大。

二. 設(shè)計(jì)「猜你喜歡」的原因

簡(jiǎn)單了解長(zhǎng)尾的含義后，可以清晰的知道移動(dòng)電商在頁(yè)面中要加入長(zhǎng)尾設(shè)計(jì)（猜你喜歡）的原因：利用互聯(lián)網(wǎng)移動(dòng)端頁(yè)面無(wú)限長(zhǎng)的框架進(jìn)行更多貨品的曝光，來(lái)留住剩余未跳轉(zhuǎn)流量進(jìn)行商品售賣，來(lái)實(shí)現(xiàn)價(jià)值最大化。

 

三. 「猜你喜歡」常見(jiàn)的內(nèi)容形式

「猜你喜歡」的推薦邏輯多以用戶歷史瀏覽記錄或已購(gòu)買記錄進(jìn)行推薦，而單品推薦更加貼近觸達(dá)用戶。因此，單品是經(jīng)常運(yùn)用到的展示形式，后續(xù)講到的關(guān)于如何設(shè)計(jì)猜你喜歡也是以單品為例。同時(shí)，隨著推薦邏輯的逐漸完善，為了豐富產(chǎn)品內(nèi)容以及滿足用戶多維度需求，逐漸增加了關(guān)鍵詞、促銷活動(dòng)、品牌、資訊等內(nèi)容形式，通常以穿插的形式展示在單品列表中。

四. 如何設(shè)計(jì)「猜你喜歡」

「猜你喜歡」涉及的后臺(tái)技術(shù)為ＢＩ推薦（實(shí)現(xiàn)模型），即將現(xiàn)有的用戶數(shù)據(jù)進(jìn)行有效整合，快速準(zhǔn)確地提供決策依據(jù)，幫助產(chǎn)品做出明智的內(nèi)容呈現(xiàn)，這里將不再多做介紹延展。主要從界面設(shè)計(jì)（表現(xiàn)模型）及用戶分析（心理模型）這兩方面出發(fā)進(jìn)行分析。

在移動(dòng)端購(gòu)物APP界面中，運(yùn)用猜你喜歡的場(chǎng)景大致有如下頁(yè)面：首頁(yè)、搜索結(jié)果頁(yè)、商品詳情頁(yè)、購(gòu)物車頁(yè)、個(gè)人中心頁(yè)、購(gòu)買成功頁(yè)、訂單詳情頁(yè)、物流詳情頁(yè)、大促頁(yè)面等場(chǎng)景。接下來(lái)，將分場(chǎng)景介紹在不同頁(yè)面下如何設(shè)計(jì)「猜你喜歡」。
 

1. 首頁(yè)

首頁(yè)是最重要的運(yùn)用場(chǎng)景，如京東、淘寶、嚴(yán)選等的首頁(yè)都是以猜你喜歡作為長(zhǎng)尾展示。用戶在瀏覽首頁(yè)時(shí)，多以無(wú)目的閑逛為主，當(dāng)用戶未在重點(diǎn)活動(dòng)或欄目入口處點(diǎn)擊跳走，此時(shí)進(jìn)入長(zhǎng)尾內(nèi)容「猜你喜歡」，如何留住用戶的腳步是其重點(diǎn)。因此首頁(yè)「猜你喜歡」的推薦邏輯多以用戶歷史瀏覽記錄來(lái)向用戶推薦，以此來(lái)激發(fā)用戶的潛在遺忘需求。

隨著首頁(yè)猜你喜歡運(yùn)用場(chǎng)景的完善，后續(xù)可以單品推薦為主，增加關(guān)鍵詞、品牌、促銷活動(dòng)、內(nèi)容資訊、店鋪等內(nèi)容的穿插，既能豐富內(nèi)容推薦維度，又能滿足不同維度偏好的用戶在閑逛時(shí)激發(fā)其潛在需求。

在設(shè)計(jì)首頁(yè)猜你喜歡單品樣式時(shí)，也從最初由圖片、標(biāo)題、價(jià)格三種元素組成的基礎(chǔ)樣式，逐漸演變新增了功能按鈕：看相似/不喜歡/加車、推薦理由、標(biāo)簽、標(biāo)識(shí)等的展示。對(duì)于這方面的具體設(shè)計(jì)將在后面詳細(xì)講到。

2. 搜索結(jié)果頁(yè)

搜索是用戶在移動(dòng)端購(gòu)物使用的重要場(chǎng)景，此時(shí)用戶目的明確，但不排除所輸入詞匯系統(tǒng)不可整體識(shí)別而出現(xiàn)缺省頁(yè)的情況，或者篩選出的結(jié)果太少等情況的發(fā)生。為避免這兩種情況的發(fā)生，往往會(huì)通過(guò)猜你喜歡的形式，識(shí)別用戶所輸詞匯的部分字段進(jìn)行推薦，或者歷史瀏覽記錄向用戶進(jìn)行推薦。

3. 商品詳情頁(yè)

用戶在瀏覽商詳頁(yè)時(shí)，此時(shí)目的較為明確：對(duì)此商品有較高興趣或需求。在此場(chǎng)景下，若用戶未能進(jìn)行直接購(gòu)買的行為，如何讓用戶在此場(chǎng)景需求下繼續(xù)逛下去是其重點(diǎn)。因此商詳頁(yè)「猜你喜歡」的推薦邏輯多以相似商品或排行榜形式來(lái)向用戶推薦，以此來(lái)補(bǔ)充用戶對(duì)比較、篩選場(chǎng)景的需求。

商品詳情頁(yè)包含商品基礎(chǔ)信息介紹（圖片/價(jià)格/促銷/店家等）、評(píng)價(jià)、圖文詳情等，頁(yè)面篇幅較長(zhǎng)。此時(shí)，很難像首頁(yè)一樣把猜你喜歡作為長(zhǎng)尾進(jìn)行展示處理。原因有兩點(diǎn)：

• 在海量商品面前，用戶更多是通過(guò)基礎(chǔ)信息項(xiàng)來(lái)鎖定商品，在多數(shù)情況下很難瀏覽到頁(yè)面靠下的位置，若還作為長(zhǎng)尾展示，很難進(jìn)行模塊的曝光。
• 此場(chǎng)景下的猜你喜歡滿足了用戶對(duì)此類商品比較篩選的需求，在初期商品篩選中，與圖文詳情相比對(duì)用戶意義更大。

因此，對(duì)商詳頁(yè)猜你喜歡的設(shè)計(jì)，往往會(huì)固定模塊高度放在商品基礎(chǔ)信息（圖片/價(jià)格/促銷/店家等）之后，圖文詳情之前進(jìn)行展示。常用形式為一排三個(gè)展示兩排，可滑動(dòng)拓展的形式解決因限制模塊高度而造成的商品曝光數(shù)量受限的問(wèn)題。這里的單品樣式較為簡(jiǎn)單，多以圖片、標(biāo)題、價(jià)格三種元素組合而成。

4. 購(gòu)物車頁(yè)

購(gòu)物車頁(yè)屬于功能型頁(yè)面，用戶多數(shù)是查看已加車商品或選擇商品進(jìn)行支付，是進(jìn)行支付環(huán)節(jié)的前一步，以目的性瀏覽為主，如何提升下單率是其重點(diǎn)。因此購(gòu)物「猜你喜歡」的推薦邏輯多以加車記錄來(lái)向用戶推薦，以此來(lái)滿足用戶對(duì)比篩選的需求。表現(xiàn)形式如：購(gòu)物車有XXX的人還在對(duì)比，購(gòu)買XXX商品的人還買了。

5. 個(gè)人中心頁(yè)

與購(gòu)物車頁(yè)一樣屬于功能型頁(yè)面，是用戶相關(guān)信息整合頁(yè)，以目的性瀏覽為主。此頁(yè)面「猜你喜歡」的作用是補(bǔ)充內(nèi)容，長(zhǎng)尾展示為用戶曝光商品為主，推薦邏輯多以用戶歷史瀏覽記錄來(lái)向用戶推薦。

6. 售后環(huán)節(jié)：購(gòu)買完成頁(yè)、訂單詳情頁(yè)、物流詳情頁(yè)

售后環(huán)節(jié)的購(gòu)買成功頁(yè)/訂單詳情頁(yè)/物流詳情頁(yè)與個(gè)人中心頁(yè)面一樣，是用戶相關(guān)信息整合頁(yè)，以目的性瀏覽為主。其猜你喜歡的作用是補(bǔ)充內(nèi)容，長(zhǎng)尾展示為用戶曝光商品。推薦邏輯可以此訂單商品的連帶商品向用戶推薦，挖掘其潛在需求。

7. 大促頁(yè)面：主會(huì)場(chǎng)、分會(huì)場(chǎng)等

大促頁(yè)面是猜你喜歡運(yùn)用的另一重要場(chǎng)景。因大促頁(yè)面內(nèi)容較多，頁(yè)面篇幅也較長(zhǎng)，猜你喜歡主要作為補(bǔ)充內(nèi)容進(jìn)行長(zhǎng)尾展示。推薦邏輯多以用戶歷史瀏覽記錄+會(huì)場(chǎng)屬性來(lái)向用戶推薦。因本身大促頁(yè)面設(shè)計(jì)及促銷信息繁雜，此時(shí)猜你喜歡的樣式設(shè)計(jì)趨向簡(jiǎn)單更容易釋放用戶的瀏覽壓力，因此樣式多以圖片、標(biāo)題、價(jià)格、看相似等基礎(chǔ)元素組合而成，以一排兩個(gè)或三個(gè)的形式進(jìn)行展示。

五. 「猜你喜歡」組件化設(shè)計(jì)

在眾多場(chǎng)景中都有猜你喜歡的涉及，為了提高設(shè)計(jì)、開(kāi)發(fā)的工作效率，以及用戶體驗(yàn)的一致性，規(guī)范猜你喜歡單品樣式，進(jìn)行組件化設(shè)計(jì)是一個(gè)很好的方法。目前猜你喜歡的單品模塊可以歸納為七個(gè)組件，分別為：

• 商品圖片：占據(jù)最大位置的組件，也是用戶關(guān)注的首要元素。
• 商品標(biāo)題：有一行兩行標(biāo)題的區(qū)別，但猜你喜歡通常使用兩行標(biāo)題來(lái)展示更多的信息。
• 商品價(jià)格：核心組件，有單價(jià)格和雙價(jià)格展示之分。
• 標(biāo)簽：分為大促標(biāo)簽、腰帶標(biāo)簽、日常促銷標(biāo)簽三種樣式，一個(gè)單品可同時(shí)出現(xiàn)這三種標(biāo)簽，因此信息傳遞的層次性是設(shè)計(jì)的關(guān)注重點(diǎn)。
• 標(biāo)識(shí)：如自營(yíng)、全球購(gòu)、沃爾瑪、京東精選等表明商品從屬的標(biāo)識(shí)，一般只展示一種標(biāo)識(shí)。
• 操作功能區(qū)：如看相似、加車功能按鈕等。
• 業(yè)務(wù)拓展區(qū)：如推薦理由的文案描述，同時(shí)支持鏈接填寫。

當(dāng)一個(gè)單品同時(shí)出現(xiàn)上述七個(gè)組件時(shí)，如何使信息傳遞具有層次性，是設(shè)計(jì)重點(diǎn)。同時(shí)也要考慮不同單品展示不同組件對(duì)頁(yè)面框架造成的影響。如圖片、商品標(biāo)題、商品價(jià)格組成基礎(chǔ)單品架構(gòu)，而其余組件的設(shè)計(jì)應(yīng)該在不改變單品基礎(chǔ)架構(gòu)的前提下進(jìn)行設(shè)計(jì)，這樣才能使樣式更具有普適性。

六. 思考：猜你喜歡是否能夠作為獨(dú)立的產(chǎn)品進(jìn)行展示？

講到這里，相信大家都有個(gè)疑問(wèn)：猜你喜歡是否能夠作為獨(dú)立的頁(yè)面場(chǎng)景進(jìn)行展示呢？天貓APP2017年6月發(fā)布新版，可以清楚的看到首頁(yè)框架發(fā)生了極大的改變。除保留一排icon、banner、兩個(gè)品牌入口外，其余內(nèi)容以猜你喜歡單品的形式進(jìn)行承載，頻道/活動(dòng)入口穿插至單品中?？梢钥闯龃舜胃陌嬉院?jiǎn)化框架，重猜你喜歡的形式進(jìn)行展示為主。但在不久的10月發(fā)布了與6月相比變化較大的首頁(yè)改版：前兩屏不僅增加了有關(guān)天貓直營(yíng)的天貓超市/生鮮、進(jìn)口、魅力惠等頻道入口，還增加了品牌維度的入口曝光，最大的改動(dòng)是猜你喜歡變成了切類目TAB的形式展示，默認(rèn)TAB為精選（原猜你喜歡的內(nèi)容）。

我們無(wú)法拿到6月改版后的數(shù)據(jù)變化，但可以大膽猜測(cè)10月改版的原因。

• 6月輕入口重猜你喜歡的形式，無(wú)法使重點(diǎn)欄目得到充分的流量曝光。
• 由于各電商平臺(tái)的數(shù)據(jù)壁壘，無(wú)法精確推測(cè)用戶行為，使猜你喜歡的內(nèi)容推薦無(wú)法精準(zhǔn)的集中用戶。

筆者認(rèn)為，就目前的市場(chǎng)環(huán)境與技術(shù)發(fā)展，猜你喜歡并不適合作為獨(dú)立的頁(yè)面場(chǎng)景進(jìn)行展示。