2024-5-28 資深UI設(shè)計(jì)者
2022 原創(chuàng)輸出第 15 篇,我們互相努力。
作為設(shè)計(jì)師都會(huì)時(shí)刻關(guān)注設(shè)計(jì)趨勢(shì),以 UI 設(shè)計(jì)來(lái)說(shuō)每年都會(huì)出現(xiàn)很多相關(guān)的趨勢(shì)總結(jié),基本是結(jié)合預(yù)測(cè)和實(shí)際相結(jié)合的。趨勢(shì)可以讓我們把控設(shè)計(jì)的方向,帶給用戶更好的感官體驗(yàn)。
最近黑馬哥結(jié)合落地產(chǎn)品所呈現(xiàn)出來(lái)的設(shè)計(jì)趨勢(shì),進(jìn)行了這方面的探索,今天以其中之一的趨勢(shì)-極光風(fēng)和大家先聊一聊。
一、極光風(fēng)趨勢(shì)的來(lái)源
二、UI 場(chǎng)景中的極光風(fēng)設(shè)計(jì)
三、實(shí)現(xiàn)極光風(fēng)設(shè)計(jì)的方法
四、極光風(fēng)案例實(shí)戰(zhàn)
五、小結(jié)
極光(Aurora),是一種絢麗多彩的等離子體(發(fā)光)現(xiàn)象,在夜間出現(xiàn)燦爛美麗的光輝。在南極被稱為南極光,在北極被稱為北極光,視為自然界中最漂亮的奇觀之一。(來(lái)源于百度百科)
這樣的自然奇觀被攝影師捕捉到靜態(tài)的影像中,設(shè)計(jì)師再結(jié)合這樣的影像作品,視覺(jué)化之后出現(xiàn)在了一些設(shè)計(jì)作品中。在 2021 年被廣泛運(yùn)用,形成一種流行的視覺(jué)風(fēng)格。在眾多的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中,也經(jīng)常運(yùn)用這種類似極光的視覺(jué)影像風(fēng)格,稱之為 Aurora UI。
在產(chǎn)品設(shè)計(jì)底層需求獲得滿足之后,感光體驗(yàn)的提升被重視,視覺(jué)感的強(qiáng)化對(duì) UI 設(shè)計(jì)師來(lái)說(shuō)至關(guān)重要?;诓桓淖儽旧淼慕Y(jié)構(gòu)層,在背景層和裝飾性元素上面發(fā)揮,使得 Aurora UI 得到了發(fā)揮的空間。
富有創(chuàng)意的極光風(fēng)在背景層和裝飾性元素上面發(fā)揮得淋漓盡致,助推了其成為 UI 設(shè)計(jì)趨勢(shì)的關(guān)鍵,下面就讓我們一起來(lái)看看落地產(chǎn)品中的 Aurora UI。
由于在眾多落地產(chǎn)品中被廣泛運(yùn)用,形成了近些年影響 UI 設(shè)計(jì)趨勢(shì)的風(fēng)格。極光風(fēng)和彌散光在表現(xiàn)形式上類似,也有設(shè)計(jì)師將該風(fēng)格歸類為彌散光,下面就看一下具體的運(yùn)用場(chǎng)景。
2.1、強(qiáng)化導(dǎo)航欄設(shè)計(jì)的視覺(jué)感
如果想要強(qiáng)化頂部導(dǎo)航欄的視覺(jué)感,通常是利用品牌色作為背景顏色,這樣也會(huì)顯得頂部比重較大。通過(guò)白色或者淺灰色作為背景屬于比較弱化的處理方式,而極光風(fēng)的處理形式處于輕重之間的理想狀態(tài)。不僅可以豐富視覺(jué)表現(xiàn)力,也能使得整體風(fēng)格更加年輕化。
2.2、強(qiáng)化個(gè)人中心頂部視覺(jué)區(qū)域
隨著互聯(lián)網(wǎng)用戶年輕化的趨勢(shì),在配色上面逐步趨近于年輕化,眾多產(chǎn)品在個(gè)人中心界面的設(shè)計(jì)上面亦是如此。利用極光風(fēng)效果呈現(xiàn)出的設(shè)計(jì)比較符合年輕化的趨勢(shì),可以是同色系的飽和度變化,也可以是不同色相的相互融合。利用低飽和度高明度的配色原則,使得整體的視覺(jué)感更加輕量化,視覺(jué)效果清新自然且通透力更強(qiáng)。
也有基于品牌色結(jié)合極光風(fēng)進(jìn)行融合,相對(duì)單色來(lái)說(shuō)效果更加豐富自然,使得背景的變化更加多樣。
2.3、豐富背景設(shè)計(jì)的視覺(jué)感
除了在頂部區(qū)域進(jìn)行運(yùn)用以外,也有一些產(chǎn)品會(huì)在背景層面進(jìn)行強(qiáng)化,相較于白色或者淺灰色的背景來(lái)說(shuō)色彩感更豐富。運(yùn)用到整個(gè)界面背景層相對(duì)比較少,在局部背景層上的運(yùn)用比較多些,可以強(qiáng)化局部模塊的視覺(jué)感。
2.4、點(diǎn)綴彈窗設(shè)計(jì)局部
極光風(fēng)的設(shè)計(jì)表現(xiàn)也會(huì)出現(xiàn)在一些局部功能的細(xì)節(jié)處,比如運(yùn)用到彈窗的色彩處理中,作為背景局部或者插畫部分等的襯托。帶來(lái)的視覺(jué)感更加親和自然,也不會(huì)過(guò)度干擾其他元素的呈現(xiàn)。
2.5、強(qiáng)化卡片式設(shè)計(jì)局部
卡片式設(shè)計(jì)也是近些年運(yùn)用比較多的設(shè)計(jì)趨勢(shì)之一,基本是以白色卡片居多,具有整合信息的好處。在卡片的邊緣位置強(qiáng)化色彩,可以使得卡片色彩更加豐富,也有一些電商產(chǎn)品是起到與商品形成色彩呼應(yīng)的作用。
2.6、突出搜索設(shè)計(jì)的差異化
搜索框的設(shè)計(jì)在大部分的認(rèn)知里面都是白色或者淺灰色,也有一些是帶有邊框的形式,利用低飽和度高明度的配色原則來(lái)進(jìn)行設(shè)計(jì),帶來(lái)的效果更加年輕化。也是一種差異化設(shè)計(jì)的嘗試,打破常規(guī)的設(shè)計(jì)認(rèn)知。也可以舉一反三,在一些按鈕或者標(biāo)簽設(shè)計(jì)中運(yùn)用。
2.7、分類標(biāo)簽的裝飾設(shè)計(jì)
這是一個(gè)裝飾性的設(shè)計(jì)嘗試,在突出模塊分類的當(dāng)前狀態(tài)時(shí),通常都會(huì)通過(guò)裝飾元素來(lái)進(jìn)一步強(qiáng)化??梢酝ㄟ^(guò)字體粗細(xì)、顏色深淺、字體大小和裝飾元素來(lái)強(qiáng)化,裝飾元素除了線段和一些圖形元素以外,極光風(fēng)的背景元素也是一種不錯(cuò)的表現(xiàn)手法。
2.8、圖標(biāo)設(shè)計(jì)中的運(yùn)用
運(yùn)用到圖標(biāo)設(shè)計(jì)中通常是出現(xiàn)在質(zhì)感類圖標(biāo),輔助強(qiáng)化圖標(biāo)的色彩感和層次感。有時(shí)候無(wú)法通過(guò)常規(guī)的漸變形式達(dá)到要求,就可以嘗試運(yùn)用極光風(fēng)的處理技巧,將顏色通過(guò)模糊和剪切蒙版的形式融入到圖標(biāo)中,可以使得圖標(biāo)色彩豐富和強(qiáng)化光影變化。
2.9、深色卡片色彩強(qiáng)化
以上案例屬于在淺色或者白色的環(huán)境中運(yùn)用,在深色主題中依然會(huì)用到極光風(fēng)進(jìn)行設(shè)計(jì)強(qiáng)化。在界面背景和卡片背景中運(yùn)用,效果也是非常不錯(cuò)的,可以給深色的卡片一些色彩感和豐富度。
2.10、作品包裝中的背景強(qiáng)化
除了在 UI 設(shè)計(jì)場(chǎng)景中運(yùn)用以外,最近發(fā)現(xiàn)在設(shè)計(jì)師作品包裝中的運(yùn)用也是非常普遍,用于背景層的渲染帶來(lái)的視覺(jué)體驗(yàn)度也是非常不錯(cuò)的。在作品包裝環(huán)節(jié)中作為背景運(yùn)用和局部裝飾,也有在封面設(shè)計(jì)中重點(diǎn)運(yùn)用,使得作品集緊貼設(shè)計(jì)趨勢(shì),提高作品的打開率。
2.11、其他場(chǎng)景中的應(yīng)用普及
在 UI 場(chǎng)景還有很多運(yùn)用場(chǎng)景,這里僅為拋磚引玉,無(wú)論是作為背景強(qiáng)化還是元素裝飾,都能帶給用戶更加年輕化的感官體驗(yàn)。
除了在 UI 場(chǎng)景中呈現(xiàn)以外,極光風(fēng)的設(shè)計(jì)也會(huì)出現(xiàn)在更多其它場(chǎng)景中。在 Banner 設(shè)計(jì)、海報(bào)設(shè)計(jì)、專題頁(yè)設(shè)計(jì)等視覺(jué)設(shè)計(jì)層面也是運(yùn)用廣泛,是一個(gè)影響范圍比較廣的設(shè)計(jì)趨勢(shì)之一。
通過(guò)一些線上的案例欣賞和分析,相信大家對(duì)于極光風(fēng)在 UI 場(chǎng)景中運(yùn)用都有一定的了解,在項(xiàng)目設(shè)計(jì)中也能輕松嘗試。這一類風(fēng)格從技法實(shí)現(xiàn)的角度來(lái)說(shuō)并不難,關(guān)鍵因素在于控制好配色原理,下面就為大家總結(jié)幾種實(shí)現(xiàn)的方法。
方法 01 :利用不透明度漸變?nèi)诤?/strong>
不透明度漸變?cè)谠O(shè)計(jì)中的運(yùn)用比較普遍,利用的是不透明度從 100%-0% 之間形成漸變,讓色彩逐漸消失或者淡化。
畫一個(gè)圓形,選擇徑向漸變,漸變兩端的顏色選擇同一個(gè)色相。然后設(shè)置中間顏色不透明度為 100%,另一個(gè)顏色不透明度設(shè)置為 0%,這里顏色適合選擇低飽和度的范圍。同樣的方法反復(fù)繪制幾個(gè)不同顏色的圓形進(jìn)行組合,即可完成極光風(fēng)背景設(shè)計(jì)。
方法 02 :利用模糊度變化融合
這個(gè)方法是結(jié)合了形狀和模糊設(shè)置(高斯模糊等),繪制幾個(gè)大小不等的圓形進(jìn)行排版組合,然后選擇所有圓形一起進(jìn)行模糊設(shè)置。形狀的繪制上面最好是有大小差異,排版錯(cuò)落有致,這樣形成的效果比較富有變化。
在顏色的選擇上面需要根據(jù)背景的強(qiáng)化程度選擇,低飽和度的顏色融合性更高,適合作為弱化性質(zhì)的背景使用。
方法 03 :利用背景模糊融合
背景模糊在 Sketch、Figma 等設(shè)計(jì)軟件中有該功能,是一個(gè)影響設(shè)計(jì)趨勢(shì)較為常用的功能,特別是在實(shí)現(xiàn)玻璃質(zhì)感和一些質(zhì)感圖標(biāo)上面非常實(shí)用。
在背景層繪制圖形,顏色和形狀均可自由發(fā)揮,然后再繪制一個(gè)形狀作為調(diào)節(jié)層,調(diào)節(jié)層是用于控制模糊效果的。在調(diào)節(jié)層的形狀上面設(shè)置一個(gè)帶有透明度的顏色(必須要帶有透明度),然后再設(shè)置背景模糊,背景模糊數(shù)值的大小決定模糊的程度,不透明度的大小決定整體效果的亮度。
方法 04 :利用圖片模糊融合
以上的方法都需要進(jìn)行配色處理,如果色感方面比較薄弱的設(shè)計(jì)師,也可以挑選一些不錯(cuò)的圖片來(lái)實(shí)現(xiàn)極光風(fēng)效果。
挑選一張色彩符合要求的圖片,然后在 Photoshop 等設(shè)計(jì)軟件中執(zhí)行高斯模糊,半徑值的多少?zèng)Q定了模糊之后的自然度。我們?cè)谶x擇圖片的過(guò)程中除了整張圖片進(jìn)行操作以外,也可以截取其中的一部分,也許可以帶來(lái)意想不到的效果。
除了這幾個(gè)方法以外還有更多不一樣的實(shí)現(xiàn)方法,大家可以根據(jù)自己的探索選擇最適合自己的方法。根據(jù)使用軟件的差別選擇最簡(jiǎn)單的形式,根據(jù)想要實(shí)現(xiàn)的效果選擇最靈活的方法,這樣才能便于后期的反復(fù)調(diào)整。
五、小結(jié)
研究落地產(chǎn)品的設(shè)計(jì)細(xì)節(jié)和視覺(jué)趨勢(shì),將有助于提高我們對(duì)于當(dāng)前有效設(shè)計(jì)趨勢(shì)的把控,而不僅僅只是停留在概念化的預(yù)測(cè)階段,而是行之有效的真實(shí)案例。
極光風(fēng)是近些年運(yùn)用在落地產(chǎn)品中的 UI 設(shè)計(jì)趨勢(shì)之一,通過(guò)大量案例驗(yàn)證之后的有效方法,希望大家能夠掌握并靈活運(yùn)用到項(xiàng)目設(shè)計(jì)中。落地產(chǎn)品的 UI 設(shè)計(jì)趨勢(shì)還有很多,本次分享的僅為拋磚引玉,后續(xù)將和大家探討更多的有效設(shè)計(jì)趨勢(shì),輔助提高我們的設(shè)計(jì)能力。
藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。
關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTM4MTgyOA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com