?編輯導(dǎo)語：如今電商發(fā)展飛速，并且隨著電商的發(fā)展衍生出來了一些購物節(jié)，這時電商平臺就會推一些線上活動，活動頁面會比較豐富；本文是作者對活動動態(tài)頁面配置的思考，我們一起來看一下。

活動是電商行業(yè)最常見的運(yùn)營手段之一，會借助各種節(jié)日不斷推出促銷活動；如1月份的元旦節(jié)到12月份的圣誕節(jié)，讓用戶對節(jié)日的儀式感注意力從線下轉(zhuǎn)到線上，通過各種力度的優(yōu)惠促進(jìn)用戶下單從而提升下單率。

讓我們一起來思考活動頁面是如何呈現(xiàn)到用戶。

一、場景

A活動發(fā)布沒有多久，運(yùn)營又想上B活動，當(dāng)產(chǎn)品向H5提出新活動需求時，H5超級不耐煩地抱怨“半個月更新3、4個活動，每個活動需要半天到1天的開發(fā)時間，重復(fù)性的工作讓代碼越積越多…”

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

從以上場景可以得知，目前運(yùn)營更新活動的解決方案是依靠H5才能完成，并活動更新頻繁、耗費(fèi)開發(fā)時間。

二、問題分析

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

1. 問題來源

商品促銷活動，實(shí)際重點(diǎn)在于商品，運(yùn)營在CMS去選擇所需要的商品即可，那為什么需要H5支持部分工作呢？

因?yàn)椴煌拇黉N活動所呈現(xiàn)的頁面風(fēng)格不一致；比如開學(xué)季，呈現(xiàn)的風(fēng)格會偏向校園風(fēng)格，那中秋節(jié)又是不同風(fēng)格，而H5所做的就是更改活動頁面元素。

所以問題在于運(yùn)營不能自己去自定義活動風(fēng)格，只能對商品進(jìn)行管理。

2. 解決方案

從問題中找到的解決方案：CMS系統(tǒng)增加活動頁面動態(tài)配置功能。

1）功能介紹

活動動態(tài)頁面配置流程是由運(yùn)營人員在CMS新增活動頁面并配置相關(guān)內(nèi)容后關(guān)聯(lián)活動入口。

在新增活動頁面可以配置新增活動頁面，能夠配置活動頁面的背景色、banner、活動規(guī)則、商品樣式、文字導(dǎo)航、優(yōu)惠券等內(nèi)容，允許對內(nèi)容進(jìn)行自定義編輯，比如標(biāo)題，可以選擇文字或上傳圖片的方式展示。

為什么要支持自定義編輯呢？

為了提高頁面配置的靈活性，運(yùn)營能夠根據(jù)活動要求隨時調(diào)整；比商品中的購物車，是使用文字按鈕還是圖標(biāo)吸引用戶去點(diǎn)擊，商品促銷的標(biāo)簽，是使用“hot” 或“特價”在不同的內(nèi)容每個字段能有不同的調(diào)整，更能烘托出活動氛圍；運(yùn)營可以在活動頁面隨時預(yù)覽活動效果，并且確認(rèn)無問題后發(fā)布；最后新增輪播位對活動頁面進(jìn)行關(guān)聯(lián)，提供活動入口讓用戶參與活動。

在配置過程中可能會存在意外退出，要考慮自動保存功能；如將新增活動頁面自動生成一條記錄，能夠讓運(yùn)營通活動列表繼續(xù)上次內(nèi)容編輯；因?yàn)榛顒有枰渲玫膬?nèi)容較多，若沒有自動保存功能，運(yùn)營需要重新操作一次。

活動時間內(nèi)，是否能隨時調(diào)整活動頁面相關(guān)內(nèi)容根據(jù)具體的業(yè)務(wù)而定，進(jìn)行內(nèi)容調(diào)整時需要考慮到前端交互流程；如商品價格調(diào)整，要考慮到幾個場景，正在加入購物車、已加入購物車、下單和喚醒支付接口這些節(jié)點(diǎn)是否要更新價格；通常不建議在活動中修改信息，避免用戶投訴等問題，活動出現(xiàn)問題時，建議下架活動，調(diào)整后再重新上架。

