上周時間閑一點，打算開始做商城需求，結果剛從必備功能--購物車開了個頭，就發現現在國內各個B2C的購物車功能支持實在是大相徑庭，存在太多優化空間，而國外B2C的購物車主要功能基本一致，但在小功能點上都力求創新。

最有意思的是，剛測完不久，還來不及整理這份分析報告，就發現有幾個問題被改正了，速度之快，以至于我都懷疑是不是我的測試造成的^^

重點根據我們對業內的了解及方向分析了幾家網站，其他有些沒有列舉出來的網站如amazon、淘寶B2C、vancl、國美、達芙妮等僅僅只是作為我們自己的旁證檢測，結果沒有反映在這份文檔里。

評測對象：

國內：

當當：不用介紹了。

卓越：不用介紹了。

京東：it數碼第一家，去年融資千萬美圓。

新蛋：也做數碼，似乎不夠格，下份文檔移除。

廚衛百分百：做廚衛商品的，消毒柜，抽油煙機，熱水器之類的

明潔凈水：做軟水機，純水機，凈水機之類的

服裝B2C-國內：

Yoho有貨:算是直接競爭對手吧。

Cosize:大方向(潮流電子商務)相同的網站，有身邊的朋友推薦及論壇推薦。

服裝B2C-國外：

Gap:美國青少年時尚休閑品牌，應該是第一，Yesppg開始就仿他們做的。

Abercrombie: 美國青少年時尚休閑品牌，據說是大學生最愛。

Zara Home：很有名的Zara，全球第三服裝零售商，但他們還沒在網上賣衣服，只賣家居。

第一篇：用戶使用購物車的限制與識別
第二篇：迷你購物車與正式購物車的設計
第三篇：正式購物車的頁面信息結構
第四篇：我們購物車設計的實際需求與原型

第一篇：用戶使用購物車的限制與識別

一、三種程度

由于Cookie是實現購物車存儲用戶購物信息的最容易的手段，所以B2C網站的購物車都是用Cookie來實現記錄用戶購物信息，即使通過Session也是通過Cookie來變相實現，按評測對用戶的限制與識別程度，有三種：

程度1：僅支持登錄用戶（允許Cookie）
程度2：除1外，還支持非登錄用戶（允許Cookie）
程度3：除2外，禁止了Cookie機器的用戶也能使用(不管注冊與否)

這三類用戶的支持程度，一層比一層深，目的就是為了讓能夠使用購物車的人數增加，轉化為訂單的數字也就會相應增加。

按常識說來，購物車是鼓勵非登錄用戶也能使用的，只有等到了結算中心，才會提示登錄。這么做的好處是在用戶購物前盡量降低參與門檻。在測試的時候，國外全部及國內部分網站購物車都支持到2，而能到3這種變態程度的，只有卓越。而不可思議的只支持登錄用戶才能使用的，居然在我作為主要分析對象的國內五家里，占了3家。

二、國內B2C購物車用戶識別對比分析

當當（程度2）：
?非登錄用戶用Cookie識別
?已登錄用戶仍然還是用Cookie識別，不跟帳號對應。清除Cookie后，購物車內商品消失，帳號強制退出
?禁用Cookie后，非登錄用戶無法添加商品入購物車,有帳號用戶無法登錄
評論：未分析到卓越模式前，還是不錯的，新蛋中國的模式與dangdang相同

卓越(程度3)：
?非登錄用戶用Cookie識別，已登錄用戶帳號識別
?非登錄狀態清除cookie，商品消失；已登錄狀態清除cookie，帳號強制退出，購物車內商品保留
?非登錄添加→登錄后再次添加，非登錄狀態下添加的商品轉移成帳號對應的商品，清除cookie后仍然保留
?禁用cookie后,非登錄用戶仍然可以正常添加商品,正常登錄
評論：比Amazon還強大...我個人就經常在非登錄的情況下使用購物車，然后到結算中心時再登錄。

