主流電商平臺有哪些亮眼的交互細(xì)節(jié)，筆者結(jié)合個人的思考對電商平臺新細(xì)節(jié)新功能進(jìn)行了較為深入的分析，一起來看看~

相信大家手機(jī)里肯定都至少有2~3個電商App（資深剁手黨可能一個九宮格裝不下……沒錯，那就是筆者本人了），淘寶、天貓、京東、唯品會等等這些綜合電商大頭你們一定不陌生。

日常我們買買買的時候，主要就是兩種場景，一是已經(jīng)有明確的目標(biāo)商品趕緊去付款剁手，二是在App里閑逛，殺殺碎片時間，然后看看有沒有看中想買的商品……

但無論哪種場景都繞不開“購買”這個中心，而平時我們更多地集中于買買買，卻很少留意到背后蘊(yùn)含強(qiáng)邏輯但在表現(xiàn)層上比較細(xì)微的交互設(shè)計。

其他類型平臺的交互細(xì)節(jié)設(shè)計可能更多偏向于讓用戶使用的時候更爽，使其情緒或情感上產(chǎn)生共鳴，讓用戶對App的好感度提升。

但電商平臺的設(shè)計出發(fā)點(diǎn)多少有些差異，這是由于電商平臺在戰(zhàn)略層面上的核心目的是讓用戶更好更快更開心地剁手（這個筆者已深有體會了……），因此交互細(xì)節(jié)的設(shè)計更多偏向于引導(dǎo)購物決策。

下面我們就來看看，平臺是如何不知不覺中讓我們一步步加快自己剁手的節(jié)奏的，或在剁手的過程中感覺更愉悅的。

一、京東

1. 深化個性化推薦的購物場景，錨點(diǎn)至推薦區(qū)的懸浮窗，且突出展示

京東App中原本只有下滑超過一定距離時會展示的錨點(diǎn)至頂部的懸浮窗（灰色展示）如下圖1，這個設(shè)計在電商平臺中已經(jīng)是很常見的。

后來發(fā)現(xiàn)當(dāng)下滑一小段距離且未到達(dá)個性化推薦區(qū)時，該懸浮窗顯示錨點(diǎn)至推薦區(qū)，且使用亮眼的紅色底色，突出展示，如下圖2。

暫時未在其他電商平臺發(fā)現(xiàn)錨點(diǎn)至推薦區(qū)的交互，從這里可以看出京東是非常重視個性化推薦的。

1. 由此追溯回京東的個性化推薦演變的歷史，個性化推薦起步于2012年，至2015年的時候已經(jīng)有公開數(shù)據(jù)表明個性化推薦的訂單貢獻(xiàn)率達(dá)到了平臺總量的10%（可惜暫時沒有找到最新的個性化推薦的訂單貢獻(xiàn)率的公開數(shù)據(jù)），可見個性化推薦在京東平臺的重要地位。
2. 該推薦錨點(diǎn)的設(shè)計也恰恰反映出了平臺力推個性化推薦的用意，同時通過讓用戶更多地瀏覽推薦區(qū)商品，反過來完善推薦引擎中用戶的數(shù)據(jù)，豐富用戶的購物特征，使其推薦能夠更加精準(zhǔn)地觸達(dá)用戶，促使其購買。

2. 一鍵便捷修改促銷的應(yīng)用場景，提示并一鍵修改促銷

選擇商品之后，若商品同時參與多個促銷，而其中某多款商品命中同一個促銷但是促銷上并沒有選擇同一個，則勾選該多款商品之后會出現(xiàn)懸浮按鈕提示“立?。?4”，點(diǎn)擊按鈕后彈出對應(yīng)解釋“已選商品有更優(yōu)惠促銷，修改后立?。?4”，點(diǎn)擊右方按鈕“修改促銷”即可一鍵修改相應(yīng)促銷至滿足當(dāng)前立省的金額。

這個交互細(xì)節(jié)可以達(dá)到以下目的：

