電商購物車設(shè)計（附案例學(xué)習(xí)）

只要是電商類產(chǎn)品，購物車這個功能一定是繞不開的，它可以說是電商類產(chǎn)品設(shè)計的標(biāo)配功能。作為平臺交易轉(zhuǎn)化最重要的環(huán)節(jié)之一，每一個細(xì)節(jié)的調(diào)整可能都會帶來數(shù)據(jù)的波動。

因此更需要我們對其有深入的思考、小心的求證。

購物車的產(chǎn)品結(jié)構(gòu)

業(yè)務(wù)邏輯

l購物車解決什么問題

在前面 Pattern 劃分的時候，購物車被歸入到了業(yè)務(wù)類型。也就是說它的設(shè)計是分層的，除了基礎(chǔ)（default）的設(shè)計之外，我們還需要疊加上一層業(yè)務(wù)的特性，它最終的呈現(xiàn)也與業(yè)務(wù)有著很強的關(guān)系。

購物車是平臺用于促進(jìn)用戶購買的一個功能模塊。

表面上來看它是用來暫存用戶想要購買的商品，但更抽象一步來看它是用來橋接用戶“逛”與“買”之間的間隙。而在這個間隙中，我們需要從最基礎(chǔ)的功能角度出發(fā)，一步步的去放大購物車的價值。

上圖截取了 4 個不同平臺的購物車界面?？梢钥吹綇淖笾劣屹徫镘嚱缑娴男畔?、功能的復(fù)雜度在一步步在遞增。

如果從純表現(xiàn)層面看，有很多設(shè)計我們很難解釋為什么需要？為什么要這么做？

但如果將購物車的設(shè)計做拆分，就會發(fā)現(xiàn)一部分功能是購物車模式所必須的，一部分是因為業(yè)務(wù)特性附加。

l購物車基本框架

對于有明確定義、用戶認(rèn)知的功能模塊，它的設(shè)計需要具備一定的普適性。

先將業(yè)務(wù)部分拋開，最基礎(chǔ)、常見的購物車界面會是如下圖所示。用來對商品信息、價格、總價的展示及用戶召喚。

擴大一下范圍，多找來幾個不同產(chǎn)品的購物車界面，就會發(fā)現(xiàn)每個購物車界面都會有的共同信息。比如：商品標(biāo)題、圖片、數(shù)量、單價、總價…

這些“同類項”讓我們清晰的發(fā)現(xiàn)了購物車界面的基礎(chǔ)界面框架。用戶日常所接觸到的購物車基本都包含這些元素、這樣布局。

當(dāng)為一款新的產(chǎn)品設(shè)計購物車界面時，它應(yīng)該成為開始的基礎(chǔ)，確保用戶最小的學(xué)習(xí)成本、更高的效率。

基礎(chǔ)框架告訴我們購物車基本需要解決的問題是“告知用戶想要購買的商品有哪些、什么規(guī)格、數(shù)量多少，以及整體的總價并引導(dǎo)進(jìn)行支付操作?！?/p>

購物車界面基本框架能夠讓用戶在購物平臺完成購物。

作為交易路徑最為重要環(huán)節(jié)之一，購物車同時還需要將用戶轉(zhuǎn)化率不斷放大。因此，我們需要對購物車界面進(jìn)行裝飾，提升用戶購買意愿、購買數(shù)量。

設(shè)計進(jìn)階：催你買單的購物車

購物車因為種種原因放棄率很高，通常有效降低用戶放棄率的方法有：

l發(fā)放優(yōu)惠券

l配送下限調(diào)到最低

l運費減免或湊單

l發(fā)送營銷短信/郵件

1小時內(nèi)發(fā)送首條挽回短信/郵件客戶完成交易的概率高達(dá)19.8%，延遲至24小時之后，成交率會降至11.6%。

設(shè)計進(jìn)階：會當(dāng)銷售的購物車

l來湊個吧單

用戶決定購賣一個商品時有兩種選項：

1.一是立即購買

2.一是加入購物車

如果用戶本身需求較多，想一次購買多種商品，或者參與到優(yōu)惠活動中（滿減、滿贈等），這時候會將多個商品加入購物車進(jìn)行批量購買。

此時，購物車設(shè)計中加入“湊單”提示，推薦用戶可能感興趣的商品，就能夠讓用戶增加商品購買數(shù)量。

