当前位置:首页 > SEO经验分享 > 正文
已解决

如何巧妙借鉴微软和苹果的玻璃态设计风格,打造独特视觉体验?

来自网友在路上 1080提问 提问时间:2025-05-27 18:17:46

最佳答案 问答题库08位专家为你答疑解惑

微软和苹果引领的玻璃态设计风格,该如何正确使用?

从5个方面深厚入琢磨怎么学会借鉴参考!

1. 描边和渐变

除了不透明度和背景模糊之外 描边和渐变能有力调玻璃态元素的地方深厚度,在轻巧松或单色背景上时更能体现这一点。

2. 越模糊越优良

3. 背景虚化程度越高大越优良

背景虚化程度越高大越优良,特别是在背景麻烦的情况下。Behance 或 Dribble 上的许许多 UI 设计都努力地保持背景元素的可辨性。只是过许多的背景元素会让用户困难以专注于有意义的内容,并关系到文本的可读性。

4. 玻璃态元素的不透明度

不透明度定义了元素的透明度。不透明度越高大,后面的内容就越困难看到。不透明度越矮小,能看得越许多。比方说我们能清楚地通过家里的玻璃窗看到外面那玻璃窗的不透明度即为 0%。

5. 让用户调整透明度

如果能的话,请为用户给控制对比度或透明度设置的选项。比方说苹果的辅助功能允许用户少许些或搞优良对比度,从而使界面能够习惯视力较差的用户。

案例琢磨:苹果与微柔软的玻璃态设计之路

图 1. 苹果设计系统中的两个玻璃态示例:iPadOS 应用程序文件夹和 MacOS 通知。

图 2. 2013 年 6 月 10 日 — Apple 发布了具有全新鲜用户界面的 iOS 7。

图 3. 应用在 Windows 面板上的亚克力材质。

图 4. 应用在 macOS Big Sur 面板上的半透明视觉元素。

图 5. Apple Vision Pro 界面采用的玻璃态元素。

图 6. 元素的不透明度越矮小,背景元素就越清晰。

图 7. 玻璃态组件上应用的背景模糊越许多,后面的元素就越困难区分。

玻璃态设计是一种用途极为广泛的设计风格,它可用于创建具有有力层级关系的交互性界面。一边,用玻璃态时最优良许多方面考虑,保持页面层级关系以及元素可读性。可参考用已经成熟的设计系统, 如苹果的 SwfitUI,以避免从头开头创建玻璃态元素时出现随便哪个潜在问题。


99%的人还看了