作為設(shè)計(jì)師都會時(shí)刻關(guān)注設(shè)計(jì)趨勢，以 UI 設(shè)計(jì)來說每年都會出現(xiàn)很多相關(guān)的趨勢總結(jié)，基本是結(jié)合預(yù)測和實(shí)際相結(jié)合的。趨勢可以讓我們把控設(shè)計(jì)的方向，帶給用戶更好的感官體驗(yàn)。

 

最近黑馬哥結(jié)合落地產(chǎn)品所呈現(xiàn)出來的設(shè)計(jì)趨勢，進(jìn)行了這方面的探索，今天以其中之一的趨勢-極光風(fēng)和大家先聊一聊。

 

 

 

 

 

 

 

 

目錄

 

一、極光風(fēng)趨勢的來源

二、UI 場景中的極光風(fēng)設(shè)計(jì)

三、實(shí)現(xiàn)極光風(fēng)設(shè)計(jì)的方法

四、極光風(fēng)案例實(shí)戰(zhàn)

五、小結(jié)

 

 

 

一、極光風(fēng)趨勢的來源

 

極光（Aurora），是一種絢麗多彩的等離子體（發(fā)光）現(xiàn)象，在夜間出現(xiàn)燦爛美麗的光輝。在南極被稱為南極光，在北極被稱為北極光，視為自然界中最漂亮的奇觀之一。（來源于百度百科）

 

 

 

 

 

 

這樣的自然奇觀被攝影師捕捉到靜態(tài)的影像中，設(shè)計(jì)師再結(jié)合這樣的影像作品，視覺化之后出現(xiàn)在了一些設(shè)計(jì)作品中。在 2021 年被廣泛運(yùn)用，形成一種流行的視覺風(fēng)格。在眾多的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，也經(jīng)常運(yùn)用這種類似極光的視覺影像風(fēng)格，稱之為 Aurora UI。

 

 

 

 

 

 

在產(chǎn)品設(shè)計(jì)底層需求獲得滿足之后，感光體驗(yàn)的提升被重視，視覺感的強(qiáng)化對 UI 設(shè)計(jì)師來說至關(guān)重要。基于不改變本身的結(jié)構(gòu)層，在背景層和裝飾性元素上面發(fā)揮，使得 Aurora UI 得到了發(fā)揮的空間。

 

 

 

 

 

 

富有創(chuàng)意的極光風(fēng)在背景層和裝飾性元素上面發(fā)揮得淋漓盡致，助推了其成為 UI 設(shè)計(jì)趨勢的關(guān)鍵，下面就讓我們一起來看看落地產(chǎn)品中的 Aurora UI。

 

 

 

二、UI 場景中的極光風(fēng)設(shè)計(jì)

 

由于在眾多落地產(chǎn)品中被廣泛運(yùn)用，形成了近些年影響 UI 設(shè)計(jì)趨勢的風(fēng)格。極光風(fēng)和彌散光在表現(xiàn)形式上類似，也有設(shè)計(jì)師將該風(fēng)格歸類為彌散光，下面就看一下具體的運(yùn)用場景。

 

 

2.1、強(qiáng)化導(dǎo)航欄設(shè)計(jì)的視覺感

如果想要強(qiáng)化頂部導(dǎo)航欄的視覺感，通常是利用品牌色作為背景顏色，這樣也會顯得頂部比重較大。通過白色或者淺灰色作為背景屬于比較弱化的處理方式，而極光風(fēng)的處理形式處于輕重之間的理想狀態(tài)。不僅可以豐富視覺表現(xiàn)力，也能使得整體風(fēng)格更加年輕化。

 

 

 

 

 

 

 

2.2、強(qiáng)化個(gè)人中心頂部視覺區(qū)域

隨著互聯(lián)網(wǎng)用戶年輕化的趨勢，在配色上面逐步趨近于年輕化，眾多產(chǎn)品在個(gè)人中心界面的設(shè)計(jì)上面亦是如此。利用極光風(fēng)效果呈現(xiàn)出的設(shè)計(jì)比較符合年輕化的趨勢，可以是同色系的飽和度變化，也可以是不同色相的相互融合。利用低飽和度高明度的配色原則，使得整體的視覺感更加輕量化，視覺效果清新自然且通透力更強(qiáng)。

 

也有基于品牌色結(jié)合極光風(fēng)進(jìn)行融合，相對單色來說效果更加豐富自然，使得背景的變化更加多樣。

 

 

 

 

 

 

 

2.3、豐富背景設(shè)計(jì)的視覺感

除了在頂部區(qū)域進(jìn)行運(yùn)用以外，也有一些產(chǎn)品會在背景層面進(jìn)行強(qiáng)化，相較于白色或者淺灰色的背景來說色彩感更豐富。運(yùn)用到整個(gè)界面背景層相對比較少，在局部背景層上的運(yùn)用比較多些，可以強(qiáng)化局部模塊的視覺感。

 

 

 

 

 

 

 

2.4、點(diǎn)綴彈窗設(shè)計(jì)局部

極光風(fēng)的設(shè)計(jì)表現(xiàn)也會出現(xiàn)在一些局部功能的細(xì)節(jié)處，比如運(yùn)用到彈窗的色彩處理中，作為背景局部或者插畫部分等的襯托。帶來的視覺感更加親和自然，也不會過度干擾其他元素的呈現(xiàn)。

 

 

 

 

 

 

 

2.5、強(qiáng)化卡片式設(shè)計(jì)局部

