如何設(shè)計節(jié)日閃屏?來看騰訊設(shè)計師的實戰(zhàn)思路!

2019-4-9    資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

情感化設(shè)計已經(jīng)不是一個新概念,唐納德·諾曼在《情感化設(shè)計》一書中,清晰地闡述了情感化設(shè)計的重要地位與作用?,F(xiàn)階段,同類型的產(chǎn)品在功能、服務(wù)、內(nèi)容上日益趨同,差異越來越小,想讓產(chǎn)品觸及用戶的內(nèi)心,除了功能滿足需求之外,也需要進行情感化運營。

微云在不斷完善基礎(chǔ)功能的同時,還基于用戶行為,增加了許多情感化的體驗,比如往年今日、人臉相冊等。在情感化運營上,微云在2018年開始了較為完整的節(jié)日閃屏設(shè)計,希望向用戶傳達節(jié)日的祝福,拉近產(chǎn)品與用戶的距離。

什么是節(jié)日閃屏?

節(jié)日閃屏是指在特定的節(jié)日進行情感化設(shè)計,傳遞品牌關(guān)懷的閃屏。優(yōu)秀的節(jié)日閃屏,在內(nèi)容上不僅能夠觸達用戶的記憶點,也能夠與品牌相融合,這樣既拉近了用戶與產(chǎn)品的距離,也強化了品牌的認知和記憶。

確定設(shè)計目標(biāo)

在開始設(shè)計之前,我們期望節(jié)日閃屏能夠達到以下兩個目標(biāo):

  • 傳達節(jié)日祝福喚起用戶回憶
  • 體現(xiàn)微云品牌調(diào)性

不同的節(jié)日有不同的文化背景和風(fēng)俗習(xí)慣,節(jié)日祝??梢越Y(jié)合最典型的特征,這樣更有利于喚起用戶回憶,后文會結(jié)合案例進行分析。然而,品牌調(diào)性是貫穿所有節(jié)日的,在設(shè)計之初,我們明確微云的品牌調(diào)性,這樣更有利于品牌的傳達。

1. 品牌調(diào)性研究

Alan Cooper在《About face 4》中提到,在傳達品牌調(diào)性時,可以用一組形容詞來描述產(chǎn)品及體驗,這些詞可以組成詞云,用來指導(dǎo)視覺設(shè)計。如何創(chuàng)建這組詞云呢?Allan Cooper 提供了四個方法:從品牌大綱提煉關(guān)鍵詞、分析現(xiàn)有產(chǎn)品的界面和服務(wù)、分析競品的界面和服務(wù)、收集用戶反饋。

結(jié)合微云的特征,我們從現(xiàn)有產(chǎn)品的界面和用戶反饋兩個角度進行分析,提煉符合微云調(diào)性的詞云。

2. 分析現(xiàn)有產(chǎn)品界面

微云的平臺較多,包括WEB端、PC端、移動端、小程序等,其中WEB端和移動端的用戶最多,就從這兩個端入手,分析產(chǎn)品界面的品牌特征。從結(jié)構(gòu)布局和色彩比例上,可以歸納兩端的共同點:結(jié)構(gòu)清晰、留白較多、簡約干凈。

3. 分析用戶反饋

微云用戶在職業(yè)分布上,白領(lǐng)用戶占最大。結(jié)合使用場景分析,用戶反饋最多的詞是:輕量、方便、下載快速。

4. 提煉微云品牌詞云

結(jié)合產(chǎn)品界面「結(jié)構(gòu)清晰、留白較多、簡約干凈」的特征和「輕量、方便、下載快速」的用戶反饋,我們提煉出適合描述微云品牌的詞云:簡約、干凈、留白。

如何做一個節(jié)日閃屏?

接下來就以勞動節(jié)閃屏為例,從節(jié)日特征和品牌調(diào)性兩個維度來闡述節(jié)日閃屏的設(shè)計過程。

1. 節(jié)日特征

利用窮舉法,篩選最典型的節(jié)日特征。

微云是一個工具化的產(chǎn)品,旅行/度假更適合旅行類產(chǎn)品,勞動/休息與微云更契合。結(jié)合產(chǎn)品功能,定了兩個方向,第一個是「五一不勞你動,微云幫你整理」,與備份照片功能結(jié)合;第二個是「勞動光榮」,凸顯節(jié)日氣氛。以下是一些草圖方案:

2. 品牌調(diào)性

前面三個方案重點在于功能的表達,把用戶目光吸引到場景上,內(nèi)容豐富,但可能造成用戶在3秒內(nèi)無法明白畫面主題。方案四重點在于氣氛的表達,關(guān)注人物故事,角色正在辛勤的勞動,直接點題,場景只起烘托作用。結(jié)合「簡約、干凈、留白」的品牌調(diào)性和「喚起美好回憶」的品牌期望,我們選擇了氛圍方向進行深入設(shè)計。

