电商PM成长记|内容管理篇（5）

封面

先普及一个概念，CMS。CMS是"Content Management System"的缩写，意为"内容管理系统"。

一、什么是电商的CMS

兑吧提供的样式

对绝大多数用户来说，早在当年非主流的时代，我们就已经接触这方面的系统了，最典型的代表就是QQ空间。QQ空间里面，你可以购买黄钻，对自己的空间进行装修，其实就是利用CMS系统对网页的界面进行管理。

而在电商的领域里面，最初级的CMS管理就是对首页进行一个内容显示模块的管理。上图就是从兑吧后台上截图一些它能提供的样式。

1.1为什么有这样的系统

因为兑吧是一个积分商城API模块的专业解决方案提供方，许多APP不需要自己开发一个积分商城，而是直接对接了他们提供的服务，比如说：饿了么、新浪新闻、蜻蜓FM.....

统一解决方案里面的元素就是这么多，但为了不让用户感知出来他们接的是第三方的服务，那么肯定要在UI上做一系列的调整让人觉得自己APP的积分商城模块与别人是有所区别的，所以CMS模块应运而生。

二、CMS是怎么实现内容管理的

2.1开发层面

实现原理

在CMS最底层的层级，是一个个独特的样式。比如一个前端能看见的方框、圆形等等。组件则是通过这些最基础的前端样式组成的：图片轮播、商品列表、优惠券.......当我们有了组件以后，我们通过把这个组件配上我们专门的数据（内容），设置好显示的位置，多个组件就能组成一个页面。

也就是说，从开发实现的角度来说，我们是由小的环节逐步拼接变成一个大的环节，而对于用户操作层面则是相反。

2.2操作层面

操作步骤

为什么要这么设计操作步骤？因为用户一般考虑问题会从大局进行考虑，也就是表象。那么表象的第一点就是首页的皮肤（UI），光是有皮肤那可不行，还要有具体的内容，所以就会有楼层配置（内容+位置），那么楼层里面是什么东西，跳转以后是什么，因此还需要页面内容配置，以这三个步骤进行划分，小白用户也能简单上手，不会因为系统太复杂而被吓跑。

2.3常见基础组件

常见组件

三、CMS后台设计

3.1设计思路

这里只需要只提2点：

（1）后台设计简单，则前端页面能自定义的地方就没有这么多；后台设计复杂，则前端自定义化更高。

（2）所见即所得。后台要有一个区域可以模拟前端显示的效果，否则用户不知道自己的布局排版到底好不好看。

3.2简单版

这里拿兑吧的CMS进行举例子，第一个就是选主题色，选界面风格。这里的界面皮肤对于后台实现来说就是一个html文件，当我要增加一个皮肤，那么我需要上传一个html文件，并且上传一个缩略图。下图看到的皮肤图片其实就是一个缩略图。

皮肤设置

所谓首页楼层配置，就是将一些用户有可能常用的组件固化下来，就像我在上文提到的那些。兑吧作为一个积分商城服务提供商 ，那么它提供的全套服务不一定所有用户在接的时候都会用到。而如果是一个自建商城，有可能是通过A/Btest,数据分析等手段发现这些功能并不受欢迎，于是对界面重新布局优化。

首页楼层配置

页面内容配置在这里来说就比较繁琐了。从下图可以看见兑吧的后台是分三个操作模块的。也就是说我选了一个组件以后，组件信息向左折叠收起，然后出现编辑组件内容的区域，和编辑组件详情的区域。这一点的交互设计值得我们产品经理进行借鉴。

这一块从逻辑上来说也比较复杂，因为不同的组件对应的内容是不一样的，不同的内容所要进行的编辑模式应该也是不一样的，这里需要根据具体商城的业务需求进行设计，就不展开分析了。

页面内容配置

3.3复杂版

提到电商后台内容管理模块的复杂设计，不得不提的就是有赞的服务。

自定义的程度简直丧心病狂，这里不得不佩服有赞团队在电商领域开发的实力。

导航样式自定义

广告模块自定义

整个页面的自定义

有赞一键配置全局的广告，而广告即可以内模块跳转又可以进行外部链接，简直就是一个缩小版的APP广告系统模块了。还可以进行页面的自定义，自定义的内容就像上图截图那样，种类十分多。

但最厉害的还是有赞的魔方。所谓魔方：在规定的布局类根据像素位置进行页面布局，每一个像素块放置的图片和跳转的地方都是不一样的。

当然了，有赞这种复杂的功能一般也只有大型的电商团队才会使用，如果是小型团队，或者电商不是主营业务的，根本不会使用这么复杂的功能。

Reference

1.图片来源：兑吧后台、有赞后台

---

浅忆

一个年轻的产品经理。立足微信生态圈，熟悉公众号平台、开放平台，探索小程序相关业务领域ing.....

转载联系，学习交流请加微信：Albert__luo（两个_)