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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、CMS發(fā)布流程

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

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

四、總結(jié)

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

#專欄作家#

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

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

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

? ? ? ? ? ? ? ? ? ? ? ? ? ?

版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 sumchina520@foxmail.com 舉報，一經(jīng)查實，本站將立刻刪除。

加我微信: sumwb886 備注:?外包

免費領(lǐng)推廣引流方案+100種賣貨方法