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

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

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

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

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

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

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

一、京東

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、淘寶

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、淘寶/京東

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

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

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

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

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

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

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

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

四、云集

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

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

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

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

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

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

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

2. 始終保留置頂入口

導(dǎo)航欄中【首頁(yè)】icon會(huì)隨著頁(yè)面往下滑動(dòng)而改變，當(dāng)下劃超過(guò)一定距離時(shí)，首頁(yè)的icon自動(dòng)從“房子形狀”轉(zhuǎn)變?yōu)椤啊?，符?hào)與交互與懸浮窗置頂?shù)囊恢拢ㄍ瑯訛椤啊?，提示用戶該按鈕的功能與懸浮窗置頂?shù)囊恢拢?/p>

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

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

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

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

3. 推薦缺貨商品的相似商品，緊抓購(gòu)買需求

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

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

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

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

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

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

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

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