編輯導(dǎo)讀：購(gòu)物車(chē)在電商產(chǎn)品中是一個(gè)基礎(chǔ)功能，用戶(hù)可以在這里進(jìn)行商品確認(rèn)和結(jié)算操作，是整個(gè)購(gòu)物車(chē)系統(tǒng)中最核心的功能。購(gòu)物車(chē)管理功能應(yīng)該如何設(shè)計(jì)呢？本文作者對(duì)此展開(kāi)了分析，與你分享。

當(dāng)添加商品的操作完成之后，下一步就要進(jìn)入購(gòu)物車(chē)進(jìn)行具體的商品確認(rèn)與結(jié)算操作了，是整個(gè)購(gòu)物車(chē)系統(tǒng)中最核心的功能。

由于每一次用戶(hù)進(jìn)入都可能伴隨著不同的場(chǎng)景情況，所以購(gòu)物車(chē)管理的產(chǎn)品邏輯相對(duì)就要復(fù)雜得多，想要成功說(shuō)服用戶(hù)并完成最終預(yù)訂轉(zhuǎn)化，購(gòu)物車(chē)管理的設(shè)計(jì)質(zhì)量是其中的關(guān)鍵。

在購(gòu)物車(chē)管理中，用戶(hù)主要會(huì)經(jīng)歷如下幾個(gè)環(huán)節(jié)：查閱并確認(rèn)商品信息；選定準(zhǔn)確的規(guī)格、數(shù)量等訂購(gòu)信息；確認(rèn)最終的價(jià)格，最后提交訂單。

LikeShop購(gòu)物車(chē)流程圖

這一系列過(guò)程影響著用戶(hù)的最終購(gòu)物決策，因而設(shè)計(jì)應(yīng)重點(diǎn)符合用戶(hù)體驗(yàn)和網(wǎng)絡(luò)營(yíng)銷(xiāo)兩方面的需求。在結(jié)賬之前，大多數(shù)用戶(hù)在購(gòu)物車(chē)中添加的商品不一定會(huì)在最終的訂購(gòu)清單中，這時(shí)候用戶(hù)的購(gòu)物決策相對(duì)要更理智一些，消費(fèi)者會(huì)反復(fù)比較、抉擇，如果購(gòu)物車(chē)能適時(shí)地提供更多更有效的決策參考，相信會(huì)更容易讓消費(fèi)者盡快做出決定。

首先是將商品的關(guān)鍵信息用最佳的方式呈現(xiàn)給用戶(hù)。告訴用戶(hù)都添加了哪些商品(包括商品圖片)選擇了什么規(guī)格、具體的數(shù)量、價(jià)格為多少、有沒(méi)有優(yōu)惠等，不同類(lèi)型的商品可能其商品信息會(huì)有所差異，但最基本的這幾項(xiàng)是必須要有的。商品圖片應(yīng)該與用戶(hù)所選的規(guī)格一致，而不是使用統(tǒng)一的商品廣告圖，這將降低用戶(hù)錯(cuò)選的概率。

一、購(gòu)物車(chē)商品信息要素

• 商品標(biāo)題：完整顯示商品標(biāo)題，帶有商品詳情頁(yè)的鏈接
• 商品圖片：通常以正方形小圖為主( 80x 80)，顯示所選規(guī)格的準(zhǔn)確圖片
• 所選規(guī)格：顯示選定的規(guī)格參數(shù)，允許用戶(hù)直接在購(gòu)物車(chē)中修改
• 商品單價(jià)：顯示商品原始單價(jià)，如果有折扣價(jià)則可以在旁邊顯示
• 訂購(gòu)數(shù)量：顯示為數(shù)量選擇框，最大值為商品庫(kù)存上限，最小值建議為，“0”
• 價(jià)格小計(jì)：基于單價(jià) x 數(shù)量計(jì)算出的單行小計(jì)價(jià)格
• 促銷(xiāo)信息：顯示促銷(xiāo)活動(dòng)相關(guān)的信息，比如還差多少金額可以免運(yùn)費(fèi)，或者當(dāng)前商品支持哪些促銷(xiāo)活動(dòng)等
• 商品總價(jià)：顯示累計(jì)所有選定商品的價(jià)格小計(jì)，以及結(jié)合促銷(xiāo)選擇之后的折扣信息所計(jì)算出來(lái)的總金額(注意：運(yùn)費(fèi)通常不會(huì)算在總金額中)

