风格|Glassmorphism，是新拟物风格的“进化”？( 二 ) 透明度|边框|背景|玻璃|进化

文章插图
与苹果互为对手的微软也推出了这种类似于毛玻璃质感的Vista系统，但距离真正的玻璃拟物还有一段路程要走。

文章插图
最新的macOS Big Sur 和 iOS 14系统都已经使用了偏向玻璃拟物化的半透明效果。

文章插图

文章插图
通知栏的弹出变成了一件有趣的事，你可以清楚地看到新面板下的图标是如何弹出和消失的。

文章插图
微软的Fluent设计系统也很重视这种效果，他们称此特殊元素称为「亚克力」，并将其作为设计系统中不可分割的一部分。

文章插图
Microsoft Fluent设计系统
Glassmorphism的实现
-基本原则
实现玻璃拟物效果需要注意的是，与任何基于卡片的布局一样——物体离我们越近，它吸引的光就越多，也就意味着它会变更加透明，反之亦然。

文章插图
它依靠3个基础元素来实现，分别是阴影、透明度和背景模糊。还可以使用一个或多个透明层，假设在一个颜色相对复杂的彩色背景中应用，那么至少加两个半的透明层级，要展示的文字或图标的可见性才会最大最突出。
-透明度设置
不要设置对象的透明度，而是调整填充透明度。下图示例中，两种不透明度的数值调整，得到了完全不同的视觉感受。

文章插图
-背景选择
背景在玻璃拟物效果中至关重要，太单调会导致完全不出效果。这可能就是Apple选择彩色背景作为MacOS Big Sur默认壁纸的原因，背景图片的色调差异大，玻璃拟物的效果越强烈。

文章插图
-细微边框
别小看了这1px的细微边框，它模拟了玻璃的边缘，将其单独设置透明度，就能让形状从背景中脱颖而出。

文章插图
半透明边框图形（左）vs 无边框图像（右）
-可访问性
建立一个良性的层次结构同样重要，和新拟物类似，它们都不是Material Design被广大用户熟知与接受的呈现形式，装饰味道会相对浓郁。所以设计师在应用前，最好能确保——元素和各层级在没有花哨背景加持下，一样能被用户以及视力障碍人群轻松识别理解。

文章插图
下图就是一个很好的例子，卡片具有清晰的结构，即使完全去除玻璃背景。它也能正常使用。

文章插图
作为人类，我们很容易对各种趋势感到厌倦，所以每隔一段时间就会迸发出新的灵感与创意。但作为设计师，我们需要探索所有可能创新产品的方式。在当下，玻璃拟物的应用的确会使产品看起来更好，对用户更具吸引力。
2021年会出现什么有趣的趋势，让我们继续期待吧！
／End.
相关引用
-《Glassmorphism in user interfaces》
https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9
-图片、GIF来自网络；封面动图 by Gur Margalit