购物车的设计逻辑
上周在微信群中有位同学提出了一个疑问，对于购物车的设计差异性究竟在哪里？是的，相较于其他的功能界面来说，购物车界面设计的确有些趋同。但这并不意味着没有研究它的意义，相反它可能会更加的重要。
只要是电商类产品，购物车这个功能一定是绕不开的，它可以说是电商类产品设计的标配功能。作为平台交易转化最重要的环节之一，每一个细节的调整可能都会带来数据的波动。
因此更需要我们对其有深入的思考、小心的求证。今天关于购物车的设计，我们从一个关于它的小故事开始。
Cart VS Bag
如果大家经常逛各类电商平台，应该发现对于购物车这个概念有些平台使用 Cart（购物车），而有些使用 Bag（购物袋）。
抛掉一些特殊案例，我们基本可以发现通常只有时尚、化妆品、配饰类的垂直电商平台会使用 Bag，比如 Zara 的独立客户端。
那么使用 Cart 和 Bag 各自会有什么差异呢？会对交易产生影响吗？美国有一个设计公司（Conversion Fanatics）在 2 年前借一次为客户进行设计改版的机会对这个问题进行了一次研究。
在改版过程中他们分别使用 Add to cart 和 Add to bag 进行了一次测试。结果令人惊讶，50:50 的流量分发测试下使用 Add to cart 对支付界面带来的 PV 比使用 Add to bag 居然高了 95.3% ，而其他各项数据也有非常明显的提升。
我们在前面提到过，购物车是电商平台交易转化最重要的环节之一，转化率的微弱提升都将会为平台带来巨大的利益。那么这些垂直电商平台为什么从一开始都选择了 Bag 来代替购物车呢？
Uxmovement 曾经有一篇文章探讨过这个问题。他们认为用户对 Bag 会有很多种不同的理解，如果用户是在一个卖包的平台上购物，他们认为 Add to bag 会让他们购买另外一个他们并不需要配饰。
而从心理层面来说，Cart 是一个帮忙用户收集想要购买的商品的容器，用户可以很随意的将商品放入或拿出，没有任何压力。而 Bag 会让用户觉得这些东西已经购买了，不能再改变主意了。
我们再回到前面测试中的对比数据，这也许这正好是一个特殊个案、也许这个数据样本量还不够大。但它其实给了我们一些很重要的信息：
- 用户对信息的理解往往有很多是我们并没有认知到的；
- 即使是很小的改动，也会对平台的整体漏斗带来很大的影响；
- 对于转化的核心链路的设计改变，我们是需要慎重的。
关于 Cart 和 Bag，Conversion Fanatics 并没有给出后续更多的跟进信息，更多的是抛出给大家一个去观察、理解用户的角度、观点。
用户对购物车的理解是什么？它为平台传递出哪些信息？如何去获得更大层面的成功？都是我们在购物车这个功能界面设计过程中需要去思考的问题。带着这些信息，我们来聊聊购物车的设计逻辑。
购物车解决什么问题
在前面 Pattern 划分的时候，购物车被归入到了业务类型。这也就是说它的设计是分层的，除了基础（default）的设计之外，我们还需要叠加上一层业务的特性，它最终的呈现也与业务有着很强的关系。
总的来说购物车是平台用于促进用户购买的一个功能模块。表面上来看它是用来暂存用户想要购买的商品，但更抽象一步来看它是用来桥接用户“逛”与“买”之间的间隙。而在这个间隙中，我们需要从最基础的功能角度出发，一步步的去放大购物车的价值。
上图中截取了 4 个不同平台的购物车界面。我们可以看到从左至右购物车界面的信息、功能的复杂度在一步步在递增。
如果我们仅仅从纯表现层面来看，有很多的设计我们很难去解释为什么需要？为什么要这么做？所以，我们需要先将购物车的设计做一个拆分，一部分是购物车这个模式所必须的，一部分是因为业务特性所附加的。
购物车基本框架
我们前面说过，对于一个有着明确定义、用户认知的功能模块，它的设计是需要具备一定的普适性的。也只有在这个基础之上我们才能先维持其对整个交易链路的基础保障。毕竟理念上过于超前的设计大部分用户可能都不会使用，这也将于我们的设计目标、业务目标相悖。
我们先将业务的部分抛开，一个最基础、常见的购物车界面可能会是如下图（Fancy）的样子。主要是对商品信息、价格、总价的展示以及 CTA。
如果我们在扩大一下范围，多找来几个不同产品的购物车界面叠加在一起拉一个透明度，你会发现一些每个购物车界面都会有的共同信息。比如商品标题、图片、数量、单价、总价、CTA…
因此我们可以通过这些“同类项”获得购物车界面的一个基础界面框架，也是购物车界面的基础配备。
用户们日常所接触到的购物车基本都包含这些元素、这样布局，当我们为一款新的产品设计购物车界面时，它应该成为我们开始的基础，以确保用户最小的学习成本、更高的效率。
从这个基础框架来看，购物车最基础需要解决的问题是告知用户想要购买的商品有哪些、什么规格、数量多少，以及整体的总价并引导进行支付操作。
满足了购物车界面的基础框架之后，它基本上就能够对用户在在线购物平台上进行购物的进行最基础的支持，顺利的完成购买行为。
但作为整个交易路径最为重要的环节之一，我们还需要通过设计将它的转化率进行不断的放大。这也就意味着我们需要对购物车界面进行一些“装饰”，让用户的购买意愿度、购买数量进一步的提升。
以上是 Design System 系列的第 11 期的节选内容，在接下来的全文内容中（付费部分）我们将从三个不同层面，通过几个实际案例的分析来进行购物车界面的进一步的设计拆解。
加入 PinDesign 会员，获取本期主题「购物车的设计逻辑」的全文内容及本系列前 2 期周刊的赠送，年付会员将获得 Design System 系列所有（01~10）文章的赠送。
Design System 是 PinDesign 周刊的一个新系列，基于「Design Systems」的理念对产品的系统性设计的经验总结。希望将自己的感受和经验分享给大家，辅助大家的阅读。
Design System 系列已更新：
点击下方链接，了解 PinDesign 会员计划详细信息：
