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

2021-4-13 分享达人

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

什么是玻璃拟物化呢？

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

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

油管一管主Malewicz 小哥对于这种风格特征归结为4点：

透明：使用带有模糊磨砂质感背景的透明效果
悬浮：带有明显悬浮感的多个层级
鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出
微妙：使用轻薄微妙的边框来强化物理质感

简单的来说，「玻璃拟物化」在某些方面和「新拟物化」是一脉相承的，但是它有着相对更加具体的视觉隐喻，也就是我们日常接触的「玻璃」。

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

1.愉悦感

玻璃拟物化的应用，让扁平的UI界面不那么单调，打破了人们的视觉疲劳，增添欢快、愉悦的设呈现效果。

2.层次感

通过玻璃透明，加周围颜色环境的烘托，页面的层次能更容易的呈现出来。

3.呈现语境

你在哪，从哪里来，玻璃拟物化就很明白的告诉你了。通过透明的玻璃材质，能告诉你所覆盖的层级。

4.微妙高级感

例如，以往的电商产品设计界面，更多的体现材质或者简约风体现产品本身，但玻璃拟物化会让产品在呈现中更显高级。

玻璃拟物化的设计风格从哪里来呢？

追根溯源。其实还是要追更到苹果头上。

苹果的合计将玻璃拟物化的风格运用的惟妙惟肖，无论是mac，iPhone还是iPad，设计风格都保持着相对一致的玻璃拟物化风格。

重点来了，

玻璃拟物化如何用Sketch来设计一个玻璃面呢？

首先：我们打开sketch，建立一个画板，随便找张图片作为背景，画一个白色矩形

接下来：调整矩形的属性，再填充色中设置透明度为50%，边框可以吸取一个30%透明的白色，2px，再添加一个环境色的10%阴影，做出层次感，最后就是调整玻璃模糊的效果了，玻璃拟物的关键就在于sketch自带的背景模糊功能，我们常常以为这里只有一个高斯模糊，但却忽略隐藏在里面的其他模糊效果。设置背景模糊值为10%，不用太大，太大的话模糊效果就没有那么真实了，具体调整还是要看效果。我们看效果：