国内或者国外的都行,现在购物车设计感觉越来越同质化了。
知乎用户
赞同
1.
购物车在首页上的界面和交互设计
天猫
亚马逊
京东
淘宝
1号店
在这一项比较中,亚马逊的设计无疑是最出色的,淘宝也不错,然后是京东,天猫,1号店。
2. 购物车页面
天猫的购物车基本和淘宝一样,以后就只讲淘宝。
京东
1号店
亚马逊
淘宝
除了京东,都可以在此页面进行收藏夹操作。
在1号店中,当点击“收藏”时,会在此弹出文本提示“已添加入收藏夹”,如果该商品已被添加过,则弹出文本提示“您已经收藏过该商品”,让用户知道该商品已经被“复制”到了收藏夹中。
在亚马逊中,收藏夹中的物品非常突出的展现在了该页面上,看起来与购物车具有相同地位,并且很贴心的告诉了消费者购物车和收藏夹这两者的用途区别——“购 物车商品--现在购买”,“收藏夹--以后购买”。用户可以方便的将物品在两者之间切换,页面也会通过文字和动画表现该商品是被“剪切”到了收藏夹,反之 亦然。个人认为用“剪切”的方式比1号店那种“复制”的方式更好,因为消费者在购物车停留,其想法无非有三种,一是不想要,直接删除;二是想要,就直接购 买;三是不确定,以后再说,则放入收藏夹。也就是说放入收藏夹的商品就不必留在购物车里了;而对于即将购买的东西也不必放入收藏夹,因为重复购买的可能性 一般比较小,即使要重复购买,也能够在已购买过的商品页面中找到。
淘宝网,当点击“移入收藏夹”时,如果该商品之前没有被收藏过,则显示文字提示“成功移至收藏夹”,并且该商品从此页面消失,相当于“剪切”至收藏夹;如 果该商品之前已经被收藏过,则显示文字提示“已收藏该宝贝”,但该商品并不从页面上消失。这句话本身就有两种理解方式,一种是告诉用户已经进行了“收藏” 这个动作,这样就相当于是“复制”到收藏夹;另一种是告诉用户该宝贝已经收藏过了,不用再收藏了,相当于未进行任何操作。这两种理解方式虽然效果都一样, 但给用户造成了认知的负担。而且这两种都不算是“剪切”至收藏夹。对于用户来说,这个按钮在某种情况下是“剪切”,在另一种情况下是“复制”或“未进行操 作”,更让人难以理解“购物车”和“收藏夹”到底是怎样一种关系。
除了亚马逊,在购物车页面都使用了序列地图,让用户知道接下来还有哪几步要做。
亚马逊也不支持多选批量操作,也不能用鼠标进行数量的增减。但亚马逊的界面设计够简洁清晰,图片比较大便于浏览,其它网站货物图片相对较小,但淘宝支持鼠标悬停查看大图,做的不错。
京东在与“去结算”按钮相对应的页面位置设置了个“继续购物”按钮,给用户提供了返回首页继续购物的选择。虽然所有的购物网站都可以通过”逃生舱”按钮返 回首页或者点击其它链接继续购物,但让新手用户担心的一个问题是当跳转到其它页面后当前购物车内的东西会不会继续保留着,而这个“继续购物”按钮最大的作 用则是暗示了其会保留。
只有淘宝购物车在删除商品后提供了“撤销本次删除”功能。
购物车页面下方更多的内容也体现出了不同网站的各种风格。京东是非常简洁,什么也没有,干净。亚马逊列出了“您最近浏览过的商品”和推荐的商品。1号店提 出了个让人不知所云的“换购”商品栏目,也不对用户做任何关于“换购”的解释。它同时也列出了推荐的商品和“收藏夹”,用卡片堆的方式进行转换。淘宝列出 了浏览过的,收藏夹,和推荐的商品栏目,也是卡片堆方式,但却不断的自行在几个栏目间跳转。很明显淘宝是为了促进更多销售,但这种类似于网页上小广告的做 法却容易招人烦,降低了用户体验,而且用户也不可能对照着“购物车”和“收藏夹”进行调整了,“收藏夹”的作用被弱化。
在这一页面上的比较结果,我认为顺序应该是亚马逊,淘宝,1 号店,京东
3. 确认订单信息页面:
1号店上面用来显示步骤的序列地图在这个页面上消失了,真是让人搞不懂为何
亚马逊非常明显的同时列出了几个历史常用地址,但并没有默认地址,用户必须通过一次单击来进行确认,避免寄错地址。如果要添加新地址也可以直接进行而不必有多余的操作。
淘宝也罗列了历史常用地址并选择了默认地址,但用户不必确认收货地址就可以提交订单,这样就减少了一次单击操作,但代价就是用户可能没有注意到这一项因而 误选地址。特别是淘宝在这一页面还需要进行选择“收货方式”,“运送方式”,“给卖家留言”等一系列操作,加上商品图片的出现更容易吸引眼球,从而忽略了 文字地址。
1号店也列出了几个历史地址,但没有默认地址,系统每次自动选择的是最后一次使用的地址。用户可以设置一个“常用地址”,每次出现在第一个位置。和淘宝一 样,这种设计也不必确认地址就可以提交订单,但它比淘宝更容易误选地址,因为它自动选择的不是常用地址而是最后一次的地址。
京东也没有提供默认地址,自动填好的是最后一次使用的地址,它也和1号店一样也容易忽略选择地址。如果要选择其它地址则必须点击旁边那个小小的“修改”,很麻烦,省略其它地址也没让页面简洁度有很大提高,得不偿失。
亚马逊在这一步骤上使用了四个页面来完成“选择配送地址”——“选择送货方式”——“选择付款方式”——“检查订单”。即在每个页面上仅进行一项操作,这样就非常清晰,不会有任何遗漏,但在网速不给力的情况下多载入几个页面会让用户不耐烦。
这一页面上,我认为还是亚马逊做得最好,其次是淘宝,1 号店和京东各有不同的问题需要改善
结语,通过对比分析,我发现几大网站的购物车各有特色。
亚马逊风格是简洁清晰明了,不容易误操作。但它是把每一个要进行的动作分解开来做,因此增加了流程页面,对于网速慢的用户并不是件好事。但网购这种事情不可能像看新闻那样频繁,所以也还不算是个问题。
淘宝(天猫)是个特别典型的中国式的小摊小贩,想尽各种办法促使你买更多的东西,大量图片和高亮文字在界面上晃来晃去吸引你的注意,显得比较杂。但它同时也是一个非常成熟的购物车,在功能上都非常齐全,该有的提示和反馈也做得非常到位。
1号店试图把购物车做得规规矩矩,但目前细节还显得不够成熟,大体上还是可以。
京东的购物车走到了淘宝的对立面,它试图用极简的风格来营造一个良好的购物体验,但有时候却是过犹不及了,因为它在功能上进行了很多的妥协,给用户造成诸多不便。这就不如亚马逊在功能性和界面的平衡上做得好了。
综上,个人最喜欢亚马逊的购物车,其次是淘宝/ 天猫。1 号店规矩京东简洁,但都还欠成熟。
以上是个人拙见,也许还有很多细节注意的不全面,欢迎大家继续补充!
天猫
![](http://p2.zhimg.com/56/44/56440251075ff8797acb521071f74072_m.jpg)
![](http://p4.zhimg.com/3f/ac/3fac2bea6fbf54fe4f27039940cbf34b_m.jpg)
![](http://p2.zhimg.com/52/b3/52b35529ad1bf89eb72122686b794964_m.jpg)
亚马逊
![](http://p1.zhimg.com/81/df/81dfb9479ea36c2ace2465a66d4cbe1c_m.jpg)
![](http://p3.zhimg.com/6d/4d/6d4dcd34dd7c7cd0d538af9d381ace3b_m.jpg)
京东
![](http://p4.zhimg.com/c0/94/c094baa8f2cb1d751be8b54dd9572900_m.jpg)
![](http://p2.zhimg.com/52/48/5248d1b0d12c8fd13acd5475262e5731_m.jpg)
淘宝
![](http://p4.zhimg.com/7c/0b/7c0b701327caa739005287117c1d58a0_m.jpg)
![](http://p2.zhimg.com/e4/ac/e4ac46d508e75f46a9745edd2b39dab9_m.jpg)
1号店
![](http://p3.zhimg.com/f4/8d/f48d3849778cad4a1eef607a6f0e5243_m.jpg)
![](http://p3.zhimg.com/fa/97/fa97bb9f49e69fc0dabcc298b47835f9_m.jpg)
- 布 局:布局基本上都在上方偏右的位置,符合人的习惯。因为一般“前进”的方向是在右方。只有天猫将购物车放得稍靠中间一些,不过它也很有创意的在右下方添加 了一个可以浮动的购物车链接,用户在选择时可以随时点击它进入购物车而不必回到页面上方。从辨识度上来说,亚马逊和京东是做得最好的,图标够大够明显;淘 宝和天猫的购物车很小,隐藏在杂乱的界面中,新用户不易发现,也不易点击;1号店的购物车够大,但并没有与其它元素独立开来。
- 隐喻图标:所有5个网站都做了图标的隐喻设计,并无太大差别
- 文字:在文字上大多数都使用了“购物车×件”的字样,只有京东使用了“去购物车结算”的字样。京东似乎在暗示点击它之后就要进入结算阶段,但实际上在结算之前还是要对购物车进行查看/添加/删除这些操作。所以京东的文字并不合理。
- 交互设计:文字之后,淘宝和亚马逊使用了一个向下的箭头,暗示这里是一个下拉列表; 1号店和天猫则没有;京东使用了一个右箭头,似乎是与文字呼应,暗示这是要进行下一步操作。我们发现把光标悬停于文字上时,除天猫外都弹出了一个下拉列 表,因此这个地方放一个下箭头是最合理的。天猫在下方的购物车处可通过点击弹出下拉列表,虽然增加一次单击,但对于网速慢的用户效果更好,以免用户不知道 要弹出列表而直接点击进入购物车页面。大多数网站当光标悬停于购物车上时光标和文字的变化都是符合了超链接的隐喻,意思是可以通过点击进入到购物车里 面,1号店虽然也有这个功能但却没有这个隐喻。天猫还有个问题是要查看购物车则必须登录,这其实并不合逻辑,为什么不像其它网站那样在结算时再要求登录 呢?因为用户完全有可能在查看购物车后终止购物。
在这一项比较中,亚马逊的设计无疑是最出色的,淘宝也不错,然后是京东,天猫,1号店。
2. 购物车页面
天猫的购物车基本和淘宝一样,以后就只讲淘宝。
京东
![](http://p2.zhimg.com/94/15/941527cc3705a3134e6b7eee7203208e_m.jpg)
1号店
![](http://p2.zhimg.com/57/6b/576bdefc4d57489a86cb9f12ccbdeb80_m.jpg)
亚马逊
![](http://p3.zhimg.com/b4/8d/b48dc3eb19c90f0d1a1daff4c1b65627_m.jpg)
淘宝
![](http://p3.zhimg.com/60/60/6060c36b020fee687ec888a940ab25f0_m.jpg)
- 收藏夹:
除了京东,都可以在此页面进行收藏夹操作。
在1号店中,当点击“收藏”时,会在此弹出文本提示“已添加入收藏夹”,如果该商品已被添加过,则弹出文本提示“您已经收藏过该商品”,让用户知道该商品已经被“复制”到了收藏夹中。
在亚马逊中,收藏夹中的物品非常突出的展现在了该页面上,看起来与购物车具有相同地位,并且很贴心的告诉了消费者购物车和收藏夹这两者的用途区别——“购 物车商品--现在购买”,“收藏夹--以后购买”。用户可以方便的将物品在两者之间切换,页面也会通过文字和动画表现该商品是被“剪切”到了收藏夹,反之 亦然。个人认为用“剪切”的方式比1号店那种“复制”的方式更好,因为消费者在购物车停留,其想法无非有三种,一是不想要,直接删除;二是想要,就直接购 买;三是不确定,以后再说,则放入收藏夹。也就是说放入收藏夹的商品就不必留在购物车里了;而对于即将购买的东西也不必放入收藏夹,因为重复购买的可能性 一般比较小,即使要重复购买,也能够在已购买过的商品页面中找到。
淘宝网,当点击“移入收藏夹”时,如果该商品之前没有被收藏过,则显示文字提示“成功移至收藏夹”,并且该商品从此页面消失,相当于“剪切”至收藏夹;如 果该商品之前已经被收藏过,则显示文字提示“已收藏该宝贝”,但该商品并不从页面上消失。这句话本身就有两种理解方式,一种是告诉用户已经进行了“收藏” 这个动作,这样就相当于是“复制”到收藏夹;另一种是告诉用户该宝贝已经收藏过了,不用再收藏了,相当于未进行任何操作。这两种理解方式虽然效果都一样, 但给用户造成了认知的负担。而且这两种都不算是“剪切”至收藏夹。对于用户来说,这个按钮在某种情况下是“剪切”,在另一种情况下是“复制”或“未进行操 作”,更让人难以理解“购物车”和“收藏夹”到底是怎样一种关系。
![](http://p4.zhimg.com/7b/aa/7baabf2c43de04f09c0f0dd21e53b0f7_m.jpg)
![](http://p2.zhimg.com/1a/58/1a5879a7cd5db3dfc9f41bf6f7faf03c_m.jpg)
- 其它细节:
除了亚马逊,在购物车页面都使用了序列地图,让用户知道接下来还有哪几步要做。
亚马逊也不支持多选批量操作,也不能用鼠标进行数量的增减。但亚马逊的界面设计够简洁清晰,图片比较大便于浏览,其它网站货物图片相对较小,但淘宝支持鼠标悬停查看大图,做的不错。
京东在与“去结算”按钮相对应的页面位置设置了个“继续购物”按钮,给用户提供了返回首页继续购物的选择。虽然所有的购物网站都可以通过”逃生舱”按钮返 回首页或者点击其它链接继续购物,但让新手用户担心的一个问题是当跳转到其它页面后当前购物车内的东西会不会继续保留着,而这个“继续购物”按钮最大的作 用则是暗示了其会保留。
只有淘宝购物车在删除商品后提供了“撤销本次删除”功能。
![](http://p2.zhimg.com/a1/66/a16689047ac384e77ad70437c0b89f28_m.jpg)
购物车页面下方更多的内容也体现出了不同网站的各种风格。京东是非常简洁,什么也没有,干净。亚马逊列出了“您最近浏览过的商品”和推荐的商品。1号店提 出了个让人不知所云的“换购”商品栏目,也不对用户做任何关于“换购”的解释。它同时也列出了推荐的商品和“收藏夹”,用卡片堆的方式进行转换。淘宝列出 了浏览过的,收藏夹,和推荐的商品栏目,也是卡片堆方式,但却不断的自行在几个栏目间跳转。很明显淘宝是为了促进更多销售,但这种类似于网页上小广告的做 法却容易招人烦,降低了用户体验,而且用户也不可能对照着“购物车”和“收藏夹”进行调整了,“收藏夹”的作用被弱化。
在这一页面上的比较结果,我认为顺序应该是亚马逊,淘宝,1 号店,京东
3. 确认订单信息页面:
1号店上面用来显示步骤的序列地图在这个页面上消失了,真是让人搞不懂为何
亚马逊非常明显的同时列出了几个历史常用地址,但并没有默认地址,用户必须通过一次单击来进行确认,避免寄错地址。如果要添加新地址也可以直接进行而不必有多余的操作。
![](http://p3.zhimg.com/b5/55/b555962dab84a71ec0c29c1611da36bd_m.jpg)
淘宝也罗列了历史常用地址并选择了默认地址,但用户不必确认收货地址就可以提交订单,这样就减少了一次单击操作,但代价就是用户可能没有注意到这一项因而 误选地址。特别是淘宝在这一页面还需要进行选择“收货方式”,“运送方式”,“给卖家留言”等一系列操作,加上商品图片的出现更容易吸引眼球,从而忽略了 文字地址。
![](http://p3.zhimg.com/26/f4/26f4469729016e479ea5723e749aa0bd_m.jpg)
1号店也列出了几个历史地址,但没有默认地址,系统每次自动选择的是最后一次使用的地址。用户可以设置一个“常用地址”,每次出现在第一个位置。和淘宝一 样,这种设计也不必确认地址就可以提交订单,但它比淘宝更容易误选地址,因为它自动选择的不是常用地址而是最后一次的地址。
![](http://p4.zhimg.com/7d/38/7d3806cbe6286348e50657ed261b1e03_m.jpg)
京东也没有提供默认地址,自动填好的是最后一次使用的地址,它也和1号店一样也容易忽略选择地址。如果要选择其它地址则必须点击旁边那个小小的“修改”,很麻烦,省略其它地址也没让页面简洁度有很大提高,得不偿失。
![](http://p1.zhimg.com/0c/93/0c931f24719a835f7308ca12ee13132a_m.jpg)
亚马逊在这一步骤上使用了四个页面来完成“选择配送地址”——“选择送货方式”——“选择付款方式”——“检查订单”。即在每个页面上仅进行一项操作,这样就非常清晰,不会有任何遗漏,但在网速不给力的情况下多载入几个页面会让用户不耐烦。
这一页面上,我认为还是亚马逊做得最好,其次是淘宝,1 号店和京东各有不同的问题需要改善
结语,通过对比分析,我发现几大网站的购物车各有特色。
亚马逊风格是简洁清晰明了,不容易误操作。但它是把每一个要进行的动作分解开来做,因此增加了流程页面,对于网速慢的用户并不是件好事。但网购这种事情不可能像看新闻那样频繁,所以也还不算是个问题。
淘宝(天猫)是个特别典型的中国式的小摊小贩,想尽各种办法促使你买更多的东西,大量图片和高亮文字在界面上晃来晃去吸引你的注意,显得比较杂。但它同时也是一个非常成熟的购物车,在功能上都非常齐全,该有的提示和反馈也做得非常到位。
1号店试图把购物车做得规规矩矩,但目前细节还显得不够成熟,大体上还是可以。
京东的购物车走到了淘宝的对立面,它试图用极简的风格来营造一个良好的购物体验,但有时候却是过犹不及了,因为它在功能上进行了很多的妥协,给用户造成诸多不便。这就不如亚马逊在功能性和界面的平衡上做得好了。
综上,个人最喜欢亚马逊的购物车,其次是淘宝/ 天猫。1 号店规矩京东简洁,但都还欠成熟。
以上是个人拙见,也许还有很多细节注意的不全面,欢迎大家继续补充!