廚衛百分百：早期模式，沒什么新穎（下面不再分析他了）

明潔凈水：太夠模仿京東商城了。已經就是傻瓜式的退步了（下面不在分析他了）

京東(程度1)：
?已登錄用戶才能使用購物車
?帳號退出，購物車商品即消失（囧rz），這周準備做分析復查時發現已解決此大問題
?雖然趕在我分析報告做出來前，解決了測試中帳號退出購物車商品即消失的問題，但是購物車內刪除商品，帳號退出再進入后商品仍然還保留（囧rz）
評論：我一直以為京東很強，沒想到大錯特錯-_-

新蛋中國(程度2)
?當當模式，但清除Cookie后，帳號不強制退出
評論：當當和卓越的清除Cookie后，帳號強制退出應該是從安全考慮，就像taobao也頻繁讓用戶登錄一樣。所以新蛋這么做是合理的，不過要用也該用程度2的卓越模式。

Yoho有貨(程度1)
?已登錄用戶才能使用購物車
?禁用Cookie后Yoho不能登錄，重新跳回到商品詳情頁，沒有合適的提示，容易誤會已經登錄
評論：Yoho的視覺表現力是蠻佩服的，但在功能架構及用戶體驗上，有很多弊端，因為是直接的競爭對手，就不好多說了哈^^

Cosize(程度1)
?已登錄用戶才能使用購物車
?禁用Cookie后Cosize用戶登錄時會跳轉到一個提示用戶打開Cookie的頁面（非常不錯的設計）

評論：因為只有登錄用戶才能使用購物車，所以Cosize這個禁用Cookie后又要登錄的跳轉頁設計還是值得贊賞的，但我不理解做出這個優秀設計的Cosize為什么要限制只有登錄用戶才能使用購物車，希望有機會接觸一下聽聽想法。

此外還有V版他們家365com.com這種關了瀏覽器，購物車內商品就消失的奇怪的設計（囧rz）

三、國外B2C購物車用戶識別對比分析

Gap(程度2)：
?卓越模式，但清除cookie后帳號不退出
?收藏夾的商品下次登錄時自動轉入購物車,成功下單后收藏夾內商品也自動轉入購物車
?禁用Cookie后，直接跳到檢測錯誤頁面，用戶不能瀏覽商品,不能登錄
評論：Gap的購物車沒啥好說的，反而是其他功能值得大書特書，以后慢慢道來。禁用Cookie后，直接不讓用戶瀏覽商品有點奇怪，但至少立場是鮮明的，總比其他網站禁用Cookie后不提示，實際登錄不成功也不提示要好很多，算是極端的處理吧。

Zara Home(程度2)：
?session保留匿名用戶購物車商品，清除cookie無效
?注冊帳號不成功，無法測試登錄用戶商品識別情況
?禁用Cookie后，添加商品入購物車報錯
評論：奇怪的匿名用戶下不用Cookie識別的例子。其他沒啥可說的，Zara Home有一些小設計在之后慢慢道來。

Abercrombie(程度2)：
?session保留匿名用戶購物車商品，清除cookie無效，已登錄用戶帳號識別
?非登錄添加→登錄后再次添加，非登錄狀態下添加的商品轉移成帳號對應的商品
?禁用Cookie后，添加商品入購物車報錯,不能登錄
評論：同Zara Home，更多特點在其他功能設計和信息架構上。

四、總結
幾個沒想到：
1、 京東購物車商品存儲之囧：先是購物車沒有保存商品功能，退出即清空。后來退出不清空了，刪除又失效，以為刪除了，其實再次登錄后還是沒刪除…
2、 Cosize的禁止Cookie用戶登錄時的跳轉頁設計，當當應該效仿
3、 為什么那么多國內網站要限制只有已登錄用戶使用購物車？請告訴我…

五、我推崇的做法
與技術討論過可行性，技術上實現照顧三種用戶是很容易的，所以，以下是我們購物車在用戶限制與識別這一功能點上的設計方案：

