今天不得不提一个风格就是亚克力玻璃柔光风格,最早是在微软设计系统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.  总结 
今年,亚克力玻璃质感已经在很多产品中流行起来了,我预估这种趋势在明年也会继续下去。所以大家可以关注起来,但是设计这种风格,一定不止是模糊下背景,背后其实有很多细节。以及场景的考虑,希望今天的这篇文章能起到抛砖引玉的作用。