針對(duì)有促銷(xiāo)活動(dòng)類(lèi)的商品，需要明確讓用戶(hù)知道： 商品當(dāng)前的促銷(xiāo)活動(dòng)是什么，如何滿(mǎn)足促銷(xiāo)條件，一目了然地讓用戶(hù)知道促銷(xiāo)的支持狀況。消費(fèi)者最喜歡的兩種促銷(xiāo)活動(dòng)就是“滿(mǎn)減”與“免運(yùn)費(fèi)”了。

商家都希望消費(fèi)者能購(gòu)買(mǎi)更多的數(shù)量，這兩種活動(dòng)都會(huì)促使消費(fèi)者進(jìn)行“湊單”，湊足活動(dòng)的條件要求，同樣地，為了提高消費(fèi)者湊單的成功率，提供更好的購(gòu)物體驗(yàn)，可以在購(gòu)物車(chē)頁(yè)面直接呈現(xiàn)可以進(jìn)行湊單的商品推薦，比如“當(dāng)前熱銷(xiāo)”“最佳搭配”“支持同類(lèi)促銷(xiāo)”等，幫助消費(fèi)者順暢地進(jìn)行商品選購(gòu)，降低重新尋找湊單商品的難度。

詳細(xì)的商品推薦設(shè)計(jì)邏輯可以參考前面第8章中關(guān)聯(lián)推薦系統(tǒng)的設(shè)計(jì)。

其次是顯示商品數(shù)量與商品排序。前面提到過(guò)購(gòu)物車(chē)添加的商品都件數(shù)-般都會(huì)有上限，除了大部分用戶(hù)場(chǎng)景都達(dá)不到上限件數(shù)的情況之外，還有一一個(gè)方面是考慮購(gòu)物車(chē)展現(xiàn)商品時(shí)的版面設(shè)計(jì)，作為批量結(jié)算的操作，顯然不適合在購(gòu)物車(chē)頁(yè)面使用翻頁(yè)設(shè)計(jì)，應(yīng)該將所有的商品都顯示在一個(gè)頁(yè)面中 ，供用戶(hù)在當(dāng)前頁(yè)面完成所有結(jié)算之前的確認(rèn)操作。

基本的設(shè)計(jì)原則：

• 同商家合并商品項(xiàng):如果是同一商家的不同商品，那么合并顯示會(huì)更便于消費(fèi)者選擇促銷(xiāo)支持信息。
• 先新后舊:優(yōu)先排列近期加入購(gòu)物車(chē)的商品，早期加入的商品置后排列。口不同商家以商家優(yōu)先級(jí)排序:比如自營(yíng)類(lèi)或品牌商類(lèi)優(yōu)先排序。

簡(jiǎn)單地說(shuō)，就是在排序時(shí)，讓消費(fèi)者重點(diǎn)看見(jiàn)當(dāng)前想買(mǎi)的商品信息，并且通過(guò)合并商家商品項(xiàng)使用戶(hù)以最佳優(yōu)惠的方式選購(gòu)商品(因?yàn)椴煌纳碳宜峁┑倪\(yùn)費(fèi)、售后與促銷(xiāo)可能會(huì)不同)，清晰的商品排列能幫助消費(fèi)者做出準(zhǔn)確的選擇。消費(fèi)者的購(gòu)物車(chē)決策是一個(gè)反復(fù)比較、多次決定的過(guò)程，所以必然會(huì)對(duì)購(gòu)物車(chē)中存在的商品做進(jìn)一步的確認(rèn)并執(zhí)行相應(yīng)操作的情況。

二、購(gòu)物車(chē)基礎(chǔ)操作功能設(shè)計(jì)

