移动电子商务基本技能:购物车设计(一)
浏览:247 时间:2020-2-21

本文分享了电子商务产品购物车设计的一些经验和经验,希望能为您带来一些教训。

本文的目的:

参考主流电子商务,结合工作经验总结您的购物车原型组件库,您将来无法重复轮子和踩踏。我想制作一个《移动端购物车设计“小”全》,列举我的实践中常见的逻辑,功能,组件和交互,但我必须改变实际工作中的交易,否则它太麻烦了。

文章结构:

明确目的:购物车功能

快速入门:常见原型组件

数据监控:如何提高转换率

更多问题:离线购物车,空页设计等

文本

一,明确目的:购物车功能

1.为什么用户使用购物车

临时存储,如双十一的开始等;

批量结算;

收藏,没有决定购买,看到好手添加;

对比,将同类产品进行比较。

2.购物车在商家中的角色

易于管理订单和交货。如果没有购物车,一件物品只有一个订单,据说这是淘宝在初期经历的痛苦。

针对上述用户需求的指导消费。例如,如果它用于临时存储,它会提醒库存焦虑;如果用于批量结算,它将通知完全还原活动然后补偿;如果用于收集,它将显示货物的降价;如果它用于比较,只需再次推荐它。 “猜猜你喜欢什么”。但毕竟,我们不知道为什么用户一次只使用购物车,所以我会在这个简单的页面上显示如此多的信息。但我们至少了解自己:产品是否小巧精致,大而完整,用户习惯于订购或购物,产品价格高,SKU丰富,销售电器或销售水果… …定位决策功能,该功能决定了元素,在设计时明确目标是很自然的。

记录用户偏好数据。通过记录用户放入购物车的项目,可以收集数据以分析用户支出偏好。第4部分将被提及。

第二,快速入门:常用的原型组件

为了逻辑起见,我将购物车中的组件分为三个级别:页面级别,内部级别和商品级别。

电子商务通常根据仓库拆解货物,购物车中的货物可以从一个仓库运输。三级组件应用于整个页面,购物车中的所有商品以及特定产品的组件。三个抽象原型如下所示,后跟一个数字:

(图1三级抽象原型)

…………以下页面级别的组件编号为1-10…………

(图2页面级抽象原型)

1.页面标题

通常,它是“购物车(XX)”,括号中的XX是指此页面上的SKU数量,即用户已添加到购物车的SKU数量。购物车页面在页面标题,购物车图标和结帐按钮上有三个相似的数字。但这三者背后的逻辑是不同的。

(图3,三兄弟的数量)

页面标题数:指已添加到购物车的SKU总数,即项目ID的计数。

购物车图标上的红圈数字:指已添加到购物车的商品数量,即不计算商品ID的数量。红色圆圈编号的目的是通知用户其他页面上的购物车中有多少项目。消费者通常没有SKU的概念。他们容易理解的逻辑是+1位+ 1——这两个项目是否是一个SKU。相反,如果红色圆圈编号显示已添加的SKU数量,则会出现网易考拉的问题:点击产品详细信息页面中的同一产品,无论点击次数如何,该数字都不会改变。

结算按钮的编号:是指已选择的SKU的数量(项目ID是分隔的),或者是所选项目的数量(不计算项目ID)。

建议不要将这三个合理的数字同时显示在一个页面上,并且可以根据喜好进行选择。

2.批次管理按钮

单击后,所有项目都将进入可编辑状态。几家主要的电子商务公司可以分批执行不同的操作,包括规格,添加和删除,删除和集合的更改。

3.页面顶部的公告

通知购物车密切相关的信息,支持跳转到其他页面或关闭公告。格式可以是图片或字符串,但个人倾向于图片,因为显示效果是可控的(不可莫名),也可以制成动画。这个位置的内容必须与结算过程密切相关,否则很容易增加跳跃,特别是对于购物车重量轻的产品,他们的购物车只是浏览和结算过程,不像淘宝购物大车。它被许多人视为最爱。在这种情况下,最重要的是用户顺利订购。

(图4页面公告位)

4.送货地址

