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

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

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

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

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

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

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

一、京東

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

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

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

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

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

2. 一鍵便捷修改促銷的應用場景，提示并一鍵修改促銷

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

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

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

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

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

另外，適當且簡潔的說明也能起到促使用戶點擊右方“修改促銷”的作用，達到讓用戶修改促銷并去結算的目的。

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

3. 常購清單功能提升復購率

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

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

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

二、淘寶

1. 加強直播購物的引導，訂單詳情頁增加“直播入口”

訂單詳情頁商品上方增加與商品相關的直播入口，點擊“立即觀看”按鈕可直接進入直播頁面。

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

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

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

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

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

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

2. 更快捷領券結算

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

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

（2）很貼心地幫可能沒注意到優(yōu)惠的用戶領取到優(yōu)惠，能提升用戶購物時的體驗愉悅度。試想一下，當你已有消費金額的心理預期時，突然系統(tǒng)告訴你有優(yōu)惠，打個小折省點小錢，是不是心里突然就欣喜了？這不有優(yōu)惠嘛，趕緊下單，買了買了?。ó斎唬辉诤醮蛘鄣耐梁勒堧S意……）

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

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

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

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

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

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

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

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

三、淘寶/京東

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

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

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

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

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

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

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

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

四、云集

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

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

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

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

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

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

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

2. 始終保留置頂入口

導航欄中【首頁】icon會隨著頁面往下滑動而改變，當下劃超過一定距離時，首頁的icon自動從“房子形狀”轉變?yōu)椤啊保柵c交互與懸浮窗置頂?shù)囊恢拢ㄍ瑯訛椤啊?，提示用戶該按鈕的功能與懸浮窗置頂?shù)囊恢拢?/p>

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

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

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

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

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

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

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

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

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

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

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

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

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