支撐BG產品體驗的“設計語言” 實操案例——解析618系列營銷視覺設計方案

✏️

劃重點:

前期我們的系列文章已經分享支撐to B/G設計基調的“設計語言構建”,到to B/G產品入口網站煥新升級。

今天迎來我們的完結篇雲產品營銷活動案例解析落地,一起看看吧~

專案背景

京東業務板塊整合,京東科技子集團正式成立,成為整個京東集團對外提供技術服務的核心輸出平臺。整合後的京東雲,升級了LOGO,並更新了slogan為“雲之上,創更多”。

配合京東集團618大促節奏,雲側會集中活動資源,進行雲相關的ToB大促活動,完成收入及使用者轉化。

此次活動分為備戰期和主站期,備戰期圍繞“助力商家賦能”主題來組織頁面,突出展示為商家帶來的價值,如“降本增效”“精準獲客”等;主站期為全面爆發期,面向全部京東雲的新老客戶,在活動設計時,明確業務目標“促新購收入”、“提升企業付費使用者數”。

主視覺

結合集團架構升級、品牌升級、活動規劃、往期618與雙十一的視覺,經過大家腦暴,我們提出了“聚變與裂變”的概念來貫穿今年618活動的視覺。

支撐BG產品體驗的“設計語言” 實操案例——解析618系列營銷視覺設計方案

同時提取了往期大促主站期活動的環形聯接元素延續主站期大促品牌視覺。

| 備戰期

支撐BG產品體驗的“設計語言” 實操案例——解析618系列營銷視覺設計方案

備戰期主題為商家賦能專場,對應“聚變”概念,畫面以京東雲和京東科技的輔助圖形為基礎的方形科技平臺為核心,以光的傳遞為介質向內聚集京東雲與合作伙伴的能力,為商家帶來價值,加速商家實現快速增長,突破業務瓶頸期,為商家按下快進鍵。畫面使用官網日常運營的等角檢視俯視視角來延續京東雲的品牌風格,向商家傳遞京東雲的品牌形象。

| 主站期

支撐BG產品體驗的“設計語言” 實操案例——解析618系列營銷視覺設計方案

主站期圍繞“裂變”的概念進行設計,以同備戰期主體元素為基礎增加大促感元素向外裂變爆發,體現京東雲創更多的能力與狀態,為更多企業、商家提供多元業務發展及增長理念,將技術優勢負能於產品,滿足不同商家、企業不同階段的需求,科技助力快速裂變增長。畫面使用超廣角仰視檢視,增強活動感的同時,也增加了穩定感與權威感,給使用者信賴的感覺。

| 視覺延續與發展

主體元件延續,備戰期與主站期主體採用了同一個物體的不同視角、狀態,元素採用ArtDeco Design中的3D白膜,保持一定品牌感的同時也保證了設計效率。

畫面視角從備戰期的等角檢視俯視視角向上升起、向外爆發出主站期的超廣角仰檢視,營造活動的連續性。

支撐BG產品體驗的“設計語言” 實操案例——解析618系列營銷視覺設計方案

兩期畫面使用了京東紅、科技黑、金色、藍灰色搭配,用京東紅來繼承與傳播京東家族的基因與能量,用黑色來表現來自京東科技集團的穩重與專業,搭配金色營造出618節日的氛圍。備戰期面向商家客戶以科技黑色為主色,延續科技的品牌感;主站期面向全部客戶以京東紅為主色,更多的展現集團的基因與能量。

頁面設計

| 頁面構思

支撐BG產品體驗的“設計語言” 實操案例——解析618系列營銷視覺設計方案

服務目標設計

在活動設計時,明確業務目標“促新購收入”、“提升企業付費使用者數”,重點包裝消費返券、1元抽獎等和目標掛鉤樓層,突出利益點,吸引使用者轉化。

全流程轉化設計

結合活動抽獎、消費返券等促銷玩法,從‘註冊-認證-付費-再付費’整個流程進行活動包裝,每一步均增加助力轉化點,提升使用者轉化率。同時為不滿足活動的使用者提供其它轉化資訊。

快捷觸達設計

頁面整體較高,點選基本聚焦在前兩屏,佈局上將核心利益點提煉在首屏露出,並增加樓層快捷導航,提高下方樓層觸達率。

|

頁面視覺

支撐BG產品體驗的“設計語言” 實操案例——解析618系列營銷視覺設計方案

晶片——融合承載,以小見大影響生活,從晶片提取視覺元素貫穿頁面(樓層背景、卡片樣式等)。京東雲618立足於科技,延續主KV質感“金屬+磨砂”,加強科技感,統一整體頁面感受。頁面中多用“標籤”樣式,營造618大促、優惠等氛圍感。頁面整體按照“F”型瀏覽路徑進行資訊排布,幫助使用者迅速獲取重要資訊以及快速瞭解活動概要。從而選擇最合適的商品活動進行參與,節省使用者“找”的時間,從而減少頁面跳出機率。

支撐BG產品體驗的“設計語言” 實操案例——解析618系列營銷視覺設計方案

重要樓層:

從現實店鋪售賣獲取靈感,樓層採取貨架形式設計,營造“買賣”氛圍感受,吸引使用者注意力引起共鳴,從而促進“買”的行為產生。

報告樓層:

融入優惠券的設計概念,30度斜角分開“撕裂”,免費贈送與盲盒抽取即撕即得,迎合使用者即可獲取禮品的喜悅感。

抽獎樓層:

大轉盤採用金屬質感,質感厚重,樓層所佔面積較大,加強抽獎獎項的分量感以及比重,營造“可獲得大獎”的感受,吸引使用者參與。

支撐BG產品體驗的“設計語言” 實操案例——解析618系列營銷視覺設計方案

常規樓層:

卡片設計整合資訊內容,底紋緊扣樓層主題,融入“晶片”特徵細節突出科技感,品類區分上保持統一視覺感受的同時,仍舊有所區分。

總結

本次的618運營設計,充分考慮活動運營重點並結合企業特徵文化進行設計。分享簡略的展現了618雲創熱愛節的設計過程、設計思路。頁面現已上線京東雲官網,京東雲618雲創熱愛節 https://www。jdcloud。com/cn/activity/618有興趣的同學可以去看看哦~

希望本篇分享對大家的工作有所啟發,關於活動運營設計的更多分享,請大家關注我們~

TAG: 京東618樓層頁面設計