如何设计优秀的磨砂玻璃风格？

如何设计优秀的磨砂玻璃风格？

磨砂玻璃风格（Glass morphism）是近年来在UI设计领域备受欢迎的一种设计趋势。从微软Windows Vista到苹果iOS7，再到最新的Apple Vision Pro，这种设计风格以其独特的视觉效果和交互体验赢得了广泛的应用。本文将深入探讨磨砂玻璃风格的定义、历史演变以及关键设计要素，帮助设计师更好地理解和应用这种风格。

1. 磨砂玻璃风格定义及历史

磨砂玻璃风格，也被叫做毛玻璃风格，官方术语为：玻璃拟态化（Glass morphism）。这种设计风格最早出现在2006年11月30日微软Windows Vista版本中，主要特征是“玻璃化”效果，核心是使用半透明的背景和模糊效果来创建玻璃面板样式的元素。这种设计风格可以为数字界面添加深度和上下文，同时也可以使元素具有更好的聚焦效果。

图片来源于网络：Windows Vista 桌面

2013年6月10日，苹果发布iOS7版本，其中Dock栏、通知控制中心的设计采用了更“雾化”的玻璃效果，背景通透性降低，几乎无法辨别背景内容。

图片来源于网络：iOS7界面

2023年6月6日，苹果发布的眼镜Apple Vision Pro，为了更好地结合现实环境，界面中均采用了全套的磨砂玻璃风格。

图片来源于：Apple官网

此外，在Apple macOS Big Sur、Microsoft Windows 11等设计中也都能看到磨砂玻璃风格的视觉效果呈现。

图片来源于：Windows11 官方界面

2. 磨砂玻璃风格来源自拟物风格

设计起源于生活，之所以叫做磨砂玻璃、雾化玻璃，都是由现实物体作为设计基础。

图片来源于：网络

以苹果眼镜界面为例，分辨率在1306*734的情况下：

模糊数值设定为20左右，呈现早期Windows Vista风格

模糊数值设定为400左右，呈现早期iOS7风格

模糊数值设定为100左右，才是当下正确风格样式

3. 磨砂玻璃风格特性及设置

磨砂玻璃风格主要特性包括：

• 模糊性：在背景中创建一种模糊或磨砂玻璃的效果，可以帮助突出前景元素，同时让用户感到一种深度感。
• 半透明背景：这是玻璃化效果的一个重要特性，它可以帮助创建一种层次感，并可以突出前景元素。
• 边框和颜色：为元素添加轻微的边框和柔和的颜色可以增强玻璃化效果，并帮助元素在背景中突出。
• 光亮反射：为元素添加轻微的光线反射可以增强玻璃化效果，并使元素更具立体感。

具体参数设置

• 模糊性：在软件中设定为“背景模糊”。

• 半透明度背景：在软件中设定为“填充透明度”，注意是填充透明度，而不是全局透明度。

• 边框和颜色：在软件设定为“带有渐变的描边”。

• 光亮和反射：图标或界面会根据附近色彩极度鲜艳的材质进行反射（例如周围有鲜艳黄色，则加入黄色透明度、有绿色则加入绿色透明度），从而体现玻璃的反射度。

做玻璃拟态风格一定要注意有渐变描边的效果，这是由于光线在穿过玻璃时的反射和折射行为导致的。玻璃是一种透明材料，光线可以通过它传递。然而，当光线在两种不同的介质（如空气和玻璃）之间转换时，一部分光线会被反射，一部分会被折射（或改变方向）并通过新的介质传播。

在亮的环境中，我们看到的大部分光线实际上是直接通过玻璃传递的，而只有一小部分光线被反射。反射的光线主要集中在玻璃的边缘，这是因为光线与玻璃表面的接触角度在边缘处更大，反射的可能性也更高。因此，在亮的环境中，玻璃边缘看起来更暗，因为那里反射了更多的光线，而中心部分则更亮，因为那里透过了更多的光线。

图片来源于：网络

在黑暗的环境中，情况就完全相反了。由于环境本身很暗，所以几乎没有光线可以通过玻璃传播。然而，任何存在的光线（如来自室内的灯光或其他光源）都可能被玻璃反射，尤其是在边缘处，这使得玻璃的边缘在黑暗环境中看起来更亮。

总结

理解了磨砂玻璃风格的关键原理，无论是界面的设计，还是图标的设计，都是异曲同工，主要就是记住关键的4个要点：背景模糊、填充透明度、渐变描边、叠加环境色。

文章来源：BIGD