例如京東的湊單設(shè)計，結(jié)合運費減免，激勵用戶選擇更多的商品以達(dá)到免運費的總價要求，購物車就這樣在無形中銷售了更多的商品。

l購物車?yán)锏拇黉N小傳單

購物車?yán)锏拇黉N小傳單很多，這些促銷優(yōu)惠活動都是為了提高客單價，刺激客戶消費的。用戶把商品加入購物車后，當(dāng)前商品的促銷小傳單就以各種提示方面顯示在購物車的商品列表中了，這些小傳單中的活動包括：

l滿減

l滿贈

l秒殺

l優(yōu)惠券

l組合商品優(yōu)惠

l…

用戶受到當(dāng)前商品促銷活動（滿減、滿贈）的引導(dǎo)，不但可以查看自己的訂單是否滿足優(yōu)惠條件，優(yōu)惠之后的金額（不包含優(yōu)惠券）。還可以針對活動繼續(xù)購物，購買更多的商品獲得活動優(yōu)惠。

購物車的功能設(shè)計

一、主要功能設(shè)計

購物車基礎(chǔ)功能包括：

l商品編輯（數(shù)量增減或刪除）

用戶會選擇多件商品放到購物車?yán)?，也會對購物車?nèi)的商品買多或減少幾件，甚至后悔刪除某些商品。最后勾選所有或部分商品下單。商品編輯功能就滿足了用戶商品選擇的操作。

設(shè)計要點：

1)商品數(shù)量的增加、刪除的極限值，最大不能超過商品的最大限購數(shù)或庫存數(shù)（看誰比較小就以誰為準(zhǔn)），最小也不能小于1；

2)交互設(shè)計中，有些平臺傾向把功能隱藏起來（如淘寶），也有直接顯示功能的（如京東、蘇寧），產(chǎn)品經(jīng)理應(yīng)根據(jù)平臺對于商品編輯功能的引導(dǎo)方便決定在交互中如果設(shè)計。

l商品失效管理

商品失效管理是對失效商品的處理設(shè)計。失效原因有很多，例如：

1)加入購物車商品的SKU賣完了

2)商品下架

3)用戶購買數(shù)量已經(jīng)達(dá)到最大限購數(shù)

設(shè)計要點

1)對失效商品的處理常見模式是將失效商品置于界面最底端，提供一鍵清空功能

2)同時考慮到用戶對些類商品的需求，提供“找相似商品”功能。

案例學(xué)習(xí)

1)淘寶在設(shè)計中顯示了商品失效原因；

2)京東沒有把失效商品單獨放置，在原有位置顯示失效及失效原因，清除失效商品做得較隱避。

總結(jié)：每個產(chǎn)品在細(xì)節(jié)處理上都有細(xì)微的不同，但商品失效管理功能的設(shè)計的核心在于提示用戶購物車內(nèi)的某些商品無法購買了，不因為商品突然不見或無法購買而造成困惑。

l促銷引導(dǎo)/提示

對商品的促銷信息提示是每個購物車的標(biāo)配，如：

1)降價

2)商品可以使用的優(yōu)惠券

3)商品正在參加的活動

交互形式類似，目的都是為了幫助商戶更好的提高商品銷量，鼓勵用戶以更優(yōu)惠的價格購買商品。

l湊單

購物車中準(zhǔn)備購買的商品有時正在進(jìn)行營銷活動，如：

1)滿300包郵

2)滿400減100

3)…

如果購物車商品距離優(yōu)惠條件還有一段距離，這時平臺購物車將提示“湊單”選擇。

設(shè)計要點

1)湊單頁面可以看到該商戶除了購物車商品以外的其它活動商品

2)可以將它們加入購物車統(tǒng)一結(jié)算

3)湊單頁面商品通常按用戶感興趣的指數(shù)進(jìn)行排名

案例學(xué)習(xí)

京東的湊單頁面顯示了當(dāng)前店鋪概況，還可以按銷量、價格等條件篩選想看的商品。

l拆單

平臺銷售的商品越多，商品下單到后臺的邏輯就越復(fù)雜。很多商品不能在一張訂單中下單，如：

1)全球購商品涉及進(jìn)口稅或需要使用國際支付等原因不能跟國內(nèi)渠道商品一起下單

2)藥物類商品因為國家管制不能和非管制商品一起下單

在這種復(fù)雜的業(yè)務(wù)邏輯下，購物車的下單功能必須具備拆單能力。

案例學(xué)習(xí)

