購物車是做什么的？

我們先來看一下現(xiàn)實超市中的購物車，一個帶四個轱轆的鐵筐子，客人推來推去，看到什么東西喜歡，就扔進(jìn)去，覺得東西差不多了，就推到收銀臺。

那B2C網(wǎng)站中的購物車又是一個什么東西呢？

從廣義上說，購物車在B2C網(wǎng)站里無處不在，當(dāng)客人進(jìn)入一個B2C網(wǎng)站時，他就相當(dāng)于推著購物車開始逛超市了，只是客人暫時看不到購物車，直到進(jìn)入購物車（Shopping cart page）頁面，然后去結(jié)算，下單成功。本文討論的購物車是狹義的購物車，是指客人在點商品頁面的“加入購物車”（Add to cart）按鈕，到進(jìn)入下“去結(jié)算”（Check out）之間的過程。

設(shè)計購物車（Shopping cart）時會存在哪些邏輯？

第一個當(dāng)然是入口邏輯，即從哪些地方可以點擊“加入購物車（Add to cart）”按鈕，解決的是什么東西可以扔到購物車（Shopping cart）的事情。常見的入口包括：產(chǎn)品列表頁、單產(chǎn)品頁，另外，在促銷活動頁面、購物車頁面中的推薦產(chǎn)品部分也是常見的入口，根據(jù)不同的網(wǎng)站情況還會有其他七七八八的入口。

當(dāng)在不同的入口點擊“加入購物車”可能會產(chǎn)生不同的事件。所以我們首先要定義在那那些頁面什么情況下可以有“加入購物車）”的按鈕。強調(diào)一點，千萬不要小看定義入口，他可能會對后面的每一步都產(chǎn)生影響，尤其是一些隱性入口，如我們常見的在用戶的歷史訂單中常常會有“再下一單”（Re-order）的功能，這個時候很有可能會有諸如看看這些商品還有沒有庫存之類的復(fù)雜邏輯處理，?不關(guān)心購物車入口的設(shè)計幾乎一定是不合格的購物車產(chǎn)品設(shè)計?。

第二個是添加商品邏輯，解決的是怎么把商品扔到購物車（Shopping cart）的事情。從頁面展現(xiàn)來看可能會出現(xiàn)兩種情況，一種直接是進(jìn)入購物車頁面，還有一種是提示你“商品已經(jīng)加入購物車”然后在原頁面讓你繼續(xù)購物，這兩種表現(xiàn)的結(jié)合體就是那種彈出一個小框框問你去購物車頁面還是繼續(xù)購物。無論是那種跳轉(zhuǎn)情況，都會存在一個看不到的邏輯，那就是把放入購物車的商品記錄下來了。產(chǎn)品經(jīng)理必須清楚的知道根據(jù)自己網(wǎng)站的實際情況究竟需要記錄什么東西。

最直接需要記錄的，旸仔認(rèn)為包括兩部分，一是什么商品，另一個是添加了多少個商品?？赡苡腥藭J(rèn)為為什么不記錄商品的價格呢？旸仔認(rèn)為，?產(chǎn)品的價格應(yīng)該有單獨的計算模塊（價格計算器）?，只要知道什么東西，我們就可以隨時獲得價格，所以不應(yīng)該在這里記錄。就像我們在超市賣東西，當(dāng)我把一個東西放到車?yán)锏臅r候，直到結(jié)算之前，我們只用知道車?yán)镉袔讉€東西，有什么東西就可以了，甚至我們都可以忘記車?yán)镉惺裁礀|西，反正結(jié)算的時候也會知道。

第三個就是購物車的商品處理和頁面展現(xiàn)邏輯。就像于我們在超市購物，正式付款之前，需要看看買了哪些東西，一共要花費多少錢。當(dāng)進(jìn)入購物車頁面時，首先要把我們購物車?yán)锏臇|西計算一下價格，旸仔比較傾向的產(chǎn)品處理方法是，在購物車頁面顯示之前，將購物車?yán)锏臇|西統(tǒng)一扔到一個價格處理器里，價格處理器計算各種促銷活動、打折等等的事情，這個價格處理器就像收銀臺上的條碼槍，把每一個產(chǎn)品的價格返還回來，無論是促銷裝還是普通商品最終會給商品一個正確的價格。