（1）價格和優(yōu)惠始終是用戶購物時候首先且重點(diǎn)關(guān)注的點(diǎn)，這個懸浮按鈕先通過醒目的紅色“立減￥xx”瞬間吸引用戶的注意，促使用戶去點(diǎn)擊查看到底存在個什么樣的優(yōu)惠。

這里考慮到了用戶的實(shí)際購買場景，用戶可能不會為了達(dá)到促銷門檻去湊單，或湊單里沒有合適的商品，或用戶可能僅僅需要買已勾選的商品，而未命中的促銷也很可能導(dǎo)致用戶因為拿不到優(yōu)惠而放棄結(jié)算，這樣就相當(dāng)于流失掉了用戶，因此設(shè)置懸浮按鈕提醒用戶已滿足另外的促銷，就大大提高了用戶結(jié)算的可能性了。

（2）點(diǎn)擊懸浮窗之后展開命中的促銷的說明，能夠讓用戶清楚自己命中的促銷情況，這樣一來也明確告訴用戶優(yōu)惠的來源，而不是暗藏了其他的坑去讓用戶踩，起到讓用戶安心的作用。

另外，適當(dāng)且簡潔的說明也能起到促使用戶點(diǎn)擊右方“修改促銷”的作用，達(dá)到讓用戶修改促銷并去結(jié)算的目的。

（3）點(diǎn)擊“修改促銷”之后就是提交訂單頁，整一個從提示優(yōu)惠→優(yōu)惠說明→修改促銷→結(jié)算的流程一氣呵成，體驗良好，完全沒有“中間環(huán)節(jié)”打斷用戶去支付的操作，可謂給了用戶極強(qiáng)的剁手助攻?。üP者就是這樣刷刷刷完成了剁手滴……）

3. 常購清單功能提升復(fù)購率

京東的搜索框頁中包含了“常購清單”的功能入口，清單會展示存在的促銷及3個對應(yīng)促銷商品的圖片，而清單頁里包含了平臺記錄的用戶常購的商品、曾購買的次數(shù)和加購功能。

（1）高頻購買的商品的復(fù)購可能性非常高。該功能就非常方便用戶能夠在自己常購的商品中繼續(xù)復(fù)購，而無需重新去搜索商品或者在訂單中翻出曾購買的目標(biāo)商品訂單然后再加購。

（2）在用戶購買時的心理層面上分析該功能，既是自己常購的商品又剛好有促銷，大部分用戶都會點(diǎn)擊去查看促銷，并且有很大可能性會因此有優(yōu)惠而囤貨（雙11其實(shí)也是抓住了用戶類似的心理，有促銷，寧愿囤貨也千萬不能放過），所以這里的細(xì)節(jié)是緊緊抓住了用戶的購買心理來設(shè)計的，筆者也會關(guān)注后續(xù)是否有官方公開數(shù)據(jù)去說明該功能的實(shí)際效果。

二、淘寶

1. 加強(qiáng)直播購物的引導(dǎo)，訂單詳情頁增加“直播入口”

訂單詳情頁商品上方增加與商品相關(guān)的直播入口，點(diǎn)擊“立即觀看”按鈕可直接進(jìn)入直播頁面。

這里的入口設(shè)置強(qiáng)關(guān)聯(lián)了直播，結(jié)合淘寶直播的數(shù)據(jù)就很清楚這里設(shè)置的目的，就是要加強(qiáng)引導(dǎo)用戶去直播購物。

（1）目前根據(jù)公開數(shù)據(jù)可知，淘寶直播入口創(chuàng)造的GMV占比大幅度上升，而今年的618主推淘寶直播后，618大促直播引導(dǎo)成交額為130億元，618期間的開播商家數(shù)同比增長近120%，開播場次增長150%。

淘寶直播間現(xiàn)在已成為商家標(biāo)配，通過淘寶直播，利用明星和網(wǎng)紅的帶貨能力導(dǎo)購，從內(nèi)容上打開流量入口。

因此在范圍層上配合戰(zhàn)略層力推直播購貨的消費(fèi)場景，在訂單詳情頁新增該直播入口，達(dá)到多方位引導(dǎo)用戶觀看直播甚至培養(yǎng)用戶養(yǎng)成邊看邊買的習(xí)慣。

