相信所有的UI设计师都知道毛玻璃效果,并且大部分设计师在设计工作中都曾运用过毛玻璃效果,但具体什么是毛玻璃呢?毛玻璃效果又有哪些类别呢?下面由pixso带领大家来认识毛玻璃效果。        

什么是“毛玻璃”效果

毛玻璃,学名「类玻璃柔光材质」在设计中也叫「玻璃拟态」(Glass morphism)。在生活中叫磨砂玻璃,俗称“毛玻璃”。

毛玻璃效果最早在UI设计中的应用是在2007年微软的Windows Vista和win7的系统UI中。苹果在2013年发布的IOS7系统和2014年发布的OS X 10.10Yosemite系统中广泛使用了这个效果,在当时移动设计扁平化视觉风格主流的年代,这个变化着实让大家耳目一新。

在之后的很长时间里,这种风格成为了设计师们常用的手法。直到在近期发布的Win11以及Mac OS Big Sur中强化了毛玻璃质感,又将玻璃拟态风格的趋势掀起了一个小高潮。

那么该用什么软件制作毛玻璃效果比较简单方便呢?如果你是设计小白的话,Pixso在使用时很容易上手,这让你的设计探索之路轻松许多。如果你已经做设计很多年,也同样可以试试Pixso,它会提升你的工作效率且有更多便捷的操作。

什么是“毛玻璃”效果

有什么类别

毛玻璃效果就如其名,主要以模拟磨砂玻璃的质感与视觉效果为主,具备以下几个特点:

  • 用背景模糊的磨砂玻璃效果

  • 空间物体漂浮多层次

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

  • 在半透明物体上有一个细微的光线边界

毛玻璃材质可以让用户明确感知到多个不同的层次,合理巧妙的运用这种虚实结合的设计,能最大程度提高用户体验度!

毛玻璃风格的数据恢复界面

毛玻璃风格的数据恢复界面

毛玻璃拟态的应用

图标美化

一个毛玻璃背景能让图标变得和整体背景相交融又保留一定的独立感。

网站背景

毛玻璃拟态设计可以作为网站背景的基础,完成这项工作的技巧是模糊背景图像或颜色,使用户不会试图猜测背景是由什么组成的。它应该只是一种更柔和,几乎是斑点的颜色。

卡片式积木

毛玻璃拟态设计运用卡式方块,是让元素之间创建分离的理想之选。

主导艺术

当用作主要的艺术元素时,这种效果的挑战是确保它不会“太软”。您希望用户了解他们正在查看的内容并知道如何与之交互。这里的关键是不要为了设计效果而牺牲可用性。

毛玻璃拟态的应用

毛玻璃拟态设计,它可以作为小空间的微妙元素或作为设计项目的整体设计概念工作。这是创建具有更多视觉效果和视觉层次的不同方式。阴影+透明度+背景模糊的搭配使用,让它拥有独特的视觉效果,可以让界面具有很好的呼吸感,让用户在使用页面时心情可以很轻松,给人很舒适的感觉。

Pixso

作为设计师,我们在设计时很需要一个能够提升设计效率,操作简单好上手的设计工具,那么快来Pixso试试做毛玻璃风格设计吧!从设计角度来看,Pixso完善的设计功能,能支持UI设计的各个需求:钢笔工具能自由挪动锚点,实现矢量图形变换,油漆桶工具能轻松分区域填色,Pixso是一款专门针对矢量设计的软件,删减了非必要功能,打造了一个小而美的矢量设计软件,专用于这一领域。克制的功能设计与界面风格,减少了无关功能的干扰,让设计师专注于设计本身。