电商产品的购物车，设计细节你都注意到了吗？
最近在做关于购物车功能的设计模块，以前用别的产品的时候就觉得电商的购物车是很寻常的模块，每家看起来都差不多。但是真的在设计的时候，我才发现里面有很多的学问，涵盖了很多我们平时忽略的子功能，而且不同的平台差异也蛮大的。我结合了小红书、淘宝、网易严选、苏宁易购、京东、天猫这几个主流平台的购物车，来进行分析。
目录
1、购物车是什么？
2、购物车设计要展示的基本信息
3、设计时需要注意的细节
4、总结
购物车是什么？
在现实生活中，购物车是在超市、商店购物时存放商品的地方，在网络购物中，购物车其实起到的作用跟在现实生活中差不多，随意添加、删除商品、选购完毕后，统一下单支付。
购物车设计要展示的基本信息
购物车最主要的作用就是告诉用户放了什么、价格多少，不同类型的物品展示方式可能有所不同，但是基本都会包括产品图片、名称、价格、数量、选择的款式以及其他的其他附属信息。
除了上面这些基本信息，用户在购物车时还会有以下操作：
1、基本的增删
商品数量的增加或减少，以及不想买了，直接删除此列购物车的操作。如下图所示：
2、查看详情
用户在购物车页面的时候很有可能会由于颜色和尺码的不确定，需要再次进入产品详情查看信息，因此要注意保留入口，目前几乎所有的电商产品都是点击产品所在的列表就可以直接查看详情。如下图所示：
3、修改商品信息
用户想要修改产品信息，比如用户想要修改购买的颜色和尺码，目前除了淘宝，大部分电商的操作都是重新选择。如下图所示：
淘宝可以不需要任何操作，直接在购物车页面修改商品信息，设计时用的是浅灰色的背景加下拉按钮，让用户能够发现这一模块是可点击状态，点击出后底部弹窗的形式，减少了用户操作的流程。
购物车的基本信息，主要目的是让用户清楚此次消费的内容，但是仅仅只做好信息展示是不够的。
设计时需要注意的细节
购物车的基本信息，主要目的是让用户清楚此次消费的内容，但是仅仅只做好信息展示是不够的，还有以下这些细节需要我们去注意。
1、领取优惠券
在购物车界面，优惠券的领取按钮主要是来告知用户是否有可以用的优惠券，有就会展示出来，让用户能够直接领取。如下图所示：
苏宁易购和京东的购物车都是以店铺的维度来展示的，因此优惠券都会放置在卡片的右上角，用户可以点击优惠券，会出现底部弹窗，用户领取优惠券；这里京东的优惠券做的比较好的是，会进一步的告知用户，是否满足可用条件，还增加了去凑单的入口，用户体验挺好的。
网易严选因为商品都是出自严选，所以优惠券是针对所有商品的，因此将优惠券放在了顶部，并且设计成了扁平优惠券的图形样式，在整个页面会显得比较突出抢眼。
2、凑单活动
购物车商品经常会有满减满折的活动，因此有很多产品在没有满足条件的时候，会提示用户去凑单。如下图所示：
京东和苏宁易购的购物车因为是店铺展示，位置都是放在商品信息的上方，用描边标签或者色块搭配文字，使用的都是主题色，但是京东会告知用户还差多少钱达到条件，体验上会好一点。
3、促销、降价、库存紧张的提示
我们放在购物车里的东西处于很多原因会忘记购买，但是偶尔想清空购物车的时候，看到有降价和库存紧张以及促销的一些提示，还是能激发起用户的购买欲的。如下图所示：
网易严选将“特价”、“囤货日”这些促销的信息用不同的颜色放在了商品名称的前面，主要它整个界面比较素雅，颜色的突出更能让用户看到促销的信息。
4、失效、缺货的提示
产品缺货或者下架以后就会变成失效或缺货的状态，整体显示不可点击的状态。如下图所示：
目前淘宝的商品失效率是最高的，而京东显示的是缺货状态，商品之前可选状态的按钮变成不可选，整个列表显示出不可点击的状态，而找相似的按钮会在这一模块最明显的位置显示，主要是想要抓住用户要找同款的心理。
总结
购物车环节其实是购物的最后一环，一般很多人比较注重的是商品展示的效果，促进消费者购买，但繁琐的购物环节有时候也会赶跑用户，所以我们在设计的时候一定要注意：
1、首先要保证三个基础功能的存在：基本的增删、查看详情、修改商品信息；
2、设计的时候要注意的细节：能够批量编辑产品、领取优惠券、参加凑单活动、降价和库存紧张的提示、失效提示等。这么多的信息都要在小小的列表里展示出来，让用户及时的了解到，因此在设计的时候我们一定要合理利用空间，并且有强有弱。
3、因为这里涉及到的交易，涉及很多需要用户确认的信息，在设计的时候需要将产品信息都列出来等于让用户二次确认，避免后续更多的处理流程。
参考链接：
《实例分析：不同平台的购物车设计》
《电商产品的购物车，这些细节你注意了吗？》
海盐社（公众号）
作者： 潘团子
