在过去的几周里，我一直在试图理解苹果最新的用户界面重新设计——苹果称之为 Liquid Glass——这将影响他们所有平台在各自操作系统版本的下一代迭代中。但当检查苹果自己的指导后，我主要的感觉是苹果在边做边想。

如果你一直在 Mastodon 上关注我，你将已经熟悉以下大部分内容。我只是想将我在那里的帖子在这里整理成一篇更有机的文章。

让我们从苹果在其开发者网站上提供的采用 Liquid Glass 技术概览笔记开始。

在导航部分，我们找到了这个图表：

上面的文字说：

在 Liquid Glass 层中，像标签栏和侧边栏这样的关键导航元素浮动起来，以帮助人们专注于底层内容。

现在看看我图像中高亮的部分。为什么在这里要“专注于底层内容”呢？标签栏和工具栏仍然覆盖着底层内容，而且越透明/半透明，情况越糟糕。当某物淡出到背景中时，它实际上就不再处于前景中，所以没有必要专注于它。这就像提议一个界面，帮助人们将视线聚焦到他们的周边视觉上。

在图形下方，以建立清晰的导航层次开头的段落中，开发者被建议：

确保将内容与导航元素（如标签栏和侧边栏）清晰分离，以在内容层之上建立独特的功能层。

这与您在上图中展示的内容形成直接对比。首先您建议模糊控件与内容之间的界限，然后又建议“确保将内容与导航元素清晰分离”。究竟该怎么做？如果您停下来思考，就会发现讽刺的是， 确保将内容与导航元素（如标签栏和侧边栏）清晰分离，以在内容层之上建立独特的功能层正是对“Before”图中正在发生的情况的准确描述！

接下来，我们来看与 Extend content beneath sidebars and inspectors 段落相关的这个图形：

换句话说，创建一个看似延伸到侧边栏下的图像的错觉，虽然实际上你无法看到侧边栏下的图像部分，但另一方面，应用于侧边栏的透明效果会使侧边栏上的文字整体上更难阅读。从视觉效果来看，这是一个双输的局面，你不觉得吗？此外，这可能只是一个个人感知的问题，但在我看来，侧边栏后面可以看到的图像下方的空白区域看起来很奇怪，好像有什么东西缺失了。

在 组织和布局 中我们找到：

为了让内容有呼吸的空间，列表、表格和表单等组织组件具有更大的行高和填充。各个区域增加了圆角半径，以匹配系统内控件的曲率。

这基本上是不必要的。它减少了屏幕上显示的信息量，因此你不得不更多地滚动。看看“之前”和“之后”的布局：之前的布局不需要解决方案来提高其清晰度。你只是在到处注入空白。而且，当实际上需要更多空间和“呼吸空间”时，页眉（在图中为“单表格行”）甚至被推得更靠近状态栏，这也很讽刺。

还有那些重新设计、被拉伸的开关。它们是“为了改变而改变”的精髓。

 

---

 

然后我去看了一下当前的人类界面指南 ，我仍然无法释怀那篇引言：

让我们从层级开始：“提升并区分它们下面的内容”：这真的是控件和界面元素的作用吗？内容和控件甚至应该占据同一空间吗？它们之间的界限应该模糊吗？

在我看来，控制和内容都能闪耀的最佳方式是各自拥有自己的空间：控制不会干扰内容，让内容得以闪耀，并帮助用户专注于内容。而在自己的空间里，控制可以清晰、整齐地组织，随时准备被访问以操作内容。

Next, Harmony:

与硬件和软件的同心设计保持一致……

不，认真来说，在同心环境中如何对齐 ？这是否意味着选择一个圆圈、一段弧线、一个形状？抛开讽刺之外，这在我看来只是表述得很糟糕。我明白苹果在这里的意思：在你的应用设计中，你应该选择与硬件轮廓相似的形状——例如 MacBook 的显示屏和边框的形状——以及系统中 UI 的典型形状。这些显而易见的东西被包裹在“装腔作势的设计师词汇”中。

最后但同样重要的是， 一致性 ：

…要维持一个持续适应的统一设计…

统一的定义是“在性质、标准或效果上随时间保持不变”。那么， 统一的设计如何持续适应呢？

这段话本应像这样： 采用平台规范，创建一个在不同窗口尺寸和显示设备上保持视觉和功能统一的设计。

Making icons less iconic

