电商后台产品设计：页⾯动态配置（CMS系统）（⼀）
网页设计淘宝购物车代码这两天3.8妇⼥节，各⼤电商⼜开始不断推出促销活动，借势营销。电商平台仿佛不愿意放过任⼀个可以作为营销话题的⽇⼦，不断推陈出新。经过10多年的电商经验积累，现在做起活动来游刃有余，丰富多样。
下图是我从淘宝、京东上取的两个活动页⾯，可以看出页⾯⾃定义程度很⾼，美观⼤⽅。另⼀种叫法叫做店铺装修或页⾯配置，那么问题来了，这样⼀个⾃定义页⾯怎么配置？怎样通过系统化的⽅式实现页⾯动态配置。
淘宝、京东3.8节活动页
由于页⾯动态配置的内容较多，所以打算分两篇长⽂介绍，第⼀篇先讲页⾯动态配置的整体产品逻辑，第⼆篇详细描述各组件的功能，⼀直到组装之后的解析。
1.页⾯动态配置的前⽣今世
页⾯动态配置是CMS系统（内容管理系统）的⼀部分，在电商⾏业，CMS系统有时会局限⽤作页⾯动态配置的功能。有时也叫作“装修”，店铺装修、页⾯装修、⾃定义新页⾯。平台见到的⾸页管理和新建活动页⾯都属于此类范畴。
在PC电商时代，页⾯的⾃定义⽐作盖楼，添加⼀个楼层，每层可以⾃定义内容，譬如商品、优惠券、商品排名等。“淘宝旺铺“就是店铺装修发展出来的⼀门⽣意，淘宝店家可以选择基础模块的内容，编辑⾸页或新建页⾯，动态配置页⾯。
淘宝的店铺PC端⾃定义设置
在移动互联⽹时代，页⾯动态配置功能升级，可以⾃定义的要素越来越多，在页⾯布局上也更为灵活。可以选择添加ICON、banner、商品等模块。
京东的⼿机装修页⾯
2.配置的产品逻辑
可以把页⾯的动态配置⽐作乐⾼玩具，每⼀个组件就像乐⾼积⽊，可以⽤它搭建不同的乐⾼玩具，就类似组装成不同的动态页⾯。我将页⾯的动态配置分为3步：组件→ 位置+内容 → 动态页⾯，如下图。
页⾯动态配置
2.1 基础组件
组件是动态页⾯的基础，提供给⽤户编辑具体展⽰的信息。有许多类型的组件：图⽚轮播、ICON、优惠券等，每种组件都可以有多个不同的样式，选择内部展⽰的内容或者⾃定义。⽤的最常见的就是链接，组件显⽰样式虽然多样，但是点击之后通往的页⾯选择库却是共通的。例如：新的活动页⾯、商品详情页、商品聚合页、购物车、客服等等。
基础组件的定义和解析是⾃定义页⾯的核⼼，不同的组件有不同的功能，表⽰不同类型的内容。每个组
件都需要单独设计，定义其规则和样式。例如ICON、图⽚轮播就是简单的图⽚展⽰，商品排名对应的算法较为复杂，需要实时去取动态排名。
2.2 位置+内容
有了组件之后，⽤户在设置或者系统在解析的时候，⾸先要确定组件在⾃定义页⾯中的位置。位置可以称为“楼层”，每个页⾯的各楼层可以定义名称、设置背景、配置内容，⽬前最主流的交互是拖动组件到相应的位置，设置内容之后实时预览，⾃定义页⾯动态可视化。
2.3 动态页⾯
对于整个动态页⾯，需要定义⽣效时间、结束时间、活动页⾯名称等基础信息。设置之后可⽣成相应的链接进⾏预览。
动态页⾯是由不同的组件内容构成，⾸先按照各组件位置去解析，然后再去解析组件的内容（样式、图⽚/商品、背景、链接等）。按照上图的反
丰富的⾃定义页⾯
虽然CMS系统产品逻辑简单，但是页⾯要做到较⾼的⾃定义配置程度，需要技术框架的⾼效率和较强的
可扩展性。在浏览⼀个⾃定义页⾯时，系统要逐步去解析该页⾯下的⾃定义组件内容和要素，运算量很⼤。
⽬前绝⼤部门电商公司的⾃定义页⾯仅仅停留在⼀个初级阶段，限于⾸页和少数特殊页⾯的⾃定义配置，⽽且⾃定义程度较低。本⽂提供了CMS 系统的产品设计思路，落到实际项⽬中，还需要权衡实际需求和⾃定义配置程度之间的关系。
如果想了解详细描述各组件的功能，⼀直到组装之后的解析，可关注我，下篇将重点讲解。
碎碎恋产品（）
电商产品经理，主导多业务产品更新迭代，负责过从0到1的产品设计、研发、上线。
专注于电商产品设计、商业分析以及后台挖坑。
每周持续更新产品相关的⽂章，感兴趣可关注我，欢迎勾搭交流！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。