購物車頁面應(yīng)該如何設(shè)計(jì)?-5大B2C網(wǎng)站購物車頁面分析-京東營銷引流京東干貨

本文主題京東B2C網(wǎng)站,京東攝影設(shè)計(jì),京東頁面,京東營銷引流。

購物車頁面應(yīng)該如何設(shè)計(jì)才能既方便用戶順利完成提交定單的操作,又能夠成為cross-selling的一個(gè)重要入口頁面？為此，白渡對(duì)中國8個(gè)獨(dú)立的B2C網(wǎng)站購物車頁面進(jìn)行了分析和比較，希望能發(fā)現(xiàn)一些值得參考和借鑒的設(shè)計(jì)。

1.卓越亞馬遜

卓越亞馬遜的購物車頁面沿用了亞馬遜英文網(wǎng)站的設(shè)計(jì)風(fēng)格。頁面主體部分用來顯示cross-selling的商品信息，只在右上角顯示購物車的信息。這樣設(shè)計(jì)的目的顯然是以增加用戶的商品交叉購買機(jī)會(huì)作為此頁面的設(shè)計(jì)重點(diǎn)。不過好在雖然購物車顯示的區(qū)域不大，但用醒目的藍(lán)色邊框突出顯示出來，相關(guān)操作的按鈕也很明顯，還不至于給用戶對(duì)購物車的操作帶來很大的不便，只是如果需要對(duì)已購買商品進(jìn)行修改，就必須要點(diǎn)擊進(jìn)入詳細(xì)的購物車頁面進(jìn)行修改操作。

我倒是對(duì)中間cross-selling的商品顯示界面有一點(diǎn)建議。不知道是不是中文顯示的問題，我感覺商品展示顯得有一些凌亂，首先“購買了商品的客戶還購買了”和“瀏覽了商品的客戶還瀏覽了”兩個(gè)分類的分隔界線不夠明顯。另外每一行的商品都是用“購買”按鈕來分隔的，會(huì)讓用戶混淆購買按鈕和對(duì)應(yīng)的商品的關(guān)系,調(diào)整一下按鈕的位置會(huì)不會(huì)更好呢？還有一點(diǎn)，受到頁面高度的影響，現(xiàn)在只能分別顯示6個(gè)商品的信息在“購買了商品的客戶還購買了”和“瀏覽了商品的客戶還瀏覽了”兩個(gè)分類里，如果加上滾動(dòng)條，可以顯示更多的相關(guān)商品信息，是不是能夠提高cross-selling的轉(zhuǎn)換率呢？

根據(jù)上面?zhèn)€人的一些想法，白渡修改的卓越購物車頁面如下：

2.當(dāng)當(dāng)

看完卓越當(dāng)然就要瞧瞧當(dāng)當(dāng)?shù)脑O(shè)計(jì)了。當(dāng)當(dāng)?shù)馁徫镘図撁娌捎玫氖巧舷聝蓧K的結(jié)構(gòu)。上部是cross-selling的信息，下部是購物車信息。整個(gè)頁面簡潔清晰，板塊分隔明顯。與卓越相似，也采用了較明顯的顏色邊框突出購物車信息。但當(dāng)當(dāng)比卓越做得更好的一點(diǎn)是直接顯示出了購物車?yán)锏脑敿?xì)信息和操作功能，方便用戶可以直接對(duì)購車?yán)锏男畔⑦M(jìn)行編輯操作。所以說當(dāng)當(dāng)?shù)倪@個(gè)頁面設(shè)計(jì)應(yīng)該是以用戶對(duì)購物車的操作作為核心的。當(dāng)然當(dāng)當(dāng)也不想錯(cuò)過可能的cross-selling的機(jī)會(huì)，所以也設(shè)計(jì)了商品的推薦列表，而且還放到了購物車信息的上面。但又怕影響到購物車信息的顯示（能夠在屏幕的第一屏顯示），所以只能非常“小氣”的放了幾條純文字的商品信息，甚至連商品名的全稱都不能完全顯示出來。這個(gè)設(shè)計(jì)讓人感覺cross-selling的部分好像雞肋，實(shí)在不爽快。

