购物车设计开发

第一章,购物车需求调研。

只要是电子商务购物网站,购物车是必不可少的功能。

设计一个功能强大、易用性好的购物车绝对是提高顾客购买兴趣和达成购买的一个重要因素。

纵观国内外的电子商务网站,做得比较好,在国内有卓越( 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 的子流程做了描述,结帐流程不在本文描述范围。