2021-4-13 鶴鶴
去年大家看到更多的設(shè)計和文章都在圍繞“新擬物化”展開行動，隨著各種硬件的提升，代碼的優(yōu)化，更多的風格和效果一一出現(xiàn)在我們的生活中，而今天呢，我們一起探索一下生活中最常見的，你可能沒有注意到的設(shè)計風格——“玻璃擬物化”風格，英文“Glassmorphism”，這也可能會成為新的設(shè)計趨勢。
在生活中的攝影，通過玻璃的層次感，給人以朦朧的美感，那什么是玻璃擬物化呢？
油管一管主Malewicz 小哥對于這種風格特征歸結(jié)為4點：
透明：使用帶有模糊磨砂質(zhì)感背景的透明效果
懸浮：帶有明顯懸浮感的多個層級
鮮明：使用鮮艷色彩作為強調(diào)色并且從半透明層中透出
微妙：使用輕薄微妙的邊框來強化物理質(zhì)感
通過玻璃透明，加周圍顏色環(huán)境的烘托，頁面的層次能更容易的呈現(xiàn)出來。
你在哪，從哪里來，玻璃擬物化就很明白的告訴你了。通過透明的玻璃材質(zhì)，能告訴你所覆蓋的層級。
蘋果的合計將玻璃擬物化的風格運用的惟妙惟肖，無論是mac，iPhone還是iPad，設(shè)計風格都保持著相對一致的玻璃擬物化風格。
首先：我們打開sketch，建立一個畫板，隨便找張圖片作為背景，畫一個白色矩形
接下來：調(diào)整矩形的屬性，再填充色中設(shè)置透明度為50%，邊框可以吸取一個30%透明的白色，2px，再添加一個環(huán)境色的10%陰影，做出層次感，最后就是調(diào)整玻璃模糊的效果了，玻璃擬物的關(guān)鍵就在于sketch自帶的背景模糊功能，我們常常以為這里只有一個高斯模糊，但卻忽略隱藏在里面的其他模糊效果。設(shè)置背景模糊值為10%，不用太大，太大的話模糊效果就沒有那么真實了，具體調(diào)整還是要看效果。我們看效果：
單層的效果不是很明顯，我們復(fù)制兩個調(diào)好的玻璃效果，調(diào)整他們的透明度，底部的透明度為70%、中間的為50%，最上層的為30%，看效果：
在界面設(shè)計中，就可以通過不同層級，調(diào)整對應(yīng)的參數(shù)，達到更好的層級效果。
我們以這個照片的圖標為例來拆解分析，通過運用剛才繪制的玻璃面的方法，與圖標色塊組合起來，在組合的時候，調(diào)整好層級，一個輕巧且富有玻璃質(zhì)感的圖標就繪制出來了，很簡單、很容易上手對不對？一起來快來試試吧
透明：使用帶有模糊磨砂質(zhì)感背景的透明效果
懸浮：帶有明顯懸浮感的多個層級
鮮明：使用鮮艷色彩作為強調(diào)色并且從半透明層中透出
微妙：使用輕薄微妙的邊框來強化物理質(zhì)感
愉悅感
層次感
呈現(xiàn)語境
微妙高級感
文章來源：站酷 作者：設(shè)計傳聲筒
藍藍設(shè)計( www.dzxscac.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.dzxscac.cn