电商网站购物车页“加入购物车”按钮的设计

最近在做电商网站ＰＣ端购物车页推荐模块的优化设计，具体的产品形态不便细说，然而在设计的过程中却牵扯出一个重要...



最近在做电商网站ＰＣ端购物车页推荐模块的优化设计，具体的产品形态不便细说，然而在设计的过程中却牵扯出一个重要的问题，主要矛盾的源头在于我想为推荐商品增加“加入购物车按钮”。

起初，想得很简单，心想着加了这个按钮，我只要考虑这个动作触发的结果：成功或者失败，给个提示就完了。（因为购物车页有个模块，我的收藏，原先就有这个按钮，而且很顺利的能够完成这个动作，我可以直接拿过来用，心里窃喜。其实它缺乏反馈，这我就不吐槽了……）

大家都知道，对于电商类商品，它会有很多商品属性或者参数规格，以体现商品的多样性，那么如何将商品属性展现在用户面前就是加入购物车动作触发后或者触发前要考虑的问题。正是因为这个原因，才让我不得不对“加入购物车”按钮的设计深究。

通过对各个电商平台在购物车页该按钮设计的分析与比较，选择最合理的最人性化的设计方案。

１.亚马逊：将加入购物车这个功能拆分为：“查看所有购买选项按钮”（需要选择商品属性的商品），点击进入目标商品的详情页面；“直接加入购物车按钮”（不需要选择商品属性的商品，如图书）。



优点：通过按钮文案的不同提示用户他们的不同，长时间使用用户很容易习得；缺点：难免会让用户疑惑。

２.淘宝

点击完加入购物车，会出现一个浮层，让你选择商品属性和数量。



优点：符合人的习惯和任务流程，商品选择自由度高；缺点：交互流程笨重复杂。

３.苏宁易购

在列表页直接展示具体的商品属性，如具体到“蓝绿色，Ｌ号”等。一键添加至购物车。

优点：操作简便，方便用户；缺点：商品选择的自由度较低；容易错买。



关于点击按钮之后的交互逻辑以及页面展现样式的思考，再加上现实中用户场景的浮现，一系列的问题在围绕着我：如果我想选择商品数量怎么办？我想换个颜色怎么办？我想换个号呢……这些问题帮助我找出最符合购物车设计的交互逻辑。

我已经ｇｅｔ到了，你呢……

    关注 成长中的PM