編輯導(dǎo)語：對(duì)于設(shè)計(jì)師來說，界面的風(fēng)格是關(guān)注的一大重點(diǎn)。今天，本文作者針對(duì)蘋果最近新推出的macOS Big Sur系統(tǒng)展開了分析，通過解析這一代的macOS的設(shè)計(jì)風(fēng)格，為我們介紹了設(shè)計(jì)新趨勢——Glassmorphism（新擬態(tài)風(fēng)格）。

很久沒更了，今天談一下最近蘋果新推出的macOS Big Sur系統(tǒng)。

作為設(shè)計(jì)師，最關(guān)心的還是界面風(fēng)格，這一代的macOS設(shè)計(jì)風(fēng)格大改，和前幾代都有著明顯的區(qū)別，大量的圓角要素，以及最為重要的毛玻璃半透明效果，感覺手機(jī)搬到電腦上面了，這就很「iOS」！

由于玻璃般的外觀，我覺得最好的稱呼方式就是Glassmorphism。

一、Glassmorphism

作為現(xiàn)在市場上一種新的風(fēng)格，已經(jīng)越來越流行了。對(duì)比之前火爆一時(shí)的Neumorphism（新擬態(tài)風(fēng)格），模仿一個(gè)擠壓的塑料表面（但是仍然看起來像一層），這種新趨勢更加垂直。

下面是它最具有定義性的特征：

• 透明度（使用背景模糊的磨砂玻璃效果）；
• 物體漂浮在太空中的多層方法；
• 鮮艷的色彩突出了模糊的透明度；
• 半透明物體上的細(xì)微淺色邊框。

這種垂直性以及你可以透過它看到的事實(shí)，意味著用戶可以建立界面的層次結(jié)構(gòu)和深度。用戶只是看到哪一層在哪一層之上，就像虛擬的玻璃一樣。

二、歷史

背景模糊最早是在2013年隨iOS 7廣泛引入的。這是一個(gè)非常重大的變化，但是圍繞超輕字體和丑陋圖標(biāo)的所有爭議，這是沒有爭議的變化之一。人們似乎喜歡它。

下拉通知很快就變成了一件有趣的事情，你可以清楚地看到(當(dāng)你慢慢地下拉通知時(shí))新面板下的圖標(biāo)是如何淡出和模糊的。

三、加強(qiáng)趨勢

蘋果已經(jīng)在他們的移動(dòng)操作系統(tǒng)中大大減少了模糊的玻璃效果，但是最近在Mac OS Big Sur中又增加了透明模糊。

看看這個(gè)“sketch”窗口，上面的照片模糊的部分是如何流過它的。我突出了背景模糊最明顯的地方，當(dāng)然，你可以在系統(tǒng)設(shè)置中完全關(guān)閉該效果。

微軟的Fluent設(shè)計(jì)系統(tǒng)也很重視這種效果。他們稱此特殊元素為“丙烯酸塑料/亞克力”，并將其展示為設(shè)計(jì)系統(tǒng)的組成部分。

丙烯酸是一種可以產(chǎn)生半透明質(zhì)感的畫筆，你可以將丙烯酸應(yīng)用于應(yīng)用程序表面以增加深度并幫助建立視覺層次?！?Microsoft Fluent設(shè)計(jì)系統(tǒng)

四、Dribbble案例分析

與任何UI趨勢一樣，它在Dribbble上經(jīng)常被過度使用。

這才慢慢開始，已經(jīng)有一些很漂亮的例子。當(dāng)然，它們都與演示作品有很大關(guān)系，因?yàn)樵趯?shí)際的手機(jī)屏幕上，它們很難覆蓋背景。這僅僅是因?yàn)槭謾C(jī)上的應(yīng)用程序都是全屏的。

Ghani Pradita的智能日歷應(yīng)用程序

上面的示例在某些地方可能處于可讀性的邊緣，但這清楚地表明了這種趨勢。背景非常微妙，但仍然可見，并且形狀具有1點(diǎn)半透明的白色輪廓，可以模擬玻璃邊緣。

（Ghulam Rasool）

就Neumorphism（新擬態(tài)）一樣，僅在一個(gè)元素上使用時(shí)，這種樣式會(huì)特別明亮，就像上面示例中的背景一樣。當(dāng)然，在這里演示的作品起著舉足輕重的作用，但是你可以想象桌面Web界面在背景上使用相似的透明度。

圖標(biāo)可能會(huì)引起爭議，但它們也得到了玻璃變形處理，就像下面的Marshall示例一樣。

by Marshall

從Dribbble看，它們目前都在#glass標(biāo)簽下，但我認(rèn)為#Glassmorphism更合適。玻璃杯可以說是你飲用的玻璃杯，所以我認(rèn)為這種風(fēng)格應(yīng)有一個(gè)名稱，以便于識(shí)別。

五、達(dá)到這個(gè)效果

