案例復盤:如何從零開始打造一個動態(tài)節(jié)日閃屏?

0 評論 7246 瀏覽 26 收藏 16 分鐘

本文是騰訊團隊關于動態(tài)節(jié)日閃屏的一個復盤,看如何從常規(guī)的閃屏中尋找創(chuàng)新點與與共鳴點來去增加用戶的粘性。

一、項目背景

閃屏作為打開APP產(chǎn)品時首要展現(xiàn)的部分,品牌的“門面”頃刻盡顯,在眾多節(jié)日閃屏中如何凸顯產(chǎn)品特征、體現(xiàn)品牌的文化性是節(jié)日閃屏的重要目的。19年新的設計趨勢不斷更替,動態(tài)視頻浪潮發(fā)展迅猛,我們在節(jié)日閃屏的設計上,也進行了新風格的探索和挖掘。節(jié)日閃屏不僅僅只是單方面的給用戶傳遞關懷,更需要深層次的情感交流,不斷尋求創(chuàng)新點與共鳴點增加用戶粘性。

1. 設計目標

  • 用戶關懷:傳達節(jié)日氛圍;
  • 品牌建設:加深品牌文化認知;
  • 價值觀傳:凸顯產(chǎn)品態(tài)度。

2. 產(chǎn)品目標

提升產(chǎn)品情懷,基于品牌傳播以及用戶情感鏈接的價值,通過情感共鳴拉近QB與用戶之間的距離。

3. 閃屏調(diào)研

縱觀市面上各類app節(jié)日閃屏,大多使用單頁插畫的設計,且多采用手繪的表現(xiàn)手法。雖然畫面美觀,但通過“移花接木”的方式你會發(fā)現(xiàn),它好像適用于所有同類型app的節(jié)日閃屏,具有“通用性”。從視覺表現(xiàn)力和講述故事的方式來看較為傳統(tǒng),缺乏自身品牌的個性與印記。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

二、創(chuàng)意過程

1. 創(chuàng)意方式

前期方案階段,我們思考如何將一年里的所有節(jié)日用一套邏輯進行創(chuàng)意激發(fā),達到高效以及系統(tǒng)化的效果,并總結出一套推導方式。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

節(jié)日種類分為傳統(tǒng)節(jié)日&國際性節(jié)日。傳統(tǒng)節(jié)日(春節(jié)、元宵節(jié)、清明節(jié)、端午節(jié)、中秋節(jié)等)大多宣揚中國的傳統(tǒng)文化價值觀;國際性節(jié)日(元旦、愚人節(jié) 、勞動節(jié)、兒童節(jié)等)則具有中西方的文化差異而稍有區(qū)分。

首先,明確節(jié)日主題,根據(jù)節(jié)日特點發(fā)散關鍵詞,這個階段可以開放思維不受太多限制。把關鍵詞與任意屬性進行組合,選擇最典型的部分進行方案的塑造,這樣更有利于引起用戶共鳴。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

以兒童節(jié)為例,它屬于國際性節(jié)日,在文化傳達上采用最為大眾認知的內(nèi)容(通俗文化)比較能引起情感共鳴?!爸敉辍闭萌诤狭岁P鍵詞的精華,讓人聯(lián)想到童年愛玩的游戲以及蘊藏的少時夢想。在價值觀上,體現(xiàn)了對于小孩無限的創(chuàng)造力與想象力的鼓勵。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

2. 故事設定

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

故事主題確定之后,我們將針對閃屏結構進行設定。不同于傳統(tǒng)的靜態(tài)啟動樣式,我們將閃屏比喻成一部6s的舞臺劇,演員(人物)、布景(場景搭建)、劇本(故事內(nèi)容、動作情節(jié))則是不可或缺的部分。通過對各個分支的設定,組合構建出閃屏故事的整體。

三、設計過程

1. 故事場景立體化

(1)3D Videos + 2D Illustrations表現(xiàn)手法

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

當下短視頻風靡于網(wǎng)絡平臺,大眾對于動態(tài)視頻消費的成本越來越低,這對我們來說正好是突破口,動態(tài)設計更好的讓用戶以生動有趣的方式感受內(nèi)容傳播的魅力,在主流插畫閃屏的大環(huán)境下跳脫出來,作出差異化的設計。

3D擬物化風格在2019年再度盛行,應用于各類設計場景。因此,我們將故事元素進行立體化塑造,logo場景元素使用C4D建模刻畫突出,人物&部分場景則用2D插畫表現(xiàn),二者的搭配效果可以讓閃屏更加獨特和突出,創(chuàng)造出不一樣的視覺感受。在競品采用單一插畫表現(xiàn)形式下,3D風格的應用一定程度上拉開了與競品的差異,增加品牌記憶點。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

(2)版式

版式的設定上,以品牌logo為舞臺視覺中心進行延展設計,輔助元素則服務于它,具有完整體系化的視覺品牌調(diào)性,使用戶對產(chǎn)品有固定的品牌認知。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

(3)構圖

品牌調(diào)性是貫穿所有節(jié)日的,在設計前明確QB的品牌調(diào)性,這樣更有利于品牌認知的傳達。一年里的節(jié)日繁多,如果不對畫面進行有效的規(guī)范,會呈現(xiàn)出雜亂的感受。一方面影響閃屏整體的系列感知,另一方面對品牌的認知傳達也會有一定影響。

