实战经验！聊聊移动电商购物车的功能设计

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

最近在做一个购物车优化的项目，来和大家聊聊设计移动电商购物车的一些心得。

购物车做为移动电商平台的主要功能之一，其重要性不言而喻。购物车其实一开始来源于我们线下购买的场景，例如超市、商场、便利店等，它能够帮助人们提高购物效率以及提高客单价。随着互联网电商行业的发展扩大，sku的规模也逐渐庞大，这时候在技术、物流、支付、等功能的逐渐完善下，购物车的使用场景以及频率也变的很高。

购物车的作用

在移动端的购物车功能对于用户端来说一般可以有以下作用：

1.收藏  2.合并支付  3.对比价格

对于产品端来说，购物车有以下作用：

1. 能够提高客单价  2. 记录一些用户数据做商品推荐

用户使用购物车的场景会非常多，以下举几个不同的场景，大家感受一下：

场景1：

a君家里的某种计生用品用完了，他在某东上浏览的商品，他选择了之前常用的款式，但是他想尝试新鲜的款式，他分别将这两样商品加入了购物车，在准备结算的时候发现提示，只要再购买10元便可以享受满xx元减10元的优惠，此时他想反正以后也要用就再买一件吧，所以他就购买了3件，原本他的需求之时购买1件。

场景2：

b君躺在沙发上拿出手机开始逛某电商平台，ta很早以前就想买一双鞋子，但是鞋子比较贵，b君舍不得卖，ta把几乎所有卖这双鞋子的看上去正品的店里的那双同款鞋子都放进了购物车，心里想着等我下个月发工资了一定带它回家。

场景3：

c君刚搬了新家，家里缺少很多小件的生活用品，ta打算在某平台上购买一些，ta把商品一件一件的放入购物车，因为小件价格很便宜ta就不怎么在意，等到购物车结账的时候他发现居然买了这么多，要很多的钱，此时再仔细一看居然还要20元运费，买这么多也不包邮，心里一盘算，有些东西还不急着要，先买一些急着要的东西吧，这时候他勾选了想要的商品然后去和卖家讨论能否包邮的事情，最后结账。

举了3个比较典型的例子，那么做为电商平台，购物车都有他不同的存在价值，但只要是在购物车内的商品，我们都有很大的可能让用户掏出兜里的钱。虽然它有着收藏的功能，但是他和收藏不同，是强购物轻收藏的。

我们能发现各大电商平台的购物车都会有一些区别，可能是用户类型不同，可能是sku数量有差别，也可能是品牌尚未建立，等许许多多因素导致了购物车这个功能也会有一些区别。例如女性用户较多的产品可能购物车功能会比较重要，或许被放在比较明显的位置，因为男性购物的目的会比女性更明确，用购物车的几率较小。sku多的产品购物车功能相对更完善。品牌尚未建立的产品需要更加缩短用户购买的路径，关键信息需要更凸显。

不同电商平台购物车的区别

淘宝、京东、考拉、严选：从他们将购物车放在底部标签上来看，这个功能对他们非常重要性。他们希望用户能在平台上逛，就和线下场景一样的映射，因为这些平台的商品种类很多，足以用户去筛选，去对比。

这时候用户可能带有目的，也可能并没有目的，可能本来是想买某件商品的时候忽然发现另一件商品性价比更高，更合适，从而佩服自己的英明决策。其实我们能发现在使用购物车购物的过程也是一种体验消费，一种满足用户欲望的体验，让用户有一种错觉，加入购物车的商品马上就能属于我了，即便这次并没有购买。

小红书：没有那么强调购车这个属性，因为小红书属于口碑分享精准推荐类的社区，她的定位侧重在用户ugc和分享，并从而让其他用户对这些优质的内容进行购买转化，通过其他用户的分享评价和使用心得和大数据的精准跨境商品推荐，能够很快帮助我了解我所想要的产品的优缺点还有是否适合自己， 所以购物车并不是那么重要，社区类的电商也带有一定属性的社交，所以购物车使用的场景就没有像淘宝京东那么频繁。

寺库：一个全球奢侈品电商app，应该来说使用购物车买奢侈品的人应该不多。但是他们也将购物车放在了底部栏上。这里想说一下有些电商产品会将购物车放在导航栏上做全局样式，这和放底部标签栏还是会有区别，一个侧重功能使用，一个侧重商品浏览，虽然都是购物车功能。我猜想这样的平台可能会有比较严重的用户分化，一类是刚好收入能够买的起奢侈品以及一些轻奢的女白领，另一类就是比较富裕的上流女性。奢侈品不同于其他商品，因为它会经常出新款，而款式的新旧对于买的起奢侈品的人来说不言而喻，虽然有一些款式很经典。所以如果真的在买奢侈品的过程中需要用到购物车，而他又将购物车做的这么明显，除了主要用户是女土豪之外我暂时没想到其他原因。

购物车中编辑功能的作用

购物车还有一个功能叫做编辑，它能够修改数量，款式规格，也能删除商品。淘宝、京东、严选、寺库都有编辑功能，但是前三者可以再选择款式规格。

寺库：单一商品的规格种类和用户目的不同导致的在购物车中编辑选规格的场景很少。

小红书：没有编辑功能也没有批量删除和选择的功能，而又同样将删除功能外露，所以我们也能判断出小红书希望用户在尽可能简单，短的路径中完成对比、消费。

唯品会：同样没有编辑功能，但有个倒计时，类似于我加入购物车这个商品就被我锁定了，有点像买电影票，看了一下所有商详都有一个倒计时，但是说不定过了这个时间段又开始限时，就好像最后一天清仓大甩卖喊了一年是一个效果。放入购物车倒计时20分钟不买就解锁了，这个和购物车本身的定位就有一定的矛盾。一边逛一边还要担心20分钟内要支付，这样可能很难逛的起来，其实20分钟解锁也没人买你这件商品。所以像唯品会这样垂直型电商的购物车功能和平台型电商就会有一些区别，购物车内的商品想要删除也只能一件一件删，即便没有批量也无法做到宣布选中再一键删除，应该在这个平台上购物的用户或许他们每次购物选择的商品并不多，毕竟也只有20分钟时间让你去结算。

购物车优化案例

最近在做购物车的改版，之前老页面实在惨不忍睹，所以这次优化页面的目的有3点，第一是为了按照新标准视觉规范优化，第二是调整信息布局及层级关系，第三是提高用户使用该功能的转化。

但是问题来了，我们的购物车是内嵌的h5页面，我们需要将之前外露的删除功能隐藏到编辑功能里，但是导航栏上的编辑功能无法实现编辑内嵌的h5页面，所以和交互小哥哥的讨论之后，我们决定将编辑分别放在几个模块上，只要点击其中一个编辑就能编辑所有商品，点击完成既能恢复所有状态，同时在页面滑动的时候每个编辑栏都能在顶部置顶。这样就解决了h5页面编辑功能的尴尬，当然我们还是期望能够做成原生：

总结一下设计策略，通过判断产品的定位，以及目标用户，我们需要考虑购物车在产品中承担的作用及想要达到的目标。不同的定位、用户及目标还有技术承载，购物车的设计形式将有所区别。是否需要将所有功能外露，以及符合产品目标用户的心理诉求去设计功能交互的合理最优解是我们要去不断思考的。

「电商领域的UI 设计实战」：《从京东分会场学到的模块化设计方法总结》

欢迎关注作者应骏的微信公众号：应谋鬼计

【木子设计网 原创文章 投稿邮箱：yuan@uisdc.com】

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：https://www.muzisucai.com/