商品加入購物車現(xiàn)在已是電商產(chǎn)品的標(biāo)配，只要是電商產(chǎn)品，都在自己的APP上都加上了購物車功能。

1. 前言

我們還原一下我們生活中逛超市的場(chǎng)景：

一進(jìn)超市的入口，首先是找一個(gè)購物車或者購物的籃子，然后開始按照自己的路線開始逛。（這個(gè)逛的路線是超市精心為用戶設(shè)計(jì)的，確保你購買的過程中能盡可能的逛到用戶需要買，想買且利潤相對(duì)靠譜，購買頻次高的商品品類）

一路逛過來，買一些必備的蔬菜，水果等消耗品?？吹嚼鋬鰠^(qū)商品打折，看看有沒有自己想買的三文魚有無特價(jià)，有就也放進(jìn)購物籃子里。繼續(xù)走，看到花車特價(jià)，翻一翻，什么蛋糕，餅干好像也可以屯一點(diǎn)，買買買。繼續(xù)逛著，左翻翻右瞧瞧，有什么質(zhì)量不錯(cuò)的入的了眼價(jià)格又合適的商品就放進(jìn)去。

排隊(duì)結(jié)賬中，發(fā)現(xiàn)自己的購物車?yán)锖孟裼幸恍┥唐凡皇翘貏e需要，或者有些超出預(yù)算，或者忽然想起家里還有，拿出來，不結(jié)算。到自己結(jié)賬了，看到結(jié)帳區(qū)有一盒口香糖，順便也拿一盒，隨身帶著。

日常的購物車的使用流程還原基本如上，從消費(fèi)者一進(jìn)門到結(jié)賬出門，購物車一直在消費(fèi)者身邊，深度參與了購物的整個(gè)流程。

在電商產(chǎn)品中，購物車的功能與現(xiàn)實(shí)生活中很類似。

2. 購物車的作用

2.1 購物車的收藏功能

購物車的收藏是帶著購買預(yù)期的收藏，而本身的收藏功能就是喜歡所以收集商品，暫時(shí)并沒有購買的計(jì)劃。

不知現(xiàn)在本身產(chǎn)品購物車與收藏功能用戶的使用數(shù)，所以無法做出判斷。就個(gè)人體驗(yàn)而言，我用各種電商產(chǎn)品的購物車比收藏功能次數(shù)要多。

2.2 購物車商品對(duì)比功能

（1）比價(jià)

同一商品不同商家提供的價(jià)格不同。用戶同時(shí)添加在購物車對(duì)比，同一商品，挑選最低價(jià)的購買。

（2）對(duì)比商家

同一商品，價(jià)格差不多，對(duì)比商家的好評(píng)維度，哪個(gè)商家的好評(píng)多，目標(biāo)商品賣的多，就買哪家

2.3 促進(jìn)用戶消費(fèi)

購物車的存在隱含著用戶一次性買單消費(fèi)的暗示，且這種暗示已經(jīng)潛移默化的內(nèi)化成消費(fèi)者共同的認(rèn)知。我們?cè)谫徫镘囍谐尸F(xiàn)的商品別表，有什么優(yōu)惠信息都可以及時(shí)推送給用戶。

（1）單品促銷

單品降價(jià)了，可以直接在購物車的商品單品里呈現(xiàn)，刺激用戶消費(fèi)。

（2）組合促銷

例如滿200減20，可跨店。都是屬于這種促銷，也會(huì)刺激用戶消費(fèi)。提高消費(fèi)者的消費(fèi)單價(jià)。

（3）店鋪促銷

例如淘寶的店鋪領(lǐng)券。一般都是滿60包郵，而當(dāng)前用戶放在購物車準(zhǔn)備購買的商品價(jià)格才49，促進(jìn)用戶領(lǐng)券再次挑選本店商品湊單購買，提高用戶的消費(fèi)單價(jià)。

（4）幫助用戶下購買決策

庫存緊張這樣的字眼在購物車列表的單條商品中出現(xiàn)，也能幫助用戶下購買的決定。

