#92 Liquid Glass 之外 Apple 的改变

劝 Apple 牢记初心,不忘使命,力戒形式主义、官僚主义,坚持实事求是的思想路线,树立正确设计观,真抓实干,改变作风

第92期 Design Scenes 封面

无论是 iOS 上让人眼前一黑的控制中心,还是 macOS 上格格不入的工具栏,目前 Liquid Glass 大部分视觉「失误」其实都可以归根于 Developer Beta 1 的工期紧张而无法达到设计预期效果。与其说是展示全新的视觉,不如说是 Liquid Glass 的独角舞台秀。虽早已有 WebGL 相关实现方法,但是苹果的折射和边缘反射效果都比较精细,和性能消耗取得了初步的平衡。但是放进界面中,背景干扰太大。甚至说,Liquid Glass 材质就是为了凸显背景内容而存在的。

液态玻璃简述

我们直接打开 HIG 查看 Material 的 Liquid Glass 这一节:

Materials | Apple Developer Documentation
A material is a visual effect that creates a sense of depth, layering, and hierarchy between foreground and background elements.
Liquid Glass forms a distinct functional layer for controls and navigation elements — like tab bars and sidebars — that floats above the content layer, establishing a clear visual hierarchy between functional elements and content.

Liquid Glass 一般用于功能和导航元素,像是 tab 栏(iOS)或侧边栏(iPadOS 和 macOS),浮动在内容层上,在元素和内容之间,建立一个清晰的视觉层级关系。

这点上和之前的标准材质(standard materials)没有太大区别。

Liquid Glass allows content to scroll and peek through from beneath these elements to give the interface a sense of dynamism and depth, all while maintaining legibility for controls and navigation.

Liquid Glass 可以让内容在下面滚动并浏览,赋予界面活力和深度,同时保持功能和导航的易读性。

这点上和以往材质有所区别,Liquid Glass 的目的之一增加下方内容的感知,之前高数值背景模糊淡化了内容存在感。依靠折射、一定的模糊和边缘高亮保持可读,HDR 高光来突破颜色上限,色散和边缘光照增加了个性化。但 HDR 过高的亮度带来的眩光效果,且录屏或截屏时的不可见,其实用性大打折扣。

看来能贯彻 Fluent Design 梦核的还得是,舍得在界面花精力的 Apple。

不过 Apple 不建议多多使用 Liquid Glass 材质,在内容层使用会增加不必要的复杂性;也不建议叠加使用 Liquid Glass,同样会使层级错乱。至于 Liquid Glass 的其他性质(结构、自定义着色、两种变体等等)推荐到「了解 Liquid Glass」这一视频观看(→ 没有梯子可查看)。

- YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

本文主要讨论的是 Liquid Glass 所处的新一套设计系统,是否真的带来了变革。

视觉优先的设计系统

以下截图基于 iOS 18.5(iPhone XR)和 iOS 26.0 23A5260n(iPhone 14 Pro)作为新旧系统参考。

打开 iOS 26,能发现许多系统 App 的标签栏和工具栏都原地变为了 Liquid Glass 材质的常规变体。

左侧为 iOS 18.5 日历截图,右侧为 iOS 26.0 日历截图

Apple 提倡用清晰无歧义的图标来尽量替代文字(详见),如遇到有歧义图标时则也可以使用文字(左侧的「今天」),但是要避免文字和图标混合在一个 Liquid Glass 材质中,会让用户误解成一个功能按钮。

我们还能看到右侧日历顶部和底部应用了 Scroll Edge Effects,实际上是渐变过渡效果。大部分时候是 Soft 效果,在 macOS 上(比如 Finder)会使用 Hard 效果加强对比。

macOS 26.0 访达文件夹顶部截图

你看 macOS 就被这一转变打了个措手不及,侧栏和顶部工具栏都没适配呢,就被 iOS 和 iPadOS 拉着换了身衣服,只是这件衣服相当不合身。浅色背景上的为了增加对比度从而会增加阴影的透明度,加之作为工具栏无法与边缘间距太远占用空间,以及每个工具组内部过窄的左右内间距,从而导致了目前的尴尬状况。

macOS 26.0 访达文件夹滚动时顶部截图}