卡片式設(shè)計(jì)也是近些年運(yùn)用比較多的設(shè)計(jì)趨勢之一，基本是以白色卡片居多，具有整合信息的好處。在卡片的邊緣位置強(qiáng)化色彩，可以使得卡片色彩更加豐富，也有一些電商產(chǎn)品是起到與商品形成色彩呼應(yīng)的作用。

 

 

 

 

 

 

 

2.6、突出搜索設(shè)計(jì)的差異化

搜索框的設(shè)計(jì)在大部分的認(rèn)知里面都是白色或者淺灰色，也有一些是帶有邊框的形式，利用低飽和度高明度的配色原則來進(jìn)行設(shè)計(jì)，帶來的效果更加年輕化。也是一種差異化設(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í)，通常都會通過裝飾元素來進(jìn)一步強(qiáng)化。可以通過字體粗細(xì)、顏色深淺、字體大小和裝飾元素來強(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í)候無法通過常規(guī)的漸變形式達(dá)到要求，就可以嘗試運(yùn)用極光風(fēng)的處理技巧，將顏色通過模糊和剪切蒙版的形式融入到圖標(biāo)中，可以使得圖標(biāo)色彩豐富和強(qiáng)化光影變化。

 

 

 

 

 

 

 

2.9、深色卡片色彩強(qiáng)化

以上案例屬于在淺色或者白色的環(huán)境中運(yùn)用，在深色主題中依然會用到極光風(fēng)進(jìn)行設(shè)計(jì)強(qiáng)化。在界面背景和卡片背景中運(yùn)用，效果也是非常不錯(cuò)的，可以給深色的卡片一些色彩感和豐富度。

 

 

 

 

 

 

 

2.10、作品包裝中的背景強(qiáng)化

除了在 UI 設(shè)計(jì)場景中運(yùn)用以外，最近發(fā)現(xiàn)在設(shè)計(jì)師作品包裝中的運(yùn)用也是非常普遍，用于背景層的渲染帶來的視覺體驗(yàn)度也是非常不錯(cuò)的。在作品包裝環(huán)節(jié)中作為背景運(yùn)用和局部裝飾，也有在封面設(shè)計(jì)中重點(diǎn)運(yùn)用，使得作品集緊貼設(shè)計(jì)趨勢，提高作品的打開率。

 

 

 

 

 

 

 

2.11、其他場景中的應(yīng)用普及

在 UI 場景還有很多運(yùn)用場景，這里僅為拋磚引玉，無論是作為背景強(qiáng)化還是元素裝飾，都能帶給用戶更加年輕化的感官體驗(yàn)。

 

除了在 UI 場景中呈現(xiàn)以外，極光風(fēng)的設(shè)計(jì)也會出現(xiàn)在更多其它場景中。在 Banner 設(shè)計(jì)、海報(bào)設(shè)計(jì)、專題頁設(shè)計(jì)等視覺設(shè)計(jì)層面也是運(yùn)用廣泛，是一個(gè)影響范圍比較廣的設(shè)計(jì)趨勢之一。

 

 

 

 

 

 

 

 

三、實(shí)現(xiàn)極光風(fēng)設(shè)計(jì)的方法

 

通過一些線上的案例欣賞和分析，相信大家對于極光風(fēng)在 UI 場景中運(yùn)用都有一定的了解，在項(xiàng)目設(shè)計(jì)中也能輕松嘗試。這一類風(fēng)格從技法實(shí)現(xiàn)的角度來說并不難，關(guān)鍵因素在于控制好配色原理，下面就為大家總結(jié)幾種實(shí)現(xiàn)的方法。

 

 

方法 01 ：利用不透明度漸變?nèi)诤?/strong>

不透明度漸變在設(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í)現(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ò)的圖片來實(shí)現(xiàn)極光風(fēng)效果。

 

挑選一張色彩符合要求的圖片，然后在 Photoshop 等設(shè)計(jì)軟件中執(zhí)行高斯模糊，半徑值的多少決定了模糊之后的自然度。我們在選擇圖片的過程中除了整張圖片進(jìn)行操作以外，也可以截取其中的一部分，也許可以帶來意想不到的效果。

 

 

 

 

 

 

除了這幾個(gè)方法以外還有更多不一樣的實(shí)現(xiàn)方法，大家可以根據(jù)自己的探索選擇最適合自己的方法。根據(jù)使用軟件的差別選擇最簡單的形式，根據(jù)想要實(shí)現(xiàn)的效果選擇最靈活的方法，這樣才能便于后期的反復(fù)調(diào)整。

 

 

 

四、極光風(fēng)案例實(shí)戰(zhàn)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

五、小結(jié)

 

研究落地產(chǎn)品的設(shè)計(jì)細(xì)節(jié)和視覺趨勢，將有助于提高我們對于當(dāng)前有效設(shè)計(jì)趨勢的把控，而不僅僅只是停留在概念化的預(yù)測階段，而是行之有效的真實(shí)案例。

 

極光風(fēng)是近些年運(yùn)用在落地產(chǎn)品中的 UI 設(shè)計(jì)趨勢之一，通過大量案例驗(yàn)證之后的有效方法，希望大家能夠掌握并靈活運(yùn)用到項(xiàng)目設(shè)計(jì)中。落地產(chǎn)品的 UI 設(shè)計(jì)趨勢還有很多，本次分享的僅為拋磚引玉，后續(xù)將和大家探討更多的有效設(shè)計(jì)趨勢，輔助提高我們的設(shè)計(jì)能力。

 

 

作者：黑馬青年（vx: heimaux）

本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。