• 刪除：支持單商品刪除和批量刪除兩種操作，執(zhí)行刪除則將選定的商品移除出購(gòu)物車(chē)商品清單中
• 添加收藏：支持單商品收藏和批量收藏兩種操作，執(zhí)行收藏操作時(shí)實(shí)際上執(zhí)行的是兩個(gè)操作“刪除并收藏”
• 修改規(guī)格：對(duì)于選定的商品進(jìn)行規(guī)格的重新選定，一般會(huì)設(shè)計(jì)成支持在購(gòu)物車(chē)中直接進(jìn)行修改(使用彈層的方式解決)
• 修改數(shù)量：可以使用“+”“一 ”進(jìn)行增刪數(shù)量的操作，也可以直接在文本框中輸人具體的數(shù)字，注意要允許用戶(hù)輸人“0”值
• 促銷(xiāo)選擇：支持在購(gòu)物車(chē)頁(yè)面直接選擇促銷(xiāo)活動(dòng)
• 選定商品：支持單商品選定與批量選定操作，默認(rèn)勾選新加人的商品，避免用戶(hù)重復(fù)操作

很多購(gòu)物車(chē)在設(shè)計(jì)時(shí)會(huì)忽視當(dāng)前頁(yè)面修改規(guī)格的功能，這點(diǎn)需要特別注意。如果是讓用戶(hù)重新到商品詳情頁(yè)進(jìn)行選擇操作，則有可能會(huì)因?yàn)橐恍┎豢芍囊蛩囟袛噘?gòu)物車(chē)操作過(guò)程，這顯然不是明智的設(shè)計(jì)，最佳的解決方案就是在購(gòu)物車(chē)中也可以完成對(duì)商品規(guī)格、數(shù)量的修改操作，這樣的設(shè)計(jì)就達(dá)到了我們追求的“場(chǎng)景融合”設(shè)計(jì)原則的要求。

LikeShop PC端購(gòu)物車(chē)中商品編輯示例

LikeShop小程序端購(gòu)物車(chē)編輯示例

武在移動(dòng)端，由于設(shè)備屏幕顯示空間的限制，呈現(xiàn)的信息會(huì)做簡(jiǎn)化處理，同時(shí)對(duì)一-些非主要的操作功能，也會(huì)弱化設(shè)計(jì)，比如對(duì)于刪除商品的操作，必須通過(guò)右上方的“編輯”統(tǒng)一進(jìn)行操作。

當(dāng)待訂購(gòu)的商品信息都確認(rèn)清楚之后，接下來(lái)就要進(jìn)行價(jià)格信息確認(rèn)了。單個(gè)商品上都會(huì)顯示小計(jì)信息(選了多少數(shù)量、價(jià)格多少等)，而在購(gòu)物車(chē)底部，結(jié)算之前顯然需要告訴用戶(hù)本次預(yù)訂的商品總價(jià)，包括額外的運(yùn)費(fèi)、優(yōu)惠抵扣等信息。這個(gè)價(jià)格計(jì)算必須要根據(jù)消費(fèi)者的操作實(shí)時(shí)變化，以確保消費(fèi)者每進(jìn)行一一個(gè)操作，都能給予準(zhǔn)確的價(jià)格信息反饋。

崇火當(dāng)一切都確認(rèn)清楚之后，消費(fèi)者就可以點(diǎn)擊“立即結(jié)算”進(jìn)入訂單確認(rèn)環(huán)節(jié)。

購(gòu)物車(chē)的訂單操作環(huán)節(jié)與常規(guī)的訂購(gòu)環(huán)節(jié)比較類(lèi)似，但會(huì)簡(jiǎn)化一些信息，核心突出配送選擇、收貨地址、支付渠道、發(fā)票及一些優(yōu)惠券等的抵扣信息。這些信息都是在訂單支付之前就應(yīng)該提前確認(rèn)好的，我們應(yīng)該將購(gòu)物車(chē)訂單確認(rèn)與支付操作分成兩個(gè)步驟，雖然步驟增多了，卻能使得消費(fèi)者更專(zhuān)注于每一個(gè)步驟本身的重心，比如訂單確認(rèn)主要是確保收貨相關(guān)的信息，而支付環(huán)節(jié)則是確保消費(fèi)者能順利地支付成功。

作者：likeshop；公眾號(hào)：LikeShop技術(shù)社區(qū)

本文由 @likeshop奶蓋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議