效果本身很容易，但是要考慮兩點(diǎn)。與任何基于卡片的布局一樣，第一個(gè)是-物體離我們?cè)浇?，它吸引的光越多。在這種情況下，這意味著它將更加透明。

整個(gè)效果的基礎(chǔ)是陰影、透明度和背景模糊的組合，這種風(fēng)格只能使用一個(gè)透明層，或者多個(gè)透明層，但當(dāng)至少兩個(gè)半透明層出現(xiàn)在一個(gè)相當(dāng)繁忙的彩色背景上時(shí)，它是最突出和可見的。

1. 如何設(shè)置正確的透明度？

重要的是要記住，無論如何，你不能讓整個(gè)形狀透明，只有讓它的填充透明才行。大多數(shù)設(shè)計(jì)工具在填充為100%，對(duì)象透明度較低時(shí)，背景模糊會(huì)不起作用。

在上面的示例中，背景模糊值完全相同，為8，但是圖像看上去完全不同。當(dāng)填充不透明度為100％時(shí)，對(duì)象的不透明度有多低都沒有作用。我們根本不會(huì)獲得所需的模糊背景。

2. 如何選擇合適的背景？

背景在這個(gè)效果中扮演著重要的角色。不能太簡單或太單調(diào)，否則效果就看不出來，它們也不能太復(fù)雜。

這可能就是Apple選擇彩色背景作為Mac OS Big Sur默認(rèn)壁紙的原因。當(dāng)模糊的透明表面位于其頂部時(shí)，那些易于辨別的色調(diào)差異也很容易看到。

選擇背景時(shí)，請(qǐng)確保其具有足夠的色調(diào)差異，以使玻璃效果真正可見。

3. 最終細(xì)節(jié)

你可以嘗試的最后一件事是為形狀添加1px內(nèi)邊框，并具有一定的透明度。它模擬玻璃邊緣，可以使形狀從背景中脫穎而出。

盡管這種風(fēng)格的元素（例如模糊的背景）已經(jīng)存在了很多年，但它正變得越來越流行，因此，在這里仍然可以探索很多很酷的創(chuàng)意效果。

左側(cè)的圖像具有半透明的邊框，而右側(cè)的圖像則是無邊界的。

六、輔助功能

就像Neumorphism一樣，這種樣式可能不像默認(rèn)的Material Design那樣易于使用。

Neumorphism的主要規(guī)則也可以轉(zhuǎn)化為此處-如果你具有良好的功能層次結(jié)構(gòu)，則屏幕上的元素應(yīng)該可以在沒有背景的情況下工作，這樣可以確保有視力障礙的人仍然能夠理解UI。

這是一個(gè)與新擬態(tài)相同的不良示例，它在每個(gè)可能的屏幕元素上濫用效果。這樣，某些用戶幾乎無法訪問整個(gè)UI，同時(shí)也使其變得無聊和原始。

僅當(dāng)這些透明效果只是裝飾性的，而不是體驗(yàn)的組成部分時(shí)，才會(huì)發(fā)生這種情況。應(yīng)避免將它們用于按鈕或切換（這些重要的對(duì)象應(yīng)始終具有更大的對(duì)比度），但你可以將其用于卡背景。

只需確?？ǖ膬?nèi)部具有足夠的對(duì)比度和適當(dāng)?shù)拈g距即可定義層次結(jié)構(gòu)，并在視覺上將所有相關(guān)對(duì)象“分組”。

這是一個(gè)更好的例子-該卡具有定義明確的結(jié)構(gòu)，因此即使完全去除玻璃背景，其內(nèi)容也可以正常使用。這是一個(gè)簡單的示例-色彩對(duì)比度仍然可以改善。

七、2021年的Glassmorphism

蘋果公司在Big Sur中引入了這種風(fēng)格，這是肯定的方式，它將在接下來的幾個(gè)月中被模仿和模仿。它可能不會(huì)接管所有接口（這很好），但是它將比現(xiàn)在流行一些。

作為人類，我們很容易厭倦一種趨勢，每隔幾年鐘擺就會(huì)轉(zhuǎn)向另一邊。

一段時(shí)間內(nèi)，我們使用了超最小化、近乎扁平的界面，但之后它們開始變得更豐富多彩、更垂直、更“貼近你的臉”。

作為設(shè)計(jì)師，我們需要探索制造產(chǎn)品的所有潛力和創(chuàng)造性方法。在某些情況下，“玻璃”的有限使用實(shí)際上會(huì)使產(chǎn)品看起來更好，對(duì)用戶更有吸引力。

而且，盡管我喜歡沒有裝飾和超高對(duì)比度的黑白界面，但我很高興能多玩一點(diǎn)這種風(fēng)格，看看它會(huì)帶給我什么。

因?yàn)樽罱K，設(shè)計(jì)應(yīng)該很有趣，因?yàn)檫@是我們探索新路徑，享受我們所做的事情并交付真正卓越的東西的唯一途徑。

作者：LDesign1，公眾號(hào)ID：LDesign1

本文由@LDesign1 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash， 基于CC0協(xié)議