网页毛玻璃效果_毛玻璃效果，你学废了吗？

上周跟大家分享了新拟物的UI设计及相关的代码网站，这周让我们来聊一下玻璃拟物化——毛玻璃效果。

相信大家最近在dribbble或者behance上浏览都看到国外设计师都在有意识地使用玻璃质感的设计，应用在图标、网页、UI界面、APP的名片、作品集封面上等等。

---

一、什么是毛玻璃

那么毛玻璃质感(Glassmorphism)的效果具体使用的场景是怎么样的呢？主要有以下三个方面：图标、Web网页、UI界面等视觉设计。

1.图标

2.UI界面

 

3.Web端界面

 

4.卡片材质

二、毛玻璃效果优点

1.视觉愉悦感

使用毛玻璃手法设计的作品，通透轻盈，呼吸感强，具有虚实结合的美感。

2.富有层次感

使用毛玻璃技巧巧妙将页面层级拉开，极富层次感。

3.微妙高级感

 毛玻璃质感低调微妙，巧加使用即可提高设计高级感。

---

三、毛玻璃效果设计要点

对于设计师来说，不仅要考虑美观及用户体验，最主要的是掌握设计要点，把握好设计度，注重细节和质感打磨，这样才能做出好的设计。那么毛玻璃效果的设计要点有哪些呢？

设计师 Malewicz 在他的文章当中对于这种设计风格有一个非常直观的总结：

• 整体的效果是来自于阴影、透明和背景模糊的组合

• 需要使用微妙的、贴合环境色的投影来呈现层次感

• 越是靠近前景的元素，通透性就越强

• 越是靠近背景的元素，通透性就越低

• 不要对整个对象设置透明度，而是要调整填充透明度

• 添加 1px 内边框，同时为它单独设置透明度，这会让「玻璃层」和背景有显著的分离

• 选择有明显色彩变化的背景，这样能够让玻璃效果更容易被用户感知到

---

四、毛玻璃效果具体怎么设计呢？

小景子的福利时间又到啦！附上教程，免费学~快来跟着我一起做吧~

这个用Adobe xd做是最快的了，因为xd有个背景模糊功能，可以快速制作这种效果。

具体步骤如下：

 好啦，今天的分享就到这儿啦~

喜欢的话，可以给小景子点鼓励哦~