（5）當(dāng)購物車的商品失效的情況下（庫存不足/商家進(jìn)行了調(diào)整）推薦類似的商品鏈接，幫助用戶快速找到相似商品且刺激用戶下購買的決定。

2.4 收集消費(fèi)者喜好數(shù)據(jù)，為千人千面的消費(fèi)推送做數(shù)據(jù)收集

每個(gè)人的消費(fèi)喜好是不一樣的，從人口基本屬性來說，女人喜歡買衣服鞋子，男人喜歡買電子商品等等，性別不同，產(chǎn)品給用戶推送的商品內(nèi)容不一樣。購物車的商品基本都是消費(fèi)者自己心儀且有購買打算的商品，經(jīng)過時(shí)間沉淀，每個(gè)人的購物喜好基本可以推算出來，以此為基礎(chǔ)來做商品的推送，更加精準(zhǔn)，促進(jìn)消費(fèi)者買單。

例如：現(xiàn)在的“猜你喜歡”這個(gè)欄目，完全是根據(jù)自己最近瀏覽的商品，放進(jìn)購物車的商品進(jìn)行的推送。

3. 購物車的入口與出口

4. 購物車的離線與在線

在PC端，有四種情況：

1. 用戶未登錄，打開瀏覽器，添加商品到購物車，然后關(guān)掉瀏覽器，再次打開同一個(gè)瀏覽器，購物車的商品還在；
2. 用戶未登錄，打開瀏覽器，添加購物車，直接登錄購買，合并到已登錄賬戶購物車；
3. 用戶登錄，添加商品到購物車，關(guān)閉瀏覽器，再次打開瀏覽器，不登錄，購物車的商品不在；
4. 用戶登錄，添加商品到購物車，換個(gè)設(shè)備，打開瀏覽器登錄，購物車的商品還在。

用戶未登錄的情況下難以實(shí)現(xiàn)數(shù)據(jù)一致的根源在于，目前為止沒有安全可靠的辦法獲取設(shè)備唯一標(biāo)識(shí)。如果將來如果有技術(shù)解決這個(gè)問題，用戶在同一個(gè)設(shè)備中裝多個(gè)瀏覽器都能保證數(shù)據(jù)一致。

這里帶出的一個(gè)問題是登錄是否需要前置的問題。

筆者私以為，PC端京東的體驗(yàn)比較好！

（圖為未登錄狀態(tài)下添加商品到購物車）

可以將心儀的商品添加到購物車，在未登錄的狀態(tài)下，還可以對(duì)購物車的商品進(jìn)行刪除操作。除非要進(jìn)行刪除后續(xù)動(dòng)作，例如移動(dòng)我的關(guān)注才需要用戶進(jìn)行登錄或者注冊(cè)。

5. 加入購物車與立即購買的區(qū)別

（圖為網(wǎng)易嚴(yán)選商品詳情局部）

（圖為京東商品詳情局部）

（圖為淘寶商品詳情局部）

筆者對(duì)比了亞馬遜，京東，淘寶，網(wǎng)易嚴(yán)選和小米有品，發(fā)現(xiàn)除了京東，其他的電商平臺(tái)都是立即購買與加入購物車同時(shí)出現(xiàn)。

還原用戶使用流程：

用戶點(diǎn)擊立即購買，進(jìn)入結(jié)算流程。

用戶點(diǎn)擊加入購物車，依然可以去逛其他的商品，等逛得差不多了點(diǎn)擊購物車查看都有些什么商品在購物車?yán)?，然后在?duì)比，看看哪些符合預(yù)期是自己得心頭好，怎樣的購買方式更劃算，在發(fā)生購買結(jié)算行為。

場(chǎng)景模擬還原：

（1）用戶會(huì)在什么場(chǎng)景下嘗試直接購買呢？

• 大明用戶（用戶畫像概念來自于梁寧老師），明確知道自己要買什么
• 因當(dāng)天商品有活動(dòng)（團(tuán)購，限時(shí)促銷等與時(shí)間強(qiáng)關(guān)聯(lián)得商品活動(dòng)）

（2）用戶在什么場(chǎng)景下會(huì)添加購物車呢？

