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

雖然玻璃拟态本身并不新鮮，但這個詞在網頁設計師的用語中(zhōng)隻出現了很短的時間。

玻璃拟态的演變

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

設計師沒有提出新穎的 UI 元素，而是将目光投向了複制人們在現實世界中(zhōng)熟悉的東西。借助拟物(wù)化——設計師旨在将我(wǒ)(wǒ)們與物(wù)理世界的交互方式轉化爲數字體(tǐ)驗。誇張的漸變、沉重的陰影和過度的反射主導了網站。在設計中(zhōng)随處可見看起來像塑料、金屬甚至木紋的紋理。

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

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

但是玻璃拟态并不是 Apple 産品獨有的——Microsoft Windows Acrylic Design 系統和 Windows Vista 都使用玻璃拟态來将窗口分(fēn)層并建立層次結構。

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

如何創建玻璃拟态效果

玻璃拟态增加了一(yī)層隐蔽的透明度。設計師通過混合分(fēn)層、不透明度和模糊值來創建它。有時會添加陰影和邊框以進一(yī)步增強立體(tǐ)感。

軟焦點玻璃拟态

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

模糊是玻璃态的關鍵方面之一(yī)，也是最難做到的事情之一(yī)。目标是使背景圖像看起來好像觀衆正在通過失焦的鏡頭觀看，但又(yòu)不會讓背景圖像迷失在像素的迷霧中(zhōng)。但是，頂層的模糊太輕會使背景細節滲入并與前面的内容發生(shēng)沖突。

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

玻璃拟态創建圖像

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

爲了使玻璃形态産生(shēng)最大(dà)的影響，它背後需要有一(yī)些視覺上引人入勝的東西。這可以是幾何形狀、漸變，甚至是照片。由于背景中(zhōng)的内容會因玻璃狀模糊而失真，因此明亮的色彩和戲劇性的形狀效果最好。

細邊框和微妙的陰影

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

因爲玻璃拟态依賴于模糊效果，所以在玻璃拟态元素周圍設置邊框有助于提供定義。在上圖中(zhōng)，邊框不僅分(fēn)隔了信息，還模仿了手機屏幕的形狀。

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

玻璃拟态的例子

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

磨砂玻璃

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

征服叢林

旅行社Conquer the Jungle使用玻璃拟态将您的目光吸引到他們的三個主要旅行中(zhōng)。 

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

Decimal Chain

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

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

給你的網站設計一(yī)點玻璃形态

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