小编：总是买买买，你有没有思考过购物车这个功能，在你买单前后购物车起到了什么作用？在线上和线下，网页与APP中的购物车各有什么玩法？ @彬彬 跟随他的译文一起来看看经常用到又被你忽视的购物车吧。
购物车最初只是在超市大家用来装东西，装孩子，溜轮滑，偷回家的小推车。后来有了网上购物，就只能用来装东西了。再后来网上购物越来越流行，竞争激烈，购物车承载的电商功能又变得越来越多，形式也越来越多。但是它的主要功能一直没变：装东西，去付钱，无论线上线下。
线上购物车
作为多件商品买单之前的必经之路，最初在网上使用购物车时，线上的体验非常类似线下体验。多件商品手上拿不下，就丢进购物车，把购物车推进收银台，逐一结算买单。这里线上线下的不同点出现了，“逐一“刷条形码买单；网上购物车不需要这么做，一次就可以结清所有商品。那么网上的购物车页面就可以在结算之前看到购物车内商品的总价。既然有了总价，之后就有人在购物车中做了单个商品的促销活动，多个商品的组合促销，满减，满折，满赠，包邮，从而有了凑单功能，促使用户消费更多。有了多个商品的玩法之后，购物车也有了针对每个商品的操作，可以选择需要结算几件商品，删除商品，修改商品数量，修改商品子码，降价提醒。至此，线上的购物车从功能上来讲已经很接近现在大家在网上使用的购物车。
然而，用户不仅仅使用了设计上提供了的购物车功能，很多人把购物车当做收藏夹使用，可以了解降价促销信息，可以直接算出商品总价。更重要的是，购物车从购物流程上来讲，比收藏夹更接近购买成单。它更倾向于是一个给用户用来做最终购买决定的平台。所以用户在购物车中，需要确定好需要成单的商品，商品的尺寸，颜色，数量。同时，因为既然有人把购物车当收藏夹用，那么，购物车中的商品可能会是很久之前就已经加车了的商品。这时，在设计购物车的时候就需要清楚的显示商品的名称，用户所选择的颜色对应的商品图片，让用户不跳出购物车就能够确认自己要买的商品，进而促成成单。
网页迷你购物车
然而电商平台不会仅仅满足这么传统的购物车玩法，在网页端，又出现了一种迷你购物车的东西。在用户浏览电商网站的大多数页面，都可以通过鼠标悬停展开迷你购物车，并且有些电商平台可以通过迷你购物车直接进行结算。
这样做减少了购物流程中的步骤，购物车不是成单之前的必经页面了。同时，迷你购物车的出现似乎重现了线下推着购物车逛超市的场景：在挑选商品的同时，可以看到自己已经选中了的商品，可以对比已选的商品和当前看到的商品。那么迷你购物车应该在搜索列表页，分类页起到很大的作用，因为它重现了超市购物一边看一边选的使用场景。
但是，实际效果并没有那么好，使用率没有达到预期，通过迷你购物车直接结算的也没有达到预期。原因可能有几个：迷你购物车出现的区域不大，一次只能看到一小部分商品，并且出现的也不稳定（鼠标移走之后就会收起），所以它其实并没有真正的重现那个超市的购物场景，不能对比已选未选的商品；另外，它跟用户需要购买商品的品类也有关系，超市大多是食品，日常用品，一次大量购买多件，电商平台的商品非常多，有些像电子产品这类的并不需要迷你购物车，更适合直接下单购买。这里根据这些原因，可能可以这样做优化，在迷你购物车最有效的页面（搜索列表页，分类页），迷你购物车固定在这些页面的右侧，默认展开（Tesco的网站就是这么做的，虽然视觉效果不那么好，但是购物过程非常有超市的感觉），并且在用户浏览相关品类商品时，购物车内的类似商品稍作突出显示，方便用户对比查看。
曾经网页上的迷你购物车都集中在页面的右上角，鼠标悬停之后展开出现加车的商品。近几年，根据某国网站的设计影响，国内几大平台的购物车变成了从右侧展开。
这样做并没有解决上面的问题，鼠标移走之后购物车还是会自动收起。并且如果让用户画一个电商网站的草图，用户还是会把购物车放在页面的右上角。那为什么大家都这么做？因为当购物车呈现在页面右侧展开的时候，它已经不仅仅是购物车一个人在战斗了，右侧的展开边栏包括了用户账户的信息，收藏夹的功能，活动券的发放，甚至还可以做成一整个活动入口区域。实际上它已经是一个常用功能集中的操作区，利用购物车使用频繁的特性带动一些业务上要推动的需求，最终还是要促成更多的单量。
移动端购物车
电商平台APP的购物车是单独的一页，类似于网页上传统的购物车页面。近期流行的O2O，特别是点餐类的APP有了突破，出现了APP上的迷你购物车，选择需要的商品之后，迷你购物车从屏幕下方滑出。
它的下单流程和网页的迷你购物车不同。点餐APP上迷你购物车是下单路径的必经之路，但又不用单独跳转页面。它展示区域不大，也不能长期存贮加车的商品。那是因为其实它符合用户在餐厅点餐的场景，一个用户只在一个餐厅吃饭，每次不会点特别多的菜。所以每个购物车都是只针对一个商家，每次点餐也不会点特别多的商品，用户也不会把购物车当做收藏夹用。
点餐APP的购物车减少了用户下单的页面路径，但是由于不能跨店铺的加车，所以也没有在购物车中加入针对店铺的促销活动。电商APP的购物车因为页面的区域大，可以跨店铺结算，所以对于每个店铺，可以在购物车里做自己店铺内的促销活动。电商APP的购物车其实是店铺纬度的购物车。如果一个没有购物车的平台，只有活动促销的情况才需要多商品一起结算，提示促销信息，那其实可以做一个针对活动专属的购物车。这个购物车的纬度可以做成活动维度展示，想象一下所有商品是归类在一个活动下，而不是店铺，那么就可以给每个活动加上满减、满折、满赠这些促销提示。
线下购物车
线上的购物车经过大家的努力形式越来越多样，越来越适合不同的需求场景。其实我们也可以考虑一下线下超市的购物车是不是也能有科技的优势，也能提示购物车内商品的总价，显示促销的优惠，提示超市内商品的分类，自动录入购物清单，可以像平衡车一样踩在上面，或者自动跟在车主身后不用推着走，可以直接推回家有专人来家门口回收，可以全城公用不仅是属于某一个超市的小推车。购物车的体验不光是在线上可以持续的更新越做越好，同样可以用线上的思维来改造线下的体验。
总之，同一个功能性的模块可能会有不同的细化发展方向，可以根据不同的场景来订制设计，做到更好的体验。
原文地址：DDC
译者：彬彬
转载请注明：
灵智飞扬 » 购物车，不仅仅是购物车
登录收藏
学UI就上灵智飞扬！越努力，越幸运！
“灵智飞扬www.lingzhifeiyang.com ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。 ，给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
“APP截图站www.lingzhifeiyang.com” 海量APP截图，让你灵感爆发！国内最好的APP截图站。
“国内最棒的UI设计导航站” 专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
【灵智飞扬 原创文章 ，也可以找各个群的管理】
给灵智飞扬打气，加油 猛点这里 >>
本文来源：未知
