編輯導語：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系統中說明。
三、CMS發布流程
CMS的基本發布流程基本等同於頁面的填裝過程。如上圖：
- 選擇布局：頁面每層的組件擺放順序
- 選擇組件：按照運營需求選擇不同展示方式的組件
- 填寫內容：根據組件的類型，填寫商品信息或者是圖文連結。
- 信息審核：對商品和圖片進行審核，避免影響版面。
- 發布上線：審核通過的頁面可以發布上線或者定時上線。
四、總結
CMS系統結構上並不複雜，目前市場上甚至很多第三方的成熟插件工具。但對於一個成熟的電商平台來說，一個好的CMS可以最大限度的為促銷、導購等營銷提供最好的用戶體驗。
#專欄作家#
高暉，微信號公眾號：產品老高，人人都是產品經理專欄作家。10餘年IT經驗，網際網路老兵。多年電商公司經歷，曾參與過B2B/B2C/O2O等多個方向的電商項目，熟悉電商全流程產品線情況。
本文原創發布於人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議