在内容滚动后,阴影减轻,边缘效果明显,看起来效果好一点。但是侧栏的两个边缘内间距仍然造成了空间浪费,以及黄色箭头指向处的阴影截断,都是需要 macOS 单独去解决的问题——工期紧张也是问题。

macOS 26.0 访达文件夹顶部放大左上角的截图

说回 iOS,很多 App 遵循新的ToolbarsSearch fields 指南改变了标签栏和工具栏布局。但我很怀疑是否是正向优化。首先是常规的布局改变:

iOS 26.0 中播客界面截图

标签栏和搜索处于同一层级,点击搜索时,左侧只展示当前选中的标签栏状态(上中图)。再点击搜索时,进入搜索状态(上右图),点击 X 返回。原本两者处于不同层级时,用户可以在搜索一半时,直接点击进入其他标签页。但是现在变成了单线程操作,从搜索返回到选择标签需要多点两步

以标签栏目前的空间,基本职能放下 4 个标签页,再多的话,最后一个标签会变为「更多」来单独显示其他标签页(→ 详见)。顶部左侧一般是标题来声明上下文,右侧是个人信息。Apple 去繁就简的主张,但实际上很多复杂的商业 App 难以附议。在屏幕各个角落寸土寸金的现在,即使是小而美的微信恐怕也难以消化。


让我们继续质疑。

左侧为 iOS 18.5 天气截图,右侧为 iOS 26.0 天气截图

原本底部中间的数量指示器,现在有了独立的分组,变成了莫名奇妙的形式。但其实这里沿袭了两种隐藏交互:

  • 长按跳转到城市列表;
  • 点击左右空间可左右切换城市;

可目前的简略形式让人以为这里的作用是点击微小的白点来切换,心生困惑。我觉得不如直接用相机底部的 tab 方式来切换展示城市——

iOS 26.0 相机截图

下图是提醒事项 App,没有标签栏。

左侧为 iOS 18.5 提醒事项截图,右侧为 iOS 26.0 提醒事项截图

感觉 Apple 的设计此时就像宕机的机器人一样,不知道如何适应眼前的环境。

  • 搜索没有放到底部;
  • 加号(新提醒事项)没有放到右上角?虽然感觉放到现在位置倒也可以,属于 FAB 的常规区域;
  • (右上角中间)添加列表的图标不明所以;

整体布局其实照着备忘录 App 就可以「抄作业」,但是 Apple 并没有这么做。


下图是相机 App。

左侧为 iOS 18.5 相机截图,右侧 4 图为 iOS 26.0 相机截图

在 iOS18.5 时,你可以清晰地看到相机的拍摄类型,修改后最多只能看到 2 个。别急,这次 Apple 注意到了,所以他们做了一个流程来弥补用户感知——

相机 App 底部标签切换效果

为了这碟醋包了好大一盘饺子。欲盖弥彰的背后,可以看出新视觉规范的执行是多么强硬,冲击下届 Apple Design Award 的开发者们有好果子吃了,准备好迎接真正的用户体验技能考察了吗。

相机顶部的两侧工具栏,点击左侧是新改进的「Action Sheets」机制——即弹出位置依据 action source 而不是底部。但是当点击右侧「六个点」更多图标时,会突然在底部弹出一个中幅的 Liquid Glass 材质弹窗(上上图,右数第二张),里面九个功能的交互千奇百怪,有的是图标本身交互切换,有的是下图这种:

相机 App 底部标签切换效果

我怀疑内部有人在给「滑动解锁」招魂——那个圆 X 是不能滑动的——但是真的好想滑动啊。

虽然之前相机的控制隐藏的很深,但是起码交互都是比较一致的。但是在这里我只看到了妥协,妥协,还是妥协。


Safari 的第一次大规模改版,将网址输入框挪到下方那次我是支持的,Apple 在后续的体验兼容也仁至义尽。但是这次改动,我愿称之为新设计语言的「巅疯之作」。

左侧为 iOS 18.5 Safari 截图,右侧为 iOS 26.0 Safari 截图

这里面「加号」图标代表新建标签页,「列表」图标带代表标签页组(我依然觉得这个图标不太合适,因为能代表的东西太多了),「完成」代表返回来源网页。

