“猜你喜歡”當然它還有很多詞匯可以形容，比如：為您推薦、為您精選…；經(jīng)常在移動(dòng)端購物的剁手一族們肯定都不會(huì )陌生；它似乎無(wú)孔不入般的存在于我們?yōu)g覽的各種頁(yè)面中作為長(cháng)尾內容進(jìn)行向用戶(hù)補充推薦。
我們在瀏覽時(shí)可能并不會(huì )細想其背后的邏輯是什么？這樣設計的原因是什么？但仔細觀(guān)察就會(huì )發(fā)現，雖然它們都有共同的名字‘猜你喜歡’，但在不同的運用場(chǎng)景下，其設計與推薦邏輯存在很大的差異化。
本文將從設計師的角度出發(fā)，全面而細致的介紹‘猜你喜歡’內容設計的思考與總結。首先，先來(lái)介紹一下什么是長(cháng)尾
一、什么是長(cháng)尾：
長(cháng)尾（The Long Tail）這一概念是由Chris Anderson在2004年十月的“長(cháng)尾” 一文中最早提出，用來(lái)描述諸如亞馬遜和Netflix之類(lèi)網(wǎng)站的商業(yè)和經(jīng)濟模式。
長(cháng)尾理論是網(wǎng)絡(luò )時(shí)代興起的一種新理論，當商品的銷(xiāo)售成本急劇降低時(shí)，幾乎任何以前看似需求極低的產(chǎn)品，只要有賣(mài)，都會(huì )有人買(mǎi)。這些需求和銷(xiāo)量不高的產(chǎn)品所占據的共同市場(chǎng)份額，可以和主流產(chǎn)品的市場(chǎng)份額相比，甚至更大。
二、設計‘猜你喜歡’的原因：
簡(jiǎn)單了解長(cháng)尾的含義后，可以清晰的知道移動(dòng)電商在頁(yè)面中要加入長(cháng)尾設計（猜你喜歡）的原因：利用互聯(lián)網(wǎng)移動(dòng)端頁(yè)面無(wú)限長(cháng)的框架進(jìn)行更多貨品的曝光來(lái)留住剩余未跳轉流量進(jìn)行商品售賣(mài)來(lái)實(shí)現價(jià)值最大化
三、‘猜你喜歡’常見(jiàn)的內容形式：
猜你喜歡的推薦邏輯多以用戶(hù)歷史瀏覽記錄或已購買(mǎi)記錄進(jìn)行推薦，而單品推薦更加貼近觸達用戶(hù)；因此，單品是經(jīng)常運用到的展示形式，后續講到的關(guān)于如何設計猜你喜歡也是以單品為例。
同時(shí)，隨著(zhù)推薦邏輯的逐漸完善，為了豐富產(chǎn)品內容以及滿(mǎn)足用戶(hù)多維度需求，逐漸增加了關(guān)鍵詞、促銷(xiāo)活動(dòng)、品牌、資訊等內容形式，通常以穿插的形式展示在單品列表中。
四、如何設計‘猜你喜歡’：
‘猜你喜歡’涉及的后臺技術(shù)為ＢＩ推薦（實(shí)現模型），即將現有的用戶(hù)數據進(jìn)行有效整合，快速準確的提供決策依據，幫助產(chǎn)品做出明智的內容呈現，這里將不在多做介紹延展；主要從界面設計（表現模型）、及用戶(hù)分析（心理模型）這兩方面出發(fā)進(jìn)行分析。
在移動(dòng)端購物APP界面中，運用猜你喜歡的場(chǎng)景大致有如下頁(yè)面：首頁(yè)、搜索結果頁(yè)、商品詳情頁(yè)、購物車(chē)頁(yè)、個(gè)人中心頁(yè)、購買(mǎi)成功頁(yè)、訂單詳情頁(yè)、物流詳情頁(yè)、大促頁(yè)面等場(chǎng)景。接下來(lái)，將分場(chǎng)景介紹在不同頁(yè)面下如何設計‘猜你喜歡’。
4.1首頁(yè)：
是最重要的運用場(chǎng)景，如京東、淘寶、嚴選等的首頁(yè)都是以猜你喜歡作為長(cháng)尾展示。用戶(hù)在瀏覽首頁(yè)時(shí)，多以無(wú)目的閑逛為主，當用戶(hù)未在重點(diǎn)活動(dòng)或欄目入口處點(diǎn)擊跳走，此時(shí)進(jìn)入長(cháng)尾內容區‘猜你喜歡’，如何留住用戶(hù)的腳步是其重點(diǎn)；因此首頁(yè)‘猜你喜歡’的推薦邏輯多以用戶(hù)歷史瀏覽記錄來(lái)向用戶(hù)推薦，以此來(lái)激發(fā)用戶(hù)的潛在遺忘需求。
隨著(zhù)首頁(yè)猜你喜歡運用場(chǎng)景的完善，后續可以單品推薦為主，增加關(guān)鍵詞、品牌、促銷(xiāo)活動(dòng)、內容資訊、店鋪等內容的穿插，既能豐富內容推薦維度，又能滿(mǎn)足不同維度偏好的用戶(hù)在閑逛時(shí)激發(fā)其潛在需求
在設計首頁(yè)猜你喜歡單品樣式時(shí)，也從最初由圖片、標題、價(jià)格三種元素組成的基礎樣式，逐漸演變新增了功能按鈕：看相似/不喜歡/加車(chē)、推薦理由、標簽、標識等的展示。對于這方面的具體設計將在后面詳細講到
4.2搜索結果頁(yè)：
搜索是用戶(hù)在移動(dòng)端購物使用的重要場(chǎng)景，此時(shí)用戶(hù)目的明確，但不排除所輸入詞匯系統不可整體識別而出現缺省頁(yè)的情況；或者，篩選出的結果太少等情況的發(fā)生。為避免這兩種情況的發(fā)生，往往會(huì )通過(guò)猜你喜歡的形式，識別用戶(hù)所輸詞匯的部分字段進(jìn)行推薦，或者歷史瀏覽記錄向用戶(hù)進(jìn)行推薦。
4.3商品詳情頁(yè)：
用戶(hù)在瀏覽商詳頁(yè)時(shí)，此時(shí)目的較為明確：對此商品有較高興趣或需求；在此場(chǎng)景下，若用戶(hù)未能進(jìn)行直接購買(mǎi)的行為，如何讓用戶(hù)在此場(chǎng)景需求下繼續逛下去是其重點(diǎn)；因此商詳頁(yè)‘猜你喜歡’的推薦邏輯多以相似商品或排行榜形式來(lái)向用戶(hù)推薦，以此來(lái)補充用戶(hù)對比較、篩選場(chǎng)景的需求。
商品詳情頁(yè)包含商品基礎信息介紹（圖片/價(jià)格/促銷(xiāo)/店家等）、評價(jià)、圖文詳情等，頁(yè)面篇幅較長(cháng)；此時(shí)，很難像首頁(yè)一樣把猜你喜歡作為長(cháng)尾進(jìn)行展示處理。原因有兩點(diǎn)：
- 在海量商品面前，用戶(hù)更多是通過(guò)基礎信息項來(lái)鎖定商品，在多數情況下很難瀏覽到頁(yè)面靠下的位置，若還作為長(cháng)尾展示，很難進(jìn)行模塊的曝光；
- 此場(chǎng)景下的猜你喜歡滿(mǎn)足了用戶(hù)對此類(lèi)商品比較篩選的需求，在初期商品篩選中，與圖文詳情相比對用戶(hù)意義更大。
因此，對商詳頁(yè)猜你喜歡的設計，往往會(huì )固定模塊高度放在商品基礎信息（圖片/價(jià)格/促銷(xiāo)/店家等）之后，圖文詳情之前進(jìn)行展示。常用形式為：一排三個(gè)展示兩排，可滑動(dòng)拓展的形式解決因限制模塊高度而造成的商品曝光數量受限的問(wèn)題。這里的單品樣式較為簡(jiǎn)單，多以圖片、標題、價(jià)格三種元素組合而成。
4.4購物車(chē)頁(yè)：
購物車(chē)頁(yè)屬于功能型頁(yè)面，用戶(hù)多數是查看已加車(chē)商品或選擇商品進(jìn)行支付，是進(jìn)行支付環(huán)節的前一步，以目的性瀏覽為主；如何提升下單率是其重點(diǎn)；因此購物車(chē)‘猜你喜歡’的推薦邏輯多以加車(chē)記錄來(lái)向用戶(hù)推薦，以此來(lái)滿(mǎn)足用戶(hù)對比篩選的需求。表現形式如：購物車(chē)有XXX的人還在對比；購買(mǎi)XXX商品的人還買(mǎi)了。
4.4個(gè)人中心頁(yè)：
與購物車(chē)頁(yè)一樣屬于功能型頁(yè)面，是用戶(hù)相關(guān)信息整合頁(yè)，以目的性瀏覽為主。此頁(yè)面‘猜你喜歡’的作用是以補充內容，長(cháng)尾展示為用戶(hù)曝光商品為主，推薦邏輯多以用戶(hù)歷史瀏覽記錄來(lái)向用戶(hù)推薦。
4.6售后環(huán)節：購買(mǎi)完成頁(yè)、訂單詳情頁(yè)、物流詳情頁(yè)
售后環(huán)節的購買(mǎi)成功頁(yè)/訂單詳情頁(yè)/物流詳情頁(yè)與個(gè)人中心頁(yè)面一樣，是用戶(hù)相關(guān)信息整合頁(yè)，以目的性瀏覽為主。其猜你喜歡的作用是：補充內容，長(cháng)尾展示為用戶(hù)曝光商品；推薦邏輯可以此訂單商品的連帶商品向用戶(hù)推薦，挖掘其潛在需求。
4.7大促頁(yè)面：主會(huì )場(chǎng)、分會(huì )場(chǎng)等
大促頁(yè)面是猜你喜歡運用的另一重要場(chǎng)景；因大促頁(yè)面內容較多，頁(yè)面篇幅也較長(cháng)，猜你喜歡主要作為補充內容進(jìn)行長(cháng)尾展示；推薦邏輯多以用戶(hù)歷史瀏覽記錄+會(huì )場(chǎng)屬性來(lái)向用戶(hù)推薦。
因本身大促頁(yè)面設計及促銷(xiāo)信息繁雜，此時(shí)猜你喜歡的樣式設計趨向簡(jiǎn)單更容易釋放用戶(hù)的瀏覽壓力，因此樣式多以圖片、標題、價(jià)格、看相似等基礎元素組合而成，以一排兩個(gè)或三個(gè)的形式進(jìn)行展示。
五、‘猜你喜歡’組件化設計：
在眾多場(chǎng)景中都有猜你喜歡的涉及，為了提高設計、開(kāi)發(fā)的工作效率，以及用戶(hù)體驗的一致性，規范猜你喜歡單品樣式，進(jìn)行組件化設計是一個(gè)很好的方法。目前猜你喜歡的單品模塊可以歸納為七個(gè)組件，分別為：
- 商品圖片：占據最大位置的組件，也是用戶(hù)關(guān)注的首要元素
- 商品標題：有一行兩行標題的區別，但猜你喜歡通常使用兩行標題來(lái)展示更多的信息
- 商品價(jià)格：核心組件，有單價(jià)格和雙價(jià)格展示之分
- 標簽：分為大促標簽、腰帶標簽、日常促銷(xiāo)標簽三種樣式，一個(gè)單品可同時(shí)出現這三種標簽，因此信息傳遞的層次性是設計的關(guān)注重點(diǎn)
- 標識：如自營(yíng)、全球購、沃爾瑪、京東精選等表明商品從屬的標識，一般只展示一種標識
- 操作功能區：如看相似、加車(chē)功能按鈕等
- 業(yè)務(wù)拓展區：如推薦理由的文案描述，同時(shí)支持鏈接填寫(xiě)
當一個(gè)單品同時(shí)出現上述七個(gè)組件時(shí)，如何使信息傳遞具有層次性，是設計重點(diǎn)；同時(shí)也要考慮不同單品展示不同組件對頁(yè)面框架造成的影響：如圖片、商品標題、商品價(jià)格組成基礎單品架構，而其余組件的設計應該在不改變單品基礎架構的前提下進(jìn)行設計，這樣才能使樣式更具有普適性。
六、思考：猜你喜歡是否能夠作為獨立的產(chǎn)品進(jìn)行展示？
講到此刻，相信大家都有個(gè)疑問(wèn)：猜你喜歡是否能夠作為獨立的頁(yè)面場(chǎng)景進(jìn)行展示呢？天貓APP2017年6月發(fā)布新版，可以清楚的看到首頁(yè)框架發(fā)生了極大的改變：除保留一排icon、banner、兩個(gè)品牌入口外，其余內容以猜你喜歡單品的形式進(jìn)行承載，頻道/活動(dòng)入口穿插至單品中；可以看出此次改版以簡(jiǎn)化框架，重猜你喜歡的形式進(jìn)行展示為主。
但在不久的10月發(fā)布了與6月相比變化較大的首頁(yè)改版：前兩屏不僅增加了有關(guān)天貓直營(yíng)的天貓超市/生鮮、進(jìn)口、魅力惠等頻道入口，還增加了品牌維度的入口曝光，最大的改動(dòng)是猜你喜歡變成了切類(lèi)目TAB的形式展示，默認TAB為精選（原猜你喜歡的內容）
我們無(wú)法拿到6月改版后的數據變化，但可以大膽猜測10月改版的原因：
- 6月輕入口重猜你喜歡的形式，無(wú)法使重點(diǎn)欄目得到充分的流量曝光；
- 由于各電商平臺的數據壁壘，無(wú)法精確推測用戶(hù)行為，使猜你喜歡的內容推薦無(wú)法精準的集中用戶(hù)
筆者認為：就目前的市場(chǎng)環(huán)境與技術(shù)發(fā)展，猜你喜歡并不適合作為獨立的頁(yè)面場(chǎng)景進(jìn)行展示。
寫(xiě)在最后的話(huà)：
以上都是關(guān)于猜你喜歡的個(gè)人設計思考與總結，希望能幫到看完全文的你；可能會(huì )有一些缺點(diǎn)和不足，歡迎一起討論，互相學(xué)習，共同進(jìn)步。
作者：Xueyuan
