UI設(shè)計師最值得跟進的新趨勢

1、如果你有關(guān)注設(shè)計趨勢，那么你一定會知道新擬物化和玻璃擬物化這兩種近年被提出的設(shè)計風格，而最初提出它們的，就是著名的設(shè)計師 Michal Malewicz，他如今儼然已經(jīng)是設(shè)計圈內(nèi)的趨勢觀察家。最近他又觀察到新趨勢了，一起來看看吧：UI 是如今數(shù)字產(chǎn)品和用戶進行溝通的門戶，對于 UI 視覺風格的追求，則很大程度源自于激烈的競爭，以及用戶對于越發(fā)模式化界面的麻木。高度材質(zhì)化的擬物化設(shè)計風格在目前來看，不僅在視覺上顯得過重，而且相應的設(shè)計和開發(fā)成本過高。最近幾年，從原本的扁平化2.0當中，在前年演化出了新擬物化的風格，又在去年探索出了玻璃擬物化的新趨勢，這可以稱得上是從功能極簡主義逐步向現(xiàn)代設(shè)計過渡

2、的幾個里程碑式的變化。這種演變方式，既是補足純粹功能主義設(shè)計在視覺上的缺憾，又是克制地吸收擬物元素對于 UI 的正面影響，探索出相對新穎又具有持久價值的視覺風格。這一漫長的文藝復興經(jīng)歷了大概7年時間，iOS 7 的扁平化設(shè)計就是全面扁平化的分水嶺，而 2020 新擬物化的成熟和玻璃擬物化出現(xiàn)，以及 iOS、macOS 多平臺的統(tǒng)一，則更像是真實質(zhì)感對純功能性扁平化設(shè)計的一次勝利。從根源上來說，無論是作為設(shè)計師還是用戶，我們都希望數(shù)字產(chǎn)品是被制作出來，而不是沒有靈魂和溫度的純粹的機械數(shù)字化和功能化的產(chǎn)物，從這個角度上來說，Material Design 作為數(shù)字系統(tǒng)的屬性，是遠遠強于它作為一種設(shè)

3、計語言本身的質(zhì)感。極簡主義在很大程度上并沒有什么錯，只是相對而言，整體的設(shè)計多樣性，正在逐漸降低，用戶對于新鮮感有所期待的。上面對于 Android 的范例看起來很無聊，對于一部分人而言并不重要，但是普通人的生活從來都不是待辦事項上簡單的任務(wù)列表清單，大家也希望視覺設(shè)計能夠給生活增添些許亮色。也正是這樣絲絲縷縷的期待和種種微妙的感知，在驅(qū)動著新風格新趨勢的誕生。相比于宜家極簡純白的家居，帶著原木紋理的款式會更加令人心生親近。皮質(zhì)的錢包，背包的紋理，衣服的質(zhì)感，帶有手作痕跡的細節(jié)是增加價值的關(guān)鍵，對于 UI 視覺設(shè)計，也同樣是如此。2021年，極光風對于 UI 設(shè)計，我們總不希望它在視覺上單調(diào)，

4、但是要如何在保持功能的靈活性的同時，在視覺上還富有有機感和質(zhì)感呢？在最近流行的視覺風格當中，我注意到類似極光的視覺影像風格，正在逐步的興起，我稱之為 Aurora UI 。當我們考慮 UI 界面的功能性的時候，需要確保UI 元素的可用性和可訪問性，視覺風格的賦予就只能盡可能借助背景和輔助性元素來賦予了。而UI的功能性的確定，很大程度上是源自于層次結(jié)構(gòu)的確定，這也意味著界面本身的按鈕、字段、表單、標簽不能改變太多。而這也正是 Aurora UI 風格的基本原理所在。不在核心的功能性 UI 元素上進行太多的風格化裝飾，相反在背景和裝飾性元素上來做文章，而這也是它和新擬物化之間的關(guān)鍵差異。將富有創(chuàng)意

5、的極光風背景和UI組件混合在一起使用，是確保功能可用性和整體可訪問性的最佳折衷呈現(xiàn)方式。采用玻璃擬物化組件和 BigSur 背景的 UI 組合，以及采用 Aurora 式模糊背景的版本基于玻璃擬物化的延伸在之前介紹玻璃擬物化風格的時候，就提到過這種在 macOS、Windows 上都逐漸被廣泛運用的視覺風格：玻璃擬物化在主流的操作系統(tǒng)上都有不同程度的運用，并且被潤物細無聲地融入不同的UI組件上。比如上面這個 Stripe 的網(wǎng)站，就采用了這種風格。但是要讓 UI 中其他的元素足夠的易讀和識別，還需要技巧。但是相比于玻璃擬物化，極光風就更加適宜不同的 UI 元素的可讀性。如何實現(xiàn)極光風？要實現(xiàn)這

6、種視覺風格的UI背景并不難，關(guān)鍵但在于控制色彩的對比度。比如下面就是基于三個不同的橢圓作為基底：方案1:形狀模糊打底的幾何圖形最好使用幾個不同大小的橢圓型，然后對其進行模糊，并且混合在一起創(chuàng)建不規(guī)則的漸變。方案2:多重漸變填充將多個漸變填充混合到一起，并且都是從中心向邊緣的方向，并且降低不透明度。只需要多嘗試拖動手柄即可尋找最佳的組合方式，這種方式可以和第一種方案結(jié)合起來使用。方案3:圖片模糊如果你有一些原本已經(jīng)具備相對柔和色彩過渡的照片，那么你就可以基于照片來實現(xiàn)模糊效果，可以參考玻璃擬物化的效果來進行執(zhí)行。在模糊的過程中，可以把模糊程度提到最大，最大程度獲得自然的效果。此外，我還制作了視頻來演示如何在 Figma 和