朴朴是一个前置仓模式的线上超市，除了生鲜品类外，也有超市所销售的一应商品：美妆护肤、床品纺织等，自营配送，联络供应商来供给商品。
2019 年下半年开始在深圳扩张推广，由于成为了忠实用户，所以模拟了这个运营支撑系统，用来 app 运营人员来配置 app 前台内容，也就是不接触门店具体业务的人员。鉴于朴朴有福州、厦门、深圳三个城市的业务，这个系统我认为应该是归为城市级别，也就是每个城市的运营进入系统前选择城市，去配置对应城市的 app 内容。
同时也列出了其他配合的系统的主干，但还没有落实为原型。大概的脑图如下，鉴于我并没有从事相关行业和设计相关系统的经验，当然还有很多没有考虑完全的内容，如广告位规划、涉及到营运分析的很多功能等，另外由于没有业务指导，所以没有划分出审核等权限相关的功能，根据业务需求，可能会在运营人员编辑发布之后提交审核，也就是为内容增加状态，为系统增加角色。

朴朴系统脑图

零、登录和首页

扫码登录.png

账号登录.png

首页.png

一、banner

首先是 app 截图。

banner

首页 – banner

banner 部分顶部展示出当前应用的 banner，可以拖动排序。

首页 – 编辑 banner – 重复日期.png

在创建 banner 时可以区分不同的位置，同样在创建后也可以拖拽进行修改位置。点击应用即可快速修改在该 banner 位应用的图片。
鉴于朴朴有固定的运营日，如周三大放价，周四美妆日，使用的多是同一 banner，而邀请好友的 banner 长期每日重复在同一 banner 位，所以配置时提供了重复日期或频率的功能。

在跳转链接这里，为方便开发和配置人员，跳转链接配置时增加跳转类型字段，来区分搜索词、站内链接、SKU、菜谱等各类链接，选择后只输入对应的 ID 即可。

二、类目导航和次级类目导航

这个模块是朴朴固定的区域，为了方便增加了可以修改位置和内容的功能。采用列出所有类目，只需拖动修改的方式。

首页 – 次级类目导航 – 编辑.png

首页 – 类目导航 – 编辑.png

三、小导航

这个区域是朴朴首页内置的导航，用来切换精选模块和其他的商品列表，此功能用来调整导航内容和顺序，在列表中拖拽可以排序。

首页 – 导航栏 – 编辑-新增.png

四、商品专题

我认为归根结底，电商中这些令人眼花缭乱的模块、不同的名称，都是用同一种方式把不同的商品组合成不同的专题呈现给顾客。
传统的逛超市模式可能是直奔自己想要的商品区域，挑选购买然后结账，或者沿着品类的货架一路逛过去。那么线上电商则是可以通过不同的主题组合，让用户可以触达更多的商品，对于商品的购买有更多的选择和思考，朴朴中的种种专题就是这样的方式。
所以首页可见的所有模块都可认为是由以下字段组成：标题、背景图片、不同的排列方式（横向/纵向）、不同的商品展示数量，以及不同的商品。因此我把商品专题抽象出来，并在创建以后赋予 ID，可以在任意模块引用。
当然也有部分特殊的模块，如抢购、折扣模块，还有一些看起来比较固定的模块，只是细节上的一些不同，总的来说也还是商品专题的模式。

商品专题.png

商品专题 – 新建/编辑（为方便查看专题中是否有失效商品（暂时定义为无库存商品），增加筛选项）

搜索商品时，可以多次筛选，所选中内容会保存在已选择的商品区域

对于抢购商品，由于对业务的不了解，所以不确定每日抢购应该由 app 运营端配置还是由门店配置，也就是粗略定位在 ERP 系统中，页面如下。

当前有五个场次，可进行时间和是否应用的编辑

该页面列出所有未开始的和已完结的抢购，单独列出未开始的抢购方便编辑.png

该页面是抢购的编辑页面，抢购价格认为应当是门店编辑，所以不可修改

因为抢购每天五场，定时开始，所以增加了提醒，避免运营人员少配置了某场抢购影响运营。

五、首页模块配置

首页的种种模块基本上都是引用了不同的商品专题或一些固定模块来配置的，有细微的差别可以在配置时区分调整。
使用类似原型创作的直观方案，可以直接预览配置后的效果，避免误差，可以拖拽排序模块。

操作中，增加拷贝功能，因为时常只是修改个别模块，避免需要从头开始配置

首页配置.png

编辑商品专题配置

这里可以根据业务需求更加抽象为添加图片和热区，配置不同的跳转类型和链接，当前使用感受业务类型比较单一，所以固定为当前的几个类别。

六、消息

当前主要有两种类型的消息：弹屏消息和首页滚动消息。
思路同样是配置图文、跳转类型和链接

通知消息 - 弹屏 – 编辑-新建.png

通知消息 - 滚动 – 编辑.png

七、搜索管理

搜索热词

搜索方面主要是管理搜索框下热词，搜索框热词，搜索展开后的热搜词汇，以及关联搜索词，权重字段用来控制出现频次。

搜索管理 - 热词管理 – 新增/编辑.png

关联搜索词的作用是，比如在搜索鲍鱼时，也会同步推送皮皮虾、鲈鱼等产品。
同时这个字段也可以在编辑商品时双向维护。

搜索管理 - 关联词管理.png

搜索管理 - 关联词管理 – 新增.png

八、商品管理

此处的商品管理主要是在门店录入商品信息的基础上进行编辑，增加图文描述、菜谱关联等。
品类的管理也主要是配置图片、banner 等。

分类导航

商品维护 - 类目编辑.png

2020/04/09 修改，多了解了一些电商类目的内容，知道了为方便销售前后台类目应该分开设定，因此在这里将前台用于营销的类目放在这里编辑，来和后台的用于商品/库存管理的类目进行映射。

商品维护 - 编辑商品.png

由于认为门店只是录入商品的基础信息，不能上架 app 进行销售，所以单独列出列表”待编辑商品“，即门店录入的新品，等待 app 运营编辑后才可以在 app 上架。

商品维护 - 商品 – 待编辑商品.png

九、内容管理

此处对菜谱、每日推送、站内 Q&A 进行内容的维护，其中由于观察当前业务，营销内容暂时只出现在每日推送中，根据业务需求可以将推送功能和其内容编辑独立出来，将 H5 页面供全站调用。

菜谱

内容管理 - 菜谱 – 新增-编辑.png

内容管理 - 菜谱.png

以下是推送内容的管理。

内容管理 - 每日推送.png

推送链接到站内地址

推送链接至 H5 页面

推送的内容创作可以自由添加背景、图片、商品、专题等，思路和配置首页一致。

内容管理 - 营销内容 – 添加背景.png

内容管理 - 营销内容 – 添加图片.png

添加商品时，根据所选的数量生成不同的排列格式

以下是 Q&A 的配置，虽然此内容变化较少，但由于功能简单方便，所以也放在配置内容中。

Q&A

内容管理 - 帮助与反馈.png

内容管理 - 帮助与反馈 – 编辑问题.png

十、总结

由于没有接触过此业务类型，所以设想的很多功能可能都比较浮于表面，同时也在做的过程中不断的有对功能的梳理，如跳转类型、抽象商品专题都是开始着手后才理清的。后续应该在使用 app 的过程中还会根据变化来优化作为练习，同时下一步打算试着做一下 CRM 和 ERP 系统，对我来说也是没做过的挑战～

同系列订单系统：https://www.jianshu.com/p/e8070184de81
客服系统：https://www.jianshu.com/p/0f5f22a61428