微软的亚克力玻璃柔光风格，也太美了！

今天不得不提一个风格，就是亚克力玻璃柔光风格，最早是在微软设计系统Flunet里面提出，但是当年没有火起来，而是随着微软发布的Microsoft365开始慢慢带火起来，那么这个风格有什么特点呢？

 01.  什么是亚克力玻璃柔光？

亚克力玻璃柔光风格，最早灵感是源于微软在2017年提倡的设计语言Fluent，虽然不是一个全新的风格，但是今年随着微软发布新的产品Microsoft 365让这个风格在业内备受关注。

但是真正把这个风格带起来的是微软发布了Windows11，这个版本的操作系统最大的直观感觉是用了亚克力玻璃柔光风格，这套设计在业内备受关注，里面很多细节都值得我们学习和推敲。

最值得学习的是这套设计语言，在内容分层上做的很好。背景层，元素层，内容层都定义的很清晰。因为通常在PC大尺寸下做设计层次比在移动端难的多。

这套风格不仅仅非常易用，同时你能通过它玻璃的质感看到内容的结构和深度。

整体设计运用了大量透明度和背景模糊效果，整体视觉元素悬浮在空间里面。这种玻璃般的质感，很多设计师叫他玻璃柔光效果。

其实回溯到之前设计，玻璃效果在微软Vista系统中被用到，其次背景模糊效果大量运用是在苹果iOS7中用到。只不过当年大家关注点都是iOS7图标变成扁平后太丑了。但是随着时间流失，仿佛大家已经看习惯了。所以设计师其实关注趋势很重要就是关注这些全球市值前几的公司，因为很多趋势都是这些大厂在引导，比如拟物，玻璃质感，扁平质感等等。

在苹果系统很多地方，都能看见这种模糊玻璃质感，可以看上图照片背景和模糊地方，是如何落地到页面上去。非常的细腻。

微软的Fluent设计语言也大量用到这种设计手法，那么到底什么是磨砂玻璃质感呢？你可以理解为是一种产品半透明质感的效果，同时玻璃上有一层磨砂的质感，能够帮界面增加视觉层次。

 02.  亚克力玻璃柔光有什么特点？

那么玻璃柔光效果具体在设计上有什么特点呢？我总结为：带背景磨砂的透明度，元素漂浮在空间里，鲜艳柔和的色彩和边界非常清晰。

▍背景使用磨砂的透明度

如上图，这个透明度不是普通的透明度，是使用了背景模糊，同时又带有一些纹理磨砂效果。这样的效果看起来更加细腻，同时更好的在上面表达内容。

无论你背景桌面上是白色还是黑色，还是现在流行的暗黑白天模式，都能让内容更清晰的表达出来。在做柔光玻璃的时候，需要注意是深色主题，浅色主题和高对比度的主题。对于高对比度，要使用深色和浅色，这个在技术实现上，需要找开发对焦。

透明度是这个风格最大的特征，整体给人视觉感受非常轻盈，透明的质感透光而不透视，给人呈现出一种若隐若现的视觉感受。

▍元素漂浮在空间里

磨砂玻璃另外一个质感，就是所有元素悬浮在空中，和背景有明显的区分，如上图的搜索框和icon图形，和背景都是区分得很开。这样做的好处，让内容更前置，且让用户对内容识别感更强。

从微软的宣传片可以看出，玻璃磨砂效果对于内容的层次非常注重。为了让内容更好识别，在技术上会做很多处理，比如模糊，颜色叠加，噪点等等效果。

如微软上图例子一样，页面每个元素都扮演着很重要的角色，每一个元素都看起来特别清晰耀眼。

▍使用鲜艳柔和的背景

亚克力玻璃柔光风格，非常依赖于背景，如果背景是纯色或者黑白，就很难感受到这种效果的高级感，从微软宣传片也不难看出，他们在背景处理上花了很多功夫，自带的壁纸都是微软根据这些效果去设计的。

非常柔和唯美的湖面背景，详细界面中每个设计元素都如同艺术品一样美丽。

在这个图中，我们可以清晰的看见亚克力的质感细节，体现的淋漓尽致。

如上图，背景样式一个是彩色的一个是纯色的，设计效果就差异特别大，纯色的背景，低对比度，或者深色背景会失去半透明的质感。因此他们呈现的效果就不如彩色的背景，所以做设计时候一定要注意。