在应用图标指南的设计部分，我们发现了这一点：

找到一个能体现你应用或游戏精髓的概念或元素，将其作为图标的核心理念，并用最少数量的形状以简洁、独特的方式表达出来。最好选择简单的背景，例如纯色或渐变色……

这不仅是一碗寡淡的配方，而且几乎是自相矛盾的。比如， 用最少数量的简单食材制作一道独特的菜肴。 虽然仅用两三样东西就能做出几道不同的菜肴，但很快你就会触及独特性和多样性的天花板。

关于图标简化这一执念，让我感到困扰的另一个问题是，当你将事物抽象到这种程度时，你会稀释其意义，而不是提炼它。以词典图标的逐步退化为例。在其后续迭代中（一旦失去了“书本”形状），它可能只是一个字体管理应用的图标。因为它最终会失去很多（甚至全部）独特性。

这张图片来自 Basic Apple Guy 写的关于一些 Mac OS 图标的历史文章 。去查看那篇文章，你会发现应用程序图标呈现出一种模式：它们逐渐变得抽象，以至于几乎不再代表它们本应代表的东西：Stickies 的图标从实际描绘几张黄色便利贴变成了一个透明圆角矩形内的小模糊圆角矩形。Notes 的图标从代表一个真实的笔记本变成了一个带有两条线和彩色顶部区域的平面方形。计算器的图标也是一样：从描绘一个计算器变成了看起来更像一个安全键盘的东西。游戏中心：从一个代表不同类型游戏的图标变成了……一群彩色气泡。

迁移助手图标的最新版本又是另一个例子：

看看它。这完全毫无意义。也许在机场用来标记紧急出口或类似的东西还可以。旧的版本如此简单明了。从一个“老旧且现已停用”的系统到一个“全新崭新”的系统。确实是在迁移。就在那里。同时保留了 Mac 的身份。这再次感觉像是为了改变而改变，除此之外毫无意义。

我相当确定，如果你去采访负责这个图标退化的苹果设计师，他们会说一些关于将图标简化到它们的本质的话。对我来说，这看起来更像是在将所有生命力都挤出去 。Mac OS X 中的图标曾经富有创意、精心制作、独特，带着一丝趣味和个性。Mac OS X 的用户界面庄重、实用、直观，点缀着描述性图标，让用户体验充满乐趣，却不会暗示“这是孩子的玩具”。

同样适用于 NeXTSTEP，Mac OS X 正是源自于此。在这里，一些图标具有更强的 3D 效果，而另一些则更平面；有些是标志（例如韦氏词典的图标），而另一些则描述过度（用户的 Home 文件夹是一个小小的房子插图），但它们都令人立刻记住。它们做到了图标应该做的事情，并且充分利用了 NeXT 为其工作站销售的高分辨率显示器（也请记住，那些显示器中有一些是灰度显示的，因此图标必须在有限的调色板中也能发挥作用）。

近年来，情况发生了逆转：苹果公司为了与更简单的移动设备及其用户界面更加相似，一直在使 Mac OS 的用户界面变得幼稚化和简单化，同时将图标变成了平淡无味和“企业化”的东西。

但情况变得更糟。

在 iOS 5 时代，图标的人机界面指南（HIG）除了基本要求和指导外，并没有太多限制。这给了开发者很大的自由度，结果（如果你排除掉那些通常很糟糕的应用程序）是既雅致又多样；有些选择了丰富、拟物化的外观；有些选择了更平面的设计；还有些介于两者之间。应用程序立刻就能被认出。

 

现在苹果让你可以选择移除所有图标的颜色和深度。为了使一切都看起来相同且不起眼……

……这样你就可以“与你的壁纸相配。”

在我的主 Mac 上，我保留了默认的 Ventura 壁纸，因为只有在唤醒 Mac mini 从睡眠状态时我才会看到它，这时我会看到登录屏幕。真正工作与电脑和移动设备的人不会盯着壁纸和匹配的图标看。

但这不仅仅是这样，这些“图标外观”也会从第三方应用图标中移除颜色、深度和个性。这进一步规定了（并干涉了）第三方开发者可以选择为其应用的设计类型。在推荐使用“最少数量的形状”和“优先选择简单的背景”之后，所有这一切都发生了。

正如 C.M.哈灵顿 正确指出的 ：