因此,總結出兩套構圖邏輯,品牌logo位置、大小不變的情況下,透視構圖使畫面更有空間延伸感,適合垂直空間的設計;包圍式構圖則圍繞logo為視覺中心,周圍適當添加輔助元素,適用于俯視鏡頭的設計。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

(4)配色

色彩作為渲染故事氛圍的重要一環(huán),是能引起大眾審美愉悅的、最為敏感的形式要素,具有強表現(xiàn)力的要素之一。它的性質(zhì)直接影響人們的心理,而最直觀易理解的色彩體系來源于生活的感知,閃屏的配色體系也從中進行提取,通過圖像情緒版的收集,得到大致的色板基調(diào)。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

2. 動態(tài)情節(jié)設計

(1)鏡頭語言

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

傳統(tǒng)2D插畫被限制于XY軸的平面空間內(nèi),我們試圖打破這樣的格局,將6s時長發(fā)揮到最大化,拓展到Z軸的維度,將用戶視角帶入預先設定好的故事場景中。

充分發(fā)揮3D的優(yōu)勢,在攝像機沿著Z軸運動的過程中,使用簡練的推、拉、升、降等手法,增加畫面的生動性。前3s引人入勝,后3s展現(xiàn)品牌,為6s的閃屏制造出視覺沖擊力和記憶點。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

(2)人物動態(tài)設計

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

作為6s閃屏的主角人物,在制作動畫時需要和場景進行動作情節(jié)設計,增加畫面的生動性。2D本身不具備3D的Z軸要素,但在動畫設計時,通過人物的簡單位移、縮放、旋轉(zhuǎn)設置,可以達到Z軸的縱深效果,模擬3D空間的視覺感受。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

由于人物與場景的質(zhì)感差異,在進行2D與3D的視覺融合時,動作匹配就顯得格外重要。人物需要遵循整體場景的運鏡軌跡,并與其有所互動才會得到流暢的視覺效果。人物的出場方式也需要結合物理運動邏輯進行設定,可采用畫外飛入、掉落、旋轉(zhuǎn)劃入等方式。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

快速運動時的路徑追蹤,需要進行2D人物與3D場景的Z軸配合,這部分需要花費較多的時間進行單幀調(diào)試,最終達到自然的視覺效果。

3. 構建人物角色世界觀

故事要素少不了“人”這一關鍵,為了更好的傳達故事內(nèi)容,將人物設定應用到閃屏設計中,具有更好的故事帶入感以及閃屏系列感知。一方面要考慮 QB 的產(chǎn)品定位和用戶屬性,另一方面也要考慮流行的設計趨勢風格。

(1)人物設定

結合QB品牌特性,以探索興趣世界為主線,提煉出角色自由愛玩,熱愛生活的人格特征。從故事劇本出發(fā),以生活中的人物作為角色原型,采用情感化設計的方法,根據(jù)角色屬性進行人物設定。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

(2)外形設計

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

不同的閃屏故事其造型各不相同。在造型設計上,結合時下人物設計趨勢的特征強化手法,將頭身比進行夸張?zhí)幚恚曈X上突出人物輪廓的曲直對比,增加視覺的生動性與設計感。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

(3)特征提煉

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

兒童節(jié)在孩子的基礎上加入多啦A夢飛行器的意向,將竹蜻蜓元素融入到人物設計,只需把它戴在頭上就可以通過大腦意念隨意控制飛行,正好契合兒童無限想象力這一主題。在人物設定時,可以考慮結合相關的意向。

繪制筆刷:

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

統(tǒng)一人物插畫表現(xiàn)風格,使用一致的筆刷庫進行繪制?!案捎湍崩L制的優(yōu)勢在于,在大色塊鋪設時,除了保留邊緣的筆觸,也能保持色彩本身的透氣感,整體簡潔不乏細節(jié);而“噴濺”相似于目前應用較多的噪點,可以增加繪制物的光感細節(jié)。

2018-2019部分閃屏

2018圣誕:

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

2018除夕:

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

2019春分:

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

2019五一:

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

2019六一:

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

2019夏至:

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

四、傳播方式

1. 線上

節(jié)日當天除了啟動閃屏的動態(tài)露出之外,我們打通了首頁頭圖、天氣專區(qū)、壁紙專區(qū)等渠道,讓用戶充分感知到節(jié)日的關懷同時,增加品牌曝光率。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

2. 線下

恰逢QQ瀏覽器20周年紀念,閃屏伴隨時間流逝的瞬間,像極了產(chǎn)品不斷探索前進的縮影。因此,制作的一整套明信片用以團隊關懷也是極好的。

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

設計總結

如何導演一出6秒舞臺劇 | 動態(tài)節(jié)日閃屏

節(jié)日閃屏是品牌運營的一部分,通過動態(tài)節(jié)日閃屏的情感化運營,給用戶傳達節(jié)日關懷的同時,也不斷的強化了QB的品牌認知。QB探索用現(xiàn)代的表現(xiàn)手法傳達節(jié)日感知和人文關懷,賦予傳統(tǒng)文化以更鮮明的時代特征,傳統(tǒng)中有新意,進而加強用戶對閃屏及QB品牌的深刻印象。

 

作者: Lucia,公眾號:騰訊FXD(ID:tencentfxd)

來源:https://mp.weixin.qq.com/s/HR2QtdKJ_Xo47xOnMJtjJQ

本文由 @騰訊FXD?授權發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!