（2）在訂單詳情頁設(shè)置該直播入口是從用戶的購物需求以及購物行為出發(fā)考慮的，該用戶已經(jīng)購買了店鋪的商品，對店鋪的商品感興趣或有一定程度的了解且有購買需求，因此在訂單詳情中觸達(dá)用戶是存在極大的刺激復(fù)購可能性的。

而一般用戶購買了商品之后有很大可能性會查看訂單詳情頁，出于如再次查看商品/商品價格或查詢物流等等目的，所以利用該頁面的高進(jìn)入頻次來引導(dǎo)用戶進(jìn)入店鋪的直播間，可以預(yù)想轉(zhuǎn)化率相對會比較高。

2. 更快捷領(lǐng)券結(jié)算

若用戶存在未領(lǐng)券就準(zhǔn)備進(jìn)入結(jié)算階段，則“去結(jié)算”按鈕自動變更為“領(lǐng)券結(jié)算”，點(diǎn)擊后系統(tǒng)自動幫用戶領(lǐng)取適用的優(yōu)惠券并進(jìn)入提交訂單頁面。

（1）這一操作流程可以節(jié)省用戶領(lǐng)券的操作時間，直接點(diǎn)擊就領(lǐng)券進(jìn)入結(jié)算頁面，話不多說系統(tǒng)直接就“催”你趕緊付款，從領(lǐng)券結(jié)算到支付完成一氣呵成，很好地秉承了“絕對不打斷用戶支付流程”的核心要旨。

（2）很貼心地幫可能沒注意到優(yōu)惠的用戶領(lǐng)取到優(yōu)惠，能提升用戶購物時的體驗愉悅度。試想一下，當(dāng)你已有消費(fèi)金額的心理預(yù)期時，突然系統(tǒng)告訴你有優(yōu)惠，打個小折省點(diǎn)小錢，是不是心里突然就欣喜了？這不有優(yōu)惠嘛，趕緊下單，買了買了！（當(dāng)然，不在乎打折的土豪請隨意……）

（3）小結(jié)一下，這個“領(lǐng)券結(jié)算”的交互不僅僅能從操作上給用戶帶來良好體驗，還能在情感層面上給予用戶驚喜，促進(jìn)購買決策，所謂是一舉兩得。

3. 圖片比文字更吸引眼球

淘寶的熱搜板塊從單純的“#文字話題”轉(zhuǎn)變成圖片加文字及熱榜指數(shù)，點(diǎn)擊進(jìn)去是熱榜相關(guān)的內(nèi)容及商品，且熱搜榜會根據(jù)熱度實(shí)時更新。

其實(shí)這里更偏向于視覺細(xì)節(jié)層面的雕琢，而非交互層面的。

個人感覺這個細(xì)節(jié)所起的作用還是比較大的，因為圖片永遠(yuǎn)比文字更能夠吸引用戶的眼球。

單純是文字的話題可能大部分用戶都不會去點(diǎn)擊，但是有了圖片之后，用戶很大可能會被有趣的圖片所吸引，然后點(diǎn)擊進(jìn)去熱榜查看，從而增加了熱榜頁面的點(diǎn)擊率，也有可能帶動了熱榜相關(guān)聯(lián)的商品的曝光率、點(diǎn)擊率和轉(zhuǎn)化率。

所以，筆者個人認(rèn)為這個細(xì)節(jié)上的轉(zhuǎn)變雖細(xì)微，但有很大可能性能夠帶動一系列的商品相關(guān)數(shù)據(jù)的增長。

后來看到億邦動力網(wǎng)9.18的推文介紹，原來筆者在發(fā)現(xiàn)“全網(wǎng)熱搜”的功能至本文介紹到該功能的這段時間，該功能是處于A/B Test灰度測試的狀態(tài)，因此全網(wǎng)只有50%的用戶可以看到并且試用該功能（筆者很榮幸成為可以試用的那一半的用戶，可能筆者近年來為淘寶貢獻(xiàn)了不少GMV），等待該功能正式全量上線后，筆者會繼續(xù)關(guān)注該熱搜功能是否會在數(shù)據(jù)上為淘寶帶來增量。

