編輯導(dǎo)語：CMS系統(tǒng)是內(nèi)容管理系統(tǒng)。內(nèi)容管理可以解決各種非結(jié)構(gòu)化或半結(jié)構(gòu)化的數(shù)字資源的采集、管理、利用、傳遞和增值，并能有機(jī)集成到結(jié)構(gòu)化數(shù)據(jù)的商業(yè)智能環(huán)境中。本文就來為大家分享一下電商平臺(tái)的“化妝品”-CMS。

如果說用戶端是電商平臺(tái)的“門臉”，那CMS就是裝點(diǎn)門臉的“化妝品”了。擁有一套好的CMS管理系統(tǒng)對(duì)頁面展示乃至交互都是質(zhì)的提升。CMS不僅僅只是一套簡單的工具，更承載這表達(dá)運(yùn)營訴求和導(dǎo)向的航標(biāo)。

CMS系統(tǒng)全稱是Content Management System，中文意思是內(nèi)容管理系統(tǒng)。主要用于運(yùn)營人員根據(jù)業(yè)務(wù)需求動(dòng)態(tài)配置用戶可見的頁面信息。配置過后的信息可以按照運(yùn)營人員的要求展示不同形式、不同內(nèi)容的商品。

這里面要說明的是CMS主要的核心功能是動(dòng)態(tài)配置頁面，但不是所有平臺(tái)的頁面都是可以由CMS配置的。業(yè)務(wù)邏輯也復(fù)雜的頁面越無法使用CMS進(jìn)行配置，這種頁面多數(shù)需要單獨(dú)進(jìn)行建立、處理，比如購物車、結(jié)算頁等。而展示方式復(fù)雜多變但業(yè)務(wù)邏輯較少的頁面多數(shù)通過CMS配置，比如首頁、促銷專題頁等類似商品集合頁面。

一、頁面結(jié)構(gòu)分解

CMS之所以可以動(dòng)態(tài)配置運(yùn)營的商品是因?yàn)樗呀?jīng)將頁面所有的元素進(jìn)行了分解，分解后的各部分可以進(jìn)行獨(dú)立管理配置。之后CMS在將所有的元素組裝整合從而形成我們看到的千姿百態(tài)的頁面內(nèi)容。我們用一副圖來看下頁面構(gòu)成的核心原理和元素。如圖：

用一句話來說就是把各式各樣的組件按照指定的樣式渲染，并填充好對(duì)應(yīng)的商品數(shù)據(jù)，按照規(guī)定的布局拼裝并展示。這么說可能比較抽象，我們拿一個(gè)具體的例子來看下都有哪些元素內(nèi)容。

從下圖可以看到每個(gè)樓層都是按照一定的排列方式進(jìn)行展示的，這種排列方式我們叫作布局或者模板。一般意義上每一行都可以稱作一個(gè)樓層，整個(gè)頁面的布局就是由多個(gè)樓層組合而成。每一個(gè)樓層內(nèi)都可以包含若干的組件的組合，考慮到美觀的問題一般同一樓層的高度都是一致的，使用的組件也需要高度一致。確定組件類型以后就需要將數(shù)據(jù)填充到組件中。數(shù)據(jù)也叫素材來自不同的渠道和系統(tǒng)，按照組件的要求進(jìn)行合并最終變成用戶看到的頁面內(nèi)容。

按照頁面屬性的不同，頁面可以分為首頁、專題頁。

首頁除了基礎(chǔ)樓層外，還包括頭部焦點(diǎn)區(qū)域。頭部焦點(diǎn)區(qū)域主要存放一些核心的內(nèi)容和導(dǎo)航功能。包括搜索區(qū)、導(dǎo)航區(qū)、焦點(diǎn)區(qū)。結(jié)構(gòu)如下圖：

• 搜索區(qū)：可以進(jìn)行商品搜索定位，一般會(huì)放在最上方。一般通用的內(nèi)容也會(huì)放在這個(gè)區(qū)域，如網(wǎng)站logo，登陸信息等。
• 導(dǎo)航區(qū)：主要是類目導(dǎo)航，負(fù)責(zé)流量分流和引導(dǎo)的作用。
• 焦點(diǎn)區(qū)：由于在首屏的正中位置，所以是流量的爆發(fā)區(qū)。一般會(huì)放置大幅的廣告和主推商品。
• 樓層：常規(guī)商品放置區(qū)域，一般按照品類每層包含不同的分類商品。
• 其他：首頁考慮到內(nèi)容較多，一般電商平臺(tái)都會(huì)在PC端增加直通電梯的浮層用于用戶直接定位到具體樓層查看商品。而移動(dòng)端則沒有。

