DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：當當網與卓越亞馬遜的購物車對比.

當當網與卓越網是目前國內最大的兩個賣書網站，也是最相似的兩個網站，做為老牌的電子商務網站，經常將兩者放在一起對比分析，本文主要從網站中的購物車設計來對比兩個網站對於用戶體驗的友好程度。

第一站，當當

1）進入購物車之前

• 搜索書名，居然沒有輸入提示！
  意見：太 out 了，這個應該算是標配了吧。
• 點擊搜索結果裡面的對應條目，彈出新窗口進入詳細信息頁面。
  意見：雖然彈出新窗口基本上已經是中國網民最喜聞樂見的體驗了，但我認為也不能亂用。我已經找到了我要的東西了，你還留著這個結果頁面搞球啊，我還得費勁把它關了。當然了，我這裡是基於使用精確搜索的場景得出上面的結論。使用模糊搜索的場景，保留結果列表頁是說得過去的，但我覺得還是需要分析下搜索數據，看哪種比例高。當當購書整體走下來，最突出的問題就是彈出的新窗口太多了。
• 在書籍詳細信息頁面裡，點擊“購買”，又彈出了一個新窗口進入購物車。好吧，我忍了。

2）購物車內
上圖是當當的購物車推薦區域，標題是“根據您挑選的商品，當當為您推薦”。

• 位置，橫在頁面上部。
  意見：放在這裡應該是覺得它比較重要，但在設計上與下面的“已購商品”產生對比，被弱化了很多。
  
• 每個推薦商品，顯示名稱/市場價/當當價，共 3 項信息。
• 名稱有顯示不完整的，鼠標放在鏈接上會提示完整名。
  意見：不能夠直接顯示完整商品名，感覺不太好。
• 推測當當應該是認為，市場價/當當價對比，是用戶購書關注的一大指標。
• 推薦條目總共 8 條。
  問題：數目是怎麼確定的？

上圖是當當的已購商品區域。

• 位置，無論視覺上，還是設計上，這個區域都是中心。
  
• 顯示商品名/單品積分/市場價/當當價/優惠/數量/共節省/共獲積分/總金額，共 9 項信息。
  
• 灰掉了“積分/市場價”，應該是想強調一下“當當價”。
  問題：如果認為灰掉的兩項不重要，是否有更好的處理？
• 變換顏色強調了“共節省/積分”，特別突出的是“總金額”。
  
• 提示並進行了“圖書促銷區”活動的導航。
• 可以修改商品數量，以及刪除商品。
  

上圖是特惠區的促銷信息。

• 位置在頁面最下面，一般很難看到。我個人持保留意見，放在此時此地能有用嗎？

3）個人看法

• 要贊一下當當的推薦算法團隊，有功力，購物車推薦的相關性不錯，多樣性也照顧到了。
• 要搞清楚一個重要問題，基於當當目前的情況，購物車的首要目標是什麼：刺激交叉銷售，提高單個訂單的總金額？還是盡量減少對結算的干擾，以保證訂單地完成率？
• 不了解設計初衷，但感覺購物車推薦部分的產品設計還有提升空間。套個專業術語，信息架構沒整明白。

第二站，卓越亞馬遜

1）進入購物車之前

• 搜索書名，Bingo，有輸入提示！看來 Amazon 代表了先進生產力啊。
  
• 點擊搜索結果裡面的對應條目，當前頁轉入詳細信息頁面。
  問題：是否能夠說明在卓越亞馬遜這裡，使用精確搜索的用戶是占大多數的？
  
• 在書籍詳細信息頁面裡，點擊“購買”，當前頁轉入購物車。好吧，我承認我是 Amazon 的擁趸。
  

2）購物車內
根據最近加入購物車的一個商品，在購買操作維度給出的推薦。總共 6 條。
根據最近加入購物車的一個商品，在浏覽操作維度給出的推薦。總共 3 條。
根據購物車內的其它商品，在購買操作維度給出的推薦。總共 3 條。

上面三個圖片是 Amazon 購物車推薦的三個區域，標題是我們喜聞樂見的“買了... 還買了...”的經典句式。

• Amazon 清晰地傳遞了它的理念：購物車的核心目標是，使用交叉銷售幫助用戶完成更多地購買。
  
• 購物車推薦區域基本上進行了滿屏顯示，無論視覺上，設計上，還是事實上，這裡都是中心。
• 每個推薦商品，顯示圖片/名稱/卓越價/打星/評論數，共 5 項信息。商品名稱全部完整顯示。
• 相比文字，圖片能夠更加有效地傳遞信息。
• 三個推薦區域的條目數分別是 6/3/3，總共 12 條。
  

上圖是已購商品區域。

• 位置，在頁面的右上部的獨立區域。通過區別於其他的色塊設計，使其也足夠突出。
• 顯示商品名/作者/包裝/卓越價/數量/總金額，共 6 項信息。
  
• 突出了商品的卓越價及訂單總價。
  
• 不能直接修改商品數據，也不能直接刪除商品。
• 有一句看似很多余的提示語，“購物車中的商品價格與該商品頁面顯示的最新價格一致”。

3）個人看法

• 卓越亞馬遜顯然用的是 Amazon 總部的推薦技術，效果毋庸置疑。
• 細節上仍有待注意，推薦區域稍嫌散亂，且時常可以見到商品圖片無法顯示的情況。
  

關於購物推薦

用戶購買一件商品，有兩個階段：首先是要知道有這麼一個東西；然後評價一下是否需要購買，做出決定。
當當的推薦完成了第一個階段，能夠把相關性比較好的東西自動推給用戶，但基本上到此就停住了，在幫助用戶作決定這個階段幾乎沒有作為。
細節處見真章。可以看到 Amazon 對推薦這件事情的理解的確更加到位。通過給出“打星”與“評論數”，為用戶做出決定提供了一些參考。但請注意，我說的不是卓越亞馬遜，他抄都沒抄明白，Amazon 在同樣的地方，還另外給出了書籍的作者，而卓越似乎是自作主張地去掉了。要知道，作者可是用戶決定購買一本書的重要因素！

結論

內容寫著寫著就有點兒發散了。
轉回頭來，開篇的那句話，其實說的是“Shopping Cart Abandonment Rate”，它是電子商務領域的一個核心問題。它非常重要，因為可以拋開其他所有因素，只需要單純把這個比例降低，銷售收入就能夠增加。但也正因為如此，一般的電子商務網站對待購物車都是格外的小心翼翼。這個事情的做法上，沒有絕對的正誤，一定要數據說話。
但評定標准絕對只有一條。搞清楚我之前提到的那個問題：

1. 刺激交叉銷售，提高單個訂單的總金額；
2. 盡量減少對結算的干擾，以保證訂單地完成率。

哪一個能夠提升最終的銷售收入，哪一個就是你當前的最佳選擇。