今年年初大家看到更多的设计和文章都在围绕“新拟物化”展开行动，随着各种硬件的提升，代码的优化，更多的风格和效果一一出现在我们的生活中，而今天呢，我们一起探索一下生活中最常见的，你可能没有注意到的设计风格——“玻璃拟物化”风格，英文“Glassmorphism”，这也可能会成为新的设计趋势。
新拟物化
什么是玻璃拟物化呢？
在生活中的摄影，通过玻璃的层次感，给人以朦胧的美感，那什么是玻璃拟物化呢？
油管一管主Malewicz 小哥对于这种风格特征归结为4点：
透明：使用带有模糊磨砂质感背景的透明效果
悬浮：带有明显悬浮感的多个层级
鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出
微妙：使用轻薄微妙的边框来强化物理质感
玻璃拟物化的优点有哪些？
1.愉悦感
玻璃拟物化的应用，让扁平的UI界面不那么单调，打破了人们的视觉疲劳，增添欢快、愉悦的设呈现效果。
2.层次感
通过玻璃透明，加周围颜色环境的烘托，页面的层次能更容易的呈现出来。
3.呈现语境
你在哪，从哪里来，玻璃拟物化就很明白的告诉你了。通过透明的玻璃材质，能告诉你所覆盖的层级。
4.微妙高级感
例如，以往的电商产品设计界面，更多的体现材质或者简约风体现产品本身，但玻璃拟物化会让产品在呈现中更显高级。
玻璃拟物化的设计风格从哪里来呢？
追根溯源。其实还是要追更到苹果头上。
苹果的合计将玻璃拟物化的风格运用的惟妙惟肖，无论是mac，iPhone还是iPad，设计风格都保持着相对一致的玻璃拟物化风格。
重点来了，
玻璃拟物化如何用Sketch来设计一个玻璃面呢？
首先：我们打开sketch，建立一个画板，随便找张图片作为背景，画一个白色矩形
接下来：调整矩形的属性，再填充色中设置透明度为50%，边框可以吸取一个30%透明的白色，2px，再添加一个环境色的10%阴影，做出层次感，最后就是调整玻璃模糊的效果了，玻璃拟物的关键就在于sketch自带的
背景模糊功能
，我们常常以为这里只有一个高斯模糊，但却忽略隐藏在里面的其他模糊效果。设置背景模糊值为10%，不用太大，太大的话模糊效果就没有那么真实了，具体调整还是要看效果。我们看效果：
单层的效果不是很明显，我们复制两个调好的玻璃效果，调整他们的透明度，底部的透明度为70%、中间的为50%，最上层的为30%，看效果：
在界面设计中，就可以通过不同层级，调整对应的参数，达到更好的层级效果。
那深色模式怎么办呢？
很简单，我们复制这三个矩形，填充色设为黑色，可以不是纯黑色，根据设计规范来定，看效果：
在图标中怎么用玻璃拟物化设计呢？
玻璃是属于透明物体，所以我们就了解到，通过玻璃看物体，层次感就出来了。
所以图标这这里设计的关键就在于
玻璃面和层次感
，下面
我们来看几个图标设计的案例
看得出来，玻璃拟物化的设计很出效果。
下面根据我说的我们来分析如何运用玻璃拟物化设计图标：
我们以这个照片的图标为例来拆解分析，通过运用刚才绘制的玻璃面的方法，与图标色块组合起来，在组合的时候，调整好层级，一个轻巧且富有玻璃质感的图标就绘制出来了，很简单、很容易上手对不对？一起来快来试试吧
注意的细节：
1.在纯白色背景中，一定要给玻璃面添加底部色块的颜色，不然就不会出现看不见玻璃层的尴尬画面；
2.背景模糊值也是需要根据具体的需要来调整。
玻璃拟物化在界面中的应用越来越多，所以大家也要根据自己的业务有选择性尝试的去使用，不要盲目的跟随设计趋势设计而设计。 另外，如果有用到的玻璃拟物化的设计，前端大哥们又不太会这个，可给他们甩这个地址 https://glassmorphism.com/ ，玻璃拟物化的CSS代码。 就到这里儿吧，大家有空多去收藏一些类似的设计，多去吸取灵感，设计出更好用好看的产品！ 最后，让我们再来总结一下 一玻璃拟物化的特点：
透明：使用带有模糊磨砂质感背景的透明效果
悬浮：带有明显悬浮感的多个层级
鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出
微妙：使用轻薄微妙的边框来强化物理质感
玻璃拟物化的优点有哪些？
愉悦感
层次感
呈现语境
微妙高级感
感谢你的阅读和支持
----------------------------------------
声明：本文图片来自互联网，侵联删
2127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