• 就有點(diǎn)心動(dòng)的商品，但是還沒有到非買不可得地步
• 商品預(yù)售，活動(dòng)預(yù)熱等，看到消息，但是還未開售，商家只是對(duì)商品以及用戶接受程度做一個(gè)試探

有一種說法是商業(yè)模式的不同決定了購物方式的不同，所以京東B2C就支持用戶加入購物車，多種商品一次性付款，幫助用戶節(jié)省運(yùn)費(fèi)以及獲得更多折扣等。筆者認(rèn)為這只是早期京東的一個(gè)產(chǎn)品設(shè)計(jì)架構(gòu)的延續(xù)，現(xiàn)在的京東更多的是商家入駐提供豐富多樣的商品，所以未來肯定還是會(huì)加上立即購買的button，方便用戶能快速搶到自己心儀的產(chǎn)品，畢竟立即購買的路徑更短嘛。

那什么情況下只用“立即購買”比較合適呢？

筆者認(rèn)為，類似于機(jī)票，酒店這樣的一次性購買產(chǎn)品比較適合立即購買，不加入購物車，還有那種家庭大宗商品，例如中央空調(diào)年終大放價(jià)，有時(shí)間期限的特價(jià)，可以直接只放一個(gè)“立即購買”，幫助用戶下定購買的決策。

而且在表達(dá)“立即購買”的文案上也可以更加情景化。

（圖為去哪兒機(jī)票預(yù)訂截圖）

（圖為去哪兒網(wǎng)酒店預(yù)訂頁面）

還有類似于保險(xiǎn)，企業(yè)服務(wù)，旅游產(chǎn)品等。都適合只放一個(gè)“搶購”這樣的按鈕幫助用戶購下購買決策。

以此類推還可以推出其他消費(fèi)場(chǎng)景：眾籌/獻(xiàn)愛心/搶購特價(jià)商品等。

總結(jié)：分場(chǎng)景去設(shè)計(jì)功能按鈕，而不能簡單的一刀切。

兩種方式的主要區(qū)別：鼓勵(lì)客戶盡快去結(jié)賬還是鼓勵(lì)客戶繼續(xù)購買

6. 購物車中的商品邏輯

回顧一下電商產(chǎn)品為什么要做購物車的目的：

• 對(duì)用戶來說，一是省錢，二是省事；
• 對(duì)平臺(tái)來說，一是提高客單價(jià)，二是促進(jìn)交易。

購物車承載在這么重要的一個(gè)愿景，那在購物車商品呈現(xiàn)上要多挖掘用戶內(nèi)心的小九九……

排序

購物車的商品排序是一個(gè)比較復(fù)雜的事情，影響商品排序的有：

1. 平臺(tái)主推
2. 商品庫存
3. 優(yōu)惠幅度
4. 商品添加時(shí)間

以京東的購物車為例，用戶點(diǎn)擊購物車，默認(rèn)全選，計(jì)算全部應(yīng)付金額。

那這里的設(shè)計(jì)就需要注意到多元素：

首先，商品本身的屬性信息呈現(xiàn)與庫存狀態(tài)，例如數(shù)量，顏色，尺碼，材質(zhì)選擇，碼數(shù)等，與之匹配的庫存狀態(tài)的匹配和呈現(xiàn)。

其次，商品的促銷信息設(shè)計(jì)；

如圖所示，筆者收集了一些市面上的銷售玩法，不詳盡的地方，歡迎指正。

那具體的排序就要看公司當(dāng)前的需要了

例如：京東，打開購物車，同一時(shí)間有添加京東自營的商品到購物車，默認(rèn)都是排在第一位；默認(rèn)排序按照時(shí)間添加；商品庫存狀態(tài)出現(xiàn)異常（無庫存）則默認(rèn)排在后面。同一時(shí)間添加，出現(xiàn)更大優(yōu)惠的商品往前排。

