电商后台产品设计：页面动态配置（CMS系统）（一）

这两天3.8妇女节，各大电商又开始不断推出促销活动，借势营销。电商平台仿佛不愿意放过任一个可以作为营销话题的日子，不断推陈出新。经过10多年的电商经验积累，现在做起活动来游刃有余，丰富多样。

下图是我从淘宝、京东上取的两个活动页面，可以看出页面自定义程度很高，美观大方。另一种叫法叫做店铺装修或页面配置，那么问题来了， 这样一个自定义页面怎么配置？怎样通过系统化的方式实现页面动态配置。

由于页面动态配置的内容较多，所以打算分两篇长文介绍，第一篇先讲页面动态配置的整体产品逻辑，第二篇详细描述各组件的功能，一直到组装之后的解析。

页面动态配置是CMS系统（内容管理系统）的一部分，在电商行业，CMS系统有时会局限用作页面动态配置的功能。有时也叫作“ 装修 ”，店铺装修、页面装修、自定义新页面。平台见到的首页管理和新建活动页面都属于此类范畴。

在PC电商时代，页面的自定义比作盖楼，添加一个楼层，每层可以自定义内容，譬如商品、优惠券、商品排名等。“淘宝旺铺“就是店铺装修发展出来的一门生意，淘宝店家可以选择基础模块的内容，编辑首页或新建页面，动态配置页面。

可以把页面的动态配置比作乐高玩具，每一个组件就像乐高积木，可以用它搭建不同的乐高玩具，就类似组装成不同的动态页面。我将页面的动态配置分为3步：组件→ 位置+内容 → 动态页面，如下图。

2.1 基础组件

组件是动态页面的基础，提供给用户编辑具体展示的信息。有许多类型的组件：图片轮播、ICON、优惠券等，每种组件都可以有多个不同的样式，选择内部展示的内容或者自定义。用的最常见的就是链接，组件显示样式虽然多样，但是点击之后通往的页面选择库却是共通的。例如：新的活动页面、商品详情页、商品聚合页、购物车、客服等等。

基础组件的定义和解析是自定义页面的核心，不同的组件有不同的功能，表示不同类型的内容。每个组件都需要单独设计，定义其规则和样式。 例如ICON、图片轮播就是简单的图片展示，商品排名对应的算法较为复杂，需要实时去取动态排名。

2.2 位置+内容

有了组件之后，用户在设置或者系统在解析的时候，首先要确定组件在自定义页面中的位置。位置可以称为“楼层”，每个页面的各楼层可以定义名称、设置背景、配置内容，目前最主流的交互是拖动组件到相应的位置，设置内容之后实时预览，自定义页面动态可视化。

2.3 动态页面

对于整个动态页面，需要定义生效时间、结束时间、活动页面名称等基础信息。设置之后可生成相应的链接进行预览。

动态页面是由不同的组件内容构成，首先按照各组件位置去解析，然后再去解析组件的内容（样式、图片/商品、背景、链接等）。按照上图的反向流程走，就能解析出对应的自定义页面内容。

首页设置也是相同，类似自定义页面，可动态设置首页内容，动态添加自定义组件。目前绝大部分电商首页都是动态配置，有着丰富的自定义内容。

配置组件有许多种，常见的图片轮播、 商品推荐、商品分类、 宝贝排行、图标（ICON）这几种形式，其实是富文本、 客服、优惠券、满减活动、满赠活动、自定义区域、商品搜索、文字、公告、倒计时、Tab组件（顶部、底部）。

丰富的自定义组件可以实现各式各样的活动页面，前面举例的京东、淘宝活动页都是通过CMS配置实现。

至于不同的组件设计和功能，下篇再详细讲解。

组件之间有些通用的自定义要素:

页面动态配置的整体产品逻辑基本已经介绍完毕，可以了解到，页面动态配置看似复杂，理顺之后发现其实就分为三个步骤，绝大部分的复杂度增加只是基础配置组件的丰富。

虽然CMS系统产品逻辑简单，但是页面要做到较高的自定义配置程度，需要技术框架的高效率和较强的可扩展性。在浏览一个自定义页面时，系统要逐步去解析该页面下的自定义组件内容和要素，运算量很大。

目前绝大部门电商公司的自定义页面仅仅停留在一个初级阶段，限于首页和少数特殊页面的自定义配置，而且自定义程度较低。本文提供了CMS系统的产品设计思路，落到实际项目中，还需要权衡实际需求和自定义配置程度之间的关系。

先说下背景，目前供职于一家全国性股份制银行，负责xyk产品研发及移动互联网渠道建设。

