上周時(shí)間閑一點(diǎn)，打算開始做商城需求，結(jié)果剛從必備功能--購物車開了個(gè)頭，就發(fā)現(xiàn)現(xiàn)在國內(nèi)各個(gè)B2C的購物車功能支持實(shí)在是大相徑庭，存在太多優(yōu)化空間，而國外B2C的購物車主要功能基本一致，但在小功能點(diǎn)上都力求創(chuàng)新。

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

重點(diǎn)根據(jù)我們對(duì)業(yè)內(nèi)的了解及方向分析了幾家網(wǎng)站，其他有些沒有列舉出來的網(wǎng)站如amazon、淘寶B2C、vancl、國美、達(dá)芙妮等僅僅只是作為我們自己的旁證檢測，結(jié)果沒有反映在這份文檔里。

評(píng)測對(duì)象：

國內(nèi)：

當(dāng)當(dāng)：不用介紹了。

卓越：不用介紹了。

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

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

廚衛(wèi)百分百：做廚衛(wèi)商品的，消毒柜，抽油煙機(jī)，熱水器之類的

明潔凈水：做軟水機(jī)，純水機(jī)，凈水機(jī)之類的

服裝B2C-國內(nèi)：

Yoho有貨:算是直接競爭對(duì)手吧。

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

服裝B2C-國外：

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

Abercrombie: 美國青少年時(shí)尚休閑品牌，據(jù)說是大學(xué)生最愛。

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

第一篇：用戶使用購物車的限制與識(shí)別
第二篇：迷你購物車與正式購物車的設(shè)計(jì)
第三篇：正式購物車的頁面信息結(jié)構(gòu)
第四篇：我們購物車設(shè)計(jì)的實(shí)際需求與原型

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

一、三種程度

由于Cookie是實(shí)現(xiàn)購物車存儲(chǔ)用戶購物信息的最容易的手段，所以B2C網(wǎng)站的購物車都是用Cookie來實(shí)現(xiàn)記錄用戶購物信息，即使通過Session也是通過Cookie來變相實(shí)現(xiàn)，按評(píng)測對(duì)用戶的限制與識(shí)別程度，有三種：

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

這三類用戶的支持程度，一層比一層深，目的就是為了讓能夠使用購物車的人數(shù)增加，轉(zhuǎn)化為訂單的數(shù)字也就會(huì)相應(yīng)增加。

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

二、國內(nèi)B2C購物車用戶識(shí)別對(duì)比分析

當(dāng)當(dāng)（程度2）：
?非登錄用戶用Cookie識(shí)別
?已登錄用戶仍然還是用Cookie識(shí)別，不跟帳號(hào)對(duì)應(yīng)。清除Cookie后，購物車內(nèi)商品消失，帳號(hào)強(qiáng)制退出
?禁用Cookie后，非登錄用戶無法添加商品入購物車,有帳號(hào)用戶無法登錄
評(píng)論：未分析到卓越模式前，還是不錯(cuò)的，新蛋中國的模式與dangdang相同

卓越(程度3)：
?非登錄用戶用Cookie識(shí)別，已登錄用戶帳號(hào)識(shí)別
?非登錄狀態(tài)清除cookie，商品消失；已登錄狀態(tài)清除cookie，帳號(hào)強(qiáng)制退出，購物車內(nèi)商品保留
?非登錄添加→登錄后再次添加，非登錄狀態(tài)下添加的商品轉(zhuǎn)移成帳號(hào)對(duì)應(yīng)的商品，清除cookie后仍然保留
?禁用cookie后,非登錄用戶仍然可以正常添加商品,正常登錄
評(píng)論：比Amazon還強(qiáng)大...我個(gè)人就經(jīng)常在非登錄的情況下使用購物車，然后到結(jié)算中心時(shí)再登錄。

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

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

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

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

Yoho有貨(程度1)
?已登錄用戶才能使用購物車
?禁用Cookie后Yoho不能登錄，重新跳回到商品詳情頁，沒有合適的提示，容易誤會(huì)已經(jīng)登錄
評(píng)論：Yoho的視覺表現(xiàn)力是蠻佩服的，但在功能架構(gòu)及用戶體驗(yàn)上，有很多弊端，因?yàn)槭侵苯拥母偁帉?duì)手，就不好多說了哈^^

Cosize(程度1)
?已登錄用戶才能使用購物車
?禁用Cookie后Cosize用戶登錄時(shí)會(huì)跳轉(zhuǎn)到一個(gè)提示用戶打開Cookie的頁面（非常不錯(cuò)的設(shè)計(jì)）

評(píng)論：因?yàn)橹挥械卿浻脩舨拍苁褂觅徫镘?#xff0c;所以Cosize這個(gè)禁用Cookie后又要登錄的跳轉(zhuǎn)頁設(shè)計(jì)還是值得贊賞的，但我不理解做出這個(gè)優(yōu)秀設(shè)計(jì)的Cosize為什么要限制只有登錄用戶才能使用購物車，希望有機(jī)會(huì)接觸一下聽聽想法。

此外還有V版他們家365com.com這種關(guān)了瀏覽器，購物車內(nèi)商品就消失的奇怪的設(shè)計(jì)（囧rz）

三、國外B2C購物車用戶識(shí)別對(duì)比分析

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

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

Abercrombie(程度2)：
?session保留匿名用戶購物車商品，清除cookie無效，已登錄用戶帳號(hào)識(shí)別
?非登錄添加→登錄后再次添加，非登錄狀態(tài)下添加的商品轉(zhuǎn)移成帳號(hào)對(duì)應(yīng)的商品
?禁用Cookie后，添加商品入購物車報(bào)錯(cuò),不能登錄
評(píng)論：同Zara Home，更多特點(diǎn)在其他功能設(shè)計(jì)和信息架構(gòu)上。

四、總結(jié)
幾個(gè)沒想到：
1、 京東購物車商品存儲(chǔ)之囧：先是購物車沒有保存商品功能，退出即清空。后來退出不清空了，刪除又失效，以為刪除了，其實(shí)再次登錄后還是沒刪除…
2、 Cosize的禁止Cookie用戶登錄時(shí)的跳轉(zhuǎn)頁設(shè)計(jì)，當(dāng)當(dāng)應(yīng)該效仿
3、 為什么那么多國內(nèi)網(wǎng)站要限制只有已登錄用戶使用購物車？請(qǐng)告訴我…

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

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

第二篇：迷你購物車的設(shè)計(jì)

在商城的購物車程序設(shè)計(jì)里，隨著需求的變化，對(duì)用戶體驗(yàn)的重視，漸漸的從早期的購物車發(fā)展成了迷你購物車+正式購物車的設(shè)計(jì)。

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

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

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

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

二、國內(nèi)B2C站購物車設(shè)計(jì)

當(dāng)當(dāng)：
?早期購物車，所有頁面上的購物車區(qū)域僅僅只是個(gè)鏈接

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

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

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

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

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

三、國外服裝B2C站購物車設(shè)計(jì)

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

Gap：
Gap 的迷你購物車設(shè)計(jì)是早在1年前初次接觸到Gap時(shí)就已經(jīng)發(fā)現(xiàn)，可見這種設(shè)計(jì)思想在很久以前就已經(jīng)被使用了， PPG的初版據(jù)說就是仿的老版的Gap。BTW，Gap有很多堪稱亮點(diǎn)的功能設(shè)計(jì)和用戶體驗(yàn)優(yōu)化可作借鑒，譬如說用小色板/紋理板代替款式選擇，尺碼也直接放出，因?yàn)椴簧婕暗劫徫镘嚬δ?#xff0c;不予詳述。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。