網(wǎng)頁設(shè)計師想出了一些非常聰明的技巧，讓他們的作品有一種實體感。玻璃擬態(tài)（Glassmorphism）就是這樣一種技術(shù)。當(dāng)您將模糊效果與透明度相結(jié)合時，像素會呈現(xiàn)出磨砂玻璃的略微不透明的品質(zhì)——為設(shè)計增添一絲質(zhì)感和維度。

雖然玻璃擬態(tài)本身并不新鮮，但這個詞在網(wǎng)頁設(shè)計師的用語中只出現(xiàn)了很短的時間。

玻璃擬態(tài)的演變

我們可以將今天的玻璃擬態(tài)追溯到擬態(tài)擬真主義的原始嘗試。在 1990 年代和 2000 年代初期，計算機的圖形功能越來越好，數(shù)據(jù)速率也在加快。這些進步使設(shè)計師能夠創(chuàng)建更依賴視覺效果的網(wǎng)站——使擬物化成為可能。

玻璃擬態(tài)比其他擬態(tài)的密集像素和硬邊緣更輕。它捕捉了玻璃的外觀——但不是傳統(tǒng)意義上的擬物化。這并不是要欺騙任何人認(rèn)為他們正在看玻璃。相反，它喚起了它的感覺。

在 Apple 產(chǎn)品中可以找到玻璃擬態(tài)的一個很好的例子。2013 年 iOS7 發(fā)布時，iPhone 采用半透明灰色背景，為其下方的圖標(biāo)添加了一層淡淡的霧霾。蘋果在 2020 年通過 MacOS Big Sur 更新再次推動了這種設(shè)計風(fēng)格，其中包括玻璃狀菜單下拉菜單和半透明側(cè)邊欄。

但是玻璃擬態(tài)并不是 Apple 產(chǎn)品獨有的——Microsoft Windows Acrylic Design 系統(tǒng)和 Windows Vista 都使用玻璃擬態(tài)來將窗口分層并建立層次結(jié)構(gòu)。

玻璃擬態(tài)UI 仍然很受歡迎。按鈕、導(dǎo)航選項、滑塊和其他 UI 元素在其清晰的線條放在玻璃狀模糊的頂部時會脫穎而出。與在同一個維度平面上爭奪注意力不同，玻璃形態(tài)提供了微小的視覺提升——使元素對任何滾動瀏覽的人都更加明顯。

如何創(chuàng)建玻璃擬態(tài)效果

玻璃擬態(tài)增加了一層隱蔽的透明度。設(shè)計師通過混合分層、不透明度和模糊值來創(chuàng)建它。有時會添加陰影和邊框以進一步增強立體感。

軟焦點玻璃擬態(tài)

Prifti的項目是柔焦玻璃形態(tài)效果的一個例子。背景圖像在一層灰色的覆蓋下變得模糊，這使覆蓋的文本具有定義感。

模糊是玻璃態(tài)的關(guān)鍵方面之一，也是最難做到的事情之一。目標(biāo)是使背景圖像看起來好像觀眾正在通過失焦的鏡頭觀看，但又不會讓背景圖像迷失在像素的迷霧中。但是，頂層的模糊太輕會使背景細(xì)節(jié)滲入并與前面的內(nèi)容發(fā)生沖突。

底層可以是具有實心填充的形狀或沒有任何透明度的圖像。頂層具有低不透明度，允許其背后的東西發(fā)光。這疊對比層將一個元素錨定到屏幕上，同時仍然使第二層看起來像是漂浮在頂部。

玻璃擬態(tài)創(chuàng)建圖像

設(shè)計師Dmytro Serebrennikov的這張圖片有著各種奇特的形狀，展示了將不同形狀堆疊在一起的藝術(shù)可能性。

為了使玻璃形態(tài)產(chǎn)生最大的影響，它背后需要有一些視覺上引人入勝的東西。這可以是幾何形狀、漸變，甚至是照片。由于背景中的內(nèi)容會因玻璃狀模糊而失真，因此明亮的色彩和戲劇性的形狀效果最好。

細(xì)邊框和微妙的陰影

設(shè)計師Artem Abramov使用細(xì)白線和邊框半徑來創(chuàng)建定義設(shè)計頂層的圓角矩形。

因為玻璃擬態(tài)依賴于模糊效果，所以在玻璃擬態(tài)元素周圍設(shè)置邊框有助于提供定義。在上圖中，邊框不僅分隔了信息，還模仿了手機屏幕的形狀。

理想情況下，邊框是輕量級的，因此不會分散設(shè)計的注意力。包括一點陰影也可以增加立體感。使用細(xì)膩的觸感。輕描淡寫是關(guān)鍵。

玻璃擬態(tài)的例子

現(xiàn)在我們已經(jīng)介紹了如何實現(xiàn)它，讓我們看看設(shè)計師使用它的一些方式。

磨砂玻璃

這個磨砂玻璃可克隆模板體現(xiàn)了我們對這種效果的喜愛。英雄部分提供了一個通往背景的多云門戶，上面放置了一張圖像。此外，微交互使這個矩形在 z 軸上移動，進一步增加了它的維度感。 

征服叢林

旅行社Conquer the Jungle使用玻璃擬態(tài)將您的目光吸引到他們的三個主要旅行中。 

在標(biāo)準(zhǔn)的卡片布局中，旅游街區(qū)與其他一切都處于同一水平，這將使他們很容易迷失在繁忙的熱帶背景中。分層的磨砂玻璃效果使盒子從頁面上彈出，將您的視線直接吸引到旅游套餐上。

Decimal Chain

團隊頁面通常只是一個具有專業(yè)面孔的網(wǎng)格。采用這種傳統(tǒng)方法并沒有錯，但是一點玻璃形態(tài)可以使布局更具視覺吸引力。Decimal Chain在這些略微模糊的卡片中展示了他們的團隊成員。

彩色背景圓圈通過每張卡片折射，營造出氛圍并模仿磨砂玻璃。通過輕輕地將每個內(nèi)容塊從屏幕上抬起，玻璃形態(tài)效果會吸引您的注意力。

給你的網(wǎng)站設(shè)計一點玻璃形態(tài)

盡管我們喜歡極簡和扁平的設(shè)計，但很高興看到設(shè)計師使用深度和空間。玻璃擬態(tài)讓您可以將屏幕空間塑造成具有維度的東西。所需要的只是堆疊幾層，添加一些模糊，然后微調(diào)值，直到你最終得到你喜歡的東西。