網頁設計師想出了一些非常聰明的技巧，讓他們的作品有一種實體感。玻璃擬態（Glassmorphism）就是這樣一種技術。當您將模糊效果與透明度相結合時，像素會呈現出磨砂玻璃的略微不透明的品質——為設計增添一絲質感和維度。

雖然玻璃擬態本身并不新鮮，但這個詞在網頁設計師的用語中只出現了很短的時間。

玻璃擬態的演變

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

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

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

但是玻璃擬態并不是 Apple 產品獨有的——Microsoft Windows Acrylic Design 系統和 Windows Vista 都使用玻璃擬態來將窗口分層并建立層次結構。

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

如何創建玻璃擬態效果

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

軟焦點玻璃擬態

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

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

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

玻璃擬態創建圖像

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

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

細邊框和微妙的陰影

設計師Artem Abramov使用細白線和邊框半徑來創建定義設計頂層的圓角矩形。

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

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

玻璃擬態的例子

現在我們已經介紹了如何實現它，讓我們看看設計師使用它的一些方式。

磨砂玻璃

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

征服叢林

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

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

Decimal Chain

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

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

給你的網站設計一點玻璃形態

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