本文提供了CMS系統(tǒng)的產(chǎn)品設(shè)計(jì)思路，落到實(shí)際項(xiàng)目中，還需要權(quán)衡實(shí)際需求和自定義配置程度之間的關(guān)系。

這兩天3.8婦女節(jié)，各大電商又開(kāi)始不斷推出促銷活動(dòng)，借勢(shì)營(yíng)銷。電商平臺(tái)仿佛不愿意放過(guò)任一個(gè)可以作為營(yíng)銷話題的日子，不斷推陳出新。經(jīng)過(guò)10多年的電商經(jīng)驗(yàn)積累，現(xiàn)在做起活動(dòng)來(lái)游刃有余，豐富多樣。

下圖是我從淘寶、京東上取的兩個(gè)活動(dòng)頁(yè)面，可以看出頁(yè)面自定義程度很高，美觀大方。另一種叫法叫做店鋪裝修或頁(yè)面配置，那么問(wèn)題來(lái)了，這樣一個(gè)自定義頁(yè)面怎么配置？怎樣通過(guò)系統(tǒng)化的方式實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)配置。

淘寶、京東3.8節(jié)活動(dòng)頁(yè)

由于頁(yè)面動(dòng)態(tài)配置的內(nèi)容較多，所以打算分兩篇長(zhǎng)文介紹，第一篇先講頁(yè)面動(dòng)態(tài)配置的整體產(chǎn)品邏輯，第二篇詳細(xì)描述各組件的功能，一直到組裝之后的解析。

1.頁(yè)面動(dòng)態(tài)配置的前生今世

頁(yè)面動(dòng)態(tài)配置是CMS系統(tǒng)（內(nèi)容管理系統(tǒng)）的一部分，在電商行業(yè)，CMS系統(tǒng)有時(shí)會(huì)局限用作頁(yè)面動(dòng)態(tài)配置的功能。有時(shí)也叫作“裝修”，店鋪裝修、頁(yè)面裝修、自定義新頁(yè)面。平臺(tái)見(jiàn)到的首頁(yè)管理和新建活動(dòng)頁(yè)面都屬于此類范疇。

在PC電商時(shí)代，頁(yè)面的自定義比作蓋樓，添加一個(gè)樓層，每層可以自定義內(nèi)容，譬如商品、優(yōu)惠券、商品排名等?！疤詫毻仭熬褪堑赇佈b修發(fā)展出來(lái)的一門生意，淘寶店家可以選擇基礎(chǔ)模塊的內(nèi)容，編輯首頁(yè)或新建頁(yè)面，動(dòng)態(tài)配置頁(yè)面。

淘寶的店鋪PC端自定義設(shè)置

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，頁(yè)面動(dòng)態(tài)配置功能升級(jí)，可以自定義的要素越來(lái)越多，在頁(yè)面布局上也更為靈活?？梢赃x擇添加ICON、banner、商品等模塊。

京東的手機(jī)裝修頁(yè)面

2.配置的產(chǎn)品邏輯

可以把頁(yè)面的動(dòng)態(tài)配置比作樂(lè)高玩具，每一個(gè)組件就像樂(lè)高積木，可以用它搭建不同的樂(lè)高玩具，就類似組裝成不同的動(dòng)態(tài)頁(yè)面。我將頁(yè)面的動(dòng)態(tài)配置分為3步：組件→ 位置+內(nèi)容 → 動(dòng)態(tài)頁(yè)面，如下圖。

頁(yè)面動(dòng)態(tài)配置

2.1 基礎(chǔ)組件

組件是動(dòng)態(tài)頁(yè)面的基礎(chǔ)，提供給用戶編輯具體展示的信息。有許多類型的組件：圖片輪播、ICON、優(yōu)惠券等，每種組件都可以有多個(gè)不同的樣式，選擇內(nèi)部展示的內(nèi)容或者自定義。用的最常見(jiàn)的就是鏈接，組件顯示樣式雖然多樣，但是點(diǎn)擊之后通往的頁(yè)面選擇庫(kù)卻是共通的。例如：新的活動(dòng)頁(yè)面、商品詳情頁(yè)、商品聚合頁(yè)、購(gòu)物車、客服等等。

基礎(chǔ)組件的定義和解析是自定義頁(yè)面的核心，不同的組件有不同的功能，表示不同類型的內(nèi)容。每個(gè)組件都需要單獨(dú)設(shè)計(jì)，定義其規(guī)則和樣式。 例如ICON、圖片輪播就是簡(jiǎn)單的圖片展示，商品排名對(duì)應(yīng)的算法較為復(fù)雜，需要實(shí)時(shí)去取動(dòng)態(tài)排名。

2.2 位置+內(nèi)容

