朴朴运营支撑系统模拟

朴朴是一个前置仓模式的线上超市，除了生鲜品类外，也有超市所销售的一应商品：美妆护肤、床品纺织等，自营配送，联络供应商来供给商品。
2019 年下半年开始在深圳扩张推广，由于成为了忠实用户，所以模拟了这个运营支撑系统，用来配置 app 前台内容，同时也列出了其他配合的系统的主干，但还没有落实为原型。大概的脑图如下，鉴于我并没有从事相关行业和设计相关系统的经验，当然还有很多没有考虑完全的内容，如广告位规划、涉及到营运分析的很多功能等。

朴朴系统脑图
以下是运营支撑系统模拟原型，全局参考了 Office UI Fabric 的交互规则。
使用 adobe XD 绘图，所有页面参考链接 https://xd.adobe.com/view/118c1e01-9a5f-41a1-7174-0cd3caf2e56a-67bd/ 只做出了最主要的逻辑功能，并没有细化到删除弹窗等细节交互。

零、登录和首页

扫码登录.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 商品维护 - 编辑商品.png

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

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

九、内容管理

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

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

以下是推送内容的管理。

内容管理 - 每日推送.png
推送链接到站内地址
推送链接至 H5 页面

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

内容管理 - 营销内容 – 添加背景.png
内容管理 - 营销内容 – 添加图片.png
添加商品时，根据所选的数量生成不同的排列格式

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

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

十、总结

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