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

更新时间:2024-02-26 17:55:52

苹果眼镜的混合现实界面将磨砂玻璃风格再次推向高峰,本文将为大家深入介绍如何设计出卓越的磨砂玻璃风格,探讨了其定义、历史演变以及在现代界面中的应用。如何设计优秀的磨砂玻璃风格?想要设计出超棒的磨砂玻璃风格,首先要了解它的定义和演变历史,以及在现代界面设计中的应用。关键设计元素包含模糊感、半透明背景、边框和色彩、以及亮点反射。为了做出出色的磨砂玻璃风格,必须精心设置各种参数,例如模糊程度、半透明度、渐变边框和亮点反射效果,以凸显前景元素、营造深度感和提供超强的用户聚焦效果。一起来看看吧!

👇更多磨砂玻璃风格免费设计资源,点击图片即可直接一键获取

磨砂玻璃风格

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

磨砂玻璃风格,也被叫做毛玻璃风格,官方术语为:玻璃拟态化(Glass morphism)。

磨砂玻璃是风格 2006 年 11 月 30 日微软 Windows Vista 版本一种新兴的 UI 设计趋势,主要特征就是 “玻璃化” 效果,其核心是使用半透明的背景和模糊效果来创建玻璃面板样式的元素。这种设计风格可以为数字界面添加深度和上下文,同时也可以使元素具有更好的聚焦效果。此时的玻璃化效果还是比较通透,能够较清晰的看到玻璃透过后面的界面。

磨砂玻璃设计风格

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

2013 年 6 月 10,苹果发布 iOS7 版本,其中 Dock 栏、通知控制中心的设计。iOS7 的风格对于玻璃的通透性更低,几乎无法辨别背景内容,这种材质更倾向 “雾化玻璃” 的视觉效果。

磨砂玻璃

图片来源于网络:iOS7界面

2023 年 6 月 6 日苹果发布的眼镜 Apple Vision Pro,为了更好的结合现实环境,不让界面内容与现实混乱环境影响视觉阅读内容,从而界面中均采用了全套的磨砂玻璃风格。

图片来源于:Apple官网

除此之外,在 Apple macOS Big Sur、Microsoft Windows 11 等设计中都存在磨砂玻璃风格的视觉效果呈现。

图片来源于:Windows11 官方界面

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

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

图片来源于:网络

想要理解且更好的设置磨砂玻璃风格,就要对设置参数使用更准确。以苹果眼镜界面为例,分辨率在 1306*734 的情况下:

Blur 模糊数值设定为 20 左右,则是早期 Windows Vista 风格,并不适用于现在;

Blur 模糊数值设定为 400 左右,则是早期 iOS7 风格,同样不适用于现在;

Blur 模糊数值设定为 100 左右,模糊度如图,才是当下正确风格样式。

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

磨砂玻璃风格主要特性为:


模糊性,在软件中设定为“背景模糊”:

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

边框和颜色,在软件设定为“带有渐变的描边”:

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


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

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

👇对于磨砂玻璃风格源文件参数想更细致的参考和分析,点击图片即可免费获取该设计源文件

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

图片来源于:网络

总结

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


————文章来源:BIGD ————