中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、場景

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

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

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

二、問題分析

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

1. 問題來源

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

因為不同的促銷活動所呈現的頁面風格不一致；比如開學季，呈現的風格會偏向校園風格，那中秋節又是不同風格，而H5所做的就是更改活動頁面元素。

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

2. 解決方案

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

1）功能介紹

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

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

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

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

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

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

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

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

通過模版化實現內容的呈現，不僅能高效地進行不同運營方案結果對比，也能如期讓活動上線。

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

三、功能設計

1. 活動頁面拆解

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

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

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

如圖所示：

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

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

1）組件

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

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

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

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

舉例1：

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

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

為什么只支持圖片呢？

因為它可以在有限的空間內去天馬行空，設計出更符合活動效果的字體風格；圖片僅限于PNG格式，否則它容易與背景色相沖突，如果以純文字的方式在CMS配置，那需要考慮的東西會很多，比如字體大小、風格、間距、顏色。

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

舉例2：

2）活動內容區域

活動內容區域用戶在APP活動頁面所見的商品、標題、優惠券、圖文廣告等內容，在CMS系統可定義為組件集合，運營以拖動組件的方式將其放在內容區域，并確認每個組件位置，如A位置放什么內容，B位置放什么。

因為運營在配置時可能會沒有根據活動內容順序配置組件，或多增加了某些組件，這時可在活動內容區域內對組件位置進行調整，或者刪除；主要目的是將組件內容可視化方便運營根據具體的內容隨著調整。

如圖：

通過調整組件的位置，將其放置合適位置，以便用戶能在看到關鍵信息。

3）活動基礎信息

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

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

如圖：

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

4）預覽

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

重點說明：

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

如果有審核步驟，則流程是：效果預覽——提交審核——進行審核——確認發布。

四、總結

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

活動頁面動態配置模板要根據實際業務設計組件，將內容拆分成不同的組件是方便后續的擴展；當然動態頁面并不只適用于活動，還有其他頁面，都需要落實到具體的項目中。

本文由@產品狗的日常思考 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議