我之前说过这话，但苹果正在迫使第三方开发者为其服务。这些指南和规则旨在升华第三方的品牌，并将其替换为苹果。

我还必须引用 Louie Mantia 的话，他在他杰出的文章 玫瑰金调色的液态玻璃 中写道（重点是我加的）：

苹果拥有几乎无限的资源，并按照自己的时间表运营，但其他人没有这种奢侈。一次性推出如此重大的变化迫使众多独立开发者、整个公司乃至整个行业都冻结自己的开发计划，以适应苹果的设计系统。

要求太高。几乎没什么回报。 我一直在关注 Liquid Glass 带来的所有变化，但找不到一个明显改善任何方面体验的例子。

所有变得圆润的东西——除了那些没有变化的东西——为什么？所有变得嵌入的东西——以前没有的——为什么？所有现在变得模糊的东西——为什么？我不认为有些应用的内容区域减少是一个秘密。边距和填充增加了——除了那些没有增加的地方。

在某些方面，几乎有比以前更多的 UI 变化，这根本就不合理。但在其他方面，一切都感觉比以前更加受限。我承认，这也同样不合理。 在 OS X 上，应用图标不仅更具表现力，而且可以有多种材料，而不仅仅是玻璃。

我知道我仍然可以在那个方形区域内绘制任何我想绘制的东西，而且它内部物体的玻璃外观完全是可选的。 但现在每个图标的边缘都带有一种我无法控制的玻璃外观。 如果我的图标是纸张、木材、金属，或者——天哪——皮革？它就会有玻璃的镜面高光。在 macOS 上，目前它被锁定在 45°角。这不是我同意的。

采取这种冒险行为伴随着巨大的风险。特别是对于像 macOS 这样成熟的 产品。这款产品几乎已有 25 年的历史，我希望在期待开发者社区的努力并强迫他们做出改变时，你会更加谨慎，因为你已经很大程度上失去了他们的善意。 这类决策会产生长期影响 ，我确信许多开发者会希望他们的时间在要求他们融入他们并未同意的设计之前得到考虑然后再去要求他们实现这种设计。

而且在我引用的这段话之前的那段话中，Mantia 写道（强调是他的）：

在某种程度上，可以说 Liquid Glass 就像 Aqua 的新版本。它具有反射特性，让人联想到那个。也可以说它是 iOS 7 的某种演变，倾向于磨砂面板和明亮的强调色。但无论 Liquid Glass 看起来是什么，它都不是我们许多人所期望的那样。

Mantia 的文章如此优秀，以至于很难摘录几段简短的引言。请花时间完整阅读它。

在《采用 Liquid Glass》中，有几段明确传达了苹果控制着你的应用外观（或部分外观）的信息。例如，在《视觉刷新》部分：

你在这类元素中使用的任何自定义背景和外观可能会覆盖或干扰 Liquid Glass 或其他系统提供的效果，例如滚动边缘效果。 [...] 更倾向于移除自定义效果，让系统决定背景外观 [...]

Or this, under App icons:

让系统处理应用遮罩、模糊和其他视觉效果，而不是将它们纳入您的设计中。

将此与 2010 年 iOS 人机界面指南中应用程序图标部分使用的语言进行对比：

尽量在图标中平衡视觉吸引力和意义的清晰度，使其既丰富美观又能明确传达应用程序的核心目的。此外，研究你选择的图像和颜色在不同文化背景下可能被如何解读也是一个好主意。

在建议为不同设备创建不同尺寸的应用程序图标后，指南指出

当在 iPhone 主屏幕上显示时，iOS 会添加圆角、阴影和高光反射。

But:

你可以阻止 iOS 为你的应用图标添加光泽效果。要实现这一点，你需要在应用的 Info.plist 文件中添加 UIPrerenderedicon 键 […]

当然，即使在当时，图标也有视觉要求，但我不会将这个简短列表定义为特别严格的：

确保你的图标符合 iOS 提供的视觉增强条件。你应该制作一张图像，该图像：

• 有90°的角
• 没有任何光泽或反光（除非你选择阻止添加反射光泽）
• 不使用 alpha 透明度

这些 2010 年的指南中的语言让我觉得是支持性的 ，比如在这一段：

为你的应用图标创建一个 512×512 像素的版本，用于在应用商店中显示。 虽然这个版本必须能立刻被识别为你的应用图标，但它可以更微妙地丰富和详细。这个应用图标的版本没有添加任何视觉效果。

