Hello大家好 ，我是本节课的讲师大冯 ，今天我们要讲的是 ，HMI的玻璃拟物图标设计 ，首先看一下什么是玻璃拟物图标 ，那现在网上所说的 ，玻璃拟物化，磨砂玻璃 ，它都是说的是一个风格 ，那以下统称为磨砂玻璃的一个风格 ，说起这个风格 ，其实应用在这个风格最多上面 ，反而是在系统 ，而不是咱们所平常 ，接触到APP这一块 ，包括windows和MAC ，应用的是最多 ，同时以苹果设计为首的这个 ，苹果类的产品 ，包括Mac或者是 ，iPhone等等 ，这上面这种风格会更多，无处不在 ，包括我图面所展示的这个控制中心 ，还有这个-1屏，程序切换等等 ，如果说你要有这个苹果手机的话 ，可能就会非常的熟悉了 ，其实这种风格最早先起源 ，还是在windows这个电脑上面 ，像前段时间发布的 ，windows11的系统 ，大量的使用了磨砂玻璃的这个风格 ，其实在苹果电脑上来讲 ，给大家演示一下 ，包括下面这一排Dock栏 ，以及启动台里面的这个图标 ，后边这个背景我们可以看到 ，它也是属于一个磨砂玻璃 ，它也是在使用上面 ，除了应用在系统以外的地方 ，可能在手机的APP端上应用的 ，也是越来越多了 ，现在也是逐步的在提升 ，比如说我现在图片展示的 ，58同城上面 ，可以看到这上面的一个小图标 ，这边这个图标 ，甚至还有这个小背景是吧 ，都是磨砂玻璃的这款风格 ，那么我再给大家展示一下 ，这个网上找的这几张磨砂玻璃的图片 ，其实我倒反而觉得 ，

像现在我展示这几张图 ，都是有一些瑕疵的 ，比如说像左上角可能白色背景 ，你用这个磨砂玻璃造成某些效果看不到 ，少了一些 ，轮廓，识别性很低 ，那么在黑色背景下面 ，像这种，还有这种可能会磨砂玻璃 ，风格太偏白了，太偏重了 ，少了一些通透感 ，怎么看怎么可能会稍微的奇怪一些 ，那么再来看一下HMI这个方面 ，这也是前一节课 ，给大家展示过的 ，一个HMI比赛的图 ，还有一张站酷的图 ，它现在使用的这个风格 ，也是磨砂玻璃的风格 ，效果也是非常的不错 ，那么在以上看完图之后 ，我也是总结了一些 ，磨砂玻璃风格的设计技巧 ，我们来一起看一下，那到底怎么做 ，这个磨砂玻璃也是能有通透感 ，这里废话也不多说 ，给大家去讲一些干货 ，首先我总结出来了7点 ，第一步就是 ，带磨砂玻璃质感的透明背景 ，这也一定要有 ，可以看到我这个图面上所示 ，可能你得结合左图才能看出来 ，它其实是有一个透明质感的背景 ，这个背景也是非常重要的 ，它不能太白，使用的颜色 ，最好使用本身的背景颜色 ，包括后面现在是蓝色 ，那你可以使用一些偏蓝色的黑 ，不一定要使用纯黑或者是纯白 ，那样的话就和前面几张图一样 ，没有通透感了 ，第二个就是一定要有一些层次感 ，比如说像前面和后面 ，它之间这个间距之后 ，去添加一些投影的形式也好 ，或者是加一些质感形式也好 ，让它有多个层级 ，看起来就会非常的好 ，第三个一定是面性图标 ，这个也不用多说 ，

如果说你要是使用线性图标的话 ，可能造成最终的效果 ，并不是特别的好 ，第四，背景颜色一定是高饱和度的 ，甚至你可以拉一些渐变 ，从蓝色到这个蓝白色之间的渐变 ，但是你不要使用一些低饱和的颜色 ，就会造成整个画面非常脏的情况 ，这样的话就效果不是特别的好了 ，第五个就是添加描边 ，增加一些厚度感 ，这样的话通过和后面颜色 ，色块对比的之后 ，才能更加的体现出设计的立体感 ，第六个就是增加一些白色图形 ，增加前后的对比 ，可以看到这张图一样 ，在这里面可能看得更清楚一些 ，这边也是，如果增加这个白色的图形小点之后 ，可以增加它的对比度 ，如果你要把这个白色小点去掉了 ，可能效果并不是特别好 ，至于这个白色图形到底是什么 ，可以使用一些它本身的元素 ，像整体的这个图标 ，它可能偏向于一个圆形 ，我们就可以使用一个圆形 ，去添加到中间这个白色图层 ，第七步就是亮色的图形 ，一定是要在后面 ，磨砂的图形一定是在前面 ，这样的话才会有这个效果 ，以上7步就是我作为一个 ，磨砂玻璃这个风格的一些总结 ，也是目前比较可行的 ，下面就开始进行 ，磨砂玻璃风格的实操 ，首先我们今天使用实操的 ，这款软件是Figma ，在这里我已经提前建立好了画板 ，那在这里面我可以建立一个 ，120×120的这个画板 ，同时这个风格使用Sketch ，也可以快速的设计出来 ，但是使用PS和AI ，设计出来的这个图形 ，使用的手法可能会不太一样 ，

首先我们来去设计一个信息的图标 ，在这里 ，直接可以去拉取一个信息的图形 ，稍微的给它规定一些 ，就是60×50的这样的图形 ，那我们再来去建立一个三角 ，可以稍微的转过来 ，至于这个宽高24 ，×16，我们可以试一下 ，稍微的大一点 ，乘以22 ，在这里去掉 ，对齐像素，省的这个半像素是对齐不了 ，在这里面也是同样对齐 ，把这个对齐像素打开 ，回到这个图层 ，边边角角也是给它一点点圆角 ，要不然会太愣 ，可以给一个8的圆角，看一下 ，那么好，选中两个图形之后 ，我们进行一个布尔运算 ，连集所选项 ，之后我们直接可以复制粘贴 ，右键水平翻转 ，稍微的给它小一点 ，可以放在背后的这个层次下面 ，放在最底下的这个图层 ，稍微换个颜色 ，