需要注意的是由于移動(dòng)端的手機(jī)尺寸原因，同一層一般不會(huì)出現(xiàn)多個(gè)組件而是采用一層一組件的方式。相比較而言PC端的布局和組合更為復(fù)雜一些，內(nèi)容陳列也更為豐富。首頁的結(jié)構(gòu)主要由這四部分組成，不過搭配上也會(huì)根據(jù)平臺(tái)情況而已，比如部分移動(dòng)端在樓層上還會(huì)有一些促銷區(qū)，理論上這也屬于樓層，只是形式和內(nèi)容上有了進(jìn)一步的延伸。

專題頁則更專注于某個(gè)維度（如品牌、類目、商家等）的商品聚合。專題頁的核心訴求是為了能夠加速和提高用戶的購買轉(zhuǎn)化率。頁面強(qiáng)調(diào)爆點(diǎn)和吸引眼球，所以結(jié)構(gòu)更簡單。主要分為三個(gè)部分：頭圖、領(lǐng)券區(qū)、商品陳列樓層。具體結(jié)構(gòu)如下圖：

• 頭圖區(qū)：負(fù)責(zé)放置專題主題的頭圖，用來突顯主題概念，增加頁面氛圍。
• 領(lǐng)券區(qū)：非必須區(qū)域，一般促銷專題頁會(huì)放置領(lǐng)券區(qū)域以便刺激消費(fèi)。
• 樓層：樓層也叫商品陳列展示區(qū)，用來陳列不同類型的商品。有時(shí)候?qū)ｎ}頁的商品較多也可以增加導(dǎo)航條用來區(qū)分定位到具體樓層，這里就不單獨(dú)區(qū)分導(dǎo)航區(qū)域了。

二、CMS結(jié)構(gòu)拆解

上面章節(jié)我們已經(jīng)講解了頁面的組成元素，接下來我們看下所有的元素的具體內(nèi)容是什么。

首先我們來看下樣式的概念，樣式是指把所有段落、間距甚至包括字體設(shè)定的內(nèi)容以一種標(biāo)準(zhǔn)的規(guī)則輸出出來。在頁面加載的時(shí)候使用同一的樣式規(guī)則來排版布局。網(wǎng)頁的樣式目前主流的是通過DIV+CSS的方式完成布局的。具體的語法在這里不做詳述，我們主要看下對(duì)于布局來說的一些空間定義。如下圖：

• 邊框：指組件或者區(qū)域可以看到的邊界，邊框可以顯示也可以不顯示。視覺上的邊界就是通過邊框來區(qū)分的。
• 外邊距：組件或區(qū)域的邊框之外需要保持的空白距離。
• 內(nèi)邊距：組件或區(qū)域的邊框和元素之間需要保持的空白距離。
• 尺寸（高度、寬度）：指組件或區(qū)域中的元素部分所占用的面積，面位為高度X寬度。
• 元素區(qū)域:即我們所能盛放內(nèi)容的區(qū)域，所有的圖片、文字、鏈接等內(nèi)容數(shù)據(jù)都是在這個(gè)區(qū)域顯示的。

布局的美觀度就是通過調(diào)整這些空間樣式屬性進(jìn)行的。通過根據(jù)情況來調(diào)整外邊距和內(nèi)邊距保證視覺上的合理性。

當(dāng)然樣式上除了解決控件布局的內(nèi)容，還有很多其他的樣式語法比如字體、浮層、上色等。在頁面上加載樣式也叫樣式渲染，頁面的美觀整齊主要靠樣式來表達(dá)。一個(gè)網(wǎng)站或者APP統(tǒng)一的樣式定義也可是該平臺(tái)的設(shè)計(jì)規(guī)范。

樣式的渲染離不開他的載體也就是組件。組件的概念在電商平臺(tái)被廣泛應(yīng)用，不同的組件展現(xiàn)出的商品信息和效果也是不同的。構(gòu)成組件的核心內(nèi)容就是圖片加文字，細(xì)化后我們了解下構(gòu)成組件的基本元素都有哪些。

• 專題信息：一般廣告圖片和專題標(biāo)題。需要根據(jù)組件的尺寸來規(guī)定圖片的尺寸?？紤]到圖片加載的時(shí)間和流量，一般會(huì)通過CMS限制圖片的尺寸和分辨率。同時(shí)為不同尺寸的圖片設(shè)定默認(rèn)底圖（即加載不出圖片時(shí)默認(rèn)展示的圖片內(nèi)容，通常會(huì)使用公司logo或者吉祥物作為底圖），避免加載過慢或者懶加載時(shí)頁面留白的問題。
• 商品信息：這里面主要指商品相關(guān)展示信息，包括商品圖片、價(jià)格、庫存、色商品名稱或者商品標(biāo)題。其中商品標(biāo)題和名稱理論上是一個(gè)信息，但考慮到電商平臺(tái)商品眾多，在搜索時(shí)為了增加曝光率一般會(huì)在名稱上加上一些促銷信息或形容詞匯，從而形成了商品標(biāo)題。商品標(biāo)題和商品名稱是獨(dú)立的，顯示時(shí)可以根據(jù)情況來判斷是否需要商品標(biāo)題字段。
• 文案描述：部分組件中會(huì)顯示少量的文案描述用來闡述。
• 鏈接：組件中的商品或者專題信息可以通過點(diǎn)擊的方式跳轉(zhuǎn)到商品詳情或者專題頁來進(jìn)行購買的流程。跳轉(zhuǎn)的方式主要通過在CMS中配置商品而生成的鏈接實(shí)現(xiàn)。
• 展示形式及時(shí)間：組件的展示類型和顯示的時(shí)間窗口期，展示類型在稍后我們會(huì)詳細(xì)介紹下。時(shí)間窗口期主要是通過CMS配置組件內(nèi)容顯示的時(shí)間區(qū)間，主要作用于限時(shí)類的組件上。超時(shí)后該組件則不在顯示。

