::GAME2.TW::臺灣遊戲攻略

華語手機遊戲攻略,遊戲資訊專業網站

購物車頁面應該如何設計? –5大B2C網站購物車頁面分析

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

1.卓越亞馬遜

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

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

根據上面個人的一些想法,白渡修改的卓越購物車頁面如下:

2. 噹噹

看完卓越當然就要瞧瞧噹噹的設計了。噹噹的購物車頁面採用的是上下兩塊的結構。上部是cross-selling的信息,下部是購物車信息。整個頁面簡潔清晰,板塊分隔明顯。與卓越相似,也採用了較明顯的顏色邊框突出購物車信息。但噹噹比卓越做得更好的一點是直接顯示出了購物車裡的詳細信息和操作功能,方便用戶可以直接對購車裡的信息進行編輯操作。所以說噹噹的這個頁面設計應該是以用戶對購物車的操作作為核心的。當然噹噹也不想錯過可能的cross-selling的機會,所以也設計了商品的推薦列表,而且還放到了購物車信息的上面。但又怕影響到購物車信息的顯示(能夠在屏幕的第一屏顯示),所以只能非常“小氣”的放了幾條純文字的商品信息,甚至連商品名的全稱都不能完全顯示出來。這個設計讓人感覺cross-selling的部分好像雞肋,實在不爽快。

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

修改的噹噹購物車頁面如下(粗糙版)

3. 凡客誠品

接著看B2C服裝網站的大佬VANCL的購物車頁面。

和噹噹網一樣,VANCl的購物車頁面是上下結構。不過購物車的詳細信息是顯示在上面最頂部,可見設計的核心仍然是以購物車操作為主體。下面的cross-selling並沒有根據用戶購買的商品給出匹配的推薦商品,只是顯示了一個特惠商品的推薦購買信息。不知道是不是網站沒有建立相關的數據資料分析系統,還是覺得開發匹配商品推廣的效果不大?

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

4. 麥網

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

5. 京東商城

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

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

來源:白渡 (深圳)

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy