最近临摹了一组大厂的质感图标，第一次看到这个页面的时候，我就觉得有点意思，先来看看这一组图标的浅色背景：

做页面的设计师都知道，越是内容少的页面越考究设计师的能力。

阿里云的功能入口页面，仅仅是9个入口，很多设计师第一想到的可能是大卡片设计，阿里云的设计师采用了放大图标，突出图标的方式组成这个页面，同时采用了这几年很流行的毛玻璃伪立体的制作方法，看似简单，却有一种精致微妙的品质感，简约大气，是我喜欢的风格。

开始之前，我们先简单了解一下毛玻璃：

毛玻璃是近两年来继新拟物化之后又一流行起来的视觉设计风格，其风格的最大特点是像玻璃一样的通透性，可以透过表层看到背景的模糊形态，因此而得名。

毛玻璃风格的四个特征：

1、使用背景模糊营造出的「玻璃透明质感」；

2、「多层级」使得物件看起来悬浮在界面上；

3、「鲜艳的色彩」突出了模糊的透明性；

4、半透明物件的「轻薄微妙边框」；

毛玻璃质感三个的作用:

1、具有通透性的玻璃质感，使页面轻盈，有视觉美感。

2、层次感：透过毛玻璃层，可以看到下面模糊的背景，并不会影响前景元素的展示。

3、精致微妙的品质感：具备通透感，可以增添页面的设计感。

这种方式可以将层级很好的表达，虚化了背景而强化前景，也可以可以清晰地感知到自己身处何处。

毛玻璃质感其实已经流行了一段时间了，我发现实际运用在了很多页面及元素中，很多大厂也乐于用这种新的设计风格，比如后面的阿里云盘图标的教程；

1、整个页面背景

最典型的就是苹果系统毛玻璃作为页面背景的使用。比如，iPhone的控制中心页面，还有macOS的桌面。这样的处理可以让用户知道自己所处位置，也不会影响当前功能的视觉与使用。

这种目前在实际应用的不多，大多是dirbbble上的一些设计练习作品，设计中若有突出层级以及营造品质感的需求，毛玻璃背景不失为一种很好的表现形式。

2、标签栏等UI控件背景

可以看到iOS的底部标签栏和macOS的侧边栏都使用了毛玻璃背景形式，微信标签栏也采用了相同形式。

毛玻璃风格的标签栏主要优点在于弱化了标签栏和主体内容之间的割裂感，突出了主体内容。

3、图标设计

毛玻璃质感目前应用最多的就是图标设计，精美的毛玻璃风格图标可以给我们的页面带来活力和品质感，同时它的所占空间比较小，是比较好把控的一种方式，下面的教程分享就是阿里云盘在图标设计上对毛玻璃风格的应用；

4、特殊控件

除了作为背景、图标设计，毛玻璃还可用于一些特殊控件。

比如下图App我的页面就使用了毛玻璃风格，置于大块面颜色背景之上。这样的表现形式使得卡片展示与其上的色块过渡自然，并不会有卡片被挡住的不适感，通过细小的控件设计，营造出精致与品质感。

接下来就为大家带来这一组质感图标教程分享，图标的制作是最能体现设计师细节设计能力，先来看看这一组图标吧！

首先先拆解再动手 

在开始实战前我们先来拆解一下制作文件，一个小小的图标也是多层打磨的结果。

我们以放映室图标为例，首先我们使用形状工具分别做出下图上中下三个层级几个形状，这里需要注意圆角要一致，这里设置的圆角为40px。

接下来，我们给底部色块填充一个鲜艳的色彩，也可以使用渐变色。这里使用的色值如下：

第三步，我们来制作点睛之笔的步骤，高斯模糊层，在ps软件里面叫高斯模糊，在sketch里面是背景模糊功能，比ps制作起来简单一些，也好调整。

这里需要注意，需要做带透明度的颜色，然后添加背景模糊 (数值需要根据图标应用大小和实际操作效果而设置)。在调整完成可以看到已经有了玻璃透明质感。

然后是做厚度轻微质感，这里采用的是内阴影的方法，你也可以单独起一层做描边渐变。具体参数如下：

接下来分别需要给最上面一层和侧边的的元素填充渐变颜色和阴影效果；

最后一步，我们给顶部圆圈添加渐变和外发光的效果，与背景更加融合。

然后给图形的最外边加上高光部分，高光与内阴影用同样宽度的，中间亮两边透明度为0的渐变短线，再加上模糊就能实现。

这样这个毛玻璃风格的图标就做好了！可以试着自己练习设计一下其它的图标。

最后，一套图标提供源文件下载，老规矩后台，【三原设计】公众号后台回复关键词 “ 阿里云盘图标 ” 即可获取下载源文件，回复“素材”可获得以下素材包。

未来我们会新增一个新的模块【元素教程】，目前这个模块是包含：C4D教程、图标教程、配图教程、可视化大屏教程等。

Powered by Froala Editor