這兩天3.8婦女節，各大電商又開始不斷推出促銷活動，借勢營銷。電商平臺仿佛不愿意放過任一個可以作為營銷話題的日子，不斷推陳出新。經過10多年的電商經驗積累，現在做起活動來游刃有余，豐富多樣。
下圖是我從淘寶、京東上取的兩個活動頁面，可以看出頁面自定義程度很高，美觀大方。另一種叫法叫做店鋪裝修或頁面配置，那么問題來了，這樣一個自定義頁面怎么配置？怎樣通過系統化的方式實現頁面動態配置。
由于頁面動態配置的內容較多，所以打算分兩篇長文介紹，第一篇先講頁面動態配置的整體產品邏輯，第二篇詳細描述各組件的功能，一直到組裝之后的解析。
1.頁面動態配置的前生今世
頁面動態配置是CMS系統（內容管理系統）的一部分，在電商行業，CMS系統有時會局限用作頁面動態配置的功能。有時也叫作“裝修”，店鋪裝修、頁面裝修、自定義新頁面。平臺見到的首頁管理和新建活動頁面都屬于此類范疇。
在PC電商時代，頁面的自定義比作蓋樓，添加一個樓層，每層可以自定義內容，譬如商品、優惠券、商品排名等。“淘寶旺鋪“就是店鋪裝修發展出來的一門生意，淘寶店家可以選擇基礎模塊的內容，編輯首頁或新建頁面，動態配置頁面。
在移動互聯網時代，頁面動態配置功能升級，可以自定義的要素越來越多，在頁面布局上也更為靈活。可以選擇添加ICON、banner、商品等模塊。
2.配置的產品邏輯
可以把頁面的動態配置比作樂高玩具，每一個組件就像樂高積木，可以用它搭建不同的樂高玩具，就類似組裝成不同的動態頁面。我將頁面的動態配置分為3步：組件→ 位置+內容 → 動態頁面，如下圖。
2.1 基礎組件
組件是動態頁面的基礎，提供給用戶編輯具體展示的信息。有許多類型的組件：圖片輪播、ICON、優惠券等，每種組件都可以有多個不同的樣式，選擇內部展示的內容或者自定義。用的最常見的就是鏈接，組件顯示樣式雖然多樣，但是點擊之后通往的頁面選擇庫卻是共通的。例如：新的活動頁面、商品詳情頁、商品聚合頁、購物車、客服等等。
基礎組件的定義和解析是自定義頁面的核心，不同的組件有不同的功能，表示不同類型的內容。每個組件都需要單獨設計，定義其規則和樣式。 例如ICON、圖片輪播就是簡單的圖片展示，商品排名對應的算法較為復雜，需要實時去取動態排名。
2.2 位置+內容
有了組件之后，用戶在設置或者系統在解析的時候，首先要確定組件在自定義頁面中的位置。位置可以稱為“樓層”，每個頁面的各樓層可以定義名稱、設置背景、配置內容，目前最主流的交互是拖動組件到相應的位置，設置內容之后實時預覽，自定義頁面動態可視化。
2.3 動態頁面
對于整個動態頁面，需要定義生效時間、結束時間、活動頁面名稱等基礎信息。設置之后可生成相應的鏈接進行預覽。
動態頁面是由不同的組件內容構成，首先按照各組件位置去解析，然后再去解析組件的內容（樣式、圖片/商品、背景、鏈接等）。按照上圖的反向流程走，就能解析出對應的自定義頁面內容。
首頁設置也是相同，類似自定義頁面，可動態設置首頁內容，動態添加自定義組件。目前絕大部分電商首頁都是動態配置，有著豐富的自定義內容。
3.常用的配置組件
配置組件有許多種，常見的圖片輪播、 商品推薦、商品分類、 寶貝排行、圖標（ICON）這幾種形式，其實是富文本、 客服、優惠券、滿減活動、滿贈活動、自定義區域、商品搜索、文字、公告、倒計時、Tab組件（頂部、底部）。
豐富的自定義組件可以實現各式各樣的活動頁面，前面舉例的京東、淘寶活動頁都是通過CMS配置實現。
至于不同的組件設計和功能，下篇再詳細講解。
4.可自定義的一些要素
組件之間有些通用的自定義要素:
- 背景顏色/圖片;
- 組件之間的空隙;
-
對應鏈接。點擊組件對應的跳轉頁面，這些都是通用的：其他活動頁、商品詳情、商品聚合頁、店鋪主頁、購物車、在線客服、積分商城、購物券、外鏈等等。
豐富的自定義頁面
頁面動態配置的整體產品邏輯基本已經介紹完畢，可以了解到，頁面動態配置看似復雜，理順之后發現其實就分為三個步驟，絕大部分的復雜度增加只是基礎配置組件的豐富。
雖然CMS系統產品邏輯簡單，但是頁面要做到較高的自定義配置程度，需要技術框架的高效率和較強的可擴展性。在瀏覽一個自定義頁面時，系統要逐步去解析該頁面下的自定義組件內容和要素，運算量很大。
目前絕大部門電商公司的自定義頁面僅僅停留在一個初級階段，限于首頁和少數特殊頁面的自定義配置，而且自定義程度較低。本文提供了CMS系統的產品設計思路，落到實際項目中，還需要權衡實際需求和自定義配置程度之間的關系。
如果想了解詳細描述各組件的功能，一直到組裝之后的解析，可關注我，下篇將重點講解。
碎碎戀產品（公眾號）
電商產品經理，主導多業務產品更新迭代，負責過從0到1的產品設計、研發、上線。
專注于電商產品設計、商業分析以及后臺挖坑。
每周持續更新產品相關的文章，感興趣可關注我，歡迎勾搭交流！
