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

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

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

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

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

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

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