玻璃拟态(Glassmorphism)会成为 UI 的新趋势吗?

神译局是36氪旗下编译团队，关注科技、商业、职场、生活等领域，重点介绍国外的新技术、新观点、新风向。

编者按：人的兴趣总是捉摸不定，设计趋势因此也会会钟摆一样摇摆不定。在Material Design为首的简约风格流行了几年之后，以苹果新的Mac OS Big Sur操作系统发布为标志，一种新的拟物风格正在悄悄回归。这种把阴影、透明度以及模糊背景结合到一起的UI设计思路，因为给人以玻璃的质感，被Michal
Malewicz称为Glassmorphism（玻璃拟态），这会成为新的UI设计趋势吗？如何才能实现制作效果呢？不妨看看他的介绍。原文发表在uxdesign上面，标题是：Glassmorphism in user interfaces

划重点:

设计趋势就像个钟摆,会时不时回归

玻璃拟态属于拟物风格,是阴影、透明度以及模糊背景结合

有节制地运用这种设计风格能起到很好的效果

去年，我无意间引发了关于Neumorphism的热潮，但就像我当时所预测的那样，这只是一时之兴，并没有真正成为设计主流。

当然——的确有一些app和产品采用了这种风格，不过其中最值得注意，采用最广泛的当属三星的部分广告以及MKBHD的简介视频。不是整个产品都用，而是一小部分元素，这证明了我的观点，即如果审慎地少量采用，并且在这些背景上的对象在没有装饰的情况下仍能保持结构和可读性的话，这种风格是行得通的。

MKBHD Neumorphism风格的产品介绍

你好，Glassmorphism（玻璃拟态）

现在又有一种新的风格出现，而且越来越流行了。Neumorphism模仿的是一个受挤压的塑料表面（但看起来仍然像单层）时，但这种新趋势会更加垂直化。它最具有定义性的特征是：

透明度（背景模糊的磨砂玻璃效果）

对象悬浮在空中的多层做法

突出模糊透明度的鲜艳色彩

给半透明对象添加浅细边框。

这种垂直性以及你可以通过它看到的事实，意味着用户可以确定界面的层次结构和深度。他们只是看哪一层在哪一层上，就像虚拟玻璃一样。

鉴于这种垂直性，以及你可以看透它这一的事实，意味着用户可以让界面有层次和深度。用户可以看清哪一层在哪一层之上，就像虚拟的玻璃一样。

鉴于这种玻璃一样的外观，我觉得这种风格最好叫做玻璃拟态（GLASSMORPHISM）。

玻璃拟态

历史

模糊背景最早是iOS 7在2013年广泛引入的。这是一个相当激进的变化，只不过当时对超轻量字体以及丑陋的图标争议更大，这算是是未引起争议的改变之一了。大家似乎还喜欢。

iOS 7是这种风格的鼻祖

快速删除通知成为一件有趣的事，因为你可以清楚地看到（在缓慢执行时）图标在新面板下如何淡出和模糊。

下拉通知很快变成了一件值得去做的趣事，因为（你慢慢地下拉通知时）可以看清楚新面板下的图标是如怎么淡出变模糊的。

Mac OS Big Sur —透明

趋势的加强

自那以后，苹果极大地降低了其移动操作系统中的模糊效果，但最近Mac OS Big Sur带来了透明的模糊效果。只需查看此“素描”窗口，以及上面照片的模糊部分如何从中渗出。我突出显示了背景模糊最清晰可见的地方。

此后苹果极大减少了在移动操作系统对模糊玻璃效果的使用，但是最近在Mac OS Big Sur里面又增加了透明的模糊。不妨看看这个“Sketch”窗口，看看图片的模糊部分是怎么渗透过去的。我已经把背景模糊的相应部分高亮显示了。

当然，你可以在系统设置里面完全关闭这种效果。

微软的Fluent设计系统也很重视这种效果。他们把这种特殊元素叫做“亚克力”，还把它作为设计系统的必不可少的一部分来展示。

亚克力是一种可以产生半透明质感的画笔。你可以将亚克力应用于app表面来增加深度感，并且帮助建立视觉层次感。— 微软 Fluent设计系统

Dribbble案例分析

当然，跟任何UI趋势一样，它经常在Dribbble上过度使用。这开始慢慢开始，已经有一些漂亮的例子。当然，它们都与演示文稿有很大关系，因为在实际的电话屏幕上，它们很难覆盖背景。这仅仅是因为手机上的应用程序都是全屏的。

当然，跟任何UI趋势一样，在Dribbble上趋势往往会被用滥。这个趋势目前才刚刚有迹象，已经有了一些很漂亮的例子。当然，这些跟演示作品有很大关系，因为在实际的手机屏幕上，你是很难看清覆盖的背景的。这仅仅是因为手机上的app都是全屏的。

Ghani Pradita的智能日历app

上面的示例在某些地方可能处于可读性的边缘，但这清楚地表明了这种趋势。背景非常微妙，但仍然可见，并且形状具有1点半透明的白色轮廓，可以模拟玻璃边缘。

