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

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

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

一、場(chǎng)景

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

注釋：H5為H5工程師，因活動(dòng)頁面均為H5頁面制作。

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

二、問題分析

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

1. 問題來源

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

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

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

2. 解決方案

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

1）功能介紹

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

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

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

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

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

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

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

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

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

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

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

1. 活動(dòng)頁面拆解

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

• 搜索框（商品推廣、方便用戶查找商品，減少用戶搜索路徑）；

• Banner圖（活動(dòng)重點(diǎn)，能讓用戶知道活動(dòng)類型）；

• 搜索詞（商品推廣）；

• 優(yōu)惠券；

• 商品；

• 文字導(dǎo)航；

• 廣告位（引導(dǎo)用戶跳轉(zhuǎn)到其他活動(dòng)頁面）；

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

如圖所示：

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

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

1）組件

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

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

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

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

舉例1：

以標(biāo)題為例，它是商品模塊的頂部標(biāo)題，因?yàn)榛顒?dòng)頁面會(huì)展示很多商品；而這些商品會(huì)通過類目或功能進(jìn)行歸類，而標(biāo)題則是對(duì)這些商品進(jìn)行總結(jié)，明確的告訴用戶這個(gè)模塊的商品屬于什么。

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

為什么只支持圖片呢？

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

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

舉例2：

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

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

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

如圖：

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

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

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

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

如圖：

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

4）預(yù)覽

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

重點(diǎn)說明：

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

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

四、總結(jié)

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

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

【轉(zhuǎn)載說明】   若上述素材出現(xiàn)侵權(quán)，請(qǐng)及時(shí)聯(lián)系我們刪除及進(jìn)行處理：[email protected]