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

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

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

1.卓越亞馬遜

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

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

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

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

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

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

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

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

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

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

4.麥網(wǎng)

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

5.京東商城

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

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

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

這個問題還有疑問的話，可以加幕.思.城火星老師免費咨詢，微.信號是為: msc496。