关于“立即购买”和“加入购物车”按钮的视觉关注度区别探讨

写这篇文章的原因是在知乎看到这个问题，然后思考后自己再整理的。
常理说【加入购物车】的优先级要低于【立即购买】，但在电商设计上却是相反，其中的逻辑是什么？

Web 无障碍指南（WCAG）对比度规范提出：
3:1 是 WCAG 2.0 1.4.3（AA级）下的“大规模”文本（18点或14点粗体或更大）的最小对比度；
4.5：1 是 WCAG 2.0 1.4.3 （AA级）下的正常尺寸文本的最小对比度；
7：1 是 WCAG 2.0 1.4.6（AAA级）下的常规文本的“增强”对比度。

我们应该保证文字与背景色对比度在 3.1:1以上，以保证文字清晰度。从淘宝应用的几个端中，可以看出“立即购买”与“加入购物车”按钮对比度有明显的差别，自然便造成了用户视觉关注度的不同。除了PC网页版，其他移动端（包括手机和平板）上面的“加入购物车”视觉聚焦关注度比“立即购买”弱。

五个客户按钮数据比较.png

“加入购物车”和“立即购买”的特性

购物车在电商应用中担当着一个无比重要的角色。针对买家，集中商品，方便对比挑选；保存商品，方便下次购买。卖家方面，则是提高客单价，方便进行库存管理，促销活动，会员策略，订单结算。
立即购买让目的性强的买家可以更快速下单。对于SKU数少，商品结构单一，用户订单数量无限接近1的商店卖家（只有某种明星产品，售卖大型家电、手机等贵重物品），立即购买无疑更快促成交易。

移动设备与PC的设备特性

移动设备屏幕面积小，应用更轻量，功能更精简。应用厂商希望能让用户更简单快速地完成任务。用户通常利用碎片化时间使用小体积设备进行浏览，例如通勤、吃饭时间等。
PC设备屏幕面积大，可操作性强，用户能够使用更多次级功能，能同时执行多个任务。使用场景通常通常是空间时间趋于稳定的场景，像办公室，家中。
当处于移动端的时候，用户使用碎片化时间进行购物，突出“立即购买”，有利于促进成交。
而在PC端，鉴于用户的使用环境，购物思考时间更长，做的决定更多，更容易出现大的客单价订单，突出“加入购物车”也让此情景下的买家购物更方便，卖家获利更多。结合线下的场景进行分析，便是在路边便利店和大型超市购物的行为区别。便利店由于空间小，距离短，顾客习惯拿起一瓶水直接结账，而在大超市，购物环境十分适合用户做大采购，所以购物车成为必不可少的角色。

结合电商产品特性思考

作为电商平台，促成用户买买买是最主要的任务，移动端突出“立即购买”，让用户快速做决定，购完即走；PC端则让用户更方便地进行量多购买，让“加入购物车”更突出，方便参与优惠促销活动。

其他

不过不得不提的是，平板的使用环境跟PC有点相似，也是一个比较安稳的环境。用户通常在家中的沙发、床，并打算进行相对较长时间的娱乐休息活动。但是用户在平板购物的交互方式与手机类似，所以可能操作难易程度是考虑两个按钮视觉优先级的其中一个比较重要的因素。

团队还可以直接使用 A/B Test 的测试结果，追踪不同设计方案的转化效果，直接选择更优的的方案。
但当团队公司产品出于萌芽期，不具备有效测试资源，如：成熟的用户群体、稳定的产品功能，我们则要认真了解产品价值，用户需求，推导出能设计范围内的最适合方案。

写这篇文章时随机问了一位朋友，说道：如果这两个按钮在手机上，你觉得哪个重要点，她说当然是“加入购物车”，因为用手机逛淘宝时不能看得太仔细，但大体看得出商品好坏，但又不能马上下决定购买，所以加入购物车选项更重要。我自己用手机逛淘宝更多是使用收藏功能，打算日后再买。

这与移动端加强“立即购买”的做法反而有些不一样，就是加强的不是我想要的。（其实很可能只是我和朋友嘴上说：“不要~不要！”，其实身体很诚实）这只是个别的例子，不具备说服力，但可以从侧面看出，不管你把手机淘宝看成《商品价钱行情本》、“购物欲缓解器”、《万年遗愿清不了单》还是“速买速决小助手”，他的核心还是想要促成交易，买买买！

设计不只关乎美观，也关乎其市场相关性以及设计结果所产生的意义。
——《Design in Tech Reports 2017》

适当时候，QJ你的用户.png

下次想按钮颜色时，多想想怎么帮老板赚钱，也许就能做出决定了呢。