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

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

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

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

l購(gòu)物車解決什么問(wèn)題

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

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

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

上圖截取了 4 個(gè)不同平臺(tái)的購(gòu)物車界面?？梢钥吹綇淖笾劣屹?gòu)物車界面的信息、功能的復(fù)雜度在一步步在遞增。

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

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

l購(gòu)物車基本框架

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

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

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

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

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

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

購(gòu)物車界面基本框架能夠讓用戶在購(gòu)物平臺(tái)完成購(gòu)物。

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

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

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

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

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

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

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

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

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

l來(lái)湊個(gè)吧單

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

1.一是立即購(gòu)買

2.一是加入購(gòu)物車

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

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

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

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

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

l滿減

l滿贈(zèng)

l秒殺

l優(yōu)惠券

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

l…

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

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

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

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

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

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

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

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

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

l商品失效管理

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

1)加入購(gòu)物車商品的SKU賣完了

2)商品下架

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

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

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

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

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

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

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

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

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

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

1)降價(jià)

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

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

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

l湊單

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

1)滿300包郵

2)滿400減100

3)…

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

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

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

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

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

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

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

l拆單

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

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

2)藥物類商品因?yàn)閲?guó)家管制不能和非管制商品一起下單

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

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

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

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

l個(gè)性化推薦

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

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

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

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

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

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

l購(gòu)物車選中策略

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

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

l商品排序

商品在購(gòu)物車列表中的顯示緯度包括：

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

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

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

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

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

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

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

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

l上限商品數(shù)量

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

l購(gòu)物車列表展示信息

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

1)商品標(biāo)題

2)商品圖片

3)價(jià)格

4)數(shù)量

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

6)商家（自營(yíng)或店鋪）

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

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

l多端同步更新

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

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

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

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

l離線購(gòu)物車

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

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

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

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

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

l庫(kù)存監(jiān)控

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

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

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

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

3)商品下架提示商品無(wú)效。

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

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

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

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

l商品編輯

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

1)刪除商品

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

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

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

l登陸注冊(cè)放在購(gòu)物流程的哪一步？

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

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

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

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

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

購(gòu)物車入口通常放置的頁(yè)面包括：

1)搜索列表頁(yè)

2)商品詳情頁(yè)

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

4)收藏夾

5)歷史訂單

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

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

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

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

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

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

l如何減庫(kù)存

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

1)加入購(gòu)物車減庫(kù)存

2)下單減庫(kù)存

3)支付減庫(kù)存

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

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

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

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

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

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

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

關(guān)于陪學(xué)網(wǎng)（www.pexue.com）：我們6年來(lái)專注于產(chǎn)品管理類課程的開發(fā)與制作，志在為產(chǎn)品經(jīng)理、交互設(shè)計(jì)、平面設(shè)計(jì)、需求人員分享最新、最好的產(chǎn)品類課程。學(xué)員遍布國(guó)內(nèi)外知名互聯(lián)網(wǎng)產(chǎn)品團(tuán)隊(duì)：百度、新浪、騰訊、領(lǐng)英等