1)淘寶、京東在拆單功能中提供引導(dǎo)性的提示，讓用戶按需求點擊“去結(jié)算”功能進(jìn)行拆單結(jié)算

2)蘇寧弱化了提示性動作引導(dǎo)，僅以提示信息的方式告之用戶無法下單商品，用戶需要手動去除不能一起下單商品完成結(jié)算。

l個性化推薦

用戶加了大量商品在購物車時，個性化推薦功能可以提供更多類似商品的選擇機會，同時促進(jìn)相關(guān)商品的銷量。

案例學(xué)習(xí)

1)淘寶在個性化推薦中提供了用戶可能感興趣的商品，而且還通過源頭商品的展示讓用戶知道自己為什么對這類商品感興趣

2)京東、蘇寧則設(shè)計的比較簡單，僅提供可能感興趣的商品列表。

二、購物車列表設(shè)計

購物車列表設(shè)計要點：

l購物車選中策略

購物車的選中策略有三種：默認(rèn)全選、默認(rèn)全不選、勾選用戶最近一次選擇的商品。策略3是常見應(yīng)用方式。這是因為有時用戶把購物車當(dāng)做收藏夾、意向商品庫來用，這時購物車中會留存大量商品。

這時用戶最近一次選擇的商品很有可能是購買優(yōu)先級最高的，列表中提供最近一次選擇的商品的自動勾選為用戶快速購物提供準(zhǔn)備。

l商品排序

商品在購物車列表中的顯示緯度包括：

1)商家店鋪：不同店鋪不同商品分開展示

2)活動優(yōu)惠：將優(yōu)惠活動相同的商品聚合在一起展示

3)加入時間：按照加入購物車的時間倒序排列，最近添加的商品排列在前

購物車內(nèi)的列表商品排序應(yīng)將最近添加的商品放在前面，雖然把歷史商品放在前面提醒用戶下單，喚醒歷史購物需求沒有錯。

但對于銷售這件事來說，購物需求也具備時效性，用戶最近的購物需求應(yīng)更容易觸發(fā)。

l商品購買金額合計

按照店鋪合計商品銷售金額是慣例做法，底層邏輯是批量選擇店鋪商品結(jié)算后能夠?qū)?yīng)到統(tǒng)一物流和商家。

添加的商品存在排序、合計購買金額間的矛盾時，一般做法可以將最新添加商品的所在分類排到前面來。

l上限商品數(shù)量

京東購物車上線數(shù)量是200件，唯品會是同款商品限購2件。對于上限商品數(shù)量沒有統(tǒng)一標(biāo)準(zhǔn)，應(yīng)根據(jù)商品具體業(yè)務(wù)規(guī)則確定。

l購物車列表展示信息

購物車商品展示時，基本的展示信息包括：

1)商品標(biāo)題

2)商品圖片

3)價格

4)數(shù)量

5)規(guī)格（顏色、尺碼等）

6)商家（自營或店鋪）

7)庫存狀態(tài)（庫存緊張/缺貨）

如果是跨境商品，還需要顯示稅費。

l多端同步更新

打開、刷新購物車時，商品信息應(yīng)保證多端（APP、web）數(shù)據(jù)同步，同步信息包括：

1)商品信息、促銷信息同步更新。

2)購物車云端同步選中狀態(tài)（不同設(shè)備打開時繼承上次選中記錄）。

3)用戶購物車數(shù)據(jù)應(yīng)記錄在數(shù)據(jù)庫中，保證APP、web端同步，下次登錄不丟失。

l離線購物車

離線購物車指用戶未登錄狀態(tài)下把商品加入購物車而形成的購物車數(shù)據(jù)，一般通過創(chuàng)建虛擬用戶實現(xiàn)。

離線購物車是為了在用戶下單前，不打斷用戶購物行為，允許未登錄先將商品加入購物車的操作。

用戶確定購買意向，發(fā)起下單申請后，產(chǎn)品提示用戶登錄，此時涉及離線購物車和用戶在線購物車的合并，在產(chǎn)品處理上應(yīng)注意：

1)用戶登陸時應(yīng)首先判斷是否有離線購物車

2)將離線購物車數(shù)據(jù)與在線購物車數(shù)據(jù)合并

l庫存監(jiān)控

商品庫存發(fā)生變動會影響用戶購物車列表中的商品可買狀態(tài)，如下架、缺貨、促銷等原因都會讓購物車商品處于異常狀態(tài)，