?卓越模式的程度3，但清除Cookie后不退出帳戶。

第二篇：迷你購物車的設計

在商城的購物車程序設計里，隨著需求的變化，對用戶體驗的重視，漸漸的從早期的購物車發展成了迷你購物車+正式購物車的設計。

一、什么是迷你購物車與正式購物車？

1、什么是早期的購物車設計？
早期的購物車設計僅僅滿足了去結算中心前存儲所有商品的需求，在做添加商品入購物車 操作時必須頻繁刷新購物車頁面，購物車在商城所有頁面僅以鏈接的形式作為入口，不承擔任何購物車內商品數量與價格的提醒作用，例子有如當當、卓越等等。

2、什么是迷你購物車+正式購物車的設計？
迷你購物車+正式購物車設計是在所有商城頁面都提供迷你購物車區域，該迷你購物車區域主要用來確認用戶當前添加商品入購物車的操作，用戶確認需要訪問正式購物車后才轉入正式購物車頁面，否則，依然還在之前所瀏覽的頁面繼續瀏覽，這種設計作用主要有兩個：
(1)、減少添加商品入購物車時頻繁刷新購物車頁面的操作，方便用戶繼續專心地挑選商品；
(2)、快速提醒用戶當前購物車內商品總數與總價，提醒用戶查看購物車

作用(1)是迷你購物車最主要的作用，作用(2)更多只是作為所創建的區域的擴展信息架構依附存在。
此外，隨著承載信息的不同，迷你購物車還可以直接承載結算入口的功能，在部分情況（如購買少量商品或用戶無需核對）下直接提供用戶忽略訪問購物車直接跳到結算中心進行結算的入口。

二、國內B2C站購物車設計

當當：
?早期購物車，所有頁面上的購物車區域僅僅只是個鏈接

卓越：
?早期購物車，所有頁面上的購物車區域僅僅只是個鏈接

京東：
?早期購物車，所有頁面上的購物車區域僅僅只是個鏈接

新蛋中國：
?核心思想還是早期購物車設計思想，但通過在所有頁面都放大購物車區域的顯示功能而實現了迷你購物車的作用(2)，但添加商品時仍然是頻繁訪問購物車頁面

Yoho有貨：
Yoho 有貨的購物車設計看起來很酷，但設計思想非常混亂，在所有頁面加入迷你購物車的添加商品入購物車的設計，但又取消了正式購物車頁面，變成了以迷你購物車的表現力來同時承載迷你購物車及正式購物車的功能，造成正式購物車的很多功能都缺少了發揮余地，對信息支持太不夠了。在位置上別出心裁地放在屏幕下方的這個設計我的個人觀點是壞處大于好處的。

Cosize：
?核心思想還是早期購物車設計思想，但通過在所有頁面都放大購物車區域的顯示功能而實現了迷你購物車的作用(2)，但添加商品時仍然是頻繁訪問購物車頁面

三、國外服裝B2C站購物車設計

國外服裝B2C站購物車設計有鮮明的迷你購物車+正式購物車的設計思想
?迷你購物車出現在頁面右上角
?添加商品入購物車時，迷你購物車會彈div窗顯示當前加入的商品信息，幾秒后收縮，此效果保證了用戶確認添加了商品，又不影響用戶將視覺注意力繼續集中到商品頁面
?通過迷你購物車的鏈接，訪問正式購物車頁面

Gap：
Gap 的迷你購物車設計是早在1年前初次接觸到Gap時就已經發現，可見這種設計思想在很久以前就已經被使用了， PPG的初版據說就是仿的老版的Gap。BTW，Gap有很多堪稱亮點的功能設計和用戶體驗優化可作借鑒，譬如說用小色板/紋理板代替款式選擇，尺碼也直接放出，因為不涉及到購物車功能，不予詳述。

總結

以上是生活随笔為你收集整理的B2C购物车功能应该怎么设计，以及我的设计构思分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。