玻璃擬態(tài)：為網(wǎng)站設(shè)計(jì)帶來維度效果

時(shí)間：2024-05-14 22:30:01 | 來源：建站知識(shí)

時(shí)間：2024-05-14 22:30:01 來源：建站知識(shí)

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

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

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

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

設(shè)計(jì)師沒有提出新穎的 UI 元素，而是將目光投向了復(fù)制人們?cè)诂F(xiàn)實(shí)世界中熟悉的東西。借助擬物化——設(shè)計(jì)師旨在將我們與物理世界的交互方式轉(zhuǎn)化為數(shù)字體驗(yàn)?？鋸埖臐u變、沉重的陰影和過度的反射主導(dǎo)了網(wǎng)站。在設(shè)計(jì)中隨處可見看起來像塑料、金屬甚至木紋的紋理。

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

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

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

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

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

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

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

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



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

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

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

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



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

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

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



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

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

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

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

磨砂玻璃

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



征服叢林

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



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

Decimal Chain

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

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



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

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