2025-3-4 杰睿
2022 原創輸出第 15 篇，我們互相努力。
作為設計師都會時刻關注設計趨勢，以 UI 設計來說每年都會出現很多相關的趨勢總結，基本是結合預測和實際相結合的。趨勢可以讓我們把控設計的方向，帶給用戶更好的感官體驗。
最近黑馬哥結合落地產品所呈現出來的設計趨勢，進行了這方面的探索，今天以其中之一的趨勢-極光風和大家先聊一聊。
一、極光風趨勢的來源
二、UI 場景中的極光風設計
三、實現極光風設計的方法
四、極光風案例實戰
五、小結
極光（Aurora），是一種絢麗多彩的等離子體（發光）現象，在夜間出現燦爛美麗的光輝。在南極被稱為南極光，在北極被稱為北極光，視為自然界中最漂亮的奇觀之一。（來源于百度百科）
這樣的自然奇觀被攝影師捕捉到靜態的影像中，設計師再結合這樣的影像作品，視覺化之后出現在了一些設計作品中。在 2021 年被廣泛運用，形成一種流行的視覺風格。在眾多的互聯網產品設計中，也經常運用這種類似極光的視覺影像風格，稱之為 Aurora UI。
在產品設計底層需求獲得滿足之后，感光體驗的提升被重視，視覺感的強化對 UI 設計師來說至關重要?；诓桓淖儽旧淼慕Y構層，在背景層和裝飾性元素上面發揮，使得 Aurora UI 得到了發揮的空間。
富有創意的極光風在背景層和裝飾性元素上面發揮得淋漓盡致，助推了其成為 UI 設計趨勢的關鍵，下面就讓我們一起來看看落地產品中的 Aurora UI。
由于在眾多落地產品中被廣泛運用，形成了近些年影響 UI 設計趨勢的風格。極光風和彌散光在表現形式上類似，也有設計師將該風格歸類為彌散光，下面就看一下具體的運用場景。
2.1、強化導航欄設計的視覺感
如果想要強化頂部導航欄的視覺感，通常是利用品牌色作為背景顏色，這樣也會顯得頂部比重較大。通過白色或者淺灰色作為背景屬于比較弱化的處理方式，而極光風的處理形式處于輕重之間的理想狀態。不僅可以豐富視覺表現力，也能使得整體風格更加年輕化。
2.2、強化個人中心頂部視覺區域
隨著互聯網用戶年輕化的趨勢，在配色上面逐步趨近于年輕化，眾多產品在個人中心界面的設計上面亦是如此。利用極光風效果呈現出的設計比較符合年輕化的趨勢，可以是同色系的飽和度變化，也可以是不同色相的相互融合。利用低飽和度高明度的配色原則，使得整體的視覺感更加輕量化，視覺效果清新自然且通透力更強。
也有基于品牌色結合極光風進行融合，相對單色來說效果更加豐富自然，使得背景的變化更加多樣。
2.3、豐富背景設計的視覺感
除了在頂部區域進行運用以外，也有一些產品會在背景層面進行強化，相較于白色或者淺灰色的背景來說色彩感更豐富。運用到整個界面背景層相對比較少，在局部背景層上的運用比較多些，可以強化局部模塊的視覺感。
2.4、點綴彈窗設計局部
極光風的設計表現也會出現在一些局部功能的細節處，比如運用到彈窗的色彩處理中，作為背景局部或者插畫部分等的襯托。帶來的視覺感更加親和自然，也不會過度干擾其他元素的呈現。
2.5、強化卡片式設計局部
卡片式設計也是近些年運用比較多的設計趨勢之一，基本是以白色卡片居多，具有整合信息的好處。在卡片的邊緣位置強化色彩，可以使得卡片色彩更加豐富，也有一些電商產品是起到與商品形成色彩呼應的作用。
2.6、突出搜索設計的差異化
搜索框的設計在大部分的認知里面都是白色或者淺灰色，也有一些是帶有邊框的形式，利用低飽和度高明度的配色原則來進行設計，帶來的效果更加年輕化。也是一種差異化設計的嘗試，打破常規的設計認知。也可以舉一反三，在一些按鈕或者標簽設計中運用。
2.7、分類標簽的裝飾設計
這是一個裝飾性的設計嘗試，在突出模塊分類的當前狀態時，通常都會通過裝飾元素來進一步強化?？梢酝ㄟ^字體粗細、顏色深淺、字體大小和裝飾元素來強化，裝飾元素除了線段和一些圖形元素以外，極光風的背景元素也是一種不錯的表現手法。
2.8、圖標設計中的運用
運用到圖標設計中通常是出現在質感類圖標，輔助強化圖標的色彩感和層次感。有時候無法通過常規的漸變形式達到要求，就可以嘗試運用極光風的處理技巧，將顏色通過模糊和剪切蒙版的形式融入到圖標中，可以使得圖標色彩豐富和強化光影變化。
2.9、深色卡片色彩強化
以上案例屬于在淺色或者白色的環境中運用，在深色主題中依然會用到極光風進行設計強化。在界面背景和卡片背景中運用，效果也是非常不錯的，可以給深色的卡片一些色彩感和豐富度。
2.10、作品包裝中的背景強化
除了在 UI 設計場景中運用以外，最近發現在設計師作品包裝中的運用也是非常普遍，用于背景層的渲染帶來的視覺體驗度也是非常不錯的。在作品包裝環節中作為背景運用和局部裝飾，也有在封面設計中重點運用，使得作品集緊貼設計趨勢，提高作品的打開率。
2.11、其他場景中的應用普及
在 UI 場景還有很多運用場景，這里僅為拋磚引玉，無論是作為背景強化還是元素裝飾，都能帶給用戶更加年輕化的感官體驗。
除了在 UI 場景中呈現以外，極光風的設計也會出現在更多其它場景中。在 Banner 設計、海報設計、專題頁設計等視覺設計層面也是運用廣泛，是一個影響范圍比較廣的設計趨勢之一。
通過一些線上的案例欣賞和分析，相信大家對于極光風在 UI 場景中運用都有一定的了解，在項目設計中也能輕松嘗試。這一類風格從技法實現的角度來說并不難，關鍵因素在于控制好配色原理，下面就為大家總結幾種實現的方法。
方法 01 ：利用不透明度漸變融合
不透明度漸變在設計中的運用比較普遍，利用的是不透明度從 100%-0% 之間形成漸變，讓色彩逐漸消失或者淡化。
畫一個圓形，選擇徑向漸變，漸變兩端的顏色選擇同一個色相。然后設置中間顏色不透明度為 100%，另一個顏色不透明度設置為 0%，這里顏色適合選擇低飽和度的范圍。同樣的方法反復繪制幾個不同顏色的圓形進行組合，即可完成極光風背景設計。
方法 02 ：利用模糊度變化融合
這個方法是結合了形狀和模糊設置（高斯模糊等），繪制幾個大小不等的圓形進行排版組合，然后選擇所有圓形一起進行模糊設置。形狀的繪制上面最好是有大小差異，排版錯落有致，這樣形成的效果比較富有變化。
在顏色的選擇上面需要根據背景的強化程度選擇，低飽和度的顏色融合性更高，適合作為弱化性質的背景使用。
方法 03 ：利用背景模糊融合
背景模糊在 Sketch、Figma 等設計軟件中有該功能，是一個影響設計趨勢較為常用的功能，特別是在實現玻璃質感和一些質感圖標上面非常實用。
在背景層繪制圖形，顏色和形狀均可自由發揮，然后再繪制一個形狀作為調節層，調節層是用于控制模糊效果的。在調節層的形狀上面設置一個帶有透明度的顏色（必須要帶有透明度），然后再設置背景模糊，背景模糊數值的大小決定模糊的程度，不透明度的大小決定整體效果的亮度。
方法 04 ：利用圖片模糊融合
以上的方法都需要進行配色處理，如果色感方面比較薄弱的設計師，也可以挑選一些不錯的圖片來實現極光風效果。
挑選一張色彩符合要求的圖片，然后在 Photoshop 等設計軟件中執行高斯模糊，半徑值的多少決定了模糊之后的自然度。我們在選擇圖片的過程中除了整張圖片進行操作以外，也可以截取其中的一部分，也許可以帶來意想不到的效果。
除了這幾個方法以外還有更多不一樣的實現方法，大家可以根據自己的探索選擇最適合自己的方法。根據使用軟件的差別選擇最簡單的形式，根據想要實現的效果選擇最靈活的方法，這樣才能便于后期的反復調整。
五、小結
研究落地產品的設計細節和視覺趨勢，將有助于提高我們對于當前有效設計趨勢的把控，而不僅僅只是停留在概念化的預測階段，而是行之有效的真實案例。
極光風是近些年運用在落地產品中的 UI 設計趨勢之一，通過大量案例驗證之后的有效方法，希望大家能夠掌握并靈活運用到項目設計中。落地產品的 UI 設計趨勢還有很多，本次分享的僅為拋磚引玉，后續將和大家探討更多的有效設計趨勢，輔助提高我們的設計能力。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創發布。未經許可，禁止轉載。
