Sketch制作磨砂玻璃特效的UI效果

设计中存在一些不可忽视的趋势。尽管玻璃态在UI设计中不是新的事物，但是最近又被人们挖掘出来了。有些人甚至将这个趋势称为“玻璃态”。

下面让我向你展示如何通过7个简单的步骤教你如何创建玻璃态的UI效果。先看看效果图

1）画一个形状

首先创建一个基本形状，一个具有以下尺寸的矩形：640×400，再加40pt的圆角。

2）应用渐变填充现在该基本填充了。在本教程中，我们将使用渐变。两种渐变颜色都将是纯白色(#FFFFFF)，但是它们的不透明度会有所不同。将第一个设置为40%，第二个设置为10%。

3）添加背景模糊我们来模仿玻璃的是模糊感。首先将背景模糊值设置为20左右，来看看这个是表面如何变化的。当然，你也可以根据自己的效果来设置不同的模糊度。

4）添加边框一个优雅的边框会为元素增添了光泽。当玻璃表面重叠时，它也有助于建立视觉层次。如果要在设计中创建定向光的幻觉，则可能需要对边框使用渐变。我是这样制作卡片的，所以看起来更有“质感”。卡边界对角渐变的设置：边框：3px颜色1：#FFFFFF(不透明度50%)颜色2：#FFFFFF(不透明度0%)颜色3：#FF48DB(不透明度0%)颜色4：#FF48DB(不透明度50%)

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