主流B2C、C2C電商平臺京東、淘寶、唯品會、網易考拉、小紅書、蘇寧易購的加入購物車&支付環節的設計體驗與差異有哪些？

購物流程有沒有正好符合你的心理~

加入購物車

擬物動效和Toast提示框是加入購物車成功的兩種主要方式，雖然形式不同，但是都能達到相同的提示效果。

一般點擊【加入購物車】按鈕的跟隨結果會依據所選產品的屬性不同分為兩種：

1. 所選擇的產品只有唯一屬性，如某一品牌的背包，只有唯一屬性“顏色”，且只有一種顏色，那么則直接加入購物成功；
2. 如果所選產品存在多個可選屬性，則在點擊加入購物車時首先彈出選擇屬性面板，然后才能加入到購物車。這里我們暫忽略對產品屬性的選擇，而是直接聊一下加入購車這一操作的效果差異。

京東、唯品會和蘇寧易購都是模擬在超市購物將商品放如購物車的場景，所以這三家都在觸發按鈕后會有“+1”&“實物縮略圖”的擬物動效拋物線狀落入購物車，讓客戶很清晰感受到“哦，加入購物車成功啦”，增強顧客了逛街選選選的滿足感。

京東? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 唯品會? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?蘇寧易購

淘寶、網易考拉和天貓則是在點擊加入購物車后，以Toast提示框的形式提醒加入購物車成功，只是在提示語表達上有差異，經過長期的用戶使用習慣培養，客戶可能并不關心提示語內容是什么，只是習慣性的知曉“添加成功了”。

還是要解讀下提示信息的文案：

• 淘寶的提示語：“添加成功，在購車等親~”更具親和力的同時提示客戶在購車進行購買操作；
• 網易考拉提示語：“加入購車成功”簡潔明了；
• 天貓提示語：“商品已成功添加到購物車”，總感覺讀起來有些拗口呢，似乎有改進的空間。

淘寶? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?網易考拉? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 天貓

訂單確認 VS?支付

訂單確認和支付環節的關系是“合二為一”&“獨立門派”，取決于平臺的整體架構。個人當然傾向于訂單與支付低耦合，這樣任由訂單頁面千變萬化，也與支付不相干。

訂單與支付“分家”而“合作”

也就是說訂單與支付是兩套獨立的體系，我們合作則天一無縫，我們分開也可以好好的活著，這說的是誰呢？

示例當然是阿里系和京東。

先來說說淘寶&天貓的支付，首先在支付環境必須開通支付寶。在支付方式上可以選擇使用支付寶的余額、余額寶、花唄、綁定支付寶的銀行卡、快捷支付、網銀，支付寶會智能選擇最優支付方式。

在“確認訂單”頁面沒有支付方式的選擇，只有地址、數量、配送方式等訂單基本信息，只有點擊”提交訂單”后才會進入到支付寶平臺，這樣的好處就是不管阿里系各平臺的訂單千變萬化，只要進入到支付環節，那就按照支付寶設定的支付規則及展現形式來支付。

在手機端并不會感覺到支付平臺的切換：

淘寶訂單支付

但是在PC端進行支付的時候頁面切換至支付了，地址欄中的地址也已經不是淘寶的而是支付寶（alipay）：

京東也有自己的支付體系“京付”，當然京東支付相較于支付寶和微信，名氣小了那么一丟丟。但本著與T是一家人，必須支持微信支付，又本著開放的思想支持了Apple Pay，這樣就有了京東收銀臺這個虛擬收銀臺。

收銀臺的的頁面是獨立的，也就不關心京東旗下各種產品訂單的長相。

京東訂單支付

當然這只是舉兩個例子，其他如蘇寧易購、網易考拉也都有自己的支付渠道，但是由于市場占有率不高，為提升成單率也都入第三方支付方式，當然還是要把自有的支付方式排在第一位，而且都以不同形式的優惠吸引顧客開通支付。

蘇寧易購? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 網易考拉

訂單與支付一體化，也就是訂單與支付在都在訂單確認頁面，這類平臺當然是少數。

猜測的原因是：品臺并不是期望通過其他方面占有市場，如小紅書的內容分享。

寫在文后

加入購物車操作要達到的目的：讓用戶明確知曉加入購車成功了，這在功能上就滿足了用戶需求，至于使用toast & 擬物動效來實現就是體驗上的提升。支付環節，如果平臺有支付產品，當然是主推自有產品，為搶占支付渠道用戶也是給出了各種誘惑條件。對于全部引用第三方支付的平臺，相對來說比較簡單。

本文針對“老用戶”使用的頁面進行了對比，而對于一個新用戶來說當然還有一系列的分支流程，如填寫收貨地址、綁定銀行卡等操作。

本文由 @檸檬茶? 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議