玻璃态是 2020 年以来逐渐流行起来的一种视觉设计趋势，在苹果和微软的设计系统中占有重要地位。玻璃态元素看起来像磨砂玻璃。巧妙使用玻璃态可以帮助设计师有效地建立视觉层次。然而，如果没有熟练掌握视觉设计原则，或者过度使用该形态，可能会影响界面可视性与可用性。

　　玻璃态（Glassmorphism）是一种视觉设计风格，它利用不同程度的半透明度来模仿磨砂玻璃质感，从而创建前景和背景元素之间的层级和对比度。

　　通常，玻璃态元素放置在渐变或复杂背景上来强调界面层级时会显得格外突出（见图1）。

　　▲ 图1. 苹果设计系统中的两个玻璃态示例：iPadOS 应用程序文件夹（左）和 MacOS 通知（右）。背景元素仍然可见，但不易识别。

　　让 UI 元素呈现玻璃外观的想法可以追溯到 2013 年的 iOS 更新。在这次更新中，iOS 菜单进行了重新设计（见图2）。它以具有磨砂玻璃效果的半透明界面元素为特点。从此，玻璃态作为一种设计风格的种子就此种下。

　　4 年后，微软于 2017 年推出了 Fluent 设计系统。该系统的设计原则是创建一种看起来轻盈、具有层次感和深度、以及涵盖了动画与材质的设计语耀世手机app怎么安装言。其中有一种背景效果被命名为亚克力材质（acrylic material），这种半透明、模糊的背景效果的灵感来自玻璃的外观（见图3）。

　　3 年后，苹果于 2020 年推出了 macOS Big Sur 更新，并在其操作系统中添加了类似的半透明和玻璃般的视觉元素（见图 4），也就是现在 mac 用户常见到的半透明面板。

　　这些变化使操作系统看起来更加现代和优雅。很快，来自世界各地的 UI 设计师都对玻璃般的视觉元素在 UI 设计上的效果赞不绝口。到 2020 年，玻璃态被认证为一种 UI 设计趋势。

　　而到今天，玻璃态发展至虚拟现实或混合现实空间中。玻璃态元素通过为在标准屏幕上看起来可能是二维的对象提供材质纹理来帮助保持 3D 体验。例如，Apple Vision Pro 在半透明 UI 覆盖层中使用玻璃态（见图5），有效地模糊了它们背后的虚拟现实环境，同时保持它们可被感知。

　　要实现玻璃态外观，就需要能透过元素看到底部层级。可以通过调整元素内部的颜色、图案或渐变的不透明度来实现这一点。

　　不透明度定义了元素的透明度。不透明度越高，后面的内容就越难看到。不透明度越低，能看得越多。例如，我们可以清楚地通过家里的玻璃窗看到外面，那玻璃窗的不透明度即为 0%。

　　背景模糊会使元素后面的物体呈现模糊、失焦的外观。例如透过浴室的磨砂玻璃门或会议室的雾化玻璃，我们仍然可以看到另一侧的物体，但无法看清它们。

　　背景模糊与较低不透明度的效果是类似的。例如，不透明度为 30% 且模糊度为 25px 的白色矩形会扭曲背景元素，但仍可辨别背景元素边缘。但是，通过将模糊度调整为 100px ，这些背景元素会变得更加失焦并融合在一起。

　　除了不透明度和背景模糊之外，描边（边框）和渐变可以强调玻璃态元素的空间深度，在简单或单色背景上时更能体现这一点。

　　▲ 图8. 为在简单背景上的元素添加低透明度描边可以营造厚度感。更进一步可以使用渐变描边和渐变填充在单色背景上营造空间深度感。

　　在界面中加入玻璃态元素时，玻璃态元素上的文本可读性很容易受到背景影响。以下有 3 个建议可供参考：

　　确保文本和图形元素满足对比度要求。由于玻璃态组件是半透明的，文本元素可能会覆盖多种颜色，从而影响可读性。这里推荐一个 figma 的插件 Contrast，它可以让你快速检查文本和其他设计元素的对比度。

　　背景虚化程度越高越好，尤其是在背景复杂的情况下（例如视频、摄影、动画）。Behance 或 Dribble 上的许多 UI 设计都努力地保持背景元素的可辨性。然而，过多的背景元素会让用户难以专注于有意义的内容，并影响文本的可读性。

　　由于元素可能出现在各种上下层级中，例如网站上的叠加层或桌面应用程序上的上下文菜单，背景模糊必须考虑到元素可能出现的多种背景。

　　▲ 图9. Windows 的上下级菜单考虑了多种背景的情况，并强调当下与菜单交互的任务来提高可读性。

　　如果可以的话，请为用户提供控制对比度或透明度设置的选项。例如，苹果的辅助功能允许用户降低或提高对比度，从而使界面能够适应视力较差的用户。

　　综上，玻璃态设计是一种用途极为广泛的设计风格，它可用于创建具有强层级关系的交互性界面。同时，使用玻璃态时最好多方面考虑，保持页面层级关系以及元素可读性。可参考使用已经成熟的设计系统，如苹果的 SwfitUI，以避免从头开始创建玻璃态元素时出现任何潜在问题。

　　版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

　　特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

　　Angelababy晒国庆看烟花vlog，回眸一笑真的好美，氛围感十足！

　　OpenAI与摩根大通、花旗、高盛、摩根士丹利、桑坦德银行、富国银行、三井住友银行、瑞银和汇丰银行建立了40亿美元的循环信贷额度

　　390分+228万奖金！郑钦文冲中网4强：取胜=创造3大纪录，央视直播

　　苹果已下单京东方OLED显示屏！iPhone SE 4预计明年春季发布

　　印度商务部长：全球 14% 的 iPhone 在印度制造，预计还会增长皇马-皇马平台-「ISO认证」。