2020-12-3 前端達(dá)人
在需要體現(xiàn)出視覺縱深（Z軸方向的高程、高度）的地方，新擬物化的 UI 元素很難做到顯著，而這也使得用戶很難立刻馬上意識(shí)到「這是一個(gè)可交互的元素」：
關(guān)于這一點(diǎn)，在彩云的這篇文章中有詳細(xì)的描述：
此外，彩云還梳理了新擬物化可以應(yīng)用的范疇和場(chǎng)景，可以說非常貼心了。不過，這不是今天要說的重點(diǎn)。
顯而易見，Glassmorphism 這個(gè)詞是 Glass（玻璃）和 Skeumorphism（擬物化）的結(jié)合，我們姑且將其稱之為「玻璃擬物化設(shè)計(jì)」。
Malewicz 小哥對(duì)于這種風(fēng)格特征歸結(jié)為4點(diǎn)：
簡(jiǎn)單的來說，「玻璃擬物化」在某些方面和「新擬物化」是一脈相承的，但是它有著相對(duì)更加具體的視覺隱喻，也就是我們?nèi)粘＝佑|的「玻璃」。
如果你和經(jīng)常翻看 Dribbble 或者 Behance ，你會(huì)注意到有很多設(shè)計(jì)師在有意識(shí)地采用「玻璃擬物化」美學(xué)的設(shè)計(jì)。
比如這是 Figma 團(tuán)隊(duì)的設(shè)計(jì)師 Rogie 所設(shè)計(jì)的小圖標(biāo)
設(shè)計(jì)師 Ghani Pradita 所設(shè)計(jì)的日歷應(yīng)用
使用「玻璃擬物化」來設(shè)計(jì)的界面，由于毛玻璃的通透性，在有多個(gè)控件的情況下，呈現(xiàn)出一種獨(dú)特的「虛實(shí)結(jié)合」的美感。
Happy Tri Milliarta 設(shè)計(jì)的展示頁面
來自 Paperpillar 團(tuán)隊(duì)的 Ghani Pradita 設(shè)計(jì)的 UI 控件
這是設(shè)計(jì)師 Ilham Maulana 為 Plainthing Studio 團(tuán)隊(duì)所設(shè)計(jì)的網(wǎng)頁
有些東西應(yīng)該是不言自明的。比如「我在哪」「我是從哪里來的」這種事情，可以透過「玻璃」看到的背景層就能夠很好地暗示出此刻的位置。
設(shè)計(jì)師 Ghulam Rasool 設(shè)計(jì)的 UI 范例
在設(shè)計(jì)中間的「玻璃層」的時(shí)候，可能需要你控制好這個(gè)「微妙」的程度。不過不論怎樣，這種呈現(xiàn)方式都非常的雅致，甚至有那么一絲「詩意」存在。
那么，這種設(shè)計(jì)風(fēng)格到底是如何被塑造出來的？如果要追根溯源，「玻璃擬物化」到底是從哪里來的？
老實(shí)說，玻璃擬物化，Glassmorphism，追根溯源還是在蘋果頭上。
隨后，Windows Phone 誕生，Windows 8 問世，包豪斯十足的 Metro 視覺風(fēng)格成為微軟的選擇。
微軟的 Fluent Design 當(dāng)中，背景和前景之間的「Acrylic」層，其實(shí)是由5個(gè)部分構(gòu)成：
當(dāng)然，使用這么多手段這也是盡可能讓最終的色調(diào)盡可能地在前景的 UI 當(dāng)中，顯得自然不突兀。如果你想了解更多，可以看這里：
相比于 iOS 14，macOS Big Sur 和 Windows 10 20H2，我們此刻所討論的「玻璃擬物化」在視覺效果上無疑是更加激進(jìn)、強(qiáng)化的。
設(shè)計(jì)師 Malewicz 在他的文章當(dāng)中對(duì)于這種設(shè)計(jì)風(fēng)格有一個(gè)非常直觀的總結(jié)：
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com