同理活動時間結(jié)束后活動入口和活動頁面都要隱藏，用戶無法通過任何方式進(jìn)入到活動頁面。避免與業(yè)務(wù)產(chǎn)生沖突出現(xiàn)其他問題。

活動頁面動態(tài)配置功能實(shí)際是支持運(yùn)營人員在CMS系統(tǒng)能夠靈活配置前端的活動頁面，無需讓開發(fā)調(diào)整代碼從而發(fā)布版本，減少開發(fā)成本、提高開發(fā)人員的工作性價比，方便運(yùn)營能夠隨時調(diào)整活動需求，不用在等資源排期而擱置活動。

通過模版化實(shí)現(xiàn)內(nèi)容的呈現(xiàn)，不僅能高效地進(jìn)行不同運(yùn)營方案結(jié)果對比，也能如期讓活動上線。

對于開發(fā)而言也能減少重復(fù)性的工作，畢竟太多重復(fù)的頁面會導(dǎo)致前端加載的速度越來越慢，也會增加應(yīng)用的存儲空間，后期代碼難以維護(hù)；在需求過程中我們不只是關(guān)心它能不能實(shí)現(xiàn)，也需要考慮到如何實(shí)現(xiàn)，不能因?yàn)闃I(yè)務(wù)性問題讓開發(fā)降低代碼質(zhì)量和應(yīng)用性能；應(yīng)讓開發(fā)將更多的時間投入到到產(chǎn)品的日常迭代和修復(fù)bug中，思考如何提高代碼質(zhì)量、應(yīng)用性能問題。

三、功能設(shè)計(jì)

1. 活動頁面拆解

從拼多多截取的活動頁面。每個活動頁面的風(fēng)格和所呈現(xiàn)的內(nèi)容都不一樣。頁面上包括以下內(nèi)容：

• 搜索框（商品推廣、方便用戶查找商品，減少用戶搜索路徑）；
• Banner圖（活動重點(diǎn)，能讓用戶知道活動類型）；
• 搜索詞（商品推廣）；
• 優(yōu)惠券；
• 商品；
• 文字導(dǎo)航；
• 廣告位（引導(dǎo)用戶跳轉(zhuǎn)到其他活動頁面）；

以上這些內(nèi)容是活動經(jīng)常所見，而這些會根據(jù)具體活動進(jìn)行不同的組合放在同個頁面；而活動頁面的組成包括：組件、活動內(nèi)容、活動信息。

如圖所示：

簡單來說：我們把不同的組件（樣式、圖片、背景、鏈接等）放在對應(yīng)的位置上，然后再去設(shè)置組件內(nèi)具體的內(nèi)容，最終形成對應(yīng)的自定義頁面內(nèi)容

接下來我們具體說下組件、活動內(nèi)容及活動基本信息。

1）組件

組件定義的標(biāo)準(zhǔn)就是業(yè)務(wù)化，要求是能承擔(dān)一定業(yè)務(wù)能力的最小復(fù)合單元。

將不同的內(nèi)容分別拆分成對應(yīng)的組件。由運(yùn)營人員根據(jù)活動內(nèi)容在CMS配置相關(guān)組件；所以需要提前定義好每個組件的內(nèi)容，并將其寫入代碼中，不同的內(nèi)容代表著不同的功能；組件是動態(tài)頁面的基礎(chǔ)，由產(chǎn)品定義好內(nèi)容及相關(guān)邏輯，由代碼去實(shí)現(xiàn)，最終運(yùn)營可根據(jù)展示的內(nèi)容自定義編輯，它是動態(tài)頁面的基礎(chǔ)并且關(guān)鍵。

常見的組件有：搜索欄、商品、導(dǎo)航（包括圖片/文字）、圖片廣告、標(biāo)題、文本、優(yōu)惠券、圖片輪播等；而通常會根據(jù)他們的功能目的給組件命名。

在UI設(shè)計(jì)時，要定義好每個組件的樣式、以及每個組件之間的間隔；如每個組件的寬度多少、字體大小、icon尺寸、上下間距多少等。

舉例1：

以標(biāo)題為例，它是商品模塊的頂部標(biāo)題，因?yàn)榛顒禹撁鏁故竞芏嗌唐?；而這些商品會通過類目或功能進(jìn)行歸類，而標(biāo)題則是對這些商品進(jìn)行總結(jié)，明確的告訴用戶這個模塊的商品屬于什么。

