设计|设计新趋势：玻璃拟态是什么？如何实现该效果？

编辑导语：在设计领域，总会有一些新的趋势或者以往的风格以新的形式出现，每一个新趋势都值得设计师去拆解、思考和学习。今天，本文作者通过苹果发布的 MacOS Big Sur 操作系统，对玻璃拟态的前世和今生展开了分析，玻璃拟态是什么？我们又该如何实现该效果？一起来看作者的文章吧。

文章插图
大家好，我是聿彤，设计趋势总是处于不断的变化当中，近几年拟物风格又以新的形式——新拟态回归大众视野，苹果发布了 MacOS Big Sur 操作系统，整体风格应用了新拟态的设计思路，采用了 3D 质感的元素设计。
其中还包含了运用阴影、透明度以及背景模糊手法模仿玻璃形态，构建空间感的新兴拟物态风格，本文作者Michal Malewicz 称之为 Glassmorphism（玻璃拟态），在文章中讲述了其发展历史和风格特征，通过图文和视频结合和形式说明了设计实现的思路和自己对待新风格的态度。
去年，新拟态（Neumorphism）掀起了一阵热潮，正如我当时预测的那样，它并没有真正占据主流设计市场。
我曾经提出过，新拟态应用在实际线上产品中时，可能会出现可访问性问题（用户的可阅读和可理解性），希望这篇文章对遇到类似问题的项目有所帮助。
这种风格通常被使用在需要视觉效果的宣传物料中，比如三星的广告和 MKBHD 的介绍视频。即使是实际产品，它也没有被完整的使用在整套应用程序上，而是在局部元素中。
这证明了我的论点，这种风格可以使用，但是仅限于少量元素的点缀，如果产品内容在没有视觉修饰时仍然可以保持清晰的信息结构和可读性，就可以使用这种风格。

文章插图
MKBHD 在 2020 的产品介绍中使用了新拟态风格
一、你好，玻璃拟态玻璃拟态是目前市面上的新风格，越来越受欢迎。新拟态（Neumorphism）模仿了受到挤压的塑料材质（凹凸质感，凸显层次感），这个新的视觉风格更加注重垂直空间 z 轴的使用。它最典型的特征是：

透明度（使用背景模糊的磨砂玻璃效果）；
物体漂浮在空间中，通过前后关系表现层次感；
鲜艳的色彩突出了模糊的透明度；
半透明物体边缘的微妙处理，采用细腻的边框表现玻璃质感。

这些注重空间感的典型特征，意味这种风格有助于用户建立界面的层次结构和深度。用户可以看到物体间的层次关系，哪一层在哪一层之上，就像物理空间中真实的玻璃一样。
因为它看起来像玻璃，我相信最好的叫法是：「玻璃拟态」Glassmorphism

文章插图
二、玻璃拟态的历史背景模糊的视觉表现方式，在 2013 年 iOS 7 系统中首次被广泛引入。
这是一个非常重大的变化，但由于当时正处于拟物态快速切换到扁平化的阶段，所有的争议焦点围绕着无衬线字体和扁平化图标的变革，背景模糊并没有受到影响，反而人们似乎很喜欢它。

文章插图
iOS 7和 WindowsVista 中的背景模糊效果
下拉通知这个操作的创新，很快就变成了一件有趣的事情，你可以清楚地看到（当你慢慢地下拉通知时）新面板下的图标是如何淡出和模糊的。
三、流行趋势不断加强随着时间推移，苹果在他们的移动操作系统中大大减少了模糊的玻璃效果，但是最近在 MacOS Big Sur 中又增加了透明模糊的质感。
观察这个窗口，看看背景照片被窗口遮挡的部分是如何表现隐约透明的玻璃质感的。我把窗口放在桌面中央，突出了背景模糊效果最明显的地方。
当然，如果你不喜欢这个风格的话，可以在系统设置中完全关闭这种效果。

文章插图
MacOS Big Sur 中可以设置背景模糊效果
微软的 Fluent 设计系统也非常注重这一效果，他们称这种特殊的元素为 “亚克力”，并将其作为设计系统的组成部分之一。

文章插图
微软 Fluent 设计系统
亚克力是一种可以产生半透明质感的画笔。你可以将亚克力质感应用于界面设计来增加深度感，从而增加整体的视觉层次。——Microsoft Fluent DesignSystem
四、Dribbble 上的案例分析与其他的 UI 趋势一样，一旦流行起来，便会在 Dribbble 出现大量的相关作品。玻璃拟态现在才慢慢的开始，已经有一些漂亮的案例了。