布局的美观度就是通过调整这些空间样式属性进行的。通过根据情况来调整外边距和内边距保证视觉上的合理性。
当然样式上除了解决控件布局的内容，还有很多其他的样式语法比如字体、浮层、上色等。在页面上加载样式也叫样式渲染，页面的美观整齐主要靠样式来表达。一个网站或者APP统一的样式定义也可是该平台的设计规范。
样式的渲染离不开他的载体也就是组件。组件的概念在电商平台被广泛应用，不同的组件展现出的商品信息和效果也是不同的。构成组件的核心内容就是图片加文字，细化后我们了解下构成组件的基本元素都有哪些。
- 专题信息：一般广告图片和专题标题。需要根据组件的尺寸来规定图片的尺寸。考虑到图片加载的时间和流量，一般会通过CMS限制图片的尺寸和分辨率。同时为不同尺寸的图片设定默认底图（即加载不出图片时默认展示的图片内容，通常会使用公司logo或者吉祥物作为底图），避免加载过慢或者懒加载时页面留白的问题。
- 商品信息：这里面主要指商品相关展示信息，包括商品图片、价格、库存、色商品名称或者商品标题。其中商品标题和名称理论上是一个信息，但考虑到电商平台商品众多，在搜索时为了增加曝光率一般会在名称上加上一些促销信息或形容词汇，从而形成了商品标题。商品标题和商品名称是独立的，显示时可以根据情况来判断是否需要商品标题字段。
- 文案描述：部分组件中会显示少量的文案描述用来阐述。
- 链接：组件中的商品或者专题信息可以通过点击的方式跳转到商品详情或者专题页来进行购买的流程。跳转的方式主要通过在CMS中配置商品而生成的链接实现。
- 展示形式及时间：组件的展示类型和显示的时间窗口期，展示类型在稍后我们会详细介绍下。时间窗口期主要是通过CMS配置组件内容显示的时间区间，主要作用于限时类的组件上。超时后该组件则不在显示。
组件与组件之间的差别主要来自于组件内元素的布局排列。上文我们也讲解了构成组件的核心元素主要是图文加上元素数量。布局排列也是围绕图文混排的方式，按位置分类有如下几种:
- 图文左右布局；
- 图文上下布局；
- 图文上下嵌套（即图片为底图，文字为浮层）；
- 大图广告（大图单张，一般用于头条或者核心展位）；
- 图片组合（多种图展示代表不同内容入口，一般用于分类入口或者聚合页入口）；
- 图文不规则布局（即大小图混排）；
- 特殊组件（用于特殊功能的组件如首页的分类入口或banner轮播等，多为定制化用途）。
比如移动端常见的商品列表就是图文上下布局的方式，每行两个SKU。而首页的各种促销模块、分类入口则多用图片组合的方式进行，突显视觉冲击力。如图：
我们这里单独说下特殊组件，特殊组件多用于特殊用途的操作，布局上一般是按照规则和功能展示，多数不由后台CMS进行配置的。
- 搜索组件（配置搜索关键字）；
- Banner轮播图（轮播图片、链接）；
- 分类导航（由分类基础数据直接显示）；
- 个人中心；
- 面包屑导航；
- ……
确定了布局和展示的结构，接下来我们看下具体的展示内容数据需要注意哪些事情。上文讲到的各种构成组件的元素一般都是由运营人员通过CMS进行上传设置的。现在越来越多的电商平台在推动进行“千店千面”的概念，所以除了促销模块的组件以外，其他的基础数据大多也会通过商品列表、搜索、推荐等系统来提供个性化变化。CMS中配置的商品列表也要根据用户的信息情况来动态显示商品数据。
最后我们就是需要关注模块的埋点，以便数据收集。关于数据埋点本章节不做详述，后面会在BI系统中说明。
三、CMS发布流程CMS的基本发布流程基本等同于页面的填装过程。如上图：
- 选择布局：页面每层的组件摆放顺序
- 选择组件：按照运营需求选择不同展示方式的组件
- 填写内容：根据组件的类型，填写商品信息或者是图文链接。
- 信息审核：对商品和图片进行审核，避免影响版面。
- 发布上线：审核通过的页面可以发布上线或者定时上线。
CMS系统结构上并不复杂，目前市场上甚至很多第三方的成熟插件工具。但对于一个成熟的电商平台来说，一个好的CMS可以最大限度的为促销、导购等营销提供最好的用户体验。
#专栏作家#
高晖，微信号公众号：产品老高，人人都是产品经理专栏作家。10余年IT经验，互联网老兵。多年电商公司经历，曾参与过B2B/B2C/O2O等多个方向的电商项目，熟悉电商全流程产品线情况。
本文原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议
