活動是電商行業最常見的運營手段之一，會藉助各種節日不斷推出促銷活動。如1月份的元旦節到12月份的聖誕節，讓使用者對節日的儀式感注意力從線下轉到線上，透過各種力度的優惠促進使用者下單從而提升下單率。

讓我們一起來思考活動頁面是如何呈現到使用者。

一、場景

A活動釋出沒有多久，運營又想上B活動，當產品向H5提出新活動需求時，H5超級不耐煩地抱怨“半個月更新3、4個活動，每個活動需要半天到1天的開發時間，重複性的工作讓程式碼越積越多…”

註釋：H5為H5工程師，因活動頁面均為H5頁面製作。

從以上場景可以得知，目前運營更新活動的解決方案是依靠H5才能完成，並且活動更新頻繁、耗費開發時間。

二、問題分析

提出具體解決方案之前，先分析問題。

所以問題在於，運營不能自己去自定義活動風格，只能對商品進行管理。

2、解決方案

從問題中找到的解決方案：CMS系統增加活動頁面動態配置功能。

2.1、功能介紹

活動動態頁面配置流程是由運營人員在CMS新增活動頁面並配置相關內容後關聯活動入口。

在新增活動頁面可以配置新增活動頁面，能夠配置活動頁面的背景色、banner、活動規則、商品樣式、文字導航、優惠券等內容，允許對內容進行自定義編輯，比如標題，可以選擇文字或上傳圖片的方式展示。

為什麼要支援自定義編輯呢？為了提高頁面配置的靈活性，運營能夠根據活動要求隨時調整。比商品中的購物車，是使用文字按鈕還是圖示吸引使用者去點選，商品促銷的標籤，是使用“hot” 或“特價”在不同的內容每個欄位能有不同的調整，更能烘托出活動氛圍。運營可以在活動頁面隨時預覽活動效果，並且確認無問題後釋出。最後新增輪播位對活動頁面進行關聯，提供活動入口讓使用者參與活動。

在配置過程中可能會存在意外退出，要考慮自動儲存功能。如將新增活動頁面自動生成一條記錄，能夠讓運營通活動列表繼續上次內容編輯。因為活動需要配置的內容較多，若沒有自動儲存功能，運營需要重新操作一次。

活動時間內，是否能隨時調整活動頁面相關內容根據具體的業務而定。進行內容調整時需要考慮到前端互動流程。如商品價格調整，要考慮到幾個場景，正在加入購物車、已加入購物車、下單和喚醒支付介面這些節點是否要更新價格。通常不建議在活動中修改資訊，避免使用者投訴等問題，活動出現問題時，建議下架活動，調整後再重新上架。

同理活動時間結束後活動入口和活動頁面都要隱藏，使用者無法透過任何方式進入到活動頁面。避免與業務產生衝突出現其他問題。

活動頁面動態配置功能實際是支援運營人員在CMS系統能夠靈活配置前端的活動頁面，無需讓開發調整程式碼從而釋出版本，減少開發成本、提高開發人員的工作價效比，方便運營能夠隨時調整活動需求，不用在等資源排期而擱置活動。透過模版化實現內容的呈現，不僅能高效地進行不同運營方案結果對比，也能如期讓活動上線。

對於開發而言也能減少重複性的工作，畢竟太多重複的頁面會導致前端載入的速度越來越慢，也會增加應用的儲存空間。後期程式碼難以維護。在需求過程中我們不只是關心它能不能實現，也需要考慮到如何實現，不能因為業務性問題讓開發降低程式碼質量和應用效能。應讓開發將更多的時間投入到到產品的日常迭代和修復bug中，思考如何提高程式碼質量、應用效能問題。

三、功能設計1、活動頁面拆解

從拼多多擷取的活動頁面。每個活動頁面的風格和所呈現的內容都不一樣。頁面上包括以下內容：

搜尋框（商品推廣、方便使用者查詢商品，減少使用者搜尋路徑）Banner圖（活動重點，能讓使用者知道活動型別）搜尋詞（商品推廣）優惠券商品文字導航廣告位（引導使用者跳轉到其他活動頁面）

以上這些內容是活動經常所見。而這些會根據具體活動進行不同的組合放在同個頁面。而活動頁面的組成包括：元件、活動內容、活動資訊。如圖所示：

簡單來說：我們把不同的元件（樣式、圖片、背景、連結等）放在對應的位置上，然後再去設定元件內具體的內容，最終形成對應的自定義頁面內容

