UI 場景中常見的 3 個主題化區(qū)域

2022-11-4    seo達(dá)人


圖片

 

 

一、底部標(biāo)簽欄主題化設(shè)計(jì)

1、底部標(biāo)簽欄圖標(biāo)主題

在不改動結(jié)構(gòu)的情況下,替換底部標(biāo)簽欄圖標(biāo)是最方便的形式。通過主題化的圖標(biāo)也非常容易傳遞氛圍,無論是在節(jié)日慶典、購物季、主題活動等場景中,這個形式都是最直觀的表達(dá)之一。

比如優(yōu)酷 APP 在中秋節(jié)的時候,就將底部標(biāo)簽欄圖標(biāo)替換為各式各樣的月餅造型,主題營造也是非常的明顯。將原本的圖標(biāo)造型融入到月餅圖案中,鑲嵌圖案的設(shè)計(jì)非常巧妙,不僅保留原本的識別特征,也強(qiáng)化了主題氛圍感。

圖片

除了在圖標(biāo)造型上面發(fā)揮以外,也可以將主題文案融入到設(shè)計(jì)中,這也是較為直接的表現(xiàn)形式。作為特定主題來說一目了然,需要把控主題文案數(shù)量。

圖片

 

2、底部標(biāo)簽欄背景層

底部標(biāo)簽欄的設(shè)計(jì)中,除了通過圖標(biāo)設(shè)計(jì)附和主題之外,也可以在背景層進(jìn)行主題氛圍營造。由于底部屬于操作頻繁區(qū),背景層的設(shè)計(jì)不能過于搶眼,容易干擾功能的識別與操作。比如前段時間抖音 APP 將底部標(biāo)簽欄背景層進(jìn)行主題營造的時候,在黑色層上面運(yùn)用的色調(diào)比較深一些,與原本黑色的沉浸式體驗(yàn)有差異,在白底上面呈現(xiàn)效果還可以。

圖片

沒過多久抖音設(shè)計(jì)團(tuán)隊(duì)便進(jìn)行了更新,壓暗了背景元素的色調(diào),弱化了視覺感。更符合原本的感官體驗(yàn)習(xí)慣,也能強(qiáng)化主題感。

圖片

除了抖音以外,小紅書 APP 前段時間也在底部標(biāo)簽欄背景層上面進(jìn)行了營造。如果營造面積比較大的話,在無圖標(biāo)形式(純文字版底部標(biāo)簽欄)上面比較適合。如果帶有圖標(biāo)的話,適合做局部強(qiáng)化。

圖片

 

 

二、頂部視覺區(qū)強(qiáng)化主題感

頂部視覺區(qū)包含狀態(tài)欄、導(dǎo)航欄和頂部內(nèi)容區(qū)域,通常是白底、灰底、品牌色底和運(yùn)營主題背景等為主。也是強(qiáng)化視覺感的常見區(qū)域,作為營造主題氛圍來說也是非常好的選擇。

圖片

該區(qū)域不僅可以作為功能性活動入口,也能在特殊時間段作為氛圍營造。很多產(chǎn)品都會在頂部視覺區(qū)域做應(yīng)變處理,滿足多場景的需求發(fā)揮。

圖片

頂部視覺區(qū)的強(qiáng)化也是增強(qiáng)頁面感官體驗(yàn)的方式之一,除了靜態(tài)背景的營造以外,也可以使用動態(tài)或者流體漸變等形式。

圖片

 

 

三、金剛區(qū)圖標(biāo)設(shè)計(jì)主題化

金剛區(qū)也是作為主題化設(shè)計(jì)最常見的區(qū)域,由于該區(qū)域像百變金剛一樣,較強(qiáng)的靈活性方便元素替換和重組。

 

1、圖標(biāo)主題化

在一些特定主題日活動中,可以將金剛區(qū)圖標(biāo)替換為帶有主題元素的設(shè)計(jì),以此增強(qiáng)活動氛圍。通常是階段性時間內(nèi)展示,可以是圖標(biāo)造型層面主題化,也可以是主題文案鑲嵌在圖標(biāo)造型中,靈活性相對比較高。

圖片

 

2、局部動效化表達(dá)

除了整體金剛區(qū)變動以外,也可以在局部圖標(biāo)上進(jìn)行設(shè)計(jì)發(fā)揮,這樣帶來的干擾性比較低。通常是以圖標(biāo)微動效為主,以此來突出個別功能和活動主題等。不適合過度動效,容易互相干擾,適合局部動效化表達(dá),突出局部內(nèi)容的關(guān)注度。

金剛區(qū)作為曝光度較高的區(qū)域,經(jīng)常作為流量分發(fā)的關(guān)鍵場景,主題化發(fā)揮也是非常具備靈活性的。

 

 

小結(jié)

產(chǎn)品設(shè)計(jì)除了常規(guī)性的視覺升級和功能優(yōu)化以外,主題化設(shè)計(jì)也是至關(guān)重要的,可以讓用戶時刻感受產(chǎn)品的變動。一成不變的體驗(yàn)使用時間長了也會麻木,結(jié)合節(jié)日慶典和一些主題活動進(jìn)行視覺呈現(xiàn),可以在感官體驗(yàn)層面得到提升。

本文觀點(diǎn)屬于個人經(jīng)驗(yàn)總結(jié),不足之處歡迎大家補(bǔ)充,我們互相進(jìn)步。


作者:黑馬青年

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》UI 場景中常見的 3 個主題化區(qū)域

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



分享本文至:

日歷

鏈接

個人資料

存檔