「流行」的基本属性之一是“变”，又是新一年，一种被称为 Glassmorphism UI (玻璃态UI)的新风格被明确提出并在一定程度上“变”成了新的流行趋势。其实类似毛玻璃效果在微软和苹果系统中早有体现，昨天看到一3D短片，突然有了些许新的明悟，感觉 Glassmorphism 思考的是软件和系统间的共生关系，是立足更高维度的界面表达方式。
预计阅读时间 5 分钟

Glassmorphism

说 Neumorphism 是 Glassmorphism 的前辈，一个原因是最先明确提出这两个概念的设计师是同一个人：
 
米哈尔·马列维奇（Michal Malewicz）
michalmalewicz.medium.com
 
另一个原因是二者都是在“不倒退到拟物时代”的同时，寻求“对扁平化风格做出突破”。Neumorphism 通过光影产生了凹凸的垂直方向表达，但仍然算是在同一平面上。Glassmorphism 完全放开了空间限制，使用透明度、磨砂效果，清晰表达“前、后”空间关系，其特点可以这样总结：
 
  • 透明毛玻璃效果（前景）
  • 细小的浅色边框（前景）
  • 鲜艳色彩（背景）
  • 层级空间感
这种处理方式使显示「前景层」的同时，保持「背景层」在一定程度上仍然可见，不同“高度”的「前景层」间层次关系仍然较为清晰，你能明显的看出来哪层在哪层上面。
Glassmorphism 的适合与不适合
  • 操作系统级
类似毛玻璃效果最初出现是在 iOS 7 里通知栏的表达，以及差不多同龄的 Windows Vista 系统中。到如今 MacOS Big Sur 以及 Microsoft Fluent设计系统，半透明、模糊背景、玻璃态、透明塑料板这种视觉风格在操作系统级视觉设计中已较为成熟，应用也较为广泛。
 

Win10 桌面-移动生态系统品牌宣传
 
MacOS Big Sur
操作系统需要承担复杂的任务、多任务场景，普通二维的视觉表达不能清晰表达“优先级”、“桌面/应用”等页面逻辑，Glassmorphism 凭借对空间感营造的良好支持能力在操作系统设计系统中逐渐生根。
 
优异的空间表达确实是 Glassmorphism 优势，不过即便是操作系统，对空间表达的需求也不是时时刻刻，只有表现“中间状态”（Win系统的显示桌面）、“临时组件”（苹果通知栏）时常用，当用户沉浸于单一任务时，就不再需要 Glassmorphism。
  • 应用级
操作系统往下一级，就是应用软件。应用软件对空间表达的需求不会太高，我们先看3张 Dribbble 的设计稿。
 
 
不论是移动应用还是桌面应用，Dribbble 中使用 Glassmorphism 时90%是为了借用「背景」的炫彩给原本可能比较死板的软件界面增加色彩，打通的是「应用软件」和「背景(操作系统)」的视觉联系。大多应用软件会将“沉浸感”作为体验目标之一，所以时时刻刻让用户感受到「背景(操作系统)」的存在显然有悖这一目标。
 
那么什么样的应用软件可以尝试 Glassmorphism？显然是希望和操作系统融为一体的那类软件，开机启动、工具化、使用频率高、常态化的那类软件。比如下面这张设计稿。
 
  • 视觉元素级
综上，和它的前辈 Neumorphism 新拟态/轻拟物/弥散阴影一样，Glassmorphism 注定不是革命性的风格，是比较小众的偏向局部视觉元素处理的一种战术型手法。
 
可能是受 3D 界面视觉设计潮流的影响，Glassmorphism 已经被应用于 icon 等小元素设计。
 
应用 Glassmorphism 的另一个限制条件是前景层承载信息量，半透明特质注定 Glassmorphism 存在可读性问题，只能表现很简单的要素，比如 Card。
应用总结
Glassmorphism 设计风格应用场景：
 
  • 与操作系统深度融合
  • 中间状态、临时信息
  • 简单前景元素+高饱和背景
  • 仿3D玻璃材质
代码实现
视觉效果的实现属于非功能性需求，开发工程师从上学到工作，他需要实现的都是功能性需求，所以作为设计师，期望开发什么视觉效果都会做是不现实的，这也是欧美设计师都自己敲代码的原因。
这里熊猫人提供 Glassmorphism 的 CSS（H5网页样式）的实现方式——“背景模糊滤镜”。
backdrop-filter: blur() 
括号里填模糊值，数值越大，背景模糊越厉害。
背景模糊为 1px 时
背景模糊为 10px 时
  • CSS属性兼容性
backdrop-filter 属性支持在 Chrome, Safari, iOS, Android 以及 Edge 浏览器中渲染，火狐浏览器暂时不兼容。
 
  • 预览工具
使用这个网站可在线调参、预览，直接生成代码。
 
glassmorphism.com

 

声明：* 本站所提供的资源均来源于互联网，站内所有文字、图片内容由网站会员上传而来，UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷，本站不负任何责任。如果有侵犯到您的权益，请联系本站删除，谢谢合作！联系邮箱：Uishe#qq.com (请将[#]换成@)