因此，購物車商品列表應(yīng)對商品庫存數(shù)量進(jìn)行監(jiān)控，一但異常就發(fā)出提醒，促進(jìn)用戶快速購物。庫存緊張、無貨時，列表應(yīng)具備的功能：

1)購物車更新時應(yīng)查詢對應(yīng)的商品庫存，判斷當(dāng)前商品的數(shù)量，小于提醒值時提醒用戶庫存不足。

2)庫存數(shù)量為0時，提醒無貨。

3)商品下架提示商品無效。

4)不可購買商品應(yīng)在列表中顯示不可用狀態(tài)并提示說明，同時設(shè)置不可勾選狀態(tài)。

5)不可購買商品可設(shè)計無效商品列表，設(shè)計批量清除功能。

l價格監(jiān)控

購物車商品價格變動時提示用戶，如：降價20元。提示信息可能會刺激用戶完成下單行為。

l商品編輯

編輯購物車列表時的主要操作包括：

1)刪除商品

2)加減商品數(shù)量

3)更改商品規(guī)格

三、購物車設(shè)計的其它思考

l登陸注冊放在購物流程的哪一步？

淘寶、京東、美團(tuán)平臺有離線購物車，用戶未登陸也可以操作“加入購物車”功能，登錄注冊放在“提交訂單“時。唯品會的登錄注冊放在“加入購物車”時。

過早讓用戶登陸注冊可能會打斷用戶購物過程，結(jié)算時登錄可以必免這個問題。

但不登錄加入購物車的設(shè)計對于PC端用戶來說，如果用戶清理了瀏覽器cookieo數(shù)所，己選商品記錄就隨之被刪除。

l購物車入口設(shè)計

購物車入口指能與購物車交互的入口。在用戶的購物場景中應(yīng)按需設(shè)計。入口設(shè)計的目的在于讓用戶基于不同場景將商品添加到購物車或者到購物車結(jié)算。

購物車入口通常放置的頁面包括：

1)搜索列表頁

2)商品詳情頁

3)秒殺、專題等活動頁

4)收藏夾

5)歷史訂單

這些頁面中的用戶有一個共同的特點是在完成購買決策，放置購物車入口可以幫助用戶完成購買。另外收藏夾、歷史訂單頁面的入口設(shè)計是對反復(fù)購買場景的銷售機會挖掘。

l購物車與其他系統(tǒng)的關(guān)聯(lián)

1)購物車與訂單系統(tǒng)：購物車下單后，需要把購物車?yán)锩娴纳唐沸畔⑻峤坏接唵蜗到y(tǒng)。

2)購物車與庫存系統(tǒng)：如果業(yè)務(wù)需要加入購物車后減少庫存數(shù)量，則要考慮庫存系統(tǒng)加減商品數(shù)量的操作。

3)購物車與價格系統(tǒng)：商品加入購物車后，商家調(diào)整價格系統(tǒng)中商品價格時，購物車商品價格也應(yīng)做調(diào)整。

4)購物車與促銷系統(tǒng)：購物車應(yīng)關(guān)聯(lián)該系統(tǒng)中商品的優(yōu)惠信息。

l如何減庫存

購物車設(shè)計中減庫存功能設(shè)計要點是：何時減少庫存？減少庫存的常見做法有三種：

1)加入購物車減庫存

2)下單減庫存

3)支付減庫存

減少庫存的時間點選擇，與商品的庫存量、購賣頻率有關(guān)。如：

1)庫存商品有限且短時間購買數(shù)量較大的商品，適合加入購物車時就減庫存，如秒殺商品

2)下單減庫存和支付減庫存都適合商品庫存數(shù)量多，購買頻率較為穩(wěn)定的商品

不同購買步驟的減庫存設(shè)計，除了庫存增、減功能，通常用戶端會加入“有效購買時間”提示，促進(jìn)用戶完成購物

案例學(xué)習(xí)

京東自營某商品無貨狀態(tài)下，添加商品進(jìn)購物車會提示無貨。同時，已下單的同類商品訂單中，產(chǎn)品設(shè)計提示：要求用戶在24小時內(nèi)支付，否則商品將被釋放。另外，如果用戶主動或被動取消訂單，這個商品恢復(fù)庫存。

唯品會商品加入購物車后就減庫存，同時產(chǎn)品提醒用戶20分鐘內(nèi)提交訂單。另外，用戶提交訂單后產(chǎn)品提醒用戶30分鐘內(nèi)完成支付，否則商品會釋放。