購物車設計開發(轉)
第一章,購物車需求調研。
?
只要是電子商務購物網站,購物車是必不可少的功能。
設計一個功能強大、易用性好的購物車絕對是提高顧客購買興趣和達成購買的一個重要因素。
?
縱觀國內外的電子商務網站,做得比較好,在國內有卓越(
www
.joyo.com
),當當(www.dangdang.com),
國外的則比較多,主要有亞馬遜書店(www.amazon.com),GAP(www.gap.com),
www.target.com
,
www
.buy.com
等。
?
這些網站對于購物車的設計各有特色,但大致是分為兩種購物車:
MiniCart(迷你車)
和
ShoppingCart(購物車)
。
-
MiniCart的分析
MiniCart 是購物車的一個微縮版,一般是顯示最后加入購物車的一個商品,當然也有顯示多個的,但這要注意尺度,
一般顯示最后3個已經很足夠,再多使到排版過長,影響瀏覽。
在
MiniCart
頁面,現在流行的安排是左邊顯示推薦的相關產品,右邊是
MiniCart
。這是根據用戶當前選購商品的一
種業務需求挖掘,來進一步推動銷售。具體如圖1。
?
另外一種
MiniCart
則為
www
.gap.com
獨創,筆者瀏覽過國內外各大電子商務產品及網站,暫時只是發現
GAP
系的網站有這種設計。
見下圖。
讀者請注意我用紅色圈住的地方,就是它的
MiniCart
,當顧客點擊
[Add
to cart
]
時,系統將在右上欄的
MiniCart
柔和地展開,第一部分是顧客剛才加入購物車的商品,如果該商品存在相關促銷活動或者是屬于某個產品包
(購買
A
+B
將節省n%等),將在第二部分顯示相關的推薦。
整個動態效果做得非常舒服,很吸引顧客眼球。只是它的實現較復雜。
-
Shopping Cart的分析
?
購物車(
ShoppingCart
)的設計則大同小異,如
Amazon
的設計如下:
見圖中紅色圈圈。
【
1
】列功能區:放置該列商品加入購物車的時間、對每個商品的操作按鈕。
【
2
】商品詳細信息區:包括產品名稱、庫存、是否免運費及是否需要禮品包裝等。
【
3
】價格區:該商品折后價格及節省了多少。
【
4
】數量區:可以修改購買數量。
【
5
】總體功能區:提供操作整個購物車區域(分為
Buy
Now
和Buy Later兩個取悅)
的操作按鈕和統計信息。
?
經過分析,大致需要提供給用戶操作的功能有:
更新數量;
刪除
(1…n)
;
Save
for later
(Joyo描述為收藏)(1...n);
Move to cart
移到購物車(對Save for later的商品)(1…n)。
?
而在系統內部我們還需要對購物車進行更多的處理,比如對購物車的商品進行計費、計算出
折后價格,統計數據,對有促銷活動的商品給顧客以明顯的提示,
Also
buy
等等。
?
到這里,購物車的業務需求分析研究就過一段落了,下一章將會進行購物車的建模設計。
第二章:購物車業務建模。
?
筆者在本文中將會采用 UML 對購物車進行建模。
對于我們的例子,涉及參與者( Actor )是顧客,業務實體則有 MiniCart 和 Shopping Cart 。
?
1 、術語解釋。
購物車 /ShoppingCart :模擬現實的購物車,存放顧客選購的商品。
購物車元素 /ShoppingCartItem :表示每個加入購物車的商品, 1 個購物車元素對應一個商品。
迷你車 /MiniCart :購物車的微縮版,只顯示最后(或者近幾個)加入購物車商品,會附加一些促銷的信息。
?
?
2 、用例( Use Case )
用例( Use Case )是顧客對購物車進行直接操作的事件。
經過分析,得出的用例如下圖:
?
3 、業務實體。
?
描述如下:
1 ) ShoppingCart 和 ShoppingCartItem 是聚合關系,即 ShoppingCartItem 生命周期依賴于 ShoppingCart ;
2 ) MiniCart 和和 ShoppingCartItem 是組合關系,一個 MiniCart 可以呈現多個 ShoppingCartItem ,
ShoppingCartItem 生命周期和 MiniCart 沒有直接關系;
3 ) MiniCart 對 ShoppingCart 有依賴關系,如果還沒有為顧客分配 ShoppingCart ,則 MiniCart 也為空。
?
4 、時序圖。
描述顧客和購物車之間的交互關系,并表述對象之間的時間順序可以用時序圖表達,但限于篇幅,
筆者只對其中的【將商品加入購物車】進行設計。
4.1 基本流如下:
?
流程描述如下:
顧客 ??????????????????????????????????????????????????? 服務器
1 )查看商品;
2 )將商品加入購物車;
???????????????????????????????????????????????????????? 3 )購物車模塊判斷可以加入;
???????????????????????????????????????????????????????? 4 )將該商品加入購物車;
???????????????????????????????????????????????????????? 5 )調用其它接口對購物車進行處理(如計費接口);
???????????????????????????????????????????????????????? 6 )調用 MiniCart 接口組裝返回數據;
???????????????????????????????????????????????????????? 7 )呈現 MiniCart 頁面;
8 )查看 MiniCart 頁面。
?
4.2 擴展流如下:
?
1 ) Add to cart 時,通過購買驗證,發現顧客等級不足以購買當前商品,則返回提示信息,流程結束。
2 )另外還有其它的擴展流,比如庫存不足等,由于很相似,所以在本文就不畫圖了。
?
5 、其它。
下圖表達了一個顧客進入網站后選購商品——結帳的活動過程概述。
其中對 Add to cart 的子流程做了描述,結帳流程不在本文描述范圍。
?
?
下一篇將進行實體和接口的具體設計,請關注。
?
【轉載請注明出處!】
筆者現在 www .probiz.cn 任項目主管,進行基于 J2EE 電子商務套件的研發。
產品在線 demo 請垂閱: http://demo.probiz.cn
后臺:http://demo.probiz.cn/StoreAdmin
筆者對 J 2EE 相關技術及電子商務方面有所研究,歡迎進行交流。
QQ:16399476
MSN : yanchaomin @hotmail.com
posted on 2007-03-22 11:16 liaojiyong 閱讀(1284) 評論(0) 編輯 收藏 所屬分類: Other