解构电商、O2O：电商平台的“扮装品”-CMS

编纂导语：CMS体系是内容办理体系。内容办理可以处理种种非布局化或半布局化的数字资源的收罗、办理、使用、转达和增值，并能天然集成到布局化数据的商业智能情况中。本文就来为各位分享一下电商平台的“扮装品”-CMS。

假如说用户端是电商平台的“门脸”，那CMS就是点缀门脸的“扮装品”了。拥有一套好的CMS办理体系对页面展现致使交互都是质的提升。CMS不仅仅只是一套简便的东西，更承载这表达运营诉求和导向的航标。

CMS体系全称是Content Management System，中文意思是内容办理体系。主要用于运营职员依据业务需求动态设置用户可见的页面信息。设置事后的信息可以依照运营职员的要求展现不同情势、不同内容的商品。

这内里要分析的是CMS主要的中心功效是动态设置页面，但不是一切平台的页面都是可以由CMS设置的。业务逻辑也繁复的页面越无法使用CMS举行设置，这种页面大多必要单独举行创建、处理，好比购物车、结算页等。而展现办法繁复多变但业务逻辑较少的页面大多经过CMS设置，好比首页、促销专题页等相似商品聚集页面。

一、页面布局分析

CMS之以是可以动态设置运营的商品是由于它以前将页面一切的元素举行了分析，分析后的各局部可以举行独立办理设置。之后CMS在将一切的元素组装整合从而构成我们看到的千姿百态的页面内容。我们用一副图来看下页面构成的中心原理和元素。如图：

用一句话来说就是把各式千般的组件依照指定的样式渲染，并添补好对应的商品数据，依照划定的布局拼装并展现。这么说约莫比力笼统，我们拿一个具体的例子来看下都有哪些元素内容。

从下图可以看到每个楼层都是依照一定的分列办法举行展现的，这种分列办法我们叫作布局大概模板。寻常意义上每一行都可以称作一个楼层，整个页面的布局就是由多个楼层组合而成。每一个楼层内都可以包含多少的组件的组合，思索到雅观的成绩寻常同一楼层的高度都是一律的，使用的组件也必要高度一律。确定组件典范今后就必要将数据添补到组件中。数据也叫素材来自不同的渠道和体系，依照组件的要求举行兼并终极变成用户看到的页面内容。

依照页面属性的不同，页面可以分为首页、专题页。

首页除了基本楼层外，还包含头部核心地区。头部核心地区主要存放一些中心的内容和导航功效。包含搜刮区、导航区、核心区。布局如下图：

搜刮区：可以举行商品搜刮定位，寻常会放在最上方。寻常通用的内容也会放在这个地区，如网站logo，登岸信息等。
导航区：主要是类目导航，卖力流量分流和引导的作用。
核心区：由于在首屏的正中地点，以是是流量的发作区。寻常会安排大幅的倾销和主推商品。
楼层：常规商品安排地区，寻常依照品类每层包含不同的分类商品。
其他：首页思索到内容较多，寻常电商平台都市在PC端增长直通电梯的浮层用于用户直接定位到具体楼层查察商品。而挪动端则没有。

必要注意的是由于挪动端的手机尺寸缘故，同一层寻常不会显现多个组件而是接纳一层一组件的办法。比拟力而言PC端的布局和组合更为繁复一些，内容陈列也更为丰厚。首页的布局主要由这四局部构成，不外搭配上也会依据平台情况罢了，好比局部挪动端在楼层上还会有一些促销区，实际上这也属于楼层，只是情势和内容上有了进一步的延伸。

专题页则更专注于某个维度（如品牌、类目、商家等）的商品聚合。专题页的中心诉求是为了可以增速和提高用户的置办转化率。页面重申爆点和吸引眼球，以是布局更简便。主要分为三个局部：头图、领券区、商品陈列楼层。具体布局如下图：

头图区：卖力安排专题主题的头图，用来突显主题看法，增长页面气氛。
领券区：非必需地区，寻常促销专题页会安排领券地区以便兴奋消耗。
楼层：楼层也叫商品陈列展现区，用来陈列不同典范的商品。偶尔分专题页的商品较多也可以增长导航条用来区分定位到具体楼层，这里就不但独区分导航地区了。

二、CMS布局拆解

外表章节我们以前解说了页面的构成元素，接下去我们看下一切的元素的具体内容是什么。

