电商平台的商品价格管理的产品设计

前言

之前我们介绍过商品的 SPU 和 SKU 模式的区别，本篇我们通过实例的方式来介绍一下电商平台的商品价格管理该如何设计。

用户视角

我们从用户视角来看价格是怎么呈现。不管是淘宝还是京东，都是在用户操作完成加入购物车或结算时，用户主动选择了各个规格后才能确定最终价格。淘宝和京东在这一点上是一致的，而且二者进入到商品详情页时，都会默认选择一个能够确定价格的默认规格。细微差别在于京东切换规格时，因为选择的 SKU 发生变化，详情页也会更新，淘宝则不会。因此，我们可以看到从用户视角看，商品的价格是和商品的规格相关的。

商品价格的决定因素

商品价格会随着用户所选的规格变化，那么实际决定价格的是什么因素呢？我们会发现，实际是 SKU。不同的规格的选择过程其实就是确定 SKU 的过程。因此，一旦商品的 SKU 定了，那么商品的价格就不会改变了（不考虑优惠促销）。这样，我们的价格逻辑就非常清晰了，也就是通过不同的规格组合能够找到某个 SPU 下的 SKU，然后得到加购或下单时的商品价格。

产品设计

假定我们已经完成了 SPU 的设计，对于商品价格，我们需要设计两个模块，一个是规格管理，一个是商品价格管理。其中，规格管理其实就是定义 SPU 下的商品的个性化参数项，比如款式名称、颜色、尺寸、重量等等。不同类型商品的规格项不同，因此需要允许用户自定义规格项。

此外，规格也有主次之分，这块我们可以通过设置规格项的次序来解决，最重要的规格项排在最前面，例如颜色。下面是我们规格列表的一个产品原型。

规格设计完成之后，就是价格管理。价格管理实际上是定义 SKU 的规格项参数，因此实际是对 SKU 的管理。这里可以有两种设计方式，一个是先建立 SKU，然后再填写 SKU 的规格参数项；一种是先建立各个规格可用的参数项，然后再建立 SKU 时，从规格参数项中选择该 SKU 的对应的参数项。前一种方式存在权限是参数项的填写依赖于人为约定，可能会出现相同参数项命名不同的情况。后一种方式相当于预设了规格参数项，因此可以统一内部的可用规格参数项，更易于统一管理，缺点是更改任意一个参数项时都会影响到关联的 SKU，因此需要做好编辑和删除的业务约束。从管理的角度来说，推荐实用后一种方式。也就是除了规格管理之外，我们还有规格参数管理，也就是我们上面原型中的规格项管理。

规格参数项一般会包括名称、缩略图（可选）、排序号即可，缩略图是参数项会影响到商品外观。提供缩略图能够让用户在选择的规格的时候更直观地知道选择的商品的外观，典型的例子就是衣服的颜色这个规格一般都会提供相应颜色的缩略图。排序号一方面是便于推荐某个规格，另一方面是让规格更有序（比如可能需要按尺码从小到大排序）。下面是规格参数项列表的原型设计图，这里分别列举了颜色和尺码的两个不同类型的规格参数项。

确定了规格和规格项后，我们就可以建立 SKU，然后确定每个 SKU 的价格了，也就可以完成一件商品的价格设置了。下面是简化了的添加 SKU 的原型，实际上还会包括商品的标签、货号（对应仓库中的商品编号）、是否包邮、SKU 的详情（淘宝是共用，京东是单独的详情）。其中价格输入放到了规格相关的区域，这是方便将价格和选择的规格进行对照。

将一个 SPU 的各个 SKU 完善之后，商品的价格管理也就完成了。

前端展示

对于前端展示看我们的商品展示模式是按 SPU 还是按 SKU 展示。如果是 SPU 方式，那么在商品列表里展示的就是系统中的 SPU；如果是以 SKU 展示，那就是 SPU 下的 SKU。不论是 SPU 模式还是 SKU 模式，都可以选择对应 SPU 下的其他规格配置，不同之处在于选定 SKU 后要不要切换详情。

展示细节方面，一个是选择商品规格的时候如果有缩略图需要把缩略图一同展示。同时，选择一个规格后，如果有缩略图需要在弹出的规格弹窗里切换缩略图，以便让用户看得更清楚。下图是淘宝选择规格时的界面，可以看到淘宝的颜色规格支持小图和大图模式，大图模式的缩略图尺寸会更大。

另外一点，就是在没有完成全部规格选择的情况下，一般会展示一个价格范围，以便让用户知道这个商品的价格会随着所选规格变化。

总结

从本篇我们可以了解到，决定商品价格的因素是 SKU。从用户端展示来说，用户更习惯通过选择规格确定要购买的具体商品。而且，这种基于规格的方式能够将同一个 SPU 下的商品聚合起来，方便用户不跳转页面就能完成整个 SPU 系列商品的挑选，购物效率会更高。

在前端交互上，要基于 SPU、规格和规格项来确定具体商品的价格；而在后台业务逻辑上，需要先定义好规格、规格项，然后在定义 SKU 的时候配置该 SKU 的规格参数并设定价格来完成商品价格的管理。这也是前端用户视角和后端业务视角的不同，但从前端用户视角为起点来梳理，会更贴合用户的使用习惯，用户体验也会更好。