如果你有關(guān)注設(shè)計(jì)趨勢，那么你一定會(huì)知道新擬物化和玻璃擬物化這兩種近年被提出的設(shè)計(jì)風(fēng)格，而最初提出它們的，就是著名的設(shè)計(jì)師 Michal Malewicz，他如今儼然已經(jīng)是設(shè)計(jì)圈內(nèi)的趨勢觀察家。最近他又觀察到新趨勢了，一起來看看吧：

UI 是如今數(shù)字產(chǎn)品和用戶進(jìn)行溝通的門戶，對于 UI 視覺風(fēng)格的追求，則很大程度源自于激烈的競爭，以及用戶對于越發(fā)模式化界面的麻木。

高度材質(zhì)化的擬物化設(shè)計(jì)風(fēng)格在目前來看，不僅在視覺上顯得過重，而且相應(yīng)的設(shè)計(jì)和開發(fā)成本過高。最近幾年，從原本的扁平化2.0當(dāng)中，在前年演化出了新擬物化的風(fēng)格，又在去年探索出了玻璃擬物化的新趨勢，這可以稱得上是從功能極簡主義逐步向現(xiàn)代設(shè)計(jì)過渡的幾個(gè)里程碑式的變化。

這種演變方式，既是補(bǔ)足純粹功能主義設(shè)計(jì)在視覺上的缺憾，又是克制地吸收擬物元素對于 UI 的正面影響，探索出相對新穎又具有持久價(jià)值的視覺風(fēng)格。

這一漫長的「文藝復(fù)興」經(jīng)歷了大概7年時(shí)間，iOS 7 的扁平化設(shè)計(jì)就是全面扁平化的分水嶺，而 2020 新擬物化的成熟和玻璃擬物化出現(xiàn)，以及 iOS、macOS 多平臺(tái)的統(tǒng)一，則更像是真實(shí)質(zhì)感對純功能性扁平化設(shè)計(jì)的一次勝利。

從根源上來說，無論是作為設(shè)計(jì)師還是用戶，我們都希望數(shù)字產(chǎn)品是被「制作」出來，而不是沒有靈魂和溫度的純粹的機(jī)械數(shù)字化和功能化的產(chǎn)物，從這個(gè)角度上來說，Material Design 作為數(shù)字系統(tǒng)的屬性，是遠(yuǎn)遠(yuǎn)強(qiáng)于它作為一種設(shè)計(jì)語言本身的質(zhì)感。

極簡主義在很大程度上并沒有什么錯(cuò)，只是相對而言，整體的設(shè)計(jì)多樣性，正在逐漸降低，用戶對于新鮮感有所期待的。

上面對于 Android 的范例看起來很無聊，對于一部分人而言并不重要，但是普通人的生活從來都不是待辦事項(xiàng)上簡單的任務(wù)列表清單，大家也希望視覺設(shè)計(jì)能夠給生活增添些許亮色。

也正是這樣絲絲縷縷的期待和種種微妙的感知，在驅(qū)動(dòng)著新風(fēng)格新趨勢的誕生。相比于宜家極簡純白的家居，帶著原木紋理的款式會(huì)更加令人心生親近。皮質(zhì)的錢包，背包的紋理，衣服的質(zhì)感，帶有手作痕跡的細(xì)節(jié)是增加價(jià)值的關(guān)鍵，對于 UI 視覺設(shè)計(jì)，也同樣是如此。

2021年，極光風(fēng)

對于 UI 設(shè)計(jì)，我們總不希望它在視覺上單調(diào)，但是要如何在保持功能的靈活性的同時(shí)，在視覺上還富有有機(jī)感和質(zhì)感呢？

在最近流行的視覺風(fēng)格當(dāng)中，我注意到類似極光的視覺影像風(fēng)格，正在逐步的興起，我稱之為 Aurora UI 。

當(dāng)我們考慮 UI 界面的功能性的時(shí)候，需要確保UI 元素的可用性和可訪問性，視覺風(fēng)格的賦予就只能盡可能借助背景和輔助性元素來賦予了。

而UI的功能性的確定，很大程度上是源自于層次結(jié)構(gòu)的確定，這也意味著界面本身的按鈕、字段、表單、標(biāo)簽不能改變太多。而這也正是 Aurora UI 風(fēng)格的基本原理所在。

不在核心的功能性 UI 元素上進(jìn)行太多的風(fēng)格化裝飾，相反在背景和裝飾性元素上來做文章，而這也是它和新擬物化之間的關(guān)鍵差異。

將富有創(chuàng)意的「極光風(fēng)」背景和UI組件混合在一起使用，是確保功能可用性和整體可訪問性的最佳折衷呈現(xiàn)方式。

采用玻璃擬物化組件和 BigSur 背景的 UI 組合，以及采用 Aurora 式模糊背景的版本

基于「玻璃擬物化」的延伸

在之前介紹「玻璃擬物化」風(fēng)格的時(shí)候，就提到過這種在 macOS、Windows 上都逐漸被廣泛運(yùn)用的視覺風(fēng)格：

玻璃擬物化在主流的操作系統(tǒng)上都有不同程度的運(yùn)用，并且被潤物細(xì)無聲地融入不同的UI組件上。比如上面這個(gè) Stripe 的網(wǎng)站，就采用了這種風(fēng)格。但是要讓 UI 中其他的元素足夠的易讀和識(shí)別，還需要技巧。

但是相比于玻璃擬物化，極光風(fēng)就更加適宜不同的 UI 元素的可讀性。

如何實(shí)現(xiàn)「極光風(fēng)」？

要實(shí)現(xiàn)這種視覺風(fēng)格的UI背景并不難，關(guān)鍵但在于控制色彩的對比度。比如下面就是基于三個(gè)不同的橢圓作為基底：

方案1:形狀模糊

打底的幾何圖形最好使用幾個(gè)不同大小的橢圓型，然后對其進(jìn)行模糊，并且混合在一起創(chuàng)建不規(guī)則的漸變。

方案2:多重漸變填充

將多個(gè)漸變填充混合到一起，并且都是從中心向邊緣的方向，并且降低不透明度。只需要多嘗試拖動(dòng)手柄即可尋找最佳的組合方式，這種方式可以和第一種方案結(jié)合起來使用。

方案3:圖片模糊

如果你有一些原本已經(jīng)具備相對柔和色彩過渡的照片，那么你就可以基于照片來實(shí)現(xiàn)模糊效果，可以參考玻璃擬物化的效果來進(jìn)行執(zhí)行。在模糊的過程中，可以把模糊程度提到最大，最大程度獲得自然的效果。

此外，我還制作了視頻來演示如何在 Figma 和 Sketch 中實(shí)現(xiàn)這種效果：

下一步：要怎么用

在實(shí)現(xiàn)了極光風(fēng)背景之后，就可以挑選一些基于卡片的 UI 組件來搭建 Aurora UI，這個(gè)部分如果你能選擇玻璃擬物化的 UI 組件就更好了。