一般颜色比较鲜艳明亮，色彩变化比较多作为背景，整体的效果会比较好。

这是亚克力玻璃质感非常重要的一个特征之一。

▍边界非常清晰

亚克力玻璃另外一个很大质感，就是边缘处理的非常清晰，因为需要保证在不同背景下很好的运作，一般会在边缘使用描边的效果。

描边的效果一般比背景要深，除了有一个描边同时还有投影的效果，让整个内容的空间感变的更强。

通过上图我们能看的更清晰，描边效果很细腻，描边的运用让这个卡片变的更有厚度。

这个描边一般使用1px的内描边，主要模拟玻璃的边缘效果，可以在背景中更加突出。如上图左边有一个半透明的框，右边没有变化，很明显感觉到左边的更清爽干净和利索。

上面我们了解亚克力玻璃柔光的一些设计特点，那么在设计上有哪些运用场景呢？设计师如何去运用呢。

 03.  亚克力玻璃柔光UI中运用 

既然这个风格是微软最早提出来的，那么当仁不让的是率先在自家系统中大量运用，最新的Windows12产品设计中，我们大量看见这种亚克力玻璃柔光效果。干净高级的背景，清晰精致的玻璃效果，让整体的体验很高级。

这种效果能够通过色彩深浅控制视觉层级，非常的好用，清晰的边缘，亚克力玻璃一般整体设计都是块面为主，能更好地体现设计调性。

这几年微软设计和苹果设计，在系统层面已经不分上下。特别细节处理，毫不逊色苹果系统。

亚克力玻璃效果在Win12上体现的淋漓尽致，如果大家想深度了解这个系统的可用性，一定要去体验。

Microsoft365办公系统的最新设计，就是运用了亚克力玻璃柔光场景。模拟出更加真实，通透自然的玻璃光效果。整体的设计也是如此。

Microsoft365界面包装效果图，整体让人更加沉浸和专注在内容层面。

在整个Microsoft365界面设计中，亚克力玻璃质感将办公产品场景的专注、简单体现的淋漓尽致。

VIVO最新系统中，也大量使用了这种亚克力玻璃质感。

整体效果让页面更加时尚和通透，也在向用户表达出他们设计整体纯粹的设计品质。

整个系统都是将这种亚克力效果运用的恰到好处，不管每个细节表达，还是层次的表现。

宣传海报设计中，能看见各种亚克力玻璃质感的细节。

 04.  亚克力玻璃柔光图标中运用 

在图标中运用很多，大量使用亚克力玻璃风格，表达他们简约的设计理念。

玻璃柔光图标非常现代，相对于扁平的图形，更加柔和更加有质感。

传统扁平图标都是纯色，看久了有蛮大视觉疲劳，玻璃柔光很好将流动色彩和光的质感表达出来，同时也能给人更简约，通透感。

上图设计师在APP图标中使用的细节，简约干净。每个小细节都值得研究学习。而且动手画起来其实不难。

 05.  亚克力玻璃柔光品牌中运用 

NHN FORWARD OPENING的设计大会主KV就是运用了这一套亚克力玻璃柔光效果，整体的设计非常的轻盈通透，和他们的主品牌也非常的贴合。

三角形的超级符号，玻璃柔光质感，传递了出简约未来的大会主旨。

大会的动态视频也超级唯美，亚克力的玻璃层层穿透，形成有机的图形和未来感。

每一张KV的截图都是壁纸，都是满满的未来感和科技感。

最后从玻璃质感光感变化成一个充满未来感的三角形，整体给出高级璀璨感。

 08.  总结 

今年，亚克力玻璃质感已经在很多产品中流行起来了，我预估这种趋势在明年也会继续下去。所以大家可以关注起来，但是设计这种风格，一定不止是模糊下背景，背后其实有很多细节。以及场景的考虑，希望今天的这篇文章能起到抛砖引玉的作用。

主页君个人微信

添加主页君个人微信领取：大厂设计规范及组件库、免商中文字体、样机、作品集等

推荐阅读

（点击标题可跳转阅读）

当自动布局遇上组件，一定别踩这个坑！反转！冬奥会海报遭抄袭原作者，竟也涉及侵权？！
这样设计作品集，也太有心机了吧！

回复 灵感 下载UI设计灵感合辑

点个 “ 在看” 好文不断