产品外观设计冥想记录|为什么您的产品外观设计如此粗糙？

发布时间：广东会-12-17 作者：admin 0

编辑指南：毛玻璃效果注重功能说明并强调视觉重心。在UI产品外观设计中被广泛使用。从磨砂玻璃效果的历史发展入手，本文整理并总结了其在58个兼职产品中的特定应用产品外观设计，希望为您提供参考并为您的工作提供帮助。

01前言

航空效果是UI产品外观设计目前无法避免的主题。 Aero是Authentic，Energytic，Reflective和Open这四个字的缩写。您可以从一个窗口中看到下一个窗口，这表示为透明的磨砂玻璃效果。磨砂玻璃的朦胧感与柔和的渐变相匹配，营造出舒适和呼吸的视觉感。

所有人都使用和认可磨砂玻璃效果的原因不仅在于其可以带来的出色视觉效果，还在于其自身的功能意义。它可以帮助产品外观设计部门更好地开放信息级别并实现视觉统一。最近，我们在兼职的“在线赚钱”项目中尝试并应用了许多Aero效果，以提高页面质量和视觉统一性。

02 Aero（磨砂玻璃）效果的历史

毛玻璃的视觉效果实际上可以追溯到Microsoft在2007年发布的Windows Vista和Windows7。后来，OS X 10.10（Yosemite）和iOS7中出现了大量的毛玻璃效果，例如底部的快捷菜单栏，通知中心和多任务切换窗口。苹果公司增加了模糊程度，并且透明度效果基于平坦度，这更符合UI平坦化的产品外观设计趋势。

Windows Vista/Mac OS X 10.10（Yosemite）

Apple的早期UI界面使用拉丁字“水”来命名，这是Aqua样式。从控制窗口开关的按钮到滚动条，它似乎是由透明的水滴组成的，由上面的光源提供。它闪闪发亮，显示出强烈的水晶质感，使您想要舔它。

它最初在Apple的iMovie软件中使用，并于2001年推广到整个系统和Apple网站，以与Apple硬件的视觉样式集成。在2000年之后的几年中，它成为了UI产品外观设计部门和网页产品外观设计部门的一代，这是美术工作者喜欢的样式。因此它被淹没了一段时间。

苹果公司早期的Aqua风格OS X的Dock（台式机的最低部分）只有半透明的白色背景，没有高斯模糊。

03趋势周期，Aero（毛玻璃）效果的回归

在2017年，毛玻璃效果已完全恢复到Windows 10，并且细节和纹理也得到了改善。直到今年，苹果公司都推出了最新版本的桌面系统Mac OS Big Sur。系统和内置应用程序的图标和界面已重置为产品外观设计。大量的毛玻璃和半透明的界面元素用于使界面更平坦。新的磨砂玻璃效果更加注重功能说明，并强调了视觉重心。有了新的颜色渐变墙纸，产品外观设计语言更加时尚和简单。

图片来自互联网

04在58个兼职工作中的应用

这次我们在58个兼职在线赚钱的修订项目中引入了带有磨砂玻璃效果的产品外观设计语言。

为什么要引入Aero（磨砂玻璃）效果？

在修订之前，我们结合了用户研究和交互作用，分发了调查问卷并输出了《用户调研报告》。经过研究，发现兼职在线赚钱的人具有以下特征：

振兴用户：15-30岁之间的用户中有75％

相对较高的教育水平：84％的高中以上文化程度的人

职业集中在几类人中，例如学生，母亲和自由职业者

从研究报告中可以看出，兼职用户并不是真正的沉没用户，并且用户对产品外观设计接口的要求较高。

航空（毛玻璃）效应解决的问题

相应地，引入毛玻璃效果适当地解决了兼职工作的一些问题。我们在很多地方都使用了毛玻璃背景，例如个人中心，任务详细信息页面和排名，这有效地解决了页面层次结构和统一性的问题。

（1）表达水平

通过磨砂背景，可以抵消平面图形和文本的刚性。与其他元素叠加后，便会生成视觉层次结构，可以更好地表达信息级别，并模糊背景以增强前景。增加级别后，功能会更加突出，而不是为了模糊而变得模糊。

兼职多页磨砂玻璃效果

（2）品牌一致性

除了表达水平，用户还可以在平坦而僵硬的环境中找到一些柔和的元素甚至情感。使用毛玻璃包装UI界面也有助于增强品牌的业务意识和品牌的一致性。

（3）视觉表现效果

该图标不仅在背景上还添加了磨砂玻璃效果，使该图标显得透明，分层，更加精致，并有效地提高了视觉质量。

在线收入页面的部分入口图标图

05实际部分：制作Aero（磨砂玻璃）效果

话虽如此，我们如何才能达到毛玻璃的效果呢？言归正传，让我们以图标为例来说明如何使用Sketch和AE创建带有磨砂玻璃效果的动画图标。多画面警告，教程如下：

以上面的图标为例

第一步：首先在Sketch中绘制游戏控制器图形，用渐变颜色填充，颜色值：＃73A3FF –＃7526FF如果要获得更好的效果，可以适当地添加色韵（漫反射阴影）

步骤2：复制绘制的图形，将其水平翻转，然后添加蒙版。用渐变颜色填充，颜色值：＃F2F7FF – #FFFFFF

步骤3：再次复制第一步中绘制的图形并将其放置在蒙版上。将高斯模糊值添加到45，并将其透明度更改为70％PS：高斯模糊值和图层位置可以根据视觉美学进行适当调整

第四步：为了更好地提高图标的识别度，我们终于再次复制了第二步并删除了填充。添加渐变笔触，颜色值：＃EAF1FF –＃DFD5FF

添加游戏按钮元素，以便绘制磨砂玻璃静态图标

步骤5：绘制图标后，将其导入AE，在这里您需要使用插件工具：AEUX，与After Effects无缝连接

插件下载链接：//aeux.io/guide/download.html

安装教程：//blog.51cto.com/14367150/2405430

步骤6：成功导入AE后，整理图层。您可以看到这些图层与Sketch基本上相同。删除多余的图层（被小眼睛取消的图层），可以忽略具有小锁定的图层。同时，首先隐藏通过草图实现的磨砂玻璃效果，保留基本图形并命名为第1层，第2层。

步骤7：制作AE毛玻璃效果，复制图层2，将复制透明度更改为50

步骤8：建立新的调整图层，将其放置在第2层下方，并设定Alpha遮罩

第9步：以100的强度将高斯模糊添加到调整层

步骤10：最后，开始将所需的动态效果添加到图标中，这样就会出现磨砂玻璃风格的动态效果图标

PS：由于AE附带的毛玻璃效果可能无法在Sketch中实现，因此建议在执行动画时预先合成由原始隐藏的Sketch实现的毛玻璃效果，当图标出现时它将动态显示被冻结

最终效果：

最后写06

互联网领域正在广东会变化。产品外观设计趋势每年都在变化。由于新技术和环境的发展，人们的需求和期望有不同的感受。

作为产品外观设计部门，我们对产品外观设计的思考不仅停留在外观上，还需要更多地关注产品外观设计信息传输的基本功能，增强我们对产品外观设计的认识，同时保持对产品外观设计的敏感性。趋势。在产品产品外观设计中合理使用新趋势以产生最大收益

更多的工业外观设计【设计案例】请点击进入。