【原】如何快速创建2021最新潮玻璃态UI设计 Glassmorphism玻璃拟物化技巧讲解

Glassmorphism是流行的磨砂玻璃美学的统一名称，它有很多名称，取决于使用它的公司。该效果基于具有透明性的背景模糊，并使用堆叠的图层显示界面的深度和文本。

它最具有定义性的特征是：

1.透明度（使用背景模糊的磨砂玻璃效果）

2.物体漂浮在太空中的多层方法

3.鲜艳的色彩突出了模糊的透明度

4.半透明物体上的细微浅色边框

UXD将通过6个简单的步骤，教同学们如何使用Figma创建玻璃外观现代的UI元素。

01

确定轮廓

要创建卡片，你需要首先创建一个基本形状。你可以模仿实际的信用卡比例，创建一个尺寸为640×400的矩形，外加40pt的圆角半径。

02

应用渐变填充

接着我们将使用渐变来进行填充，两种渐变颜色都是纯白色（#FFFFFF），但是它们的不透明度会有所不同，将第一个设置为40％，第二个设置为10％。

在Figma中首先将矩形的Fill选项中的模式改为Linear，然后在两个色彩框中设置透明度。

03

添加背景模糊

模仿玻璃的模糊感，将模糊值设置为20左右，以查看材料表面如何变化。你也可以自己调节数据设置。在Figma中的Effects选项下选择Background blur选项，并调整参数。

04

添加边框

好看的边框为元素增添了光泽感。当玻璃表面重叠时，它也有助于建立视觉层次。如果要在设计中创建定向光的幻觉，则需要对边框使用渐变。 在Figma中将边框形式更改为Linear，点击色彩条即可添加更多的色框。

卡边界对角渐变的设置参数：

·边框：3px

·颜色1：#FFFFFF（不透明度50％）

·颜色2：#FFFFFF（不透明度0％）

·颜色3：＃FF48DB（不透明度0％）

·颜色4：＃FF48DB（不透明度50％）

这个简单的设置可以产生一个很好的干扰环境的错觉。

05

应用阴影

细微的阴影效果有助于增强视觉层次。由于阴影的存在，区分所有层将更加容易。

在我的示例中，我使用深色和24模糊值，且色散降低到-1，这样就获得了漂亮的阴影。你可以通过在玻璃表面上添加阴影样式属性来达到最佳效果。

06

填写内容

是时候添加一些内容了，填写必要的徽标和文字。要创建压印层的错觉，请用白色填充内容，并将不透明度降低到50％。你也可以玩图层混合，尝试叠加以获得有趣的结果。

07

雾面质地

玻璃卡已经完成了。但是，你可以进一步添加一些高级纹理。我们可以添加一些噪点，例如添加带有噪点的图像。在FIgma中搜索Noise插件将不透明度降低到20％，并将填充的混合模式设置为“叠加”。

最终的玻璃拟物化效果