这个界面对于我来说:

  • 「加号」图标最常用,因为来到这个标签预览页面大部分操作都是为了新建标签页;
  • 其次是管理其他标签页;
  • 或者切换标签页组;
  • 用处最不大的是「完成」,因为点击网页也可以返回;

然而新界面中:

  • 把切换标签页组放到了最易于操作的底部;
  • 把最常用的「加号」放到了左上角中间不起眼的位置;
  • 把用处最不大的「完成」单独放到右上角最明显的位置;
  • 点击「省略号」ellipsis 图标,又出来了管理标签页组;

你可能会疑问「搜索标签页」怎么没有作为单独的 search bar 提取出来,别急,Apple 这次根本没动:

iOS 26.0 Safari 标签页预览界面截图}

可能 Apple 也知道这里的搜索和 App 首页的搜索不是一个量级的功能,这里单纯只是工具性质的搜索。但是应用 Liquid Glass 的话,顶部工具图标就要变成 4 到 5 个一组,很不优雅,干脆保持默认隐藏。

左侧为 iOS 18.5 Safari 截图,右侧为 iOS 26.0 Safari 截图

你可以看到 iOS 26.0 版本又回到了 iOS 15 时的设计(→ 在此回忆),这次保留了刷新(右图标)和菜单(左图标),加之返回和折叠其他所有原本操作的省略号图标。

想要查看所有标签页,就要点击省略号图标,在弹窗操作,或者熟悉「按住地址栏上滑」这一手势。至于分享操作,无论如何都要进行多次点击。「前进」操作也被藏在了长按返回键的菜单中。我有一种预感这个设计改动又要只停留在早期 Beta 阶段来测试用户接受度。

我在之前的文章 #81 Unbox: Quiche Browser 中介绍了可自由定义 toolbar 的浏览器,这版设计可以说其中的一个 Liquid Glass 版本。可能在 Apple 看来过高的自由度对普通用户来说提高了复杂度,但过度的简化同样让人无所适从。


Liquid Glass 新的设计语言有一套新的「数值膨胀」,或多或少增加了点击区域面积。这是非常好的。

iOS 18.5 和 26.0 中模态弹窗样式更改
iOS 18.5 和 26.0 中设置项列表高度
iOS 26.0 中各处元素高度

哦左对齐,我一直坚定的内容段落的左/右对齐可读性 > 居中对齐,如今修成正果。然而某些地方的 segment control 高度却比较低,期待苹果后续能有所改进。

展望 App 的自适应设计时代

iPadOS 26.0 有着非常巨大的变化,它摒弃了之前的分屏模式下花里胡哨的交互,转而变为 macOS 倾向的窗口设计(→ 详见Split View)。用户可以通过右下角的手柄(在一定限度内)自由变化 iPad App 的长宽比例,并且加入了窗口控制标识(Window Controls)和菜单栏。

天气应用截图,从 iOS 26.0 到 iPadOS 26.0 不同宽度

这貌似和网页自适应设计还不太一样,有的时候需要重新组织 App 结构来适应侧边栏。之前的 iPadOS 也有侧栏,这次视觉对齐 macOS 更加统一和自由。忆往昔当年的 iPad 运行 iOS 应用时还只能在黑屏中放大缩小,现在非适配 App 也能(按照比例)以窗口运行。

总的来说

当下处于 AI 引领的科技变革的时代,AI 失利一整年的 Apple 为了让「Only Apple Can Do」再次伟大,不得不将 shader 引入前端技术,来强行达成这个目的。只是看起来所有人和机器都没有准备好,导致基础体验上的改动很匆忙,在移动端发展了数十年的 App 环境中显得格格不入。

至于 macOS,哦天呐,他们默认把异形应用图标都修改了,还有什么可说的呢?

我劝 Apple 牢记初心,不忘使命,力戒形式主义、官僚主义,坚持实事求是的思想路线,树立正确设计观,真抓实干,改变作风!


如果你觉得文章对你有些帮助,可以请我的猫吃罐头 ↓

带有微信赞赏码和文字 A kind and compassionate act is often its own reward. 的横幅图像

订阅 Design Scenes

发布最新文章时,会以邮件通知你
zelda@link.com
订阅