8858cc永利

网站专题BANNER

什么是玻璃拟态?玻璃拟态风格赏析

发表日期:2022-02-28 文章编辑:洛壹网络 文章来源:深圳8858cc永利

今天一起来看下,今年比较火的玻璃拟态设计风格,通过这篇文章,我将带大家了解玻璃拟态的美学发展过程、风格特点。最后通过一些优秀的案例,找到切入点,将这种设计风格巧妙的运用到设计中。


2022年初,如果你正好有项目改版或者风格探索的工作,这篇文章看完后,或许能带给你一些新的启发。最后,你可以将这种风格运用到你的实际项目概念设计中,在团队中做出不一样的设计方案。


01


什么是玻璃拟态?


玻璃拟态(Glassmorphism),更直观的说就是玻璃拟物化。它是在2020年末开始在各大设计平台流行起来的设计趋势。当时苹果新发布的Mac OS Big Sur操作系统中也使用了这种风格,因此玻璃拟态在设计圈就被广泛流行起来了。


8858cc永利_什么是玻璃拟态?玻璃拟态风格如何实现


概念设计


这种设计风格通过将阴影、透明度、深度、描边结合到一起创建视觉层级,透明模糊质感,形成一种全新的UI设计风格,因为给人直观感受像玻璃,所以被被称为玻璃拟态(Glassmorphism)。


影响玻璃拟态的美学因素有透明度、悬浮、色彩、描边等4大关键要素,正是这些它们相互集合与微妙的光影变化,才形成质感丰富的拟态效果。下面大家看下每个影响因素具体内容是什么?


#1.透明度:半透明带有模糊磨砂质感背景


#2.悬浮:通过深度、透明度、阴影营造层次感


#3.色彩:使用色彩鲜明的颜色与半透明磨砂背景叠加组合


#4.描边:轻微描边可用来模拟玻璃高光质感


02


为什么会再次出现?


任何设计风格到一定时间,都会慢慢退出大家的视线,然后又以新的方式出现在大家面前。早期的拟物化图标火爆的时候,各大设计网站都在举行设计比赛,现今基本很少看到。因为时代往前走,用户审美也一样,手机系统也大转变,走向扁平化。


以苹果IOS系统为代表的扁平化设计风格风靡一时,影响着众多设计师作品产出。但是什么都是物极必反,扁平化也是会看腻的。因此设计师开始绞尽脑汁想出各种新鲜风格,想走出目前的窘境。正好,出现了新拟化风格、玻璃拟物化、光感风格等,开始在UI设计中大量出现。


玻璃拟态的出现也正是打破了纯扁平化设计,让界面看着有了更多光泽和质感,丰富了视觉细节。


这种风格虽然在苹果大苏尔系统有使用较多,网上也有很多设计好看的优秀案例,但至今在移动端见到极少,为什么会这样?下面部分,大家来分析下这种风格一些特征,然后大家就知道了为何没有被大范围使用。


03


为何没被广泛使用?


任何一个较为明显的设计风格出现时,如果没有大厂带路,其实很少有企业敢独自冒险去使用的。毕竟没人能承担起损失用户的责任。回过头来,大家看看正在盛行的玻璃拟态风格,这种风格,在网上也有很多特别漂亮的设计案例。


8858cc永利_什么是玻璃拟态?玻璃拟态风格如何实现


设计师 Ghani Pradita


这两张概念设计,是我最喜欢Dribbble上的一位设计师。他的概念设计特别细腻,用色也是我喜欢感觉。但,这种风格第一眼看确实不错,最起码打破了现阶段扁平的UI设计。如果它作为前瞻概念探索的方案,是可以吸引老大们注意一下的。


大家来看看影响这个风格关键的四大元素:透明度、悬浮、色彩、描边。


大家知道,大家移动设计基本都是整个屏幕的,因此有些效果全屏根本看不到,悬浮效果就需要一个大背景来承载,不然描边效果也看不到。另外一个点就是对比度问题,这种大面积透明度看时间久了眼睛会疲惫。


另外开发实现成本,要计算这么多模糊,其实对系统压力也蛮大的,加载卡顿、发热问题等,当然切图除外,切图效果也会折扣。之前Tencent文档做改版,就运用了玻璃拟态设计风格,不过也只是先运用在Web端的图标上先尝试。


8858cc永利_什么是玻璃拟态?玻璃拟态风格如何实现


