UI 場景下的春節(jié)氛圍設計

2022-2-28    seo達人


目錄

一、應用圖標設計

二、金剛區(qū)圖標設計

三、底部標簽欄設計

四、導航欄設計區(qū)域

五、頂部視覺區(qū)域

六、背景氛圍強化

七、模塊分類強化

八、閃屏氛圍營造

九、功能區(qū)域置換

十、運營設計營造

 

一、應用圖標設計

應用圖標是用戶接觸產(chǎn)品的第一個環(huán)節(jié),也是視覺差異化體現(xiàn)的重要部分。在春節(jié)主題氛圍中也是表現(xiàn)豐富多樣,從不同的方向體現(xiàn)出春節(jié)的濃厚氛圍。

主要的處理形式會圍繞春節(jié)主題文案、生肖卡通形象、主題皮膚、春節(jié)元素和顏色等。以春節(jié)主題文案舉例,通常是春節(jié)祝福語和營銷結(jié)合的文案為主,設計在應用圖標底部居多,將圖形適當向上位移進行視覺平衡。也有一些產(chǎn)品結(jié)合自身圖標因素,將文案設計在頂部位置,也是為了保持整體結(jié)構的穩(wěn)定性。

圖片

除了文案表達以外,配合生肖卡通形象也是較為常見的手法,可以是局部元素的裝飾,也有是作為皮膚使用的。比如今年是虎年,利用老虎的形象或者局部元素表達也是層出不窮。

圖片

無論是文字表達還是圖形結(jié)合,應用圖標上的表現(xiàn)都是在主題活動中優(yōu)先考慮的場景,這是被用戶在眾多產(chǎn)品中發(fā)現(xiàn)的第一眼。

 

 

二、金剛區(qū)圖標設計

金剛區(qū)就像百變金剛一樣,將各種功能和業(yè)務聚集在一個區(qū)域,便于用戶進行快捷操作。在金剛區(qū)圖標上面進行設計發(fā)揮是最為普及的,春節(jié)期間眾多產(chǎn)品都在各種形式上面進行發(fā)揮,呈現(xiàn)出很多優(yōu)秀的設計案例。

最為簡單的做法就是將帶有春節(jié)主題的文案融入到圖標設計中,這個形式適用于各類節(jié)假日和活動主題中。表現(xiàn)手法也是非常簡單的,配合元素點綴和色彩渲染,很容易體現(xiàn)出主題氛圍。

圖片

 

 

保持圖標造型不變,在外形輪廓背景中融入春節(jié)元素也是一個可行的方向。比如將燈籠作為圖標背景,配合元素裝飾和色彩搭配,呈現(xiàn)出的春節(jié)氛圍也是非常濃厚的。

圖片

也有結(jié)合春節(jié)元素對金剛區(qū)圖標進行設計重構,帶來的感官體驗也是非常不錯的。運用到的元素涉及鞭炮、福字、元寶、紅包、糖葫蘆等等,結(jié)合中國紅營造出濃厚的春節(jié)氛圍。

圖片

 

 

將春節(jié)元素點綴到圖標中也是一種不錯的選擇,或者配合春節(jié)主題顏色進行搭配,也能夠營造出濃厚的新春氛圍。

圖片

金剛區(qū)圖標設計是營造氛圍的最佳區(qū)域,不會對業(yè)務布局和產(chǎn)品結(jié)構造成影響,能夠根據(jù)氛圍的要求作出靈活的調(diào)整。

 

 

三、底部標簽欄設計

底部標簽欄是用戶進行功能模塊切換最頻繁的區(qū)域,通常營造氛圍和金剛區(qū)一樣,都是非常直觀和效果顯著的區(qū)域。

將春節(jié)元素融入到底部標簽欄圖標設計中,帶來的感官體驗是非常不錯的。可以是單個的春節(jié)元素,也可以是元素的局部裝飾,都可以非常直觀的傳達給用戶,突出春節(jié)活動氛圍。

圖片

 

也有將春節(jié)主題文字融入到圖標設計中,一種是直接結(jié)合字體設計和春節(jié)元素表達;一種是結(jié)合外輪廓背景,字體作為圖標部分鑲嵌入背景中。文字的識別性有助于用戶更快理解,傳達氛圍也是非常直觀高效的。

圖片

 

如果不想改變太多,也有一些產(chǎn)品只是在中間凸起模塊圖標上面進行氛圍設計,也能傳遞春節(jié)的氛圍。這樣的設計解決方案最大限度的保留了原本的設計內(nèi)容,屬于弱氛圍營造,也能達到一定的氛圍營造目的。

圖片

 

除了在圖標設計上面營造以外,也能在底部標簽欄背景上面營造,配合中國紅營造出來的氛圍也是非常濃厚的。也可以是配合顏色和元素進行營造,比如煙花效果也是不錯的選擇。

圖片

底部標簽欄設計區(qū)域的氛圍營造效果非常顯著,無論是背景層面的營造還是圖標設計上的創(chuàng)新,都能帶給用戶非常直觀的體驗。

 

 

四、導航欄設計區(qū)域