從上面兩張圖可以得知標(biāo)題組件在CMS字段：上傳圖片。

為什么只支持圖片呢？

因?yàn)樗梢栽谟邢薜目臻g內(nèi)去天馬行空，設(shè)計(jì)出更符合活動效果的字體風(fēng)格；圖片僅限于PNG格式，否則它容易與背景色相沖突，如果以純文字的方式在CMS配置，那需要考慮的東西會很多，比如字體大小、風(fēng)格、間距、顏色。

這些元素我們是無法預(yù)知，如果使用默認(rèn)的樣式可能也無法符合運(yùn)營的需求，所以以上傳圖片的方式是有效的解決運(yùn)營需求；只需要一張png圖片即可，不用在CMS配置文字相關(guān)的樣式；傳圖片時需要注意它的尺寸、格式，避免上傳的圖片出現(xiàn)拉伸或擠壓。

舉例2：

2）活動內(nèi)容區(qū)域

活動內(nèi)容區(qū)域用戶在APP活動頁面所見的商品、標(biāo)題、優(yōu)惠券、圖文廣告等內(nèi)容，在CMS系統(tǒng)可定義為組件集合，運(yùn)營以拖動組件的方式將其放在內(nèi)容區(qū)域，并確認(rèn)每個組件位置，如A位置放什么內(nèi)容，B位置放什么。

因?yàn)檫\(yùn)營在配置時可能會沒有根據(jù)活動內(nèi)容順序配置組件，或多增加了某些組件，這時可在活動內(nèi)容區(qū)域內(nèi)對組件位置進(jìn)行調(diào)整，或者刪除；主要目的是將組件內(nèi)容可視化方便運(yùn)營根據(jù)具體的內(nèi)容隨著調(diào)整。

如圖：

通過調(diào)整組件的位置，將其放置合適位置，以便用戶能在看到關(guān)鍵信息。

3）活動基礎(chǔ)信息

基礎(chǔ)信息是指活動整個“皮膚”風(fēng)格，能讓用戶清晰知道活動目的；在CMS可選擇頁面背景色、上傳banner圖、填寫活動規(guī)則等。

背景色主要是填充整個活動頁面，與banner圖相襯，烘托出活動氛圍，若使用默認(rèn)背景色，將與活動風(fēng)格不協(xié)調(diào)，用戶無法感受到活動氣息；活動規(guī)則是向用戶介紹活動的玩法，避免售后糾紛，活動規(guī)則也可以通過文本的形式在頁面底部顯示。

如圖：

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

4）預(yù)覽

預(yù)覽是在頁面配置完成后可預(yù)覽活動頁面的效果，是一個很關(guān)鍵的步驟，主要目的是在發(fā)布之前，確保最終呈現(xiàn)的頁面效果是否滿足符合要求，如有問題可以及時調(diào)整；否則運(yùn)營只能在測試環(huán)境看手機(jī)呈現(xiàn)的效果或者直接發(fā)布到線上有問題就調(diào)整，這樣的做法會耗費(fèi)時間和精力。是極其不可取的方式。

重點(diǎn)說明：

新增活動頁面流程要與運(yùn)營確認(rèn)，是新增后直接發(fā)布，還是進(jìn)入到待審核狀態(tài)，由另一個人確認(rèn)發(fā)布，因?yàn)檫@個涉及運(yùn)營流程及賬號角色。

如果有審核步驟，則流程是：效果預(yù)覽——提交審核——進(jìn)行審核——確認(rèn)發(fā)布。

四、總結(jié)

電商型的產(chǎn)品活動是不可或缺的，就像超市經(jīng)常做些促銷活動，通過活動來吸引用戶，將部分的利潤讓利到用戶；如每次的活動都需要由開發(fā)來完成，工作很難推行下去。

活動頁面動態(tài)配置模板要根據(jù)實(shí)際業(yè)務(wù)設(shè)計(jì)組件，將內(nèi)容拆分成不同的組件是方便后續(xù)的擴(kuò)展；當(dāng)然動態(tài)頁面并不只適用于活動，還有其他頁面，都需要落實(shí)到具體的項(xiàng)目中。

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

題圖來自Unsplash，基于CC0協(xié)議