原文來微信自公眾號(hào)：希音的設(shè)計(jì)筆記

Hello～我是希音，又到了一周一度發(fā)送設(shè)計(jì)教程的時(shí)間了,

這次給大家?guī)砹艘呀?jīng)火了更久的「毛玻璃及新擬態(tài)風(fēng)格設(shè)計(jì)」，雖然火了有段時(shí)間了，但是目前還有不少大廠還在用這種設(shè)計(jì)手法，好的設(shè)計(jì)永不過時(shí)，看了本篇文章后你會(huì)有新的收獲，還不太了解的同學(xué)們趕緊上車了

? 什么是毛玻璃風(fēng)格??

毛玻璃英文稱為“Aero”即：Authentic、Energetic、Reflective及Open四個(gè)單詞首字母組合。

毛玻璃最早可以追溯到07年微軟發(fā)售的Windows Vista和Windows7，所以Aero一般指Windows Aero。

毛玻璃是從Windows Vista開始使用的新型用戶界面，透明玻璃感讓用戶一眼貫穿；蘋果在OS X 10.10（Yosemite）及iOS7.0之后，很多系統(tǒng)界面都使用了毛玻璃效果。

圖片來自網(wǎng)絡(luò)，如侵則刪

后來在 MacOS Big Sur 中又強(qiáng)調(diào)了毛玻璃的視覺體現(xiàn)。微軟的新發(fā)布的Windows11 也大量使用了玻璃效果。

圖片來自網(wǎng)絡(luò)，如侵則刪

毛玻璃風(fēng)格的回歸也從另一個(gè)層面說明，設(shè)計(jì)趨勢變化無窮，設(shè)計(jì)風(fēng)格也總是在變身，升級(jí)，卻又聯(lián)系緊密，關(guān)注變化，洞感趨勢，覺察本質(zhì)成為設(shè)計(jì)師的一個(gè)挑戰(zhàn)。

? 毛玻璃風(fēng)格的特點(diǎn)??

——具有Neo和Glass 的全新混合：即利用模糊處理手法呈現(xiàn)一種類似磨砂玻璃的設(shè)計(jì)效果。

——玻璃效果和漸變背景的完美結(jié)合：多個(gè)透明圖層配合彩色漸變的背景進(jìn)行疊加，將信息層級(jí)很好的呈現(xiàn)，同時(shí)也會(huì)增加元素的通透質(zhì)感。

圖片來自網(wǎng)絡(luò)，如侵則刪

毛玻璃風(fēng)格的應(yīng)用??

Aero(毛玻璃)風(fēng)格的不同形式-在運(yùn)營海報(bào)中

圖片來自網(wǎng)絡(luò)，如侵則刪

圖片來自網(wǎng)絡(luò)，如侵則刪

圖片來自網(wǎng)絡(luò)，如侵則刪

圖片來自網(wǎng)絡(luò)，如侵則刪

Aero(毛玻璃)風(fēng)格的不同形式-在UI設(shè)計(jì)中

用毛玻璃效果進(jìn)行求職者應(yīng)用程序設(shè)計(jì)的探索

這是一個(gè)最新的、流行的、非常漂亮的設(shè)計(jì)。展示具有 Neo 和 Glass 混合效果的音樂播放器應(yīng)用程序設(shè)計(jì)。

一個(gè)錢包app相關(guān)的界面

Aero(毛玻璃)風(fēng)格的不同形式-在網(wǎng)頁設(shè)計(jì)中

信用卡登陸頁面設(shè)計(jì)

Mooney - Finance App 的儀表板探索，將玻璃效果與漸變背景相結(jié)合

Aero(毛玻璃)風(fēng)格的不同形式-圖標(biāo)設(shè)計(jì)

毛玻璃風(fēng)格的實(shí)操教程??

第一步：畫一個(gè)矩形，調(diào)好圓角進(jìn)行線性漸變填充，#8F5BFF—#1600C8，為了更好的模擬玻璃質(zhì)感，在這里加一個(gè)1.5px的描邊，#FFFFFF，不透明度0%—40%

第二步：畫一個(gè)矩形，毛玻璃效果就靠它撐場面了。

純色填充#887DFF，不透明度降低為50%（可根據(jù)實(shí)際效果更改）；

內(nèi)陰影，純色填充#FFFFFF，不透明度降低為30%（可根據(jù)實(shí)際效果更改），模糊24；

背景模糊數(shù)值2，數(shù)值越小，玻璃質(zhì)感越強(qiáng)，反之，磨砂質(zhì)感越強(qiáng)。

在這里也需要加一個(gè)1.5px的描邊，#FFFFFF，不透明度0%—40%

第三步：畫個(gè)小矩形就好了

效果如下

我把以下源文件打包好了，如果需要的同學(xué)可以添加小編，私信獲取哦

臨摹作品

臨摹作品