有了組件之后，用戶在設(shè)置或者系統(tǒng)在解析的時(shí)候，首先要確定組件在自定義頁(yè)面中的位置。位置可以稱為“樓層”，每個(gè)頁(yè)面的各樓層可以定義名稱、設(shè)置背景、配置內(nèi)容，目前最主流的交互是拖動(dòng)組件到相應(yīng)的位置，設(shè)置內(nèi)容之后實(shí)時(shí)預(yù)覽，自定義頁(yè)面動(dòng)態(tài)可視化。

2.3 動(dòng)態(tài)頁(yè)面

對(duì)于整個(gè)動(dòng)態(tài)頁(yè)面，需要定義生效時(shí)間、結(jié)束時(shí)間、活動(dòng)頁(yè)面名稱等基礎(chǔ)信息。設(shè)置之后可生成相應(yīng)的鏈接進(jìn)行預(yù)覽。

動(dòng)態(tài)頁(yè)面是由不同的組件內(nèi)容構(gòu)成，首先按照各組件位置去解析，然后再去解析組件的內(nèi)容（樣式、圖片/商品、背景、鏈接等）。按照上圖的反向流程走，就能解析出對(duì)應(yīng)的自定義頁(yè)面內(nèi)容。

首頁(yè)設(shè)置也是相同，類似自定義頁(yè)面，可動(dòng)態(tài)設(shè)置首頁(yè)內(nèi)容，動(dòng)態(tài)添加自定義組件。目前絕大部分電商首頁(yè)都是動(dòng)態(tài)配置，有著豐富的自定義內(nèi)容。

3.常用的配置組件

配置組件有許多種，常見(jiàn)的圖片輪播、 商品推薦、商品分類、 寶貝排行、圖標(biāo)（ICON）這幾種形式，其實(shí)是富文本、 客服、優(yōu)惠券、滿減活動(dòng)、滿贈(zèng)活動(dòng)、自定義區(qū)域、商品搜索、文字、公告、倒計(jì)時(shí)、Tab組件（頂部、底部）。

豐富的自定義組件可以實(shí)現(xiàn)各式各樣的活動(dòng)頁(yè)面，前面舉例的京東、淘寶活動(dòng)頁(yè)都是通過(guò)CMS配置實(shí)現(xiàn)。

至于不同的組件設(shè)計(jì)和功能，下篇再詳細(xì)講解。

4.可自定義的一些要素

組件之間有些通用的自定義要素:

• 背景顏色/圖片;
• 組件之間的空隙;
• 對(duì)應(yīng)鏈接。點(diǎn)擊組件對(duì)應(yīng)的跳轉(zhuǎn)頁(yè)面，這些都是通用的：其他活動(dòng)頁(yè)、商品詳情、商品聚合頁(yè)、店鋪主頁(yè)、購(gòu)物車、在線客服、積分商城、購(gòu)物券、外鏈等等。

頁(yè)面動(dòng)態(tài)配置的整體產(chǎn)品邏輯基本已經(jīng)介紹完畢，可以了解到，頁(yè)面動(dòng)態(tài)配置看似復(fù)雜，理順之后發(fā)現(xiàn)其實(shí)就分為三個(gè)步驟，絕大部分的復(fù)雜度增加只是基礎(chǔ)配置組件的豐富。

雖然CMS系統(tǒng)產(chǎn)品邏輯簡(jiǎn)單，但是頁(yè)面要做到較高的自定義配置程度，需要技術(shù)框架的高效率和較強(qiáng)的可擴(kuò)展性。在瀏覽一個(gè)自定義頁(yè)面時(shí)，系統(tǒng)要逐步去解析該頁(yè)面下的自定義組件內(nèi)容和要素，運(yùn)算量很大。

目前絕大部門電商公司的自定義頁(yè)面僅僅停留在一個(gè)初級(jí)階段，限于首頁(yè)和少數(shù)特殊頁(yè)面的自定義配置，而且自定義程度較低。本文提供了CMS系統(tǒng)的產(chǎn)品設(shè)計(jì)思路，落到實(shí)際項(xiàng)目中，還需要權(quán)衡實(shí)際需求和自定義配置程度之間的關(guān)系。

如果想了解詳細(xì)描述各組件的功能，一直到組裝之后的解析，可關(guān)注我，下篇將重點(diǎn)講解。

相關(guān)閱讀：

電商后臺(tái)產(chǎn)品設(shè)計(jì)：訂單拆單

作者：Bouny_Yuan，電商產(chǎn)品經(jīng)理，主導(dǎo)多業(yè)務(wù)產(chǎn)品更新迭代，負(fù)責(zé)過(guò)從0到1的產(chǎn)品設(shè)計(jì)、研發(fā)、上線。專注于電商產(chǎn)品設(shè)計(jì)、商業(yè)分析以及后臺(tái)挖坑。每周持續(xù)更新產(chǎn)品相關(guān)的文章，感興趣可關(guān)注我，歡迎勾搭交流！

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