非必要因素,因为此信息可以放在下一个订单确认页面上。但也有主流产品将被放置在购物车页面上,无论是否查看数据。如果你想把它,你不需要显示详细的地址。只需拦截县级,用户就可以了解是否要更改它。

5.智能推荐区域

已成为电子商标的主流。如果它是一个无法做大数据的小项目,根据一定的规则,可以在用户按照一定的规则进行结算之前重新推销产品,但风险在于产品不足以使用户甚至想买它。如果您购买它,您需要在需要快速下订单时谨慎。还可以制作具有运输阈值的低成本单一销售区域。

6.toast提示

通常,它是完全或完全减少的提示,在用户选择某些产品之后,如果不满足要约,则提示用户是否满足优惠条件。该组件功能便于从用户的角度参与促销活动和订单,并且有利于从商家的角度提高客户单价。一个更典型的例子是饥饿梯子的吐司暗示。

(图5步骤式全面减少吐司)

7.选择所有组件

此组件的目的是选择要结算的项目。商品选择也有三个层次,即:

页面级别——可以在所选页面中结算。有时购物车中的商品无法结算(例如库存不足),并且无法选择此商品。另请注意,如果未选中某个项目,则还会自动取消选择以下全选按钮,因为并非选择了页面中的所有可用项目,并且组件状态应与逻辑一致。

车内水平——所有在这辆车上选中的商品都可以结算;其他逻辑和页面级别是一致的。

商品水平——检查项目,如果项目尚未结算(例如非销售),则该按钮应显示为灰色且不可点击。

应从正常车上取下库存不足(可销售量低于推车数量)的商品,并沉入页面底部,指出失败的原因并允许大量拆卸。如果用户不清除,请在放养后返回原车。

8.总计

此处显示项目金额减去折扣,如果可能有额外费用(运费,税金等),请通过简短的副本告知我们。

9.结算按钮

括号中的数字是指要结算的SKU数量或项目数量。项目1已经说过,不再重复。

10.底部导航

在电子商务中,它通常是整个产品的第一级导航。购物车图标不一定位于底部,但也可以在标题栏中显示。

…………以下是11-14号内部组件…………

(图6汽车级抽象原型)

11.选择所有购物车项目

项目7已经说过,不再重复。

12.购物车标题

它可以是仓库名称,商店名称等。

13.优惠券

当有可用于收集的优惠券时,引导用户接收适用于汽车的优惠券。推荐的弹出窗体。

14.车载声明

用于通知适用于此车辆的所有物品,该位置可以位于购物车标题下的所有项目上,也可以位于所有项目下。

…………以下是15-20商品级组件…………

(图7抽象原型商业级)

15.产品标签

可以用2-5个单词表达清晰的内容。

16.价格显示

如果有降价,最好显示前后比较,通过显示该行的价格或直接计算降价(“已下降X元”)。但有一个问题。假设两种商品,价格分别为1元和1000元,价格降低0.5元。你想强调前后的价格比较吗?个人认为必须展示1元,但1000元是最好的。显示,否则看起来太吝啬了。我的方法被定义为降价量< x元,或p=''y值根据其大部分产品的价格范围确定。 ≪=''降价金额小于原价比较价格的y%未显示。 X='' >

17.更多信息

需要用一个句子表达的信息比标签更明显。

(图8补充信息词表达)

18.左侧幻灯片编辑

通常向左滑动删除,还有电子商务协会加上收藏和“看起来类似”的“rdquo;”。

删除产品后,如果您有备用电源,可以尝试给用户“忏悔药”,如下图所示。

(图9:删除产品后的悔改)

19.相同的属性产品集合

有时甚至在汽车中,只有一些产品可以参加特定的活动。逐个标记标签当然是减少用户麻烦的一种方法,但如果涉及或减少X元素Y,则将活动项目放在一起可以更好地增加用户体验。典型商品如网易考拉。

(图10活动产品收集)

此方法还可用于集中预售和过期商品。这两个目前尚未解决的商品,要明确告知用户,如通过集中显示,更改背景颜色,按钮灰色不可选。密集型商品也可用于提醒用户尽快安装“库存紧”的副本。

本文最初由@羊双发表。未经许可,禁止复制。

该地图来自的,基于CC0协议