三、淘寶/京東

滲透在邊角細(xì)微處的公益，提升平臺形象

在淘寶和京東的搜索框中搜索瀕危動物的非法商品的相關(guān)字眼，會出現(xiàn)以下的保護(hù)瀕危動物的公益頁面，其中包含了瀕危動物相關(guān)的知識科普及相關(guān)法律法規(guī)的知識。

（1）搜索框原本的設(shè)計是為了承載用戶搜索商品，查找信息的功能屬性，但是如果能夠好好被利用起來，該功能也是有很強(qiáng)的延展性的。

比如這里提到的公益性質(zhì)的搜索結(jié)果頁，就能夠很好地將保護(hù)瀕危動物的相關(guān)知識科普到給用戶，讓公益滲透到了邊角的細(xì)微處，更能夠很好地展示和提升平臺的公益形象，是一個有效且充分利用閑置資源的栗子。

（2）雖然兩者都是保護(hù)瀕危動物的公益界面，其實(shí)也能看出側(cè)重點(diǎn)稍微有些不同，淘寶更傾向于給用戶科普瀕危動物的相關(guān)知識和鼓勵用戶去舉報非法商品，而京東則更偏向于教育用戶拒絕非法商品和鼓勵用戶去傳播分享。

傳播公益知識固然重要，但筆者認(rèn)為站在電商平臺的層面，淘寶的引導(dǎo)用戶舉報非法商品的設(shè)計更為合適，這是考慮到了電商平臺的核心屬性——商品買賣。

所謂“沒有買賣就沒有傷害”，作為商品買賣的大平臺，平臺的職責(zé)更多的是杜絕非法商品的售賣，而不僅僅在于讓用戶去分享這個信息內(nèi)容。只有杜絕了非法商品的買賣，才能夠很好地從源頭需求上去減少這種非法買賣的現(xiàn)象，從而更好地實(shí)現(xiàn)作為電商平臺保護(hù)瀕危動物的職責(zé)。

所以，筆者覺得站在電商平臺的層面，淘寶的設(shè)計背后所蘊(yùn)含的邏輯更符合電商平臺的屬性，也是能更好地從根本去解決非法商品買賣問題的有效方法。

四、云集

1. 給予用戶可滑動距離的心理預(yù)期

這個小交互細(xì)節(jié)在筆者的上一篇文章也略微提到了，這里單獨(dú)在交互細(xì)節(jié)的梳理里面再詳細(xì)分析一下。

在云集首頁，當(dāng)下滑到特賣區(qū)時，用戶在觸碰屏幕往下滑動時，右下方會懸浮提示當(dāng)前是第幾個商品及整個特賣商品列表一共有多少個（就是下圖的“7/98”），當(dāng)用戶的手指離開屏幕時，該懸浮提示轉(zhuǎn)變?yōu)橹庙攽腋“粹o。

（1）這個交互細(xì)節(jié)的設(shè)計能夠給到用戶對下拉滑動的最大距離的一個心理預(yù)期以及當(dāng)前瀏覽是第幾個商品的提示。

因為這里是一個有固定數(shù)值的商品列表（而非個性化推薦列表那樣是無限下拉更新的），用戶在滑動時通過這個懸浮提示就可以知道大概還有多長的滑動距離就到底了，而不是突然列表就結(jié)束或者不知道自己在瀏覽的位置是在列表的哪個位置。

（2）另外，這個交互細(xì)節(jié)也是對應(yīng)到了平臺特賣區(qū)的宣傳核心。

因為特賣區(qū)是每日上新99個商品，其中一個是熱賣置頂商品，因此下方熱賣商品一共為98個，因此這個懸浮提示也無形中告訴了用戶98個商品上新是真實(shí)存在的，從而增加了平臺的可信度，也給用戶傳達(dá)了隱形的“安全感”。

2. 始終保留置頂入口