起首我们来看下样式的看法，样式是指把一切段落、间距乃至包含字体设定的内容以一种标准的端正输入出来。在页面加载的时分使用同一的样式端正来排版布局。网页的样式现在主流的是经过DIV+CSS的办法完成布局的。具体的语法在这里不做详述，我们主要看下关于布局来说的一些空间界说。如下图：

边框：指组件大概地区可以看到的界限，边框可以体现也可以不体现。视觉上的界限就是经过边框来区分的。
外边距：组件或地区的边框之外必要坚持的空缺距离。
内边距：组件或地区的边框和元素之间必要坚持的空缺距离。
尺寸（高度、宽度）：指组件或地区中的元素局部所占用的面积，面位为高度X宽度。
元素地区:即我们所能盛放内容的地区，一切的图片、笔墨、链接等外容数据都是在这个地区体现的。

布局的雅观度就是经过调停这些空间样式属性举行的。经过依据情况来调停外边距和内边距确保视觉上的公道性。

固然样式上除了处理控件布局的内容，另有很多其他的样式语法好比字体、浮层、上色等。在页面上加载样式也叫样式渲染，页面的雅观划一主要靠样式来表达。一个网站大概APP一致的样式界说也但是该平台的计划标准。

样式的渲染离不开他的载体也就是组件。组件的看法在电商平台被广泛使用，不同的组件展现出的商品信息和后果也是不同的。构成组件的中心内容就是图片加笔墨，细化后我们了解下构成组件的基本元素都有哪些。

专题信息：寻常倾销图片和专题标题。必要依据组件的尺寸来划定图片的尺寸。思索到图片加载的时间和流量，寻常会经过CMS限定图片的尺寸和区分率。同时为不同尺寸的图片设定默许底图（即加载不出图片时默许展现的图片内容，通常会使用公司logo大概吉利物作为底图），制止加载过慢大概懒加载时页面留白的成绩。
商品信息：这内里主要指商品干系展现信息，包含商品图片、价格、库存、色商品称呼大概商品标题。此中商品标题和称呼实际上是一个信息，但思索到电商平台商品浩繁，在搜刮时为了增长曝光率寻常会在称呼上加上一些促销信息或形貌词汇，从而构成了商品标题。商品标题和商品称呼是独立的，体现时可以依据情况来推断对否必要商品标题字段。
案牍形貌：局部组件中会体现少数的案牍形貌用来论述。
链接：组件中的商品大概专题信息可以经过点击的办法跳转到商品具体大概专题页来举行置办的流程。跳转的办法主要经过在CMS中设置商品而天生的链接完成。
展现情势及时间：组件的展现典范和体现的时间窗口期，展现典范在稍后我们会具体先容下。时间窗口期主要是经过CMS设置组件内容体现的时间区间，主要作用于限时类的组件上。超时后该组件则不在体现。

组件与组件之间的不同主要来自于组件内元素的布局分列。上文我们也解说了构成组件的中心元素主要是图文加上元素数目。布局分列也是围绕图文混排的办法，按地点分类有如下几种:

图文支配布局；
图文上下布局；
图文上下嵌套（即图片为底图，笔墨为浮层）；
大图倾销（大图单张，寻常用于头条大概中心展位）；
图片组合（多种图展古代表不同内容入口，寻常用于分类入口大概聚合页入口）；
图文不端正布局（即轻重图混排）；
特别组件（用于特别功效的组件如首页的分类入口或banner轮播等，多为定制化用处）。

好比挪动端稀有的商品列表就是图文上下布局的办法，每行两个SKU。而首页的种种促销模块、分类入口则多用图片组合的办法举行，突显视觉打击力。如图：

我们这里单独说下特别组件，特别组件多用于特别用处的利用，布局上寻常是依照端正和功效展现，大多不由背景CMS举行设置的。

搜刮组件（设置搜刮紧张字）；
Banner轮播图（轮播图片、链接）；
分类导航（由分类基本数据直接体现）；
一局部中央；
面包屑导航；
……

确定了布局和展现的布局，接下去我们看下具体的展现内容数据必要注意哪些事变。上文讲到的种种构成组件的元素寻常都是由运营职员经过CMS举行上传设置的。如今越来越多的电商平台在推进举行“千店千面”的看法，以是除了促销模块的组件以外，其他的基本数据大多也会经过商品列表、搜刮、保举等体系来提供天性化厘革。CMS中设置的商品列表也要依据用户的信息情况来动态体现商品数据。

最初我们就是必要眷注模块的埋点，以便数据搜集。关于数据埋点本章节不做详述，后方会在BI体系中分析。