一篇文章搞懂毛玻璃擬態

一篇文章搞懂毛玻璃擬態

一篇文章搞懂毛玻璃擬態,觀點,April_Firefly,原創文章站酷網,中國設計師互動平台。

前言

設計趨勢總是在不斷的變化,近幾年擬物風格又以新的形式——新擬態回歸大眾視野,蘋果發布了macOS Big Sur 操作系統,整體風格應用了新擬態的設計思路,採用了3D質感的元素設計,其中還包含了運用陰影、透明度以及背景模糊/高斯模糊手法模仿玻璃形態,構建空間感的新興擬物態風格——毛玻璃擬態風格。

undefined

一、毛玻璃擬態的歷史

毛玻璃視覺其實可以追溯到2007年微軟發售的Windows Vista和Windows7,隨之後來的OS X 10.10(Yosemite)和iOS7中大量出現毛玻璃效果,比如底部快捷菜單欄、通知中心和多任務切換窗口等,蘋果公司加大了模糊程度,透明效果基於扁平,更順應當時UI扁平化的設計趨勢。

後來,蘋果在他們的移動操作系統中大大減少了毛玻璃效果,但是最近在MacOS Big Sur 中又增加了毛玻璃質感。微軟的Fluent 設計系統也非常注重這一效果,他們稱這種效果為“亞克力”,並將其作為設計系統的組成部分之一。

二、毛玻璃擬態的特徵及優缺點

1.毛玻璃擬態的特徵

毛玻璃擬態模仿了塑料材質(凹凸質感,凸顯層次感),這個新的視覺風格更加註重垂直空間Z軸的使用:

—透明感(使用背景模糊/高斯模糊的磨砂玻璃效果)

—物體漂浮在空間中,通過前後關係表現層次感

—鮮豔的色彩感,更突出了模糊的透明度

—半透明物體邊緣的微妙處理,採用細膩的邊框來表現玻璃質感

這是注重空間感的典型特徵,意味著這種風格有助於用戶建立界面的層次結構和深度。用戶可以看到物體間的層次關係,哪一層在哪一層之上,就像空間中真實的玻璃一樣。

2.毛玻璃擬態的優缺點

優點:

毛玻璃擬態效果之所以被大家應用和認可除了它能帶來的優秀視覺表現,更重要的是其本身的功能意義,它能幫助設計師更好的拉開信息層級並達到視覺統一

(1)視覺表達

通過背景毛玻璃化,可以中和扁平化圖文帶來的生硬不立體。在卡片元素上添加毛玻璃效果,與其他元素疊加後視覺上建立層次感,將信息層級更好的表達出來;在圖標中增加毛玻璃效果,可以提升圖標通透的質感。

(2)品牌感

良好的視覺統一,有助於提升產品的品牌感。

不足:

毛玻璃擬態效果並不好應用於上線產品。它不適用於按鈕或開關(這些重要的界面元素應該具備高對比度,更加清晰明確),模糊效果也要注意分寸,屏幕上過度使用模糊效果,會使整個UI 對某些用戶可閱讀性差,同時也會使頁面看起來顯臟。

也可以這樣理解,使用毛玻璃擬態風格的前提是卡片內部有足夠的對比度和合適的間距來定義層次結構,並在視覺上“分組” 所有相關的對象。它可以只在一個元素上使用,也可以作為卡片背景修飾視覺效果,這種很容易達到較好的視覺效果,頁面風格也會特別亮眼,整體乾淨、明亮。

三、毛玻璃擬態的應用

1.卡片背景

用作卡片背景時,能很好的表達信息之間的層級感,朦朧透出下層視覺元素,營造了良好的視覺美感。

2.APP圖標

用作APP圖標,可以提升圖標通透的質感。常見的三種圖標案例:A.頂部圖形為白色,底部圖形為其他色;B.頂部圖形和底部圖形為同色,頂部圖形顏色明度高;C.頂部圖形和底部圖形不同色

3.界麵包裝

運用毛玻璃去包裝UI界面,頁面風格整體乾淨、明亮,有較好的視覺效果。

四、毛玻璃擬態繪製原理

1.和任何基於卡片的佈局一樣,物體離我們越近,它吸引的光就越多。在這種情況下,意味著它會更透明一些。

2. 整個效果的基礎是陰影、透明度和背景模糊的組合。這種風格可以使用一個透明層,也可以使用多個透明層,但多個透明層疊加在復雜彩色背景上的效果會更好(當至少兩個透明層出現在一個相當複雜的彩色背景上時,玻璃形態的效果是最突出的)。

五、毛玻璃擬態-卡片背景的繪製要點

1. 如何設置正確的透明度

重要的是要記住,你不能讓整個形狀透明,需要調整填充的透明度來達到透明效果。如果不調整填充的透明度,僅僅是調整整個對象的透明度,就不會產生模糊的效果。

在上面的例子中,背景模糊值完全相同,但圓形圖像的疊加效果看起來完全不同。當填充不透明度為100% 時,對象的透明度再低也沒有用,根本無法得到想要的模糊效果。

2.如何選擇合適的背景

最底層背景在這個效果中扮演著重要的角色。不能太簡單或太單調,否則毛玻璃效果就看不出來,但也不能太複雜。

複雜的背景有助於玻璃形態的展現,這可能就是蘋果選擇了彩色背景作為MacOS Big Sur 默認壁紙的原因。當模糊的透明層位於背景之上時,那些容易辨別的色調差異也很容易被看到。

六、毛玻璃擬態-圖標的簡版教程

用作卡片背景繪製操作比較簡單,使用背景模糊就可以搞定,重點在於根據實際情況進行透明度和模糊度的調整,這裡就不再做展示。

下面是毛玻璃擬態-圖標的教程:

第一步:繪製基礎圖形,頂部圖形顏色#DDEDFF,底部圖形漸變色#00EDFB——#001EEE

第二步:底部圖形複製一層,做高斯模糊效果,高斯模糊:12,不透明度72%,將模糊層置於頂部圖形上,添加蒙版

第三步:為了更好的增加圖標辨識度,增加漸變描邊,漸變色#FFFFFF——#D5E9FF,圖標繪製完成。

過程中用到的色值和模糊度可以根據視覺美觀度做適當調整,也可為圖標增加陰影,提升整體效果。

結束語

作為設計師,我們可以看到,設計趨勢一直在變化,每隔幾年就會轉向另一種風格,但似乎每種風格又有自己的前世今生。所謂趨勢輪迴,並不只是單純的回歸,而是以一種的更豐富、更立體、更具有層次感的方式呈現在人們面前。

我們要做的就是不盲目,不盲從,看清楚趨勢變化的本質。

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。