网页设计师想出了一些聪明的技巧,让他们的作品有一种实体感

无需加好友免费技术支持

网页设计师想出了一些非常聪明的技巧，让他们的作品有一种实体感。玻璃拟态（Glassmorphism）就是这样的技术。当你将模糊效果与透明度结合起来时，像素会呈现出磨砂玻璃稍微不透明的品质——为设计增添一丝质感和维度。

虽然玻璃拟态本身并不新鲜，但这个词在网页设计师的语言中只出现了很短的时间。

今天的玻璃拟态可以追溯到拟态拟真主义的原始尝试。 1990 年代和 2000 20世纪初，计算机的图形功能越来越好，数据速度也在加快。这些进步使设计师能够创建一个更依赖视觉效果的网站，使拟物化成为可能。

设计师没有提出新颖的建议 UI 元素，但专注于复制人们在现实世界中熟悉的东西。在拟物化的帮助下，设计师旨在将我们与物理世界的互动转化为数字体验。夸张的渐变、沉重的阴影和过度的反射主导了网站。塑料、金属甚至木纹的纹理在设计中随处可见。

玻璃拟态比其他拟态密集像素和硬边缘轻。它捕捉到了玻璃的外观——但不是传统意义上的拟物化。这并不是为了欺骗任何人认为他们在看玻璃。相反，它唤起了它的感觉。

在 Apple 玻璃拟态的好例子可以在产品中找到。2013年 年 iOS7 发布时，iPhone 采用半透明灰色背景，为其下方的图标添加了一层淡淡的雾霾。苹果在 2020 年通过 MacOS Big Sur 这种设计风格再次被更新，包括玻璃菜单下拉菜单和半透明侧栏。

但玻璃拟态不是 Apple 产品独有的——Microsoft Windows Acrylic Design 系统和 Windows Vista 窗户采用玻璃拟态分层，建立层次结构。

玻璃拟态UI 它仍然很受欢迎。按钮、导航选项、滑块等 UI 当清晰的线条放在玻璃模糊的顶部时，元素会脱颖而出。与在同一维度的平面上争夺注意力不同，玻璃形式提供了微小的视觉改进——使元素对任何滚动浏览的人都更加明显。

玻璃拟态增加了一层隐藏的透明度。设计师通过混合分层、不透明度和模糊值来创建它。有时会添加阴影和框架，以进一步增强三维感。

Prifti的项目是柔焦玻璃形态效果的一个例子。背景图像在一层灰色的覆盖下变得模糊，这使覆盖的文本具有定义感。

模糊是玻璃状态的关键方面之一，也是最困难的事情之一。目标是让背景图像看起来像观众在通过失焦的镜头观看，但不会让背景图像迷失在像素的雾中。然而，顶部的模糊性太轻，会渗透到背景细节中，并与之前的内容发生冲突。

底层可以是实心填充的形状或没有透明度的图像。顶层不透明度低，允许背后的东西发光。折叠对比层锚定屏幕上的元素，使第二层看起来像漂浮在顶部。

设计师Dmytro Serebrennikov这张照片有各种奇怪的形状，展示了将不同形状堆叠在一起的艺术可能性。

为了最大限度地影响玻璃的形状，它背后需要一些视觉上迷人的东西。这可以是几何形状、梯度，甚至是照片。因为背景中的内容会因为玻璃模糊而扭曲，所以明亮的颜色和戏剧性的形状是最好的。

设计师Artem Abramov设计顶层的圆角矩形采用细白线和边框半径。

由于玻璃拟态依赖于模糊效果，因此在玻璃拟态元素周围设置框架有助于提供定义。在上图中，框架不仅分隔了信息，还模仿了手机屏幕的形状。

理想情况下，边框是轻量级的，所以不会分散设计的注意力。包括一点阴影也能增加立体感。使用精致的触感。轻描淡写是关键。

现在我们已经介绍了如何实现它，让我们来看看设计师如何使用它。

这个磨砂玻璃克隆模板反映了我们对这种效果的热爱。英雄部分提供了一个通往背景的多云门户，上面有一个图像。此外，微交互使矩形 z 轴向移动进一步增加了其维度感。

旅行社Conquer the Jungle用玻璃拟态吸引你的目光进入他们的三次主要旅行。

在标准的卡片布局中，旅游区和其他一切都处于同一水平，这将使他们很容易迷失在繁忙的热带背景中。分层磨砂玻璃效果使盒子从页面上弹出，直接吸引你的注意力到旅游包。

团队页面通常只是一个有专业面孔的网格。使用这种传统方法没有错，但一点玻璃形状可以使布局更具视觉吸引力。Decimal Chain他们的团队成员在这些稍微模糊的卡片中展示。

彩色背景圆圈通过每张卡片折射营造氛围，模仿磨砂玻璃。玻璃形状的效果会通过从屏幕上轻轻抬起每个内容块来吸引你的注意力。

虽然我们喜欢极简主义和扁平的设计，但我们很高兴看到设计师使用的深度和空间。玻璃拟态允许您将屏幕空间塑造成具有维度的东西。所需要的只是堆叠几层，添加一些模糊，然后微调值，直到你最终得到你喜欢的东西。