主題確定之后,就開始進行優(yōu)化設(shè)計了。圍繞著關(guān)鍵詞,采用扁平化的設(shè)計手法,在色彩搭配上,由于勞動節(jié)沒有明顯的色彩傾向,故以品牌藍為主色調(diào),橙色來源于產(chǎn)品的圖標(biāo),作為輔助色提亮整體畫面;在頁面排版上,保持大面積的留白,簡約清爽。

3. 小結(jié)

勞動節(jié)閃屏上線后,我們進行了復(fù)盤,我們希望微云的節(jié)日閃屏給用戶傳達的是「你的珍貴回憶微云幫你記錄」這樣的小心思,而不是「我們有xx功能」之類的廣告,所以在以后的節(jié)日閃屏中,我們會更加傾向節(jié)日故事性的表達。視覺風(fēng)格則采用簡約、干凈、留白的方式,重點突出人物故事,不在場景上過多渲染。

4. 其他的節(jié)日閃屏設(shè)計

按照上面的思路,我們完善了其他的節(jié)日閃屏設(shè)計。

母親節(jié)閃屏

母親節(jié)是一個西方的節(jié)日,在這一天,孩子給母親送康乃馨,來表達自己的愛意。在節(jié)日故事上選擇了最具代表性的孩子給母親送花的場景。

端午節(jié)閃屏

一提到端午節(jié),就會想起粽子的「甜咸之戰(zhàn)」,可見粽子在端午節(jié)的重要地位,所以端午節(jié)的節(jié)日故事就圍繞粽子開展,三個好友齊心協(xié)力包粽子。

七夕閃屏

牛郎織女,鵲橋相會,是七夕節(jié)的美麗傳說,這一天情侶相聚,相互表達愛意。七夕故事定格在情侶相會的瞬間,女生飛奔向男生,在銀河上翩翩起舞,表達久別重逢的喜悅。

中秋閃屏&圣誕節(jié)閃屏

中秋節(jié)故事主題是合家團圓、賞月吃餅。圣誕節(jié)故事則以父女二人齊心協(xié)力裝飾圣誕樹為主題。

△ 備注:圣誕節(jié)最終效果圖由另一同事繪制

所有節(jié)日閃屏合集

輸出節(jié)日閃屏規(guī)范

節(jié)日閃屏除了故事性的表達之外,在設(shè)計上我們也輸出了一部分規(guī)范,用來把控風(fēng)格的統(tǒng)一。

1. 配色規(guī)范

色彩作為用戶最容易感知的部分,使用時與品牌相呼應(yīng),主色與輔助色均來源于產(chǎn)品圖標(biāo)。有明顯色彩屬性的節(jié)日,以節(jié)日固有色為主,比如春節(jié)紅色,中秋黃色等等。無明顯色彩屬性的節(jié)日,可以以品牌藍為主,強化品牌印記。

2. 角色規(guī)范

我們希望重點展示的是人物的珍貴回憶,基于此,我們設(shè)計了一批角色,講述角色的故事,讓用戶產(chǎn)生代入感。為了保證統(tǒng)一性,我們制定了人物的細節(jié)規(guī)范,包括角色頭身比=1 : 9、服裝款式以休閑為主、服飾顏色與品牌色呼應(yīng)等。

在設(shè)定好人物細節(jié)規(guī)范之后,我們也完善了角色資源庫,方便后期在其他場景的應(yīng)用。

3. 場景規(guī)范

在場景設(shè)計上,我們以簡潔,明確為主,場景主要起烘托人物故事的作用,而不進行過多的渲染。

拓展場景的使用

做了一系列閃屏之后,這些插圖和角色并沒有閑置,我們在線下挖掘了一些新的使用場景。這些素材被重新利用起來,變身為辦公室的裝飾掛畫,營造出一個充滿品牌氣氛的辦公環(huán)境。

總結(jié)

2018年微云希望通過節(jié)日閃屏的情感化運營,給用戶傳達節(jié)日關(guān)懷的同時也強化微云的品牌認知。在后續(xù)的規(guī)劃中,我們希望節(jié)日閃屏不僅僅是單方面的給用戶傳遞關(guān)懷,還能夠和用戶互動,實現(xiàn)更深層次的情感交流,比如點擊節(jié)日閃屏,跳轉(zhuǎn)到往年今日,幫助用戶回憶起以往的美好回憶,增加用戶粘性。2019年微云會繼續(xù)給大家傳遞節(jié)日的祝福,也會不斷探索新的閃屏設(shè)計風(fēng)格,敬請大家期待。

藍藍設(shè)計m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計  圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