舉個例子，買一罐可樂3元，買兩罐可樂5元（即單價2.5元），用戶當(dāng)初只是把可樂扔到購物車（相當(dāng)于我們說的添加商品邏輯），條碼槍一掃，如果有一罐可樂，就顯示單價3元，如果有兩罐可樂就顯示單價2.5元。這一部分的重點是?價格處理器要和頁面展現(xiàn)分離?，他對于頁面展現(xiàn)或者對于購物車相當(dāng)于一個黑盒的東西，購物車只要告訴價格處理器有什么東西、數(shù)量幾個，價格處理器就給出相應(yīng)的價格，最終顯示在購物車頁面上。

現(xiàn)在我們再說一下展現(xiàn)邏輯的重點，購物車頁面的真正作用在于兩個：一個是讓用戶盡快的結(jié)算成功下單；另一個是盡可能的讓用戶再多買點東西（Continue shipping）。關(guān)于讓用戶盡快結(jié)算成功，我們只要做好一件事情，讓用戶在頁面一眼就看到“去結(jié)算”（Check out）按鈕，這件事情說起來很簡單，做起來也不難，但確實有很多人都沒有做好，包括一些小有名氣的網(wǎng)站，我見過一個網(wǎng)站如果買了十幾樣?xùn)|西的話，如果想看到“去結(jié)算”（Check out）按鈕要滾動鼠標(biāo)3、4下。旸仔的建議是，把“去結(jié)算”（Check out）按鈕放到右上角，使用和諧而醒目的顏色，同時，在購物車頁面盡量不要寫太多的文字，如果必須要寫，也要離“去結(jié)算”（Check out）按鈕遠(yuǎn)一些。

讓用戶盡可能的再多買點東西，就像我們在超市收銀臺看到的口香糖、電池之類的一樣，所以有一個非B2C網(wǎng)站核心功能的功能就很重要了，今后如果有時間的話，我們也可以單獨的討論商品推薦的產(chǎn)品設(shè)計方法。讓用戶盡可能再多買東西還有一個按鈕也很重要，就是“繼續(xù)購物”（Continue shipping）。在購物車展現(xiàn)頁面，有一個重要的問題需要產(chǎn)品經(jīng)理來思考，就是自己的網(wǎng)站“繼續(xù)購物”（Continue shipping）更重要還是”去結(jié)算”（Check out）更重要，每個產(chǎn)品經(jīng)理都必須找到自己網(wǎng)站“繼續(xù)購物”和“去結(jié)算”（Check out）的平衡點，在頁面顯示邏輯上表現(xiàn)出來。旸仔見過的大多數(shù)網(wǎng)站仿佛“去結(jié)算”（Check out）更為重要，畢竟馬上就可以下單，老板一下可以看到錢了。

最后就是離開購物車的邏輯，B2C網(wǎng)站一定要想好，哪些離開購物車頁面是正確的，哪些是錯誤的，旸仔認(rèn)為只有用戶因為點擊“繼續(xù)購物”（Continue shipping）和“去結(jié)算”（Check out）按鈕離開購物車（Shopping cart）才是正確的，其他的離開除非有足夠充分的理由，否則都是產(chǎn)品設(shè)計的愚蠢和混亂導(dǎo)致的。如果用戶點擊“繼續(xù)購物”關(guān)鍵的邏輯是在回到那個頁面，這個就和前面提到的入口邏輯有很緊密的聯(lián)系了，產(chǎn)品經(jīng)理應(yīng)該視具體情況具體分析。而用戶點擊“去結(jié)算”（Check out），邏輯很簡單，就是進(jìn)入結(jié)算流程，具體結(jié)算流程的設(shè)計今后會專門討論。

購物車（Shopping cart）基本的產(chǎn)品設(shè)計思想說完了，可能缺少細(xì)節(jié)的東西，旸仔想說的是，細(xì)節(jié)會根據(jù)每個網(wǎng)站的不同會有不同，但核心的產(chǎn)品設(shè)計思想是共性的，他才是產(chǎn)品經(jīng)理應(yīng)該放在心中的道。

補充說明：千萬不要把購物車產(chǎn)品設(shè)計等同于購物車頁面，購物車頁面只是購物車產(chǎn)品設(shè)計中主要的頁面表現(xiàn)部分。

相關(guān)文章：B2C網(wǎng)站購物車產(chǎn)品設(shè)計之概述

via：youshandeyang