近年来，xyk市场一片火热，各家银行都争相发行自己的xyk，以巩固及发展自己的零售客户，伴随着花呗借呗（支付宝）、白条（京东金融）、微粒贷（腾讯）等互联网消费金融的崛起，消费金融战场已经成一片红海，斗得不可开交。外加近日，不良借贷、青少年裸贷、暴力催收等恶性事件层出不穷，传统借贷洗牌在即，互联网借贷也必将斩断一些玩家的魔爪。

话说回来，互金领域，除现金流很大、有固定资产的客户，各个金融机构互相争抢外，有两部分客群传统传统金融机构一直处理不好，也实现现在互金发掘的方向：

第1个客群之所以是问题，就是因为大部分银行都不会给这部分客户授信，是政策层面的问题，暂无法很好解决；第2个客群其实就是目前银行等互联网机构主要发力的点——引导用户使用循环利息、账单分期、预借现金等能产生高收益的业务。也因此衍生出了一批针对高风险（或不具备贷款资格）的用户进行高利贷的恶性行为。

因此，进行银行端xyk的设计，高净值用户及高资产用户已经被国有五大行及其他股份制银行瓜分的差不多了，要重新找一部分用户，我们瞄准的是25-35岁之间、二三线城市，对微信、App等移动互联网渠道接触时间尚且不长的年轻用户。这部分用户的特点在于，已经接受过了直接/间接的市场教育，对循环利息、账单分期、预借现金等高收益业务有一定了解，也愿意尝试新鲜事物。在物欲横行的时代，有资金需求，有提前消费的意愿等等。这些都构成了我们对这部分用户的基本画像。

于是，我们基于以上的背景和需求，针对xyk产品，设计了一套交互任务管理系统。

主要从以下三个方面考虑：

根据以上几点，结合目前用户使用频次较高的微信渠道，我们参考游戏机制，分别对应以上的三个方面设计了一套任务系统，其中主要包含以下三类任务：

这种分类在游戏中是很常见的，并且现在很多电商、社区、O2O应用都已经开始用游戏化的机制，配合会员营销体系，进行用户运营。纯粹从这个玩法来讲，不算新颖。但是，在金融系统中（尤其是银行），简单的 *** 作引出的背后的系统是非常复杂的。在多系统的交互中，新增这样的玩法，难度相对而言高了很多。其中，关于任务之间相互的连接关系、推送顺序以及内容的判断逻辑，现在很多电商进行活动时，都没有做到比较好的规划。而游戏中的任务却已经很成熟，下面，就本系统的设计作为引子，与大家简单的介绍下将游戏化任务设计引入移动互联网营销平台的一点思路：

首先，任务的概念与电商后台中的活动类型很相似，活动类型下面会设置对应的活动。所以这里所谓的“任务”，也可以看做是“活动”；“领取”也即是“参加”，两者概念通用。

针对任何一个任务，我们需要考量的有几个方面：

以上几个字段，主要控制任务主体的核心要素，从字面上来看，意思都比较容易理解。

其中任务内容这块需要重点说下，很多中小型电商都是将任务内容的逻辑直接写在页面中，而没有直接通过系统自动化，这点来看，是本系统较突出的地方。目前，任务内容主要涵盖用户业务状态信息、用户累计交易信息、用户交易流水信息以及特殊信息等。通过几个维度，依次定位到任务完成逻辑：

通过以上5层 *** 作，基本可以定位到用户大部分的任务场景。然后是针对任务本身逻辑的设定：

针对成长任务，我们设计了两种模式，任务链与任务池。

任务链：用户每完成一个任务链任务，会自动为用户领取子任务并推送消息，引导用户完成整个链条

任务池：用户每完成一个任务池任务，会根据给定逻辑推送次级任务及对应消息

显然，任务链的模式更加固定，不够灵活，最终我们采用了任务池的模式。

附上对应创建任务的截图：

该配置页面中牵扯到了很多外部系统及渠道，包括信审系统、催收系统、银联数据卡核心系统、微信渠道、客户端等等，所谓牵一发而动全身。因此仅就该页面的配置项，就足以深入思考。

我们在后续的版本迭代中，分别加入了数据统计分析、用户分类标识建立、卡产品分类、白名单机制、防黄牛机制、防退货机制等等。这些后续我们再单独拉出来谈。

针对创建任务，会引出其他的几个配置页面，包含经验等级管理、客户任务管理、权益管理以及消息发送管理。非本系统核心，对应的配置页面比较繁多，但是相对逻辑不复杂，可玩味的地方不多，就不附图了（有兴趣的可以私我或者留个邮箱）。

欢迎各位一同探讨。

---