個(gè)人感覺圖片方式顯示商品信息還是更能夠吸引人的眼球，同樣為了顯示更多的信息，可以采用滾動(dòng)條的形式展示。不如把我修改的卓越的頁面和當(dāng)當(dāng)嫁接一下吧。

修改的當(dāng)當(dāng)購物車頁面如下（粗糙版）

3.凡客誠品接著看B2C服裝網(wǎng)站的大佬VANCL的購物車頁面。

和當(dāng)當(dāng)網(wǎng)一樣，VANCl的購物車頁面是上下結(jié)構(gòu)。不過購物車的詳細(xì)信息是顯示在上面最頂部，可見設(shè)計(jì)的核心仍然是以購物車操作為主體。下面的cross-selling并沒有根據(jù)用戶購買的商品給出匹配的推薦商品，只是顯示了一個(gè)特惠商品的推薦購買信息。不知道是不是網(wǎng)站沒有建立相關(guān)的數(shù)據(jù)資料分析系統(tǒng)，還是覺得開發(fā)匹配商品推廣的效果不大？

由于VANCl是按照購買商品達(dá)到一定的額度才能夠免運(yùn)費(fèi)的，在購物車的頂部顯要位置也有提示“您再購買￥***的產(chǎn)品，即可享受免運(yùn)費(fèi)優(yōu)惠”，我倒是建議可以按照再購買的商品價(jià)格最接近的商品給出推薦列表。比如我購買了一件襯衣120元，還需購買80元的商品免運(yùn)費(fèi)，在購物車頁面顯示10個(gè)商品價(jià)格最接近80元的商品給顧客選擇。白渡就經(jīng)常為了湊20、30元錢免運(yùn)費(fèi)的商品滿網(wǎng)站的跑了個(gè)遍，所以這種cross-selling的模式應(yīng)該還是有作用的。

4.麥網(wǎng)

M18購物車頁面的設(shè)計(jì)和VANCL很類似，缺點(diǎn)同樣也是沒有豐富的cross-selling信息提供。由于也是一定消費(fèi)額度的免運(yùn)費(fèi)，我的建議也是采用按照差額價(jià)格給出推薦商品信息。

5.京東商城

最后，來看一下京東的購物車頁面設(shè)計(jì)。京東和卓越類似，采用的是左右分隔的形式，不過京東把購物車的信息顯示放到了左邊，所以雖然右邊大塊的區(qū)域也是讓給了cross-selling的信息顯示，但對(duì)于已經(jīng)不需要進(jìn)行再選購的用戶，可以在左邊直接進(jìn)入結(jié)算操作，受到右邊推薦信息的干擾相對(duì)比較小。在這點(diǎn)上，白渡更加認(rèn)可京東的設(shè)計(jì)。

頁面右邊也是采用了常用的“購買該商品的用戶還購買了”作為cross-selling的信息展示。商品的圖片，文字介紹和操作按鈕的大小、排列和布局都比較好，看上去非常舒服。此外，購物車頁面的幾個(gè)不同模塊也用非常顯眼的顏色邊框作了區(qū)分，也能夠方便用戶勻速地找到自己需要的信息和操作按鈕。如果非要說點(diǎn)建議，同樣也是如果想要展示更多的推薦商品，可以考慮采用滾動(dòng)條的方式。

幕思城為您更新最近最有用的電商資訊、電商規(guī)則京東B2C網(wǎng)站,京東攝影設(shè)計(jì),京東頁面京東營銷引流。了解更多電商資訊、行業(yè)動(dòng)向，記得關(guān)注幕思城！

這個(gè)問題還有疑問的話，可以加幕.思.城火星老師免費(fèi)咨詢，微.信號(hào)是為: msc496。