Tencent文档


这样说来,其实这种风格还是并不差的,而更需要设计师们擅于去挖掘它的潜在价值。它适合用在哪里?接着下面我会分析下这种风格目前可运用的一些地方,帮助大家走出困境。


04


如何应用这种风格?


2021下半年,设计师如何更好的利用这种风格,在概念设计探索过程中,做出更新颖、更有设计感的界面?首先,来看下目前应用比较不错的一些案例,从这些案例中,可以找到合适的切入角度。


1. 应用在功能局部位置


8858cc永利_什么是玻璃拟态?玻璃拟态风格如何实现


玻璃拟态风格可以运用在某些关键功能的局部位置,这样既不会影响整体感受,也会在设计上有些亮点,突破纯扁平化设计的壁垒。


2. 图标中使用


8858cc永利_什么是玻璃拟态?玻璃拟态风格如何实现


图标中使用是最接近大家能落地,毕竟占面积小,而且直接切图给开发。不过这种风格也不能单独出现在界面中,它需要和整体世界观一致才可以。不然就会显得格格不入。


3. 网页banner


8858cc永利_什么是玻璃拟态?玻璃拟态风格如何实现


Tencent文档web端


Web端使用,整体感受会比移动会好一些,毕竟面积大,效果展示好。


4. 车载HMI设计


8858cc永利_什么是玻璃拟态?玻璃拟态风格如何实现


车载HMI设计中,也开始出现这种玻璃拟物化卡片设计风格,毕竟车载设计和其他领域有所区别,拟物化更有触碰质感,显得车内整体更有品质感。


最后补充说一句,玻璃拟态风格看起来细节会丰富很多,但是也不能大面积使用,建议大家选择合适的切入角度使用,就是我上面例举一些案例。


如果用sketch实现这种风格,需要注意透明度和描边的添加使用,不然实现的效果就不太像这种风格。


相关内容
设计网站中有哪些关键技巧?

设计网站中有哪些关键技巧?有哪些陷阱?在这里,世界上一流的8858cc永利专家,让你共享他们的秘密,告诉你:使网站赋予情趣的诀窍、应该避免做什么、应使用什么工具App以及他们喜爱和厌恶的网站。

8858cc永利中的色彩学,8858cc永利中如何更好地运用色彩搭配

大部分网站或产品的按钮色彩都不会超过3种,指向“动作”的按钮应当统一为同一种颜色,比如谷歌的“搜索”按钮是蓝色,而Twitter的“注册”按钮则是明亮的黄色。色彩能够帮助品牌极为简易的建立用户认知:

深圳8858cc永利,什么样的网站导航设计会吸引你?

今年,许多网站都将这个小元素纳入界面,成为页面导航的重要组成部分。除了导航设计趋势,还有各种设计方法,如全屏导航,底部导航等,所有这些都有利于8858cc永利师。

好的8858cc永利应该具备什么条件?

  8858cc永利必须简约,任何无用的特质都必须移除;与此同时,8858cc永利必须能够满足用户需求。

做8858cc永利时,大家应该考虑哪些因素?

做8858cc永利时,大家应该考虑哪些因素?在做的过程中设计师应该思考哪些问题,怎么样才能做好8858cc永利?

8858cc永利中设计师到底要实现什么价值?

用户体验好的方案,用户感受到的体验真的好吗,真的在意吗?用户愿意为这个体验更多的使用?还是愿意付更多钱? 如果设计希翼被认可价值,那么就必须清晰表明:设计到底实现了什么价值,以及设计是如何稳定实现这些价值的。 8858cc永利中设计师到底要实现什么价值?

如何设计玻璃拟态效果,玻璃拟态呈现方式

8858cc永利师想出了一些非常聪明的技巧,让他们的作品有一种实体感。玻璃拟态(Glassmorphism)就是这样一种技术。当您将模糊效果与透明度相结合时,像素会呈现出磨砂玻璃的略微不透明的品质——为设计增添一丝质感和维度。

如何设计出视觉冲击力强的海报?这16种海报设计思路一定要知道

大家做海报设计的时候,经常会在图文排版上花上很长的时间来构思,要让主题突出、要画面有活力、视觉冲击力要强、要给观者留下深刻的印象......那么今天洛壹就来分享16种海报设计的思路,让你在设计中思路清晰,努力不白费。

大家
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器

XML 地图 | Sitemap 地图