上周跟大家分享了新拟物的UI设计及相关的代码网站，这周让我们来聊一下玻璃拟物化——毛玻璃效果。
相信大家最近在dribbble或者behance上浏览都看到国外设计师都在有意识地使用玻璃质感的设计，应用在图标、网页、UI界面、APP的名片、作品集封面上等等。
一、什么是毛玻璃
那么毛玻璃质感(Glassmorphism)的效果具体使用的场景是怎么样的呢？主要有以下三个方面：图标、Web网页、UI界面等视觉设计。
1.图标
2.UI界面
3.Web端界面
4.卡片材质
二、毛玻璃效果优点
1.视觉愉悦感
使用毛玻璃手法设计的作品，通透轻盈，呼吸感强，具有虚实结合的美感。
2.富有层次感
使用毛玻璃技巧巧妙将页面层级拉开，极富层次感。
3.微妙高级感
毛玻璃质感低调微妙，巧加使用即可提高设计高级感。
三、毛玻璃效果设计要点
对于设计师来说，不仅要考虑美观及用户体验，最主要的是掌握设计要点，把握好设计度，注重细节和质感打磨，这样才能做出好的设计。那么毛玻璃效果的设计要点有哪些呢？
设计师 Malewicz 在他的文章当中对于这种设计风格有一个非常直观的总结：
- 整体的效果是来自于阴影、透明和背景模糊的组合
- 需要使用微妙的、贴合环境色的投影来呈现层次感
- 越是靠近前景的元素，通透性就越强
- 越是靠近背景的元素，通透性就越低
- 不要对整个对象设置透明度，而是要调整填充透明度
- 添加 1px 内边框，同时为它单独设置透明度，这会让「玻璃层」和背景有显著的分离
- 选择有明显色彩变化的背景，这样能够让玻璃效果更容易被用户感知到
四、毛玻璃效果具体怎么设计呢？
小景子的福利时间又到啦！附上教程，免费学~快来跟着我一起做吧~
这个用Adobe xd做是最快的了，因为xd有个背景模糊功能，可以快速制作这种效果。
具体步骤如下：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
