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

 

最近黑馬哥結合落地產品所呈現出來的設計趨勢，進行了這方面的探索，今天以其中之一的趨勢-極光風和大家先聊一聊。

 

 

 

 

 

 

 

 

目錄

 

一、極光風趨勢的來源

二、UI 場景中的極光風設計

三、實現極光風設計的方法

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

五、小結

 

 

 

一、極光風趨勢的來源

 

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

 

 

 

 

 

 

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

 

 

 

 

 

 

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

 

 

 

 

 

 

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

 

 

 

二、UI 場景中的極光風設計

 

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

 

 

2.1、強化導航欄設計的視覺感

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

 

 

 

 

 

 

 

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

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

 

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

 

 

 

 

 

 

 

2.3、豐富背景設計的視覺感

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

 

 

 

 

 

 

 

2.4、點綴彈窗設計局部

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

 

 

 

 

 

 

 

2.5、強化卡片式設計局部

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

 

 

 

 

 

 

 

2.6、突出搜索設計的差異化

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

 

 

 

 

 

 

 

2.7、分類標簽的裝飾設計

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

 

 

 

 

 

 

 

2.8、圖標設計中的運用

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

 

 

 

 

 

 

 

2.9、深色卡片色彩強化

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

 

 

 

 

 

 

 

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

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

 

 

 

 

 

 

 

2.11、其他場景中的應用普及

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

 

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

 

 

 

 

 

 

 

 

三、實現極光風設計的方法

 

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

 

 

方法 01 ：利用不透明度漸變融合

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

 

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

 

 

 

 

 

 

 

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

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

 

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

 

 

 

 

 

 

 

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

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

 

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

 

 

 

 

 

 

 

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

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

 

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

 

 

 

 

 

 

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

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

五、小結

 

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

 

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

 

 

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

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