原文来微信自公众号：希音的设计笔记
Hello～我是希音，又到了一周一度发送设计教程的时间了,
这次给大家带来了已经火了更久的「毛玻璃及新拟态风格设计」，虽然火了有段时间了，但是目前还有不少大厂还在用这种设计手法，好的设计永不过时，看了本篇文章后你会有新的收获，还不太了解的同学们赶紧上车了
什么是毛玻璃风格
毛玻璃英文称为“Aero”即：Authentic、Energetic、Reflective及Open四个单词首字母组合。
毛玻璃最早可以追溯到07年微软发售的Windows Vista和Windows7，所以Aero一般指Windows Aero。
毛玻璃是从Windows Vista开始使用的新型用户界面，透明玻璃感让用户一眼贯穿；苹果在OS X 10.10（Yosemite）及iOS7.0之后，很多系统界面都使用了毛玻璃效果。
图片来自网络，如侵则删
后来在 MacOS Big Sur 中又强调了毛玻璃的视觉体现。微软的新发布的Windows11 也大量使用了玻璃效果。
图片来自网络，如侵则删
毛玻璃风格的回归也从另一个层面说明，设计趋势变化无穷，设计风格也总是在变身，升级，却又联系紧密，关注变化，洞感趋势，觉察本质成为设计师的一个挑战。
毛玻璃风格的特点
——具有Neo和Glass 的全新混合：即利用模糊处理手法呈现一种类似磨砂玻璃的设计效果。
——玻璃效果和渐变背景的完美结合：多个透明图层配合彩色渐变的背景进行叠加，将信息层级很好的呈现，同时也会增加元素的通透质感。
图片来自网络，如侵则删
毛玻璃风格的应用
Aero(毛玻璃)风格的不同形式-在运营海报中
图片来自网络，如侵则删
图片来自网络，如侵则删
图片来自网络，如侵则删
图片来自网络，如侵则删
Aero(毛玻璃)风格的不同形式-在UI设计中
用毛玻璃效果进行求职者应用程序设计的探索
这是一个最新的、流行的、非常漂亮的设计。展示具有 Neo 和 Glass 混合效果的音乐播放器应用程序设计。
一个钱包app相关的界面
Aero(毛玻璃)风格的不同形式-在网页设计中
信用卡登陆页面设计
Mooney - Finance App 的仪表板探索，将玻璃效果与渐变背景相结合
Aero(毛玻璃)风格的不同形式-图标设计
毛玻璃风格的实操教程
第一步：画一个矩形，调好圆角进行线性渐变填充，#8F5BFF—#1600C8，为了更好的模拟玻璃质感，在这里加一个1.5px的描边，#FFFFFF，不透明度0%—40%
第二步：画一个矩形，毛玻璃效果就靠它撑场面了。
纯色填充#887DFF，不透明度降低为50%（可根据实际效果更改）；
内阴影，纯色填充#FFFFFF，不透明度降低为30%（可根据实际效果更改），模糊24；
背景模糊数值2，数值越小，玻璃质感越强，反之，磨砂质感越强。
在这里也需要加一个1.5px的描边，#FFFFFF，不透明度0%—40%
第三步：画个小矩形就好了
效果如下
我把以下源文件打包好了，如果需要的同学可以添加小编，私信获取哦
临摹作品
临摹作品
网友评论