接下來我們具體說下元件、活動內容及活動基本資訊。

1.1、元件

元件定義的標準就是業務化，要求是能承擔一定業務能力的最小複合單元。

將不同的內容分別拆分成對應的元件。由運營人員根據活動內容在CMS配置相關元件。所以需要提前定義好每個元件的內容，並將其寫入程式碼中，不同的內容代表著不同的功能。元件是動態頁面的基礎，由產品定義好內容及相關邏輯，由程式碼去實現，最終運營可根據展示的內容自定義編輯。它是動態頁面的基礎並且關鍵。

常見的元件有：搜尋欄、商品、導航（包括圖片/文字）、圖片廣告、標題、文字、優惠券、圖片輪播等。而通常會根據他們的功能目的給元件命名。

在UI設計時，要定義好每個元件的樣式、以及每個元件之間的間隔。如每個元件的寬度多少、字型大小、icon尺寸、上下間距多少等。

舉例1：

以標題為例，它是商品模組的頂部標題。因為活動頁面會展示很多商品，而這些商品會透過類目或功能進行歸類，而標題則是對這些商品進行總結，明確的告訴使用者這個模組的商品屬於什麼。

從上面兩張圖可以得知標題元件在CMS欄位：上傳圖片。

為什麼只支援圖片呢？因為它可以在有限的空間內去天馬行空，設計出更符合活動效果的字型風格。圖片僅限於PNG格式，否則它容易與背景色相沖突，如果以純文字的方式在CMS配置，那需要考慮的東西會很多，比如字型大小、風格、間距、顏色。這些元素我們是無法預知，如果使用預設的樣式可能也無法符合運營的需求，所以以上傳圖片的方式是有效的解決運營需求。只需要一張png圖片即可，不用在CMS配置文字相關的樣式。傳圖片時需要注意它的尺寸、格式，避免上傳的圖片出現拉伸或擠壓。

舉例2:

1.2、活動內容區域

活動內容區域使用者在APP活動頁面所見的商品、標題、優惠券、圖文廣告等內容，在CMS系統可定義為元件集合，運營以拖動元件的方式將其放在內容區域，並確認每個元件位置，如A位置放什麼內容，B位置放什麼。因為運營在配置時可能會沒有根據活動內容順序配置元件，或多增加了某些元件，這時可在活動內容區域內對元件位置進行調整，或者刪除。主要目的是將元件內容視覺化方便運營根據具體的內容隨著調整。

如圖：

透過調整元件的位置，將其放置合適位置，以便使用者能在看到關鍵資訊。

1.3、活動基礎資訊

基礎資訊是指活動整個“面板”風格，能讓使用者清晰知道活動目的。在CMS可選擇頁面背景色、上傳banner圖、填寫活動規則等。背景色主要是填充整個活動頁面，與banner圖相襯，烘托出活動氛圍，若使用預設背景色，將與活動風格不協調，使用者無法感受到活動氣息。 活動規則是向用戶介紹活動的玩法，避免售後糾紛，活動規則也可以透過文字的形式在頁面底部顯示。

如圖：

以京東活動頁面為例，banner圖直接向用戶傳遞此活動是與家庭相關，那大概會知道涉及哪些品類，比如食品、百貨、家電等。

1.4、預覽

預覽是在頁面配置完成後可預覽活動頁面的效果，是一個很關鍵的步驟，主要目的是在釋出之前，確保最終呈現的頁面效果是否滿足符合要求，如有問題可以及時調整，否則運營只能在測試環境看手機呈現的效果或者直接釋出到線上有問題就調整，這樣的做法會耗費時間和精力。是極其不可取的方式。

重點說明：

新增活動頁面流程要與運營確認，是新增後直接釋出，還是進入到待稽核狀態，由另一個人確認釋出。因為這個涉及運營流程及賬號角色。

如果有稽核步驟，則流程是：效果預覽——提交稽核——進行稽核——確認釋出。

四、總結

電商型的產品活動是不可或缺的。就像超市經常做些促銷活動。透過活動來吸引使用者，將部分的利潤讓利到使用者。如每次的活動都需要由開發來完成，工作很難推行下去。

活動頁面動態配置模板要根據實際業務設計元件，將內容拆分成不同的元件是方便後續的擴充套件，當然動態頁面並不只適用於活動，還有其他頁面，都需要落實到具體的專案中。