上面的例子在一些地方可能已处在可读性的边缘，但这是这种趋势的清晰展示。背景非常模糊，但仍然可见，而且轮廓有1个像素厚度半透明的边，可以模拟玻璃的边缘。

玻璃拟态的例子,作者Ghulam Rasool

就像neumorphism（新拟物风格）一样，如果只是用到一个元素上面的话，这种风格会特别亮眼——就像就像上面例子的背景一样。当然，在这里，主要是为了呈现效果，但是你可以想象桌面Web界面用类似的透明度来显示背景。

带玻璃拟态的图标,作者Marshall

玻璃拟态用于图标可能会有点争议，比如像上面这种。

从Dribbble的情况来看，这种风格目前都用#glass来标识，但我认为#Glassmorphism更合适。你用glass的话，喝水的玻璃杯也可以是glass，所以我认为这种风格应有一个便于识别的名称。

怎么才能实现这种效果呢？

效果本身很容易实现，但是要考虑两点。跟任何基于卡片的布局一样，第一点是对象离我们越近，它吸收的光线应该越多。在这种情况下，这意味着它会更加透明。

如何实现玻璃拟态（Glassmorphism）:离屏幕越远透明度越低,越近透明度越高

这种效果的基础是把阴影、透明度和模糊背景结合到一起。这种风格只能利用一个透明层，或者多个透明层，但但是在相当杂乱彩色的背景上至少有两个半透明层的时候，透明层必须是最突出的，可见的。

如何正确设置透明度

重要的是要记住一点，不管怎样，你不能让整个形状都透明，只能让它的填充透明。大多数设计工具在100%填充，对象透明度较低时，背景模糊会不起作用。。

玻璃拟态教程

比方说上面的这个例子，左右的背景模糊都是8，但是图像看上去完全不一样。当填充不透明度为100％时，对象的不透明度再低也没有作用。根本得不到所需的模糊背景。

如何选择合适的背景

背景在这个效果当中扮演着重要的角色。背景不能太简单或者太单调，否则效果就看不出来。但也不能太复杂。

玻璃拟态背景

这可能就是苹果选择彩色背景作为Mac OS Big Sur默认壁纸的原因。当模糊的透明表面位于顶部时，那些容易辨别的色调差异也很容易看得见。

选择背景时，要确保色调差足够大，这样玻璃效果才真正可见。

最后细节

最后，你可以试着给形状添加1个像素厚的内边框，并且让它有一定的透明度。这可以模拟玻璃的边缘，让形状在背景当中脱颖而出。尽管这种风格的元素（比如模糊背景）已经存在了很多年，但现在正变得越来越流行，所以，仍然很多很酷的创意效果可以去探索。

玻璃拟态的边框:左侧的图像是半透明的边框，而右侧的图像则是无边框。

你还可以看看有关如何用Sketch和Figma创建这种效果的简短教程。

可达性

就像Neumorphism一样，这种风格的可达性可能不够强（比方说跟Material Design相比）。Neumorphism的主要规则也可以用到这里——如果功能层次结构良好的话，则屏幕上的元素在没有背景的情况应该也能工作。这样可以确保有视力障碍的人仍然能够理解UI。

玻璃拟态的不好例子:这是一个不好的例子，跟Neumorphism一样，对每一个可能的屏幕元素滥用了这种效果。导致整个屏幕UI对某些用户来说几乎都没法访问，同时也显得无聊，非原创。

只有在这些透明效果只是装饰性，而不是体验的不可或缺的部分时，才会发生这种情况。应避免按钮或开关（这些重要的对象始终应该设置更大的对比度）采用这种效果，但你可以运用到卡片背景。

只需确保卡片内对比度足够，且有适当的间距来定义层次，并在视觉上对所有相关对象进行“分组”即可。

这是一个更好的例子——卡片结构定义清晰，所以就算完全去掉玻璃背景，内容也可以正常使用。这只是简单示例——色彩对比度还可以改善。

2021走玻璃拟态风格？

苹果公司在Big Sur中引入了这种风格，所以可以预见在接下来几个月的时间里这种风格一定会被大家效仿。这种风格不会接管所有的界面，但会比现在更火一点。

作为人，我们很容易就会对趋势感到厌烦，所以每隔几年就会摇摆到另一种不同的风格。极简、扁平化的风格已经流行了很长一段时间了，也许现在又会慢慢向色彩更丰富、更立体、更炫丽的风格回归了。

作为设计师，我们需要探索开发产品的一切可能性以及创造性的方法。在某些情况下，有节制地用一下“玻璃”是可以让产品看起来更好，对用户更有吸引力的。

设计探索—  玻璃拟态

虽然我比较喜欢无装饰有超高对比度的黑白界面，但我对于能够玩一下这种风格看看它会带给我什么还是比较兴奋的。

因为最终-设计应该很有趣，因为这是我们探索新路径，享受我们所做的事情并交付真正卓越的东西的唯一途径。

因为到头来设计应该是有趣的，因为这是我们探索新路，享受所做的事情，以及推出真正出色的东西的唯一途径。

我们在玻璃的另一头见！

译者：boxi。