湖南企業(yè)網(wǎng)站建設(shè)500元全包（電商平臺(tái)解釋）電商解釋，
編輯導(dǎo)語(yǔ)：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)境中本文就來(lái)為大家分享一下電商平臺(tái)的“化妝品”-CMS。
如果說(shuō)用戶端是電商平臺(tái)的“門(mén)臉”，那CMS就是裝點(diǎn)門(mén)臉的“化妝品”了擁有一套好的CMS管理系統(tǒng)對(duì)頁(yè)面展示乃至交互都是質(zhì)的提升CMS不僅僅只是一套簡(jiǎn)單的工具，更承載這表達(dá)運(yùn)營(yíng)訴求和導(dǎo)向的航標(biāo)CMS系統(tǒng)全稱是Content Management System，中文意思是內(nèi)容管理系統(tǒng)。
主要用于運(yùn)營(yíng)人員根據(jù)業(yè)務(wù)需求動(dòng)態(tài)配置用戶可見(jiàn)的頁(yè)面信息配置過(guò)后的信息可以按照運(yùn)營(yíng)人員的要求展示不同形式、不同內(nèi)容的商品這里面要說(shuō)明的是CMS主要的核心功能是動(dòng)態(tài)配置頁(yè)面，但不是所有平臺(tái)的頁(yè)面都是可以由CMS配置的。
業(yè)務(wù)邏輯也復(fù)雜的頁(yè)面越無(wú)法使用CMS進(jìn)行配置，這種頁(yè)面多數(shù)需要單獨(dú)進(jìn)行建立、處理，比如購(gòu)物車、結(jié)算頁(yè)等而展示方式復(fù)雜多變但業(yè)務(wù)邏輯較少的頁(yè)面多數(shù)通過(guò)CMS配置，比如首頁(yè)、促銷專題頁(yè)等類似商品集合頁(yè)面一、頁(yè)面結(jié)構(gòu)分解
CMS之所以可以動(dòng)態(tài)配置運(yùn)營(yíng)的商品是因?yàn)樗呀?jīng)將頁(yè)面所有的元素進(jìn)行了分解，分解后的各部分可以進(jìn)行獨(dú)立管理配置之后CMS在將所有的元素組裝整合從而形成我們看到的千姿百態(tài)的頁(yè)面內(nèi)容我們用一副圖來(lái)看下頁(yè)面構(gòu)成的核心原理和元素。
如圖：
用一句話來(lái)說(shuō)就是把各式各樣的組件按照指定的樣式渲染，并填充好對(duì)應(yīng)的商品數(shù)據(jù)，按照規(guī)定的布局拼裝并展示這么說(shuō)可能比較抽象，我們拿一個(gè)具體的例子來(lái)看下都有哪些元素內(nèi)容從下圖可以看到每個(gè)樓層都是按照一定的排列方式進(jìn)行展示的，這種排列方式我們叫作布局或者模板。
一般意義上每一行都可以稱作一個(gè)樓層，整個(gè)頁(yè)面的布局就是由多個(gè)樓層組合而成每一個(gè)樓層內(nèi)都可以包含若干的組件的組合，考慮到美觀的問(wèn)題一般同一樓層的高度都是一致的，使用的組件也需要高度一致確定組件類型以后就需要將數(shù)據(jù)填充到組件中。
數(shù)據(jù)也叫素材來(lái)自不同的渠道和系統(tǒng)，按照組件的要求進(jìn)行合并最終變成用戶看到的頁(yè)面內(nèi)容
按照頁(yè)面屬性的不同，頁(yè)面可以分為首頁(yè)、專題頁(yè)首頁(yè)除了基礎(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ū)域，一般按照品類每層包含不同的分類商品。
其他：首頁(yè)考慮到內(nèi)容較多，一般電商平臺(tái)都會(huì)在PC端增加直通電梯的浮層用于用戶直接定位到具體樓層查看商品。而移動(dòng)端則沒(méi)有。
需要注意的是由于移動(dòng)端的手機(jī)尺寸原因，同一層一般不會(huì)出現(xiàn)多個(gè)組件而是采用一層一組件的方式相比較而言PC端的布局和組合更為復(fù)雜一些，內(nèi)容陳列也更為豐富首頁(yè)的結(jié)構(gòu)主要由這四部分組成，不過(guò)搭配上也會(huì)根據(jù)平臺(tái)情況而已，比如部分移動(dòng)端在樓層上還會(huì)有一些促銷區(qū)，理論上這也屬于樓層，只是形式和內(nèi)容上有了進(jìn)一步的延伸。
專題頁(yè)則更專注于某個(gè)維度（如品牌、類目、商家等）的商品聚合專題頁(yè)的核心訴求是為了能夠加速和提高用戶的購(gòu)買(mǎi)轉(zhuǎn)化率頁(yè)面強(qiáng)調(diào)爆點(diǎn)和吸引眼球，所以結(jié)構(gòu)更簡(jiǎn)單主要分為三個(gè)部分：頭圖、領(lǐng)券區(qū)、商品陳列樓層具體結(jié)構(gòu)如下圖：。
頭圖區(qū)：負(fù)責(zé)放置專題主題的頭圖，用來(lái)突顯主題概念，增加頁(yè)面氛圍領(lǐng)券區(qū)：非必須區(qū)域，一般促銷專題頁(yè)會(huì)放置領(lǐng)券區(qū)域以便刺激消費(fèi)樓層：樓層也叫商品陳列展示區(qū)，用來(lái)陳列不同類型的商品有時(shí)候?qū)ｎ}頁(yè)的商品較多也可以增加導(dǎo)航條用來(lái)區(qū)分定位到具體樓層，這里就不單獨(dú)區(qū)分導(dǎo)航區(qū)域了。
二、CMS結(jié)構(gòu)拆解上面章節(jié)我們已經(jīng)講解了頁(yè)面的組成元素，接下來(lái)我們看下所有的元素的具體內(nèi)容是什么首先我們來(lái)看下樣式的概念，樣式是指把所有段落、間距甚至包括字體設(shè)定的內(nèi)容以一種標(biāo)準(zhǔn)的規(guī)則輸出出來(lái)在頁(yè)面加載的時(shí)候使用同一的樣式規(guī)則來(lái)排版布局。
網(wǎng)頁(yè)的樣式目前主流的是通過(guò)DIV+CSS的方式完成布局的具體的語(yǔ)法在這里不做詳述，我們主要看下對(duì)于布局來(lái)說(shuō)的一些空間定義如下圖：邊框：指組件或者區(qū)域可以看到的邊界，邊框可以顯示也可以不顯示視覺(jué)上的邊界就是通過(guò)邊框來(lái)區(qū)分的。
外邊距：組件或區(qū)域的邊框之外需要保持的空白距離內(nèi)邊距：組件或區(qū)域的邊框和元素之間需要保持的空白距離尺寸（高度、寬度）：指組件或區(qū)域中的元素部分所占用的面積，面位為高度X寬度元素區(qū)域:即我們所能盛放內(nèi)容的區(qū)域，所有的圖片、文字、鏈接等內(nèi)容數(shù)據(jù)都是在這個(gè)區(qū)域顯示的。
布局的美觀度就是通過(guò)調(diào)整這些空間樣式屬性進(jìn)行的通過(guò)根據(jù)情況來(lái)調(diào)整外邊距和內(nèi)邊距保證視覺(jué)上的合理性當(dāng)然樣式上除了解決控件布局的內(nèi)容，還有很多其他的樣式語(yǔ)法比如字體、浮層、上色等在頁(yè)面上加載樣式也叫樣式渲染，頁(yè)面的美觀整齊主要靠樣式來(lái)表達(dá)。
一個(gè)網(wǎng)站或者APP統(tǒng)一的樣式定義也可是該平臺(tái)的設(shè)計(jì)規(guī)范樣式的渲染離不開(kāi)他的載體也就是組件組件的概念在電商平臺(tái)被廣泛應(yīng)用，不同的組件展現(xiàn)出的商品信息和效果也是不同的構(gòu)成組件的核心內(nèi)容就是圖片加文字，細(xì)化后我們了解下構(gòu)成組件的基本元素都有哪些。
專題信息：一般廣告圖片和專題標(biāo)題需要根據(jù)組件的尺寸來(lái)規(guī)定圖片的尺寸考慮到圖片加載的時(shí)間和流量，一般會(huì)通過(guò)CMS限制圖片的尺寸和分辨率同時(shí)為不同尺寸的圖片設(shè)定默認(rèn)底圖（即加載不出圖片時(shí)默認(rèn)展示的圖片內(nèi)容，通常會(huì)使用公司logo或者吉祥物作為底圖），避免加載過(guò)慢或者懶加載時(shí)頁(yè)面留白的問(wèn)題。
商品信息：這里面主要指商品相關(guān)展示信息，包括商品圖片、價(jià)格、庫(kù)存、色商品名稱或者商品標(biāo)題其中商品標(biāo)題和名稱理論上是一個(gè)信息，但考慮到電商平臺(tái)商品眾多，在搜索時(shí)為了增加曝光率一般會(huì)在名稱上加上一些促銷信息或形容詞匯，從而形成了商品標(biāo)題。
商品標(biāo)題和商品名稱是獨(dú)立的，顯示時(shí)可以根據(jù)情況來(lái)判斷是否需要商品標(biāo)題字段文案描述：部分組件中會(huì)顯示少量的文案描述用來(lái)闡述鏈接：組件中的商品或者專題信息可以通過(guò)點(diǎn)擊的方式跳轉(zhuǎn)到商品詳情或者專題頁(yè)來(lái)進(jìn)行購(gòu)買(mǎi)的流程。
跳轉(zhuǎn)的方式主要通過(guò)在CMS中配置商品而生成的鏈接實(shí)現(xiàn)展示形式及時(shí)間：組件的展示類型和顯示的時(shí)間窗口期，展示類型在稍后我們會(huì)詳細(xì)介紹下時(shí)間窗口期主要是通過(guò)CMS配置組件內(nèi)容顯示的時(shí)間區(qū)間，主要作用于限時(shí)類的組件上。
超時(shí)后該組件則不在顯示組件與組件之間的差別主要來(lái)自于組件內(nèi)元素的布局排列上文我們也講解了構(gòu)成組件的核心元素主要是圖文加上元素?cái)?shù)量布局排列也是圍繞圖文混排的方式，按位置分類有如下幾種:圖文左右布局；圖文上下布局；
圖文上下嵌套（即圖片為底圖，文字為浮層）；大圖廣告（大圖單張，一般用于頭條或者核心展位）；圖片組合（多種圖展示代表不同內(nèi)容入口，一般用于分類入口或者聚合頁(yè)入口）；圖文不規(guī)則布局（即大小圖混排）；特殊組件（用于特殊功能的組件如首頁(yè)的分類入口或banner輪播等，多為定制化用途）。
比如移動(dòng)端常見(jiàn)的商品列表就是圖文上下布局的方式，每行兩個(gè)SKU。而首頁(yè)的各種促銷模塊、分類入口則多用圖片組合的方式進(jìn)行，突顯視覺(jué)沖擊力。如圖：
我們這里單獨(dú)說(shuō)下特殊組件，特殊組件多用于特殊用途的操作，布局上一般是按照規(guī)則和功能展示，多數(shù)不由后臺(tái)CMS進(jìn)行配置的搜索組件（配置搜索關(guān)鍵字）；Banner輪播圖（輪播圖片、鏈接）；分類導(dǎo)航（由分類基礎(chǔ)數(shù)據(jù)直接顯示）；。
個(gè)人中心；面包屑導(dǎo)航；……確定了布局和展示的結(jié)構(gòu)，接下來(lái)我們看下具體的展示內(nèi)容數(shù)據(jù)需要注意哪些事情上文講到的各種構(gòu)成組件的元素一般都是由運(yùn)營(yíng)人員通過(guò)CMS進(jìn)行上傳設(shè)置的現(xiàn)在越來(lái)越多的電商平臺(tái)在推動(dòng)進(jìn)行“千店千面”的概念，所以除了促銷模塊的組件以外，其他的基礎(chǔ)數(shù)據(jù)大多也會(huì)通過(guò)商品列表、搜索、推薦等系統(tǒng)來(lái)提供個(gè)性化變化。
CMS中配置的商品列表也要根據(jù)用戶的信息情況來(lái)動(dòng)態(tài)顯示商品數(shù)據(jù)最后我們就是需要關(guān)注模塊的埋點(diǎn)，以便數(shù)據(jù)收集關(guān)于數(shù)據(jù)埋點(diǎn)本章節(jié)不做詳述，后面會(huì)在BI系統(tǒng)中說(shuō)明三、CMS發(fā)布流程CMS的基本發(fā)布流程基本等同于頁(yè)面的填裝過(guò)程。
如上圖：選擇布局：頁(yè)面每層的組件擺放順序選擇組件：按照運(yùn)營(yíng)需求選擇不同展示方式的組件填寫(xiě)內(nèi)容：根據(jù)組件的類型，填寫(xiě)商品信息或者是圖文鏈接信息審核：對(duì)商品和圖片進(jìn)行審核，避免影響版面發(fā)布上線：審核通過(guò)的頁(yè)面可以發(fā)布上線或者定時(shí)上線。
四、總結(jié)CMS系統(tǒng)結(jié)構(gòu)上并不復(fù)雜，目前市場(chǎng)上甚至很多第三方的成熟插件工具但對(duì)于一個(gè)成熟的電商平臺(tái)來(lái)說(shuō)，一個(gè)好的CMS可以最大限度的為促銷、導(dǎo)購(gòu)等營(yíng)銷提供最好的用戶體驗(yàn)#專欄作家#高暉，微信號(hào)公眾號(hào)：產(chǎn)品老高，人人都是產(chǎn)品經(jīng)理專欄作家。
10余年IT經(jīng)驗(yàn)，互聯(lián)網(wǎng)老兵多年電商公司經(jīng)歷，曾參與過(guò)B2B/B2C/O2O等多個(gè)方向的電商項(xiàng)目，熟悉電商全流程產(chǎn)品線情況本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理未經(jīng)許可，禁止轉(zhuǎn)載題圖來(lái)自 Unsplash，基于CC0協(xié)議。