導航欄+狀態(tài)欄通常是品牌色或者白色居多,也有少數(shù)產(chǎn)品會使用其他顏色進行設計。在春節(jié)期間這個區(qū)域也是作為氛圍營造的不錯選擇,除了利用中國紅作為顏色層面的選擇以外,也有結(jié)合春節(jié)元素進行設計表達的。

圖片

 

除了靜態(tài)的設計表達以外,也有結(jié)合動效的表達提高吸引力,突出春節(jié)濃厚的氛圍。(比如:途牛旅游)

圖片

 

 

五、頂部視覺區(qū)域

頂部視覺區(qū)域和導航欄區(qū)域比較類似,不過頂部的范圍更大一些,運用的場景更多一些。除了首頁以外,在其他主界面也可以使用這個區(qū)域,帶來春節(jié)氛圍的營造。

首頁 Banner 區(qū)域是頂部視覺區(qū)域面積較大的板塊,結(jié)合 Banner 進行背景營造,帶來的視覺效果也是非常突出的。

圖片

 

 

除了根據(jù) Banner 效果營造以外,也有只是營造背景層面的形式,將背景顏色營造出春節(jié)的氛圍,效果也是一目了然。

圖片

在其他的主界面中頂部視覺區(qū)域也可以進行營造,比如個人中心的視覺營造,帶給用戶的感官體驗也是非常的直觀。

 

 

六、背景氛圍強化

除了在局部的區(qū)域進行背景的氛圍強化以外,也有將大面積背景進行春節(jié)強化的。通常是通過顏色來強化,比如通過中國紅來烘托春節(jié)氛圍,也會在背景中裝飾一些春節(jié)元素,進而增強氛圍感。

圖片

背景強化適合卡片式布局,更能襯托出空間感,強化視覺效果。

 

 

七、模塊分類強化

在大視覺模塊區(qū)域強化表現(xiàn)是較為突出的,為了體現(xiàn)精細化的表達,在細節(jié)的設計中也會加以注重。

細分模塊的設計嵌入可以弱化視覺比重,也能達到融入春節(jié)主題的目的。比如在模塊分類的設計中,將春節(jié)主題字體替換到類別中,作為活動欄目的表達,也是非常不錯的設計表達。

圖片

 

 

八、閃屏氛圍營造

閃屏和啟動頁本身屬于相同的表達,都是為了緩解用戶啟動應用時,等待過程中所產(chǎn)生的焦慮感。不過隨著閃屏廣告的概念,被區(qū)分呈現(xiàn)出來了。

體驗了很多產(chǎn)品,發(fā)現(xiàn)還是閃屏廣告居多,以營銷活動為主的案例較多。單純突出春節(jié)主題表達的很少,以春節(jié)主題配合營銷活動設計比較多些。

圖片

不過啟動頁的位置作為主題氛圍營造是值得考慮的方向,作為品牌情感化的延伸是非常不錯的選擇。

 

 

九、功能區(qū)域置換

功能區(qū)域在這個環(huán)節(jié)我是作為整合而存在,指的是下拉刷新、空狀態(tài)、加載、主按鈕等等。在一些重點區(qū)域強化春節(jié)氛圍是很多設計師的首選,也有一些會在細微之處深入挖掘。

下拉刷新對于一些內(nèi)容更新頻繁的產(chǎn)品來說,是用戶操作非常頻繁的功能。通常情況下,是結(jié)合文案提示、默認動效、品牌元素、吉祥物動效等進行表達,而春節(jié)期間很多產(chǎn)品也嵌入了春節(jié)活動,將功能區(qū)域進行置換。不僅可以達到刷新的目的,也能帶給用戶春節(jié)的氛圍感。

圖片

 

在一些主按鈕比較突出的產(chǎn)品中,也會在按鈕的設計上面融入春節(jié)的元素,在細微之處帶給用戶氛圍感。

圖片

以上案例僅為列舉,功能區(qū)域置換是一個可以探索的方向,不僅可以達到突出主題的目的,也不會影響功能的操作。

 

 

十、運營設計營造

運營設計通常都是最活躍的,不會放過任何一個主題的參與,春節(jié)這樣的大節(jié)日更是重點參與的對象。

在春節(jié)期間通過各類活動的設計突出春節(jié)氛圍,讓用戶在感受氛圍的同時促進消費。除了在視覺效果上呈現(xiàn)出豐富多樣的表達,在互動玩法上面也是費盡了心思,帶給用戶更多趣味和年味。

圖片

 

運營設計的營造主要是在專題活動的表達上呈現(xiàn),也會配合 Banner 設計或者其他插入式廣告,還有彈窗廣告的結(jié)合也是較為普遍。

圖片

 

小結(jié)

春節(jié)隨著時間的推移已經(jīng)過去,本文梳理了在春節(jié)期間觀察到的移動端 UI 層面的變化,總結(jié)案例是為了探索大家的設計解決方案,積累更多不一樣的設計思路。案例主要以感官層面的為主,希望這些視覺表達層面的思路,可以帶給你更多靈感。

本文主要是個人觀察所感,不足之處望大家自行補充,我們互相進步。

 

原文地址:黑馬青年(公眾號)
 
作者:黑馬青年
 
轉(zhuǎn)載請注明:學UI網(wǎng)》UI 場景下的春節(jié)氛圍設計

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