UI/UE 教你实现玻璃拟态

玻璃拟态第一次横空出世是在2013年发布的 iOS7 上，当时还是引起挺大轰动。不过，从最近几次iOS更新来看，苹果似乎减少了玻璃特效的使用，但近期更新了Mac OS Big Sur系统的小伙伴应该能发现 深色模式下又有一些地方用到了玻璃拟态特效（如下图sketch中所示～）

 

当然，一般新的UI趋势风都是先从Dribbble上刮起

 

以下面的几个例子虽然可用性可读性有点拉胯，不过也很明显的展示了玻璃化是啥样～

背景非常模糊，但仍然可以看到点东西，会有一个半透明的细细的边框

Smart Calendar App by Ghani Pradita

 

 

By Ghulam Rasool

 

 

 

 

用于icon的时候～

By Marshall

 

 

 

 

 

锵锵锵，现在来讲解一下在sketch中如何实现玻璃化化特效（笔者制作）

 本质上，靠的就是 阴影、透明度、还有“背景模糊”的有机结合实现的。

 

STEP 1 选择一个颜色鲜艳的模糊图片当背景，创建一个矩形，选择“背景模糊” （然鹅目前没什么变化）。

 

STEP 2 复制它。将顶层矩形的填充透明度调节至50%

 

STEP 3 根据需求将顶层矩形的背景模糊参数调节下，将底层矩形的填充透明度也调节到50%（按需求随意，我只是举例）

 

STEP 4 给顶层矩形添加一个阴影效果，颜色选择比矩形周围的背景色暗一些的颜色。 然后再稍微调节下阴影的颜色的透明度以及坐标参数～完成✅

 

 

 

 

 

来点细节～

 

1. 还可以添加一个白色描边增强玻璃感觉（当然也需要稍微调节下参数，）

   
   

2. 当重复多个layer的时候，填充透明度需要有点变化～通常离我们近的矩形透明度较低（下图由近到远分别为 30% 50% 70%）（我发现很多教程翻译中这个讲错了。。）

   
   

 

 

 

部分内容引用了Michal Malewicz的文章

原文地址：https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9