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

 

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

 

 

 

 

 

 

 

 

目錄

 

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

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

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

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

五、小結(jié)

 

 

 

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

 

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

 

 

 

 

 

 

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

 

 

 

 

 

 

在產(chǎn)品設(shè)計底層需求獲得滿足之后，感光體驗的提升被重視，視覺感的強化對 UI 設(shè)計師來說至關(guān)重要?；诓桓淖儽旧淼慕Y(jié)構(gòu)層，在背景層和裝飾性元素上面發(fā)揮，使得 Aurora UI 得到了發(fā)揮的空間。

 

 

 

 

 

 

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

 

 

 

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

 

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

 

 

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

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

 

 

 

 

 

 

 

2.2、強化個人中心頂部視覺區(qū)域

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

 

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

 

 

 

 

 

 

 

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

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

 

 

 

 

 

 

 

2.4、點綴彈窗設(shè)計局部

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

 

 

 

 

 

 

 

2.5、強化卡片式設(shè)計局部

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

 

 

 

 

 

 

 

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

搜索框的設(shè)計在大部分的認知里面都是白色或者淺灰色，也有一些是帶有邊框的形式，利用低飽和度高明度的配色原則來進行設(shè)計，帶來的效果更加年輕化。也是一種差異化設(shè)計的嘗試，打破常規(guī)的設(shè)計認知。也可以舉一反三，在一些按鈕或者標簽設(shè)計中運用。

 

 

 

 

 

 

 

2.7、分類標簽的裝飾設(shè)計

這是一個裝飾性的設(shè)計嘗試，在突出模塊分類的當前狀態(tài)時，通常都會通過裝飾元素來進一步強化。可以通過字體粗細、顏色深淺、字體大小和裝飾元素來強化，裝飾元素除了線段和一些圖形元素以外，極光風(fēng)的背景元素也是一種不錯的表現(xiàn)手法。

 

 

 

 

 

 

 

2.8、圖標設(shè)計中的運用

運用到圖標設(shè)計中通常是出現(xiàn)在質(zhì)感類圖標，輔助強化圖標的色彩感和層次感。有時候無法通過常規(guī)的漸變形式達到要求，就可以嘗試運用極光風(fēng)的處理技巧，將顏色通過模糊和剪切蒙版的形式融入到圖標中，可以使得圖標色彩豐富和強化光影變化。

 

 

 

 

 

 

 

2.9、深色卡片色彩強化

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

 

 

 

 

 

 

 

2.10、作品包裝中的背景強化

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

 

 

 

 

 

 

 

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

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

 

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

 

 

 

 

 

 

 

 

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

 

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

 

 

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

不透明度漸變在設(shè)計中的運用比較普遍，利用的是不透明度從 100%-0% 之間形成漸變，讓色彩逐漸消失或者淡化。

 

畫一個圓形，選擇徑向漸變，漸變兩端的顏色選擇同一個色相。然后設(shè)置中間顏色不透明度為 100%，另一個顏色不透明度設(shè)置為 0%，這里顏色適合選擇低飽和度的范圍。同樣的方法反復(fù)繪制幾個不同顏色的圓形進行組合，即可完成極光風(fēng)背景設(shè)計。

 

 

 

 

 

 

 

方法 02 ：利用模糊度變化融合

這個方法是結(jié)合了形狀和模糊設(shè)置（高斯模糊等），繪制幾個大小不等的圓形進行排版組合，然后選擇所有圓形一起進行模糊設(shè)置。形狀的繪制上面最好是有大小差異，排版錯落有致，這樣形成的效果比較富有變化。

 

在顏色的選擇上面需要根據(jù)背景的強化程度選擇，低飽和度的顏色融合性更高，適合作為弱化性質(zhì)的背景使用。

 

 

 

 

 

 

 

方法 03 ：利用背景模糊融合

背景模糊在 Sketch、Figma 等設(shè)計軟件中有該功能，是一個影響設(shè)計趨勢較為常用的功能，特別是在實現(xiàn)玻璃質(zhì)感和一些質(zhì)感圖標上面非常實用。

 

在背景層繪制圖形，顏色和形狀均可自由發(fā)揮，然后再繪制一個形狀作為調(diào)節(jié)層，調(diào)節(jié)層是用于控制模糊效果的。在調(diào)節(jié)層的形狀上面設(shè)置一個帶有透明度的顏色（必須要帶有透明度），然后再設(shè)置背景模糊，背景模糊數(shù)值的大小決定模糊的程度，不透明度的大小決定整體效果的亮度。

 

 

 

 

 

 

 

方法 04 ：利用圖片模糊融合

以上的方法都需要進行配色處理，如果色感方面比較薄弱的設(shè)計師，也可以挑選一些不錯的圖片來實現(xiàn)極光風(fēng)效果。

 

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

 

 

 

 

 

 

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

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

五、小結(jié)

 

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

 

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

 

 

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

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