• EN
香港:(852)3749 9734
info@inspirr.com

新聞資料

Glassmorphism,或成為2021年熱門網頁設計趨勢

2020年曾有網頁設計大神預言,Neomorphism(新擬物風)將為成為當時網絡興起的設計風格。不過,到目前為止,我們仍然鮮少見到Neomorphism被應用,而且近期有關它的熱度更是大不如此。

相反,Apple在WWDC2020大會上發佈新一代操作系統macOS Big Sur後,卻聞到一股新的UI設計風潮正悄然而來。

Glassmorphism,或成為2021年熱門網頁設計趨勢

Glassmorphism,或成為2021年熱門網頁設計趨勢

從Apple官方宣傳片中,我們看到macOS Big Sur採用了深度、陰影和半透明創建層級的UI設計思路,營造出玻璃質感的設計風格。這種設計風格能夠在多個層級下,透過磨砂玻璃的通透,呈現出一種「虛實結合」的美觀,因而被稱為Glassmorphism(暫譯:玻璃擬態)。

Glassmorphism,或成為2021年熱門網頁設計趨勢

Glassmorphism的主要特徵:

· 透明度,通過背景模糊營造磨砂玻璃效果;

· 使對象在多層級間懸浮的視覺效果;

· 突出模糊透明度的鮮艷色彩;

· 在半透明對象上添加類似玻璃高光般的纖細邊框。

有關Glassmorphism的案例欣賞

與其他UI趨勢一樣,一旦流行起來,便會在Dribbble出現大量相關作品,雖然Glassmorphism才剛出現,但已經不乏漂亮的案例。

Ghani Pradita:智能日曆APP

Glassmorphism,或成為2021年熱門網頁設計趨勢

這款APP雖然是Glassmorphism風格,如背景模糊,透明層具有一點半透明白色輪廓,用來模擬玻璃邊緣,但對界面可讀性的影響並不大,內容仍然清晰可見。

Ghulam Rasool:Glassmorphism風格網頁設計

Glassmorphism,或成為2021年熱門網頁設計趨勢

事實上,Glassmorphism不僅會讓整體設計顯得特別亮眼、乾淨,還能增加主體的立體感,非常真實,就像Ghulam Rasool 這款作品一樣。

Marshall:Glassmorphism風格Icon

Glassmorphism,或成為2021年熱門網頁設計趨勢

Icon使用Glassmorphism風格設計可能會有些爭議,就像上圖例子一樣,會有種模糊不清,顯得很髒的感覺。

如何實現Glassmorphism風格的效果?

1.實現Glassmorphism風格的原則

要實現Glassmorphism效果並不難,但需要考慮兩點:

○ 和任何基於卡片布局一樣,物體離我們越近,吸引的光就越多,同時也意味着它會更透明些。

○ 整個效果的基礎是陰影、透明度和背景模糊的組合。這種風格可使用一個透明層,也可使用多個透明層,但多個透明層疊加在相對複雜的彩色背景上時,玻璃形態的效果會更佳。

2.實現Glassmorphism風格的方法

① 設置正確透明度

首先,設置物體透明度時,不能讓整個形狀透明,而是需要調整填充的透明度來達到透明效果,否則不會產生背景模糊的效果。

Glassmorphism,或成為2021年熱門網頁設計趨勢

從上面的例子來看,背景模糊值雖然相同,但圓形圖像疊加效果並不完全一樣。當填充不透明度為100%時,對象的透明度再低也無法得到想要的模糊效果。

② 選擇合適的背景

Glassmorphism風格的背景不能太簡單或太單調,否則效果是很難看出來的;當然背景也不能太花,否則就會分散用戶的注意力。

Glassmorphism,或成為2021年熱門網頁設計趨勢

這或許就是Apple選擇彩色背景作為MacOS Big Sur默認壁紙的原因,即確保背景有足夠的色調差異,玻璃效果才會更容易被看到。

③ 添加玻璃的內邊框

Glassmorphism,或成為2021年熱門網頁設計趨勢

嘗試為透明層添加帶有透明度1px的內邊框,模擬玻璃的邊緣,使形狀從背景中更加突出。

④ 可訪問性

像Neomorphism一樣,Glassmorphism可能不像默認的Material Design那樣易用。

Glassmorphism,或成為2021年熱門網頁設計趨勢

如上面例子,在屏幕上過度使用模糊效果,會影響某些用戶使用,同時也會使它變得無聊和陳舊。

通常只有當這些透明效果純粹是裝飾,而不是體驗一部分時,才會發生這種情況,因此應避免使用它們作為按鈕或開關(這些重要界面元素應該具備高對比度,更加清晰明確)。

但你可以使用這些視覺效果修飾卡片背景,並確保卡片內部有足夠對比度和正確間距定義層次結構,並在視覺上「分組」所有相關對象。

Glassmorphism,或成為2021年熱門網頁設計趨勢

如上面例子,UI有明確的結構,即使玻璃形態效果被完全刪除,內容也可正常使用。

總結,要設計Glassmorphism風格的作品,必須具備良好的功能層次結構,界面元素在沒有視覺風格修飾情況下,依然具備可訪問性,並確保視力障礙用戶也能理解並無障礙使用產品。