導(dǎo)航欄中【首頁】icon會隨著頁面往下滑動而改變，當(dāng)下劃超過一定距離時，首頁的icon自動從“房子形狀”轉(zhuǎn)變?yōu)椤啊?，符號與交互與懸浮窗置頂?shù)囊恢拢ㄍ瑯訛椤啊保崾居脩粼摪粹o的功能與懸浮窗置頂?shù)囊恢拢?/p>

（1）該功能設(shè)置的目的是，當(dāng)用戶在熱賣欄中進(jìn)入了二級類目，懸浮框不再顯示時，則【首頁】icon的轉(zhuǎn)換保留了置頂功能的入口，用戶依然可以通過單擊首頁icon返回頁面頂部，方便了用戶的操作，極大提升了用戶的使用體驗。

（2）這個交互細(xì)節(jié)的設(shè)置是緊緊圍繞著用戶的使用習(xí)慣來設(shè)計的，因為無論是首頁的熱賣商品區(qū)還是二級類目的商品列表，都相對是比較長的，因此返回頂部的這個操作的使用頻次相對比較高，如果缺失了這個功能入口可能極大地?fù)p害了用戶的使用體驗。

其他主流平臺如淘寶，也有類似的設(shè)置，只是交互設(shè)計不一樣，淘寶是單擊頂部區(qū)域（接近頁面標(biāo)題的位置，熱區(qū)較窄）可返回頂部。

個人認(rèn)為云集的設(shè)計會相對優(yōu)勝些，因為icon的變化是用戶稍加觀察是可以感知的，但淘寶的設(shè)計相對更加隱蔽，如果不是無意中發(fā)現(xiàn)這個熱區(qū)操作可能都不知道會觸發(fā)返回頂部的交互，而且熱區(qū)的范圍較窄，容易誤操作到別的區(qū)域。

3. 推薦缺貨商品的相似商品，緊抓購買需求

點(diǎn)擊熱賣區(qū)中顯示“搶光了”的商品，跳轉(zhuǎn)至詳情頁前會出現(xiàn)缺貨浮窗，浮窗除了可以設(shè)置補(bǔ)貨提醒之外，還增加了缺貨商品的相似商品推薦區(qū)，滑動展示10個相似商品。

（1）這里設(shè)置的相似商品推薦區(qū)是從用戶實(shí)際購買需求出發(fā)考慮的，因為用戶在首頁已看到缺貨的狀態(tài)仍點(diǎn)擊進(jìn)入詳情頁，說明用戶的購買需求很強(qiáng)烈，而推薦相似好貨會有很大可能性刺激該用戶購買，帶動轉(zhuǎn)化率。

（2）這個設(shè)計可以看出來平臺不想放過任何一個可以促成轉(zhuǎn)化的機(jī)會，只要洞察到用戶有購買需求，就不放過這一個空隙，站在電商平臺的角度，這個設(shè)計是很符合電商中“促成用戶購買決策”的這一核心的。

以上就是筆者近段時間觀察并收集的電商平臺最近更新的新交互細(xì)節(jié)和新功能，也結(jié)合個人的思考對這些新細(xì)節(jié)新功能進(jìn)行一個較為深入的分析。

在這“觀察→收集→思考分析設(shè)計邏輯→內(nèi)容梳理輸出”整個過程中感受最深的是，當(dāng)不經(jīng)意發(fā)現(xiàn)了平臺中別出心裁的交互細(xì)節(jié)設(shè)計，然后去思考“為什么”，經(jīng)過思考之后得出相對合理的解釋的那個瞬間，有種和設(shè)計該功能細(xì)節(jié)的PM“心靈互通”的感覺——“Oh, I got you!”，也深深感受到了設(shè)計人考慮的細(xì)心周全和思維邏輯的緊密。

筆者會繼續(xù)更廣泛去留心和捕捉這些交互細(xì)節(jié)，希望以上內(nèi)容能夠拋磚引玉，也歡迎大家將自己觀察到的交互細(xì)節(jié)分享出來，引發(fā)更多的討論和思考。

本文由 @修煉中的小vc 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。