組件與組件之間的差別主要來自于組件內(nèi)元素的布局排列。上文我們也講解了構(gòu)成組件的核心元素主要是圖文加上元素?cái)?shù)量。布局排列也是圍繞圖文混排的方式，按位置分類有如下幾種:

1. 圖文左右布局；
2. 圖文上下布局；
3. 圖文上下嵌套（即圖片為底圖，文字為浮層）；
4. 大圖廣告（大圖單張，一般用于頭條或者核心展位）；
5. 圖片組合（多種圖展示代表不同內(nèi)容入口，一般用于分類入口或者聚合頁入口）；
6. 圖文不規(guī)則布局（即大小圖混排）；
7. 特殊組件（用于特殊功能的組件如首頁的分類入口或banner輪播等，多為定制化用途）。

比如移動(dòng)端常見的商品列表就是圖文上下布局的方式，每行兩個(gè)SKU。而首頁的各種促銷模塊、分類入口則多用圖片組合的方式進(jìn)行，突顯視覺沖擊力。如圖：

我們這里單獨(dú)說下特殊組件，特殊組件多用于特殊用途的操作，布局上一般是按照規(guī)則和功能展示，多數(shù)不由后臺(tái)CMS進(jìn)行配置的。

• 搜索組件（配置搜索關(guān)鍵字）；
• Banner輪播圖（輪播圖片、鏈接）；
• 分類導(dǎo)航（由分類基礎(chǔ)數(shù)據(jù)直接顯示）；
• 個(gè)人中心；
• 面包屑導(dǎo)航；
• ……

確定了布局和展示的結(jié)構(gòu)，接下來我們看下具體的展示內(nèi)容數(shù)據(jù)需要注意哪些事情。上文講到的各種構(gòu)成組件的元素一般都是由運(yùn)營人員通過CMS進(jìn)行上傳設(shè)置的?，F(xiàn)在越來越多的電商平臺(tái)在推動(dòng)進(jìn)行“千店千面”的概念，所以除了促銷模塊的組件以外，其他的基礎(chǔ)數(shù)據(jù)大多也會(huì)通過商品列表、搜索、推薦等系統(tǒng)來提供個(gè)性化變化。CMS中配置的商品列表也要根據(jù)用戶的信息情況來動(dòng)態(tài)顯示商品數(shù)據(jù)。

最后我們就是需要關(guān)注模塊的埋點(diǎn)，以便數(shù)據(jù)收集。關(guān)于數(shù)據(jù)埋點(diǎn)本章節(jié)不做詳述，后面會(huì)在BI系統(tǒng)中說明。

三、CMS發(fā)布流程

CMS的基本發(fā)布流程基本等同于頁面的填裝過程。如上圖：

• 選擇布局：頁面每層的組件擺放順序
• 選擇組件：按照運(yùn)營需求選擇不同展示方式的組件
• 填寫內(nèi)容：根據(jù)組件的類型，填寫商品信息或者是圖文鏈接。
• 信息審核：對(duì)商品和圖片進(jìn)行審核，避免影響版面。
• 發(fā)布上線：審核通過的頁面可以發(fā)布上線或者定時(shí)上線。

四、總結(jié)

CMS系統(tǒng)結(jié)構(gòu)上并不復(fù)雜，目前市場(chǎng)上甚至很多第三方的成熟插件工具。但對(duì)于一個(gè)成熟的電商平臺(tái)來說，一個(gè)好的CMS可以最大限度的為促銷、導(dǎo)購等營銷提供最好的用戶體驗(yàn)。

#專欄作家#

高暉，微信號(hào)公眾號(hào)：產(chǎn)品老高，人人都是產(chǎn)品經(jīng)理專欄作家。10余年IT經(jīng)驗(yàn)，互聯(lián)網(wǎng)老兵。多年電商公司經(jīng)歷，曾參與過B2B/B2C/O2O等多個(gè)方向的電商項(xiàng)目，熟悉電商全流程產(chǎn)品線情況。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議