做電商產(chǎn)品的最常見的任務(wù)就是設(shè)計(jì)購物車了，因?yàn)檫@是購買任務(wù)的最重要步驟。本文選取了國內(nèi)主流的電商模式：淘寶（C2C）、京東(B2C)、網(wǎng)易考拉(跨境電商)和蘇寧易購（B2C）、阿里巴巴（B2B）作為研究對象，同時(shí)這幾個(gè)平臺用戶數(shù)量很廣，能在一定程度上反應(yīng)用戶的使用習(xí)慣。文末將推薦一些優(yōu)秀的app購物車設(shè)計(jì)。

一、為什么要有購物車

1、符合用戶購物習(xí)慣。相比較一些線下的小商品，任何一個(gè)電商平臺都算得上是一家“超市”了，所以用戶很可能在同一個(gè)電商平臺購買多個(gè)商品，如果用戶每購買一個(gè)商品就支付一次，不符合用戶購物習(xí)慣，對用戶體驗(yàn)來說是一個(gè)巨大的災(zāi)難。因此從購物的流程來說，我們需要立即購買來快速購買，減少流程（當(dāng)然任性的jd一直沒有），也需要加入購物車，多個(gè)商品合并支付。

2、體現(xiàn)訂單信息，即多個(gè)商品相互影響或者單個(gè)商品數(shù)量對訂單的影響。電商平臺最主要的此類信息就是優(yōu)惠信息，目前優(yōu)惠主要有兩種，一種是單品的優(yōu)惠，即單個(gè)商品的降價(jià)。另一種是多品優(yōu)惠，比如滿減、滿送、搭配優(yōu)惠等。如何體現(xiàn)后面這些優(yōu)惠類型，就需要購物車的幫助。比如網(wǎng)易考拉左上角的滿減優(yōu)惠：

諸如此類的優(yōu)惠還很多，對用戶來說這主要是給用戶一個(gè)再思考的機(jī)會，對平臺來說是關(guān)聯(lián)銷售。其他比如郵費(fèi)等的信息也需要在購物車中體現(xiàn)。當(dāng)然還有很多其他非優(yōu)惠的訂單信息需要在購物車內(nèi)就對用戶進(jìn)行提示，比如跨境電商的2000元限額等。這些信息是能影響購物決策的，因此不能放在訂單確認(rèn)頁，購物車就是提示的最好地方。

據(jù)說很多女性用戶都是把購物車當(dāng)做收藏功能用的，把想要的商品加入購物車，之后再在購物車?yán)镞x擇合適的商品組合進(jìn)行結(jié)算，在這種用戶場景里，購物車也是必不可少的。

二、購物車應(yīng)該實(shí)現(xiàn)什么功能

對一個(gè)購物車來說，他需要實(shí)現(xiàn)的基本功能，即一個(gè)購物車的下限應(yīng)該有：

1、瀏覽商品信息。即大概的看一下我的購物車?yán)镉心男┥唐?，同時(shí)這一定得是去到商品詳情的入口，用戶點(diǎn)擊購物車?yán)锏纳唐泛竽軌蛑匦禄氐缴唐吩斍?，再一次決策是否結(jié)算該商品，商品信息可以比較簡略，只包含關(guān)鍵的品名、價(jià)格和數(shù)量，當(dāng)然配圖的話比較直觀，因?yàn)橛行┢访麑?shí)在太長，只看品名用戶還真不知道到底是什么。

2、對商品的操作。對商品的操作包含了：多選，變更數(shù)量，刪除和結(jié)算，多選是為后面幾個(gè)功能服務(wù)。

3、包括優(yōu)惠在內(nèi)的訂單金額信息的顯示。這主要是配合商品的操作，因?yàn)閿?shù)量上的變更可能會引起優(yōu)惠、價(jià)格上的變動。所以購物車需要顯示包括單價(jià)、總價(jià)、優(yōu)惠、運(yùn)費(fèi)，跨境電商的稅費(fèi)等在內(nèi)的金額信息，方便用戶進(jìn)行購物決策。

上述的三個(gè)功能基本也是一個(gè)用戶使用購物車的流程：

三、APP與PC端上的購物車上有什么區(qū)別？

作者研究了5個(gè)競品的PC端和移動APP或H5，發(fā)現(xiàn)購物車的設(shè)計(jì)基本PC端和移動端差別不大，顯示的信息基本相同，所做的一般就是把信息重新排布，按鈕移到操作熱區(qū)等一系列適應(yīng)移動端特點(diǎn)的的變化。但也有一些不同。

淘寶和網(wǎng)易考拉購物車無法直接編輯數(shù)量。京東、蘇寧易購和阿里巴巴可以。淘寶和考拉都是需要點(diǎn)擊右上標(biāo)簽欄中的編輯才能跳出數(shù)量的加減。

淘寶的設(shè)計(jì)比較好理解，其商品下包含了較多的子選項(xiàng)，即一個(gè)大的商品下根據(jù)大小、顏色等的不同，可能有十多二十個(gè)具體商品，單純在購物車內(nèi)數(shù)量加減容易出錯(cuò)，其PC端可以進(jìn)行加減操作是因?yàn)榧訙p操作頁面同時(shí)能夠進(jìn)行具體商品的選擇，兩個(gè)選擇能在一個(gè)頁面的彈窗內(nèi)實(shí)現(xiàn)。

但對于手機(jī)淘寶來說，因?yàn)橐苿佣似聊淮笮〉南拗疲荒馨岩?guī)格選擇和數(shù)量選擇做到同一個(gè)界面里，為了降低出錯(cuò)幾率，手機(jī)淘寶把數(shù)量和規(guī)格都放到了“編輯”這個(gè)頁面里：

四、app購物車設(shè)計(jì)欣賞

1，簡單的購物車設(shè)計(jì)。

2，卡片式展示產(chǎn)品，更清晰度產(chǎn)品圖片。

3，餐飲購物車設(shè)計(jì)。

4，家具生活用品購物車，卡片式滑動展示商品列表。

5，照片展示購買的產(chǎn)品，又能切換成列表形式。習(xí)慣把購物車當(dāng)收藏夾會喜歡這樣的設(shè)計(jì)。

6，購物車支付頁面設(shè)計(jì)。