「玻璃拟物化」你知多少？

去年大家看到更多的设计和文章都在围绕“新拟物化”展开行动，随着各种硬件的提升，代码的优化，更多的风格和效果一一出现在我们的生活中，而今天呢，我们一起探索一下生活中最常见的，你可能没有注意到的设计风格——“玻璃拟物化”风格，英文“Glassmorphism”，这也可能会成为新的设计趋势。 

什么是玻璃拟物化呢？ 

在生活中的摄影，通过玻璃的层次感，给人以朦胧的美感，那什么是玻璃拟物化呢？

显而易见，Glassmorphism 这个词是 Glass（玻璃）和 Skeumorphism（拟物化）的结合，我们姑且将其称之为「玻璃拟物化设计」。

油管一管主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代码。 

就到这里儿吧，大家有空多去收藏一些类似的设计，多去吸取灵感，设计出更好用好看的产品！ 

最后，让我们再来总结一下

一玻璃拟物化的特点：

• 透明：使用带有模糊磨砂质感背景的透明效果

• 悬浮：带有明显悬浮感的多个层级

• 鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出

• 微妙：使用轻薄微妙的边框来强化物理质感

玻璃拟物化的优点有哪些？

• 愉悦感

• 层次感

• 呈现语境

• 微妙高级感

在sketch中怎么应用？

学会画玻璃面，学会使用背景模糊功能，注意参数细节，浅色、深色模式。

如何在sketch绘制图标？

先学会分解图标，再尝试绘制，注意细节部分的处理。 

如果今天对你有帮助，就点个赞呗~