Glassmorphism使用“模糊”让ui设计中的界面传递更加“清晰”

「流行」的基本属性之一是“变”,又是新一年,一种被称为 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社 » Glassmorphism使用“模糊”让ui设计中的界面传递更加“清晰”
  • 2955本站运营(天)
  • 20804会员数(个)
  • 15000资源数(个)
  • 501近 30 天更新(个)
  • 良凡设计-专注高端品牌企业官网建设--UI社官方推荐

    立即查看 咨询客服