采用液态玻璃文档中的语言总体上更具规定性且较为冷漠，在我阅读所有各种建议时，我不禁感受到其潜在信息， 我们基于玻璃效果创造了这种美观的外观，你敢用自定义设计、效果、材料、品牌标识来破坏它吗。

当前应用图标指南中的语言也相差不大。它同样反映了苹果公司当前的“保持简洁”的哲学，脱离语境来看，这可能是有效的设计建议——你设计的图标尺寸较小，不是用于书籍的全页详细插图，所以追求简洁并非坏事。

然而——我可能错了——我不断从字里行间读到，这些指南更关注于确保开发者维持苹果自己重新设计的应用图标那种同样乏味和无创意的水平：

在图标设计中拥抱简洁。简洁的图标往往最容易被人理解和识别。一个具有精细视觉特征的图标在系统提供的阴影和高光渲染下可能会显得杂乱，细节在小尺寸下可能难以分辨。找到一个能捕捉到你的应用或游戏精髓的概念或元素，将其作为图标的核心理念，并用最少数量的形状以简洁独特的方式表达它。选择一个简单的背景，如纯色或渐变色，将重点放在你的主要设计上——你不需要用内容填满整个图标画布。

回到 2009 年的 Mac OS X 人机界面指南，就像进入了一个不同的维度。关于图标设计的章节是这样开始的：

Aqua 提供一种照片插图图标风格——它接近摄影的逼真感，但使用插画的特性在有限空间内传达大量信息。图标可以表示为 512×512 像素，以便有足够的空间展示细节。抗锯齿使曲线和非直线路径成为可能。Alpha 通道和半透明性允许复杂的阴影和维度。所有这些特性使你能够创建丰富、生动的图标，吸引用户的注意力。[……]

图标类型有助于在用户打开应用程序之前传达他们可以做什么。应用程序按角色分类——用户应用程序、软件工具等——每个类别或类型都有其独特的图标风格。创建能够表达这种差异的图标，有助于用户在 Dock 中区分不同类型的图标。

例如，用户应用程序的图标色彩丰富、诱人，而工具的图标则显得更为严肃。图11–2展示了顶行为用户应用程序图标，底行为工具图标。

你可能会认为这些只是不同时代反映不同品味和审美观的不同图标设计指南，不涉及谁更好或对错的问题，我会承认这一点。但旧指南在思考上非常周到，为第三方开发者提供了很大的创意空间和广泛的选择范围，同时仍符合当时系统整体的要求。如果你看上面的图 11–2，你可以看到非常具说明性的图标，比如磁盘工具（带有听诊器的硬盘）或前视（剧院扶手椅）的图标，但也包括更简约的设计，比如终端和 AirPort Utility 应用程序的图标。

与此相关，考虑到我们现在所处的位置，我发现这一点有些讽刺：

只在它能令人信服且有助于完成图标所讲述的故事时才使用透明效果。例如，你永远不会看到透明的运动鞋，所以不要在你的图标中使用它。

这条建议在 2013 年版的 Mac OS X 人机界面指南中再次被重申：

在合适的情况下使用透明效果。 图标中的透明效果可以帮助表现玻璃或塑料质感，但使用起来可能有些棘手。例如，你永远不会看到透明的树，所以不要在图标中使用这种效果。预览和页面应用图标有效地运用了透明效果。

此外，自 2012 年引入视网膜（高分辨率、高密度）显示屏以来，HIG 中增加了这一部分：

利用高分辨率显示屏

视网膜显示屏允许你展示高分辨率的艺术作品和图标。如果你只是简单地将现有作品放大，就会错失提供用户期待的美好、吸引人的图像的机会。相反，你应该重新设计现有的图像资源，以创建大型、更高品质的版本，这些版本应该是：

• Richer in texture
• More detailed
• More realistic

在过去的这些年里，图标设计的审美可能发生了巨大变化，但我仍感到悲哀的是，尽管我们现在拥有华丽的显示屏，苹果却推荐使用由几个乏味形状组成的简单设计，而这一切都是为了系统在用户界面的每个方面叠加的“液态玻璃”效果——仿佛这个表面花招比它所扭曲的元素更重要。

我现在很抱歉听起来像是在重复老生常谈，但这再次是形式先于功能，外观先于实用性。别费心偏离这个新规范，因为你的应用将被同化。