用戶其實(shí)并不關(guān)心排序，他只關(guān)心自己放在購物車的東西閑暇的時(shí)候看一眼，心儀的產(chǎn)品降價(jià)了，買買買，自己喜歡的商品庫存緊張了，趕緊下單買買買，跨店有活動(dòng)了，湊單買買買，商品有團(tuán)購價(jià)了，呼朋喚友買買買。

電商產(chǎn)品只要有購物車功能，那么牽涉到的其他的功能模塊有：

• 訂單模塊
• 結(jié)算模塊
• 搜索模塊
• 會(huì)員系統(tǒng)
• 優(yōu)惠活動(dòng)
• 商品管理
• 注冊(cè)登錄

這里筆者只是列出來，在進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候會(huì)涉及其他哪些模塊，具體設(shè)計(jì)不呈現(xiàn)。

7. 小米有品購物車反推

筆者要反推的是小米搜索商品–瀏覽–添加購物車這個(gè)流程：

測(cè)試環(huán)境：Android 6.0.1

手機(jī)：OPPO R9S Plus

有米有品版本號(hào)：2.2.3.126

先梳理下購物車的思維導(dǎo)圖：

再梳理添加購物車的流程：

倘若是直接瀏覽，則流程很短相對(duì)會(huì)短一點(diǎn)。不過我們?cè)O(shè)定的流程是搜索商品——添加購物車，所以這里不展示瀏覽商品——添加購物車的流程圖。

還原頁面流程圖：

（頁面流程圖）

如此，開始進(jìn)入還原產(chǎn)品原型階段：

（產(chǎn)品原型全圖）

來看下細(xì)節(jié)：

（后續(xù)圖片見大圖）

從購物車添加這里走了一遍購買流程。

以上，便是還原小米有品搜索——添加購物車——以及購買的頁面還原。

筆者梳理從購物車添加這里走了一遍購買流程：

小米有品做的很舒適的一點(diǎn)就是APP產(chǎn)品的登錄后置，反推用戶使用場(chǎng)景：

在電梯里面看到小米有品的廣告，正好是自己想買的秋季產(chǎn)品，掃碼下載一個(gè)，找到目標(biāo)商品，添加購物車，這個(gè)時(shí)候才提示用戶要登錄。并非有明確目標(biāo)的購買商品，所以這個(gè)時(shí)候，弱化登錄相對(duì)來說是一個(gè)比較好的選擇，產(chǎn)生添加購物車動(dòng)作的時(shí)候才進(jìn)行登錄的指引，相對(duì)于用戶一下載APP就讓用戶注冊(cè)/登錄的做法來說，沒有那么強(qiáng)勢(shì)，體驗(yàn)更加自然。

8. 總結(jié)

8.1 小米有品添加購物車的時(shí)候，添加立即購買按鈕需要數(shù)據(jù)支撐

小米有品在添加購物車這個(gè)動(dòng)作中，當(dāng)需要選擇商品參數(shù)的時(shí)候，給了用戶一個(gè)更多的選項(xiàng)。筆者覺得會(huì)讓添加購物車這個(gè)動(dòng)作給用戶一種變得冗長得感覺。推測(cè)出發(fā)點(diǎn)是為了促進(jìn)用戶得購買，倘若能得到內(nèi)部在此步驟購買轉(zhuǎn)化的數(shù)據(jù)，才能得出更加準(zhǔn)確得是否需要在此界面添加“購買”按鈕。

8.2?登錄流程后置

小米有品的手機(jī)APP登錄是前置的，用戶一旦要添加購物車，就需要走登錄or注冊(cè)流程。這里可以參考當(dāng)當(dāng)APP的做法，用戶未登錄且能很好的保存未登錄狀態(tài)下放入購物車的商品。小米有品的PC端添加商品到購物車這里也是登錄前置，這里可以參考京東PC端做法，支持未登錄情況下添加商品到購物車，且支持刪除，體驗(yàn)更順暢自然。

8.3?小米有品的優(yōu)惠活動(dòng)需要更多花樣

可能與小米有品是個(gè)新產(chǎn)品有很大的關(guān)系，所以他的促銷方式比較局限。更多的是單品促銷。

以上，歡迎批評(píng)指正。

本文由 @?一個(gè)APP的誕生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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