?解構(gòu)電商、O2O：電商平臺的“化妝品”
編輯導語：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不僅僅只是一套簡單的工具，更承載這表達運營訴求和導向的航標。
CMS系統(tǒng)全稱是Content Management System，中文意思是內(nèi)容管理系統(tǒng)。主要用于運營人員根據(jù)業(yè)務需求動態(tài)配置用戶可見的頁面信息。配置過后的信息可以按照運營人員的要求展示不同形式、不同內(nèi)容的商品。
這里面要說明的是CMS主要的核心功能是動態(tài)配置頁面，但不是所有平臺的頁面都是可以由CMS配置的。業(yè)務邏輯也復雜的頁面越無法使用CMS進行配置，這種頁面多數(shù)需要單獨進行建立、處理，比如購物車、結(jié)算頁等。而展示方式復雜多變但業(yè)務邏輯較少的頁面多數(shù)通過CMS配置，比如首頁、促銷專題頁等類似商品集合頁面。
CMS之所以可以動態(tài)配置運營的商品是因為它已經(jīng)將頁面所有的元素進行了分解，分解后的各部分可以進行獨立管理配置。之后CMS在將所有的元素組裝整合從而形成我們看到的千姿百態(tài)的頁面內(nèi)容。我們用一副圖來看下頁面構(gòu)成的核心原理和元素。如圖：
用一句話來說就是把各式各樣的組件按照指定的樣式渲染，并填充好對應的商品數(shù)據(jù)，按照規(guī)定的布局拼裝并展示。這么說可能比較抽象，我們拿一個具體的例子來看下都有哪些元素內(nèi)容。
從下圖可以看到每個樓層都是按照一定的排列方式進行展示的，這種排列方式我們叫作布局或者模板。一般意義上每一行都可以稱作一個樓層，整個頁面的布局就是由多個樓層組合而成。每一個樓層內(nèi)都可以包含若干的組件的組合，考慮到美觀的問題一般同一樓層的高度都是一致的，使用的組件也需要高度一致。確定組件類型以后就需要將數(shù)據(jù)填充到組件中。數(shù)據(jù)也叫素材來自不同的渠道和系統(tǒng)，按照組件的要求進行合并最終變成用戶看到的頁面內(nèi)容。
按照頁面屬性的不同，頁面可以分為首頁、專題頁。
首頁除了基礎(chǔ)樓層外，還包括頭部焦點區(qū)域。頭部焦點區(qū)域主要存放一些核心的內(nèi)容和導航功能。包括搜索區(qū)、導航區(qū)、焦點區(qū)。結(jié)構(gòu)如下圖：
搜索區(qū)：可以進行商品搜索定位，一般會放在最上方。一般通用的內(nèi)容也會放在這個區(qū)域，如網(wǎng)站logo，登陸信息等。導航區(qū)：主要是類目導航，負責流量分流和引導的作用。焦點區(qū)：由于在首屏的正中位置，所以是流量的爆發(fā)區(qū)。一般會放置大幅的廣告和主推商品。樓層：常規(guī)商品放置區(qū)域，一般按照品類每層包含不同的分類商品。其他：首頁考慮到內(nèi)容較多，一般電商平臺都會在PC端增加直通電梯的浮層用于用戶直接定位到具體樓層查看商品。而移動端則沒有。需要注意的是由于移動端的手機尺寸原因，同一層一般不會出現(xiàn)多個組件而是采用一層一組件的方式。相比較而言PC端的布局和組合更為復雜一些，內(nèi)容陳列也更為豐富。首頁的結(jié)構(gòu)主要由這四部分組成，不過搭配上也會根據(jù)平臺情況而已，比如部分移動端在樓層上還會有一些促銷區(qū)，理論上這也屬于樓層，只是形式和內(nèi)容上有了進一步的延伸。
專題頁則更專注于某個維度（如品牌、類目、商家等）的商品聚合。專題頁的核心訴求是為了能夠加速和提高用戶的購買轉(zhuǎn)化率。頁面強調(diào)爆點和吸引眼球，所以結(jié)構(gòu)更簡單。主要分為三個部分：頭圖、領(lǐng)券區(qū)、商品陳列樓層。具體結(jié)構(gòu)如下圖：
頭圖區(qū)：負責放置專題主題的頭圖，用來突顯主題概念，增加頁面氛圍。領(lǐng)券區(qū)：非必須區(qū)域，一般促銷專題頁會放置領(lǐng)券區(qū)域以便刺激消費。樓層：樓層也叫商品陳列展示區(qū)，用來陳列不同類型的商品。有時候?qū)ｎ}頁的商品較多也可以增加導航條用來區(qū)分定位到具體樓層，這里就不單獨區(qū)分導航區(qū)域了。
上面章節(jié)我們已經(jīng)講解了頁面的組成元素，接下來我們看下所有的元素的具體內(nèi)容是什么。
首先我們來看下樣式的概念，樣式是指把所有段落、間距甚至包括字體設(shè)定的內(nèi)容以一種標準的規(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)邊距保證視覺上的合理性。
當然樣式上除了解決控件布局的內(nèi)容，還有很多其他的樣式語法比如字體、浮層、上色等。在頁面上加載樣式也叫樣式渲染，頁面的美觀整齊主要靠樣式來表達。一個網(wǎng)站或者APP統(tǒng)一的樣式定義也可是該平臺的設(shè)計規(guī)范。
樣式的渲染離不開他的載體也就是組件。組件的概念在電商平臺被廣泛應用，不同的組件展現(xiàn)出的商品信息和效果也是不同的。構(gòu)成組件的核心內(nèi)容就是圖片加文字，細化后我們了解下構(gòu)成組件的基本元素都有哪些。
專題信息：一般廣告圖片和專題標題。需要根據(jù)組件的尺寸來規(guī)定圖片的尺寸。考慮到圖片加載的時間和流量，一般會通過CMS限制圖片的尺寸和分辨率。同時為不同尺寸的圖片設(shè)定默認底圖（即加載不出圖片時默認展示的圖片內(nèi)容，通常會使用公司logo或者吉祥物作為底圖），避免加載過慢或者懶加載時頁面留白的問題。商品信息：這里面主要指商品相關(guān)展示信息，包括商品圖片、價格、庫存、色商品名稱或者商品標題。其中商品標題和名稱理論上是一個信息，但考慮到電商平臺商品眾多，在搜索時為了增加曝光率一般會在名稱上加上一些促銷信息或形容詞匯，從而形成了商品標題。商品標題和商品名稱是獨立的，顯示時可以根據(jù)情況來判斷是否需要商品標題字段。文案描述：部分組件中會顯示少量的文案描述用來闡述。鏈接：組件中的商品或者專題信息可以通過點擊的方式跳轉(zhuǎn)到商品詳情或者專題頁來進行購買的流程。跳轉(zhuǎn)的方式主要通過在CMS中配置商品而生成的鏈接實現(xiàn)。展示形式及時間：組件的展示類型和顯示的時間窗口期，展示類型在稍后我們會詳細介紹下。時間窗口期主要是通過CMS配置組件內(nèi)容顯示的時間區(qū)間，主要作用于限時類的組件上。超時后該組件則不在顯示。組件與組件之間的差別主要來自于組件內(nèi)元素的布局排列。上文我們也講解了構(gòu)成組件的核心元素主要是圖文加上元素數(shù)量。布局排列也是圍繞圖文混排的方式，按位置分類有如下幾種:
圖文左右布局；圖文上下布局；圖文上下嵌套（即圖片為底圖，文字為浮層）；大圖廣告（大圖單張，一般用于頭條或者核心展位）；圖片組合（多種圖展示代表不同內(nèi)容入口，一般用于分類入口或者聚合頁入口）；圖文不規(guī)則布局（即大小圖混排）；特殊組件（用于特殊功能的組件如首頁的分類入口或banner輪播等，多為定制化用途）。比如移動端常見的商品列表就是圖文上下布局的方式，每行兩個SKU。而首頁的各種促銷模塊、分類入口則多用圖片組合的方式進行，突顯視覺沖擊力。如圖：
我們這里單獨說下特殊組件，特殊組件多用于特殊用途的操作，布局上一般是按照規(guī)則和功能展示，多數(shù)不由后臺CMS進行配置的。
搜索組件（配置搜索關(guān)鍵字）；Banner輪播圖（輪播圖片、鏈接）；分類導航（由分類基礎(chǔ)數(shù)據(jù)直接顯示）；個人中心；面包屑導航；……確定了布局和展示的結(jié)構(gòu)，接下來我們看下具體的展示內(nèi)容數(shù)據(jù)需要注意哪些事情。上文講到的各種構(gòu)成組件的元素一般都是由運營人員通過CMS進行上傳設(shè)置的。現(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ā)布流程基本等同于頁面的填裝過程。如上圖：
選擇布局：頁面每層的組件擺放順序選擇組件：按照運營需求選擇不同展示方式的組件填寫內(nèi)容：根據(jù)組件的類型，填寫商品信息或者是圖文鏈接。信息審核：對商品和圖片進行審核，避免影響版面。發(fā)布上線：審核通過的頁面可以發(fā)布上線或者定時上線。
CMS系統(tǒng)結(jié)構(gòu)上并不復雜，目前市場上甚至很多第三方的成熟插件工具。但對于一個成熟的電商平臺來說，一個好的CMS可以最大限度的為促銷、導購等營銷提供最好的用戶體驗。
高暉，微信號公眾號：產(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)發(fā)表，鳥哥筆記平臺僅提供信息存儲空間服務。
本文為作者獨立觀點，不代表鳥哥筆記立場，未經(jīng)允許不得轉(zhuǎn)載。
《鳥哥筆記版權(quán)及免責申明》
如對文章、圖片、字體等版權(quán)有疑問，請點擊
反饋舉報
我們致力于提供一個高質(zhì)量內(nèi)容的交流平臺。為落實國家互聯(lián)網(wǎng)信息辦公室“依法管網(wǎng)、依法辦網(wǎng)、依法上網(wǎng)”的要求，為完善跟帖評論自律管理，為了保護用戶創(chuàng)造的內(nèi)容、維護開放、真實、專業(yè)的平臺氛圍，我們團隊將依據(jù)本公約中的條款對注冊用戶和發(fā)布在本平臺的內(nèi)容進行管理。平臺鼓勵用戶創(chuàng)作、發(fā)布優(yōu)質(zhì)內(nèi)容，同時也將采取必要措施管理違法、侵權(quán)或有其他不良影響的網(wǎng)絡信息。
一、根據(jù)《網(wǎng)絡信息內(nèi)容生態(tài)治理規(guī)定》《中華人民共和國未成年人保護法》等法律法規(guī)，對以下違法、不良信息或存在危害的行為進行處理。
1. 違反法律法規(guī)的信息，主要表現(xiàn)為：
1)反對憲法所確定的基本原則；
2)危害國家安全，泄露國家秘密，顛覆國家政權(quán)，破壞國家統(tǒng)一，損害國家榮譽和利益；
3)侮辱、濫用英烈形象，歪曲、丑化、褻瀆、否定英雄烈士事跡和精神，以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽、榮譽；
4)宣揚恐怖主義、極端主義或者煽動實施恐怖活動、極端主義活動；
5)煽動民族仇恨、民族歧視，破壞民族團結(jié)；
6)破壞國家宗教政策，宣揚邪教和封建迷信；
7)散布謠言，擾亂社會秩序，破壞社會穩(wěn)定；
8)宣揚淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪；
9)煽動非法集會、結(jié)社、游行、示威、聚眾擾亂社會秩序；
10)侮辱或者誹謗他人，侵害他人名譽、隱私和其他合法權(quán)益；
11)通過網(wǎng)絡以文字、圖片、音視頻等形式，對未成年人實施侮辱、誹謗、威脅或者惡意損害未成年人形象進行網(wǎng)絡欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法規(guī)禁止的其他內(nèi)容；
2. 不友善：不尊重用戶及其所貢獻內(nèi)容的信息或行為。主要表現(xiàn)為：
1)輕蔑：貶低、輕視他人及其勞動成果；
2)誹謗：捏造、散布虛假事實，損害他人名譽；
3)嘲諷：以比喻、夸張、侮辱性的手法對他人或其行為進行揭露或描述，以此來激怒他人；
4)挑釁：以不友好的方式激怒他人，意圖使對方對自己的言論作出回應，蓄意制造事端；
5)羞辱：貶低他人的能力、行為、生理或身份特征，讓對方難堪；
6)謾罵：以不文明的語言對他人進行負面評價；
7)歧視：煽動人群歧視、地域歧視等，針對他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊；
8)威脅：許諾以不良的后果來迫使他人服從自己的意志；
3. 發(fā)布垃圾廣告信息：以推廣曝光為目的，發(fā)布影響用戶體驗、擾亂本網(wǎng)站秩序的內(nèi)容，或進行相關(guān)行為。主要表現(xiàn)為：
1)多次發(fā)布包含售賣產(chǎn)品、提供服務、宣傳推廣內(nèi)容的垃圾廣告。包括但不限于以下幾種形式：
2)單個帳號多次發(fā)布包含垃圾廣告的內(nèi)容；
3)多個廣告帳號互相配合發(fā)布、傳播包含垃圾廣告的內(nèi)容；
4)多次發(fā)布包含欺騙性外鏈的內(nèi)容，如未注明的淘寶客鏈接、跳轉(zhuǎn)網(wǎng)站等，誘騙用戶點擊鏈接
5)發(fā)布大量包含推廣鏈接、產(chǎn)品、品牌等內(nèi)容獲取搜索引擎中的不正當曝光；
6)購買或出售帳號之間虛假地互動，發(fā)布干擾網(wǎng)站秩序的推廣內(nèi)容及相關(guān)交易。
7)發(fā)布包含欺騙性的惡意營銷內(nèi)容，如通過偽造經(jīng)歷、冒充他人等方式進行惡意營銷；
8)使用特殊符號、圖片等方式規(guī)避垃圾廣告內(nèi)容審核的廣告內(nèi)容。
4. 色情低俗信息，主要表現(xiàn)為：
1)包含自己或他人性經(jīng)驗的細節(jié)描述或露骨的感受描述；
2)涉及色情段子、兩性笑話的低俗內(nèi)容；
3)配圖、頭圖中包含庸俗或挑逗性圖片的內(nèi)容；
4)帶有性暗示、性挑逗等易使人產(chǎn)生性聯(lián)想；
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適；
6)炒作緋聞、丑聞、劣跡等；
7)宣揚低俗、庸俗、媚俗內(nèi)容。
5. 不實信息，主要表現(xiàn)為：
1)可能存在事實性錯誤或者造謠等內(nèi)容；
2)存在事實夸大、偽造虛假經(jīng)歷等誤導他人的內(nèi)容；
3)偽造身份、冒充他人，通過頭像、用戶名等個人信息暗示自己具有特定身份，或與特定機構(gòu)或個人存在關(guān)聯(lián)。
6. 傳播封建迷信，主要表現(xiàn)為：
1)找人算命、測字、占卜、解夢、化解厄運、使用迷信方式治?。?br /> 2)求推薦算命看相大師；
3)針對具體風水等問題進行求助或咨詢；
4)問自己或他人的八字、六爻、星盤、手相、面相、五行缺失，包括通過占卜方法問婚姻、前程、運勢，東西寵物丟了能不能找回、取名改名等；
7. 文章標題黨，主要表現(xiàn)為：
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來誘導用戶；
2)內(nèi)容與標題之間存在嚴重不實或者原意扭曲；
3)使用夸張標題，內(nèi)容與標題嚴重不符的。
8.「飯圈」亂象行為，主要表現(xiàn)為：
1)誘導未成年人應援集資、高額消費、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動「飯圈」粉絲攀比炫富、奢靡享樂等行為
4)以號召粉絲、雇用網(wǎng)絡水軍、「養(yǎng)號」形式刷量控評等行為
5)通過「蹭熱點」、制造話題等形式干擾輿論，影響傳播秩序
9. 其他危害行為或內(nèi)容，主要表現(xiàn)為：
1)可能引發(fā)未成年人模仿不安全行為和違反社會公德行為、誘導未成年人不良嗜好影響未成年人身心健康的；
2)不當評述自然災害、重大事故等災難的；
3)美化、粉飾侵略戰(zhàn)爭行為的；
4)法律、行政法規(guī)禁止，或可能對網(wǎng)絡生態(tài)造成不良影響的其他內(nèi)容。
二、違規(guī)處罰
本網(wǎng)站通過主動發(fā)現(xiàn)和接受用戶舉報兩種方式收集違規(guī)行為信息。所有有意的降低內(nèi)容質(zhì)量、傷害平臺氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當一個用戶發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將依據(jù)相關(guān)用戶違規(guī)情節(jié)嚴重程度，對帳號進行禁言 1 天、7 天、15 天直至永久禁言或封停賬號的處罰。當涉及欺凌未成年人、危害未成年人身心健康、通過作弊手段注冊、使用帳號，或者濫用多個帳號發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將加重處罰。
三、申訴
隨著平臺管理經(jīng)驗的不斷豐富，本網(wǎng)站出于維護本網(wǎng)站氛圍和秩序的目的，將不斷完善本公約。
如果本網(wǎng)站用戶對本網(wǎng)站基于本公約規(guī)定做出的處理有異議，可以通過「建議反饋」功能向本網(wǎng)站進行反饋。
(規(guī)則的最終解釋權(quán)歸屬本網(wǎng)站所有)