購物車的設計邏輯

來自專欄 Pinapps

上周在微信群中有位同學提出了一個疑問，對於購物車的設計差異性究竟在哪裡？是的，相較於其他的功能界面來說，購物車界面設計的確有些趨同。但這並不意味著沒有研究它的意義，相反它可能會更加的重要。

只要是電商類產品，購物車這個功能一定是繞不開的，它可以說是電商類產品設計的標配功能。作為平台交易轉化最重要的環節之一，每一個細節的調整可能都會帶來數據的波動。

因此更需要我們對其有深入的思考、小心的求證。今天關於購物車的設計，我們從一個關於它的小故事開始。

Cart VS Bag

如果大家經常逛各類電商平台，應該發現對於購物車這個概念有些平台使用 Cart（購物車），而有些使用 Bag（購物袋）。

拋掉一些特殊案例，我們基本可以發現通常只有時尚、化妝品、配飾類的垂直電商平台會使用 Bag，比如 Zara 的獨立客戶端。

那麼使用 Cart 和 Bag 各自會有什麼差異呢？會對交易產生影響嗎？美國有一個設計公司（Conversion Fanatics）在 2 年前借一次為客戶進行設計改版的機會對這個問題進行了一次研究。

在改版過程中他們分別使用 Add to cart 和 Add to bag 進行了一次測試。結果令人驚訝，50:50 的流量分發測試下使用 Add to cart 對支付界面帶來的 PV 比使用 Add to bag 居然高了 95.3% ，而其他各項數據也有非常明顯的提升。

我們在前面提到過，購物車是電商平台交易轉化最重要的環節之一，轉化率的微弱提升都將會為平台帶來巨大的利益。那麼這些垂直電商平台為什麼從一開始都選擇了 Bag 來代替購物車呢？

Uxmovement 曾經有一篇文章探討過這個問題。他們認為用戶對 Bag 會有很多種不同的理解，如果用戶是在一個賣包的平台上購物，他們認為 Add to bag 會讓他們購買另外一個他們並不需要配飾。

而從心理層面來說，Cart 是一個幫忙用戶收集想要購買的商品的容器，用戶可以很隨意的將商品放入或拿出，沒有任何壓力。而 Bag 會讓用戶覺得這些東西已經購買了，不能再改變主意了。

我們再回到前面測試中的對比數據，這也許這正好是一個特殊個案、也許這個數據樣本量還不夠大。但它其實給了我們一些很重要的信息：

1. 用戶對信息的理解往往有很多是我們並沒有認知到的；
2. 即使是很小的改動，也會對平台的整體漏斗帶來很大的影響；
3. 對於轉化的核心鏈路的設計改變，我們是需要慎重的。

關於 Cart 和 Bag，Conversion Fanatics 並沒有給出後續更多的跟進信息，更多的是拋出給大家一個去觀察、理解用戶的角度、觀點。

用戶對購物車的理解是什麼？它為平台傳遞出哪些信息？如何去獲得更大層面的成功？都是我們在購物車這個功能界面設計過程中需要去思考的問題。帶著這些信息，我們來聊聊購物車的設計邏輯。

購物車解決什麼問題

在前面 Pattern 劃分的時候，購物車被歸入到了業務類型。這也就是說它的設計是分層的，除了基礎（default）的設計之外，我們還需要疊加上一層業務的特性，它最終的呈現也與業務有著很強的關係。

總的來說購物車是平台用於促進用戶購買的一個功能模塊。表面上來看它是用來暫存用戶想要購買的商品，但更抽象一步來看它是用來橋接用戶「逛」與「買」之間的間隙。而在這個間隙中，我們需要從最基礎的功能角度出發，一步步的去放大購物車的價值。

上圖中截取了 4 個不同平台的購物車界面。我們可以看到從左至右購物車界面的信息、功能的複雜度在一步步在遞增。

如果我們僅僅從純表現層面來看，有很多的設計我們很難去解釋為什麼需要？為什麼要這麼做？所以，我們需要先將購物車的設計做一個拆分，一部分是購物車這個模式所必須的，一部分是因為業務特性所附加的。

購物車基本框架

我們前面說過，對於一個有著明確定義、用戶認知的功能模塊，它的設計是需要具備一定的普適性的。也只有在這個基礎之上我們才能先維持其對整個交易鏈路的基礎保障。畢竟理念上過於超前的設計大部分用戶可能都不會使用，這也將於我們的設計目標、業務目標相悖。

我們先將業務的部分拋開，一個最基礎、常見的購物車界面可能會是如下圖（Fancy）的樣子。主要是對商品信息、價格、總價的展示以及 CTA。

如果我們在擴大一下範圍，多找來幾個不同產品的購物車界面疊加在一起拉一個透明度，你會發現一些每個購物車界面都會有的共同信息。比如商品標題、圖片、數量、單價、總價、CTA…

因此我們可以通過這些「同類項」獲得購物車界面的一個基礎界面框架，也是購物車界面的基礎配備。

用戶們日常所接觸到的購物車基本都包含這些元素、這樣布局，當我們為一款新的產品設計購物車界面時，它應該成為我們開始的基礎，以確保用戶最小的學習成本、更高的效率。

從這個基礎框架來看，購物車最基礎需要解決的問題是告知用戶想要購買的商品有哪些、什麼規格、數量多少，以及整體的總價並引導進行支付操作。

滿足了購物車界面的基礎框架之後，它基本上就能夠對用戶在在線購物平台上進行購物的進行最基礎的支持，順利的完成購買行為。

但作為整個交易路徑最為重要的環節之一，我們還需要通過設計將它的轉化率進行不斷的放大。這也就意味著我們需要對購物車界面進行一些「裝飾」，讓用戶的購買意願度、購買數量進一步的提升。

以上是 Design System 系列的第 11 期的節選內容，在接下來的全文內容中（付費部分）我們將從三個不同層面，通過幾個實際案例的分析來進行購物車界面的進一步的設計拆解。

加入 PinDesign 會員，獲取本期主題「購物車的設計邏輯」的全文內容及本系列前 2 期周刊的贈送，年付會員將獲得 Design System 系列所有（01~10）文章的贈送。

Design System 是 PinDesign 周刊的一個新系列，基於「Design Systems」的理念對產品的系統性設計的經驗總結。希望將自己的感受和經驗分享給大家，輔助大家的閱讀。

點擊領取 PinDesign 會員計劃 50 元優惠券

Design System 系列已更新：