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

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

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

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

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

l購物車解決什么問題

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

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

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

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

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

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

l購物車基本框架

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

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

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

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

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

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

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

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

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

購物車因?yàn)榉N種原因放棄率很高，通常有效降低用戶放棄率的方法有：

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

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

l運(yùn)費(fèi)減免或湊單

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

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

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

l來湊個(gè)吧單

用戶決定購賣一個(gè)商品時(shí)有兩種選項(xiàng)：

1.一是立即購買

2.一是加入購物車

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

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

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

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

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

l滿減

l滿贈

l秒殺

l優(yōu)惠券

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

l…

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

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

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

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

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

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

設(shè)計(jì)要點(diǎn)：

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

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

l商品失效管理

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

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

2)商品下架

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

設(shè)計(jì)要點(diǎn)

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

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

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

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

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

總結(jié)：每個(gè)產(chǎn)品在細(xì)節(jié)處理上都有細(xì)微的不同，但商品失效管理功能的設(shè)計(jì)的核心在于提示用戶購物車內(nèi)的某些商品無法購買了，不因?yàn)樯唐吠蝗徊灰娀驘o法購買而造成困惑。

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

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

1)降價(jià)

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

3)商品正在參加的活動(dòng)

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

l湊單

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

1)滿300包郵

2)滿400減100

3)…

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

設(shè)計(jì)要點(diǎn)

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

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

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

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

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

l拆單

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

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

2)藥物類商品因?yàn)閲夜苤撇荒芎头枪苤粕唐芬黄鹣聠?/p>

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

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

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

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

l個(gè)性化推薦

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

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

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

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

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

購物車列表設(shè)計(jì)要點(diǎn)：

l購物車選中策略

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

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

l商品排序

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

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

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

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

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

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

l商品購買金額合計(jì)

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

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

l上限商品數(shù)量

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

l購物車列表展示信息

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

1)商品標(biāo)題

2)商品圖片

3)價(jià)格

4)數(shù)量

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

6)商家（自營或店鋪）

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

如果是跨境商品，還需要顯示稅費(fèi)。

l多端同步更新

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

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

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

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

l離線購物車

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

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

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

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

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

l庫存監(jiān)控

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

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

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

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

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

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

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

l價(jià)格監(jiān)控

購物車商品價(jià)格變動(dòng)時(shí)提示用戶，如：降價(jià)20元。提示信息可能會刺激用戶完成下單行為。

l商品編輯

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

1)刪除商品

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

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

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

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

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

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

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

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

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

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

1)搜索列表頁

2)商品詳情頁

3)秒殺、專題等活動(dòng)頁

4)收藏夾

5)歷史訂單

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

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)購物車與價(jià)格系統(tǒng)：商品加入購物車后，商家調(diào)整價(jià)格系統(tǒng)中商品價(jià)格時(shí)，購物車商品價(jià)格也應(yīng)做調(diào)整。

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

l如何減庫存

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

1)加入購物車減庫存

2)下單減庫存

3)支付減庫存

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

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

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

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

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

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

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