編輯導語：CMS系統是内容管理系統。内容管理可以解決各種非結構化或半結構化的數字資源的采集、管理、利用、傳遞和增值，并能有機集成到結構化數據的商業智能環境中。本文就來為大家分享一下電商平台的“化妝品”-CMS。

如果說用戶端是電商平台的“門臉”，那CMS就是裝點門臉的“化妝品”了。擁有一套好的CMS管理系統對頁面展示乃至交互都是質的提升。CMS不僅僅隻是一套簡單的工具，更承載這表達運營訴求和導向的航标。

CMS系統全稱是Content Management System，中文意思是内容管理系統。主要用于運營人員根據業務需求動态配置用戶可見的頁面信息。配置過後的信息可以按照運營人員的要求展示不同形式、不同内容的商品。

這裡面要說明的是CMS主要的核心功能是動态配置頁面，但不是所有平台的頁面都是可以由CMS配置的。業務邏輯也複雜的頁面越無法使用CMS進行配置，這種頁面多數需要單獨進行建立、處理，比如購物車、結算頁等。而展示方式複雜多變但業務邏輯較少的頁面多數通過CMS配置，比如首頁、促銷專題頁等類似商品集合頁面。

CMS之所以可以動态配置運營的商品是因為它已經将頁面所有的元素進行了分解，分解後的各部分可以進行獨立管理配置。之後CMS在将所有的元素組裝整合從而形成我們看到的千姿百态的頁面内容。我們用一副圖來看下頁面構成的核心原理和元素。如圖：

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

從下圖可以看到每個樓層都是按照一定的排列方式進行展示的，這種排列方式我們叫作布局或者模闆。一般意義上每一行都可以稱作一個樓層，整個頁面的布局就是由多個樓層組合而成。每一個樓層内都可以包含若幹的組件的組合，考慮到美觀的問題一般同一樓層的高度都是一緻的，使用的組件也需要高度一緻。确定組件類型以後就需要将數據填充到組件中。數據也叫素材來自不同的渠道和系統，按照組件的要求進行合并最終變成用戶看到的頁面内容。

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

首頁除了基礎樓層外，還包括頭部焦點區域。頭部焦點區域主要存放一些核心的内容和導航功能。包括搜索區、導航區、焦點區。結構如下圖：

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

需要注意的是由于移動端的手機尺寸原因，同一層一般不會出現多個組件而是采用一層一組件的方式。相比較而言PC端的布局和組合更為複雜一些，内容陳列也更為豐富。首頁的結構主要由這四部分組成，不過搭配上也會根據平台情況而已，比如部分移動端在樓層上還會有一些促銷區，理論上這也屬于樓層，隻是形式和内容上有了進一步的延伸。

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

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

上面章節我們已經講解了頁面的組成元素，接下來我們看下所有的元素的具體内容是什麼。

首先我們來看下樣式的概念，樣式是指把所有段落、間距甚至包括字體設定的内容以一種标準的規則輸出出來。在頁面加載的時候使用同一的樣式規則來排版布局。網頁的樣式目前主流的是通過DIV CSS的方式完成布局的。具體的語法在這裡不做詳述，我們主要看下對于布局來說的一些空間定義。如下圖：

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

布局的美觀度就是通過調整這些空間樣式屬性進行的。通過根據情況來調整外邊距和内邊距保證視覺上的合理性。

當然樣式上除了解決控件布局的内容，還有很多其他的樣式語法比如字體、浮層、上色等。在頁面上加載樣式也叫樣式渲染，頁面的美觀整齊主要靠樣式來表達。一個網站或者APP統一的樣式定義也可是該平台的設計規範。

樣式的渲染離不開他的載體也就是組件。組件的概念在電商平台被廣泛應用，不同的組件展現出的商品信息和效果也是不同的。構成組件的核心内容就是圖片加文字，細化後我們了解下構成組件的基本元素都有哪些。

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

組件與組件之間的差别主要來自于組件内元素的布局排列。上文我們也講解了構成組件的核心元素主要是圖文加上元素數量。布局排列也是圍繞圖文混排的方式，按位置分類有如下幾種:

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

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

我們這裡單獨說下特殊組件，特殊組件多用于特殊用途的操作，布局上一般是按照規則和功能展示，多數不由後台CMS進行配置的。

• 搜索組件（配置搜索關鍵字）；
• Banner輪播圖（輪播圖片、鍊接）；
• 分類導航（由分類基礎數據直接顯示）；
• 個人中心；
• 面包屑導航；
• ……

确定了布局和展示的結構，接下來我們看下具體的展示内容數據需要注意哪些事情。上文講到的各種構成組件的元素一般都是由運營人員通過CMS進行上傳設置的。現在越來越多的電商平台在推動進行“千店千面”的概念，所以除了促銷模塊的組件以外，其他的基礎數據大多也會通過商品列表、搜索、推薦等系統來提供個性化變化。CMS中配置的商品列表也要根據用戶的信息情況來動态顯示商品數據。

最後我們就是需要關注模塊的埋點，以便數據收集。關于數據埋點本章節不做詳述，後面會在BI系統中說明。

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

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

CMS系統結構上并不複雜，目前市場上甚至很多第三方的成熟插件工具。但對于一個成熟的電商平台來說，一個好的CMS可以最大限度的為促銷、導購等營銷提供最好的用戶體驗。

#專欄作家#

高晖，微信号公衆号：産品老高，人人都是産品經理專欄作家。10餘年IT經驗，互聯網老兵。多年電商公司經曆，曾參與過B2B/B2C/O2O等多個方向的電商項目，熟悉電商全流程産品線情況。

本文原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!