有赞电商设计总结01-商品管理

作为初次结束电商的产品小白，当遇见有赞的时候，瞬间觉得整个世界都明亮起来了，非常喜欢这样清晰干净的电商逻辑。

电商后台功能结构

有赞商品管理模块的核心功能主要包括添加商品和商品分组管理2个部分，另外，为了吸引成熟商家的入住，提供天猫京东淘宝商品的一站式导入工具和教程。这个做法和《增长黑客》里面提到的Airbnb初始借助其他平台同步房源信息的做法一样，在获客方面具有强优势。

1. 添加商品

添加商品主表字段

在添加商品这个环节处理最好的包括商品类型的定义、规格与库存的管理，以及要求留言部分的可配置性设计。

1.1 商品类型

商品类型包括实物商品，虚拟商品和电子卡券，在处理流程上存在差异。采用虚拟商品不允许加入购物车，实物商品可以加入购物车的做法，极大的简化了购物车逻辑，从而在管理收货地址、处理订单方面都完成了相应的简化。

实物商品与虚拟商品

1.2 规格与库存

在后台规格与库存管理模块，通过灵活的交互操作融合了有规格商品和无规格商品操作方式。

01 后台规格未编辑状态 02 点击“添加规格项目”

添加规格项目分为选择或添加规格类型、添加规格名称、添加规格图片3个步骤。这几个细节的微交互设计都很赞。

02-1 输入搜索，如果没有则显示带下划线的文字，选中后作为规格类型

规格项的添加也采用了标签项的搜索/添加方式，对于已经内置的规格类型具有推荐的规格项，可以选择，如果没有则可以直接输入，输入后的内容出现在下拉框中，选择后则展示位标签样式，支持一次输入多个值。

这一套“下拉菜单-搜索-标签添加-标签编辑-标签删除-标签选择”构成了一组专业的交互插件，在其他地方如商品分组选择等位置都有非常好的应用。【交互操作标准化/插件化】

02-2 添加规格项的名称 02-3 批量添加规格项，同步添加商品库存列表 02-4 商品库存各项设计

如果该商品具有多规格，则总库存不可填写，默认为多规格库存总量；商品价格不可输入，默认为规格商品中的最低值。【注意关联逻辑的处理】

设置完成后，用户在将商品加入购物车或者立即下单前则需要先选择商品规格，如下图所示。

03 客户选择商品规格 04 管理在后台订单页面查看客户所选商品规格

1.3 要求留言

可以在商品加入购物车或者提交订单前填写必要信息，在后台添加商品-编辑基本信息页面可以进行设置。设置完成后客户在将商品加入购物车或立即购买前需要先填写商品留言，填写完成后在提交订单页面，或者订单详情页面可以查看留言。管理员可以在后台订单详情页查看单商品的留言，从而完成信息交互的闭环。

01 管理员在店铺后台设置要求留言的选项、格式和是否必填 02 客户将商品加入购物车或提交订单前，需要先填写留言信息 03 客户填写完成后，可以在订单页面点击“查看留言” 04 管理员在后台订单详情页面可以看到该商品的留言

2. 商品分组管理

商品分组最大的特征就是摒弃了原有的层级结构的模式，避开了n层级的复杂关系，使用扁平化的标签体系来进行管理，结合一个商品可以同属于多个分类标签，再加上灵活的页面配置（微页面的各种位置都可以选择链接到某一类标签，或者自己设置标签导航），满足了绝大多数商家的展示需求。

在商品分组中，有默认3组分类是无法删除的：最热商品（根据平台规则）、最新商品、在列表中隐藏。这三类列表满足了店主的通用性需求，可以非常快速的构建一个可展示的、动态的商品清单。

另外，有一个非常方便的功能：对于每一个分类，都可以设置该分类下内容的布局样式，从而解决了内容页面千篇一律的问题。在微页面分组中也采用的同样的处理。【交互的一致性将减少设计+开发一致性】

设置分组内容的页面展示样式

3. 商品列表

整个后台第一样吸引我的就是列表页面的布局，承认自己比较土，之前之后一行一列一数据的列表模式，看了这个一格多数据的布局，真心眼前一亮。表头行高42px，表内容行高80px，封面图片60*60px。

商品名称默认显示2行，价格放在商品名称下面，正好与封面大小一致，显得布局精致

访客数和浏览量放在一格，方便进行数据对比

创建时间分为2行，与其他列对齐感处理的不错

列表页面的信息精炼，竟然能满足主要数据观测需求，所以也需要审视平时那种一长串的数据表是不是真有价值

商品列表