液态玻璃(Liquid Glass)很明显是为了今后以 XR 为中心的应用生态构建的设计范式,相当于给 XR 世界中的「信息」一个基础的载体。我们很容易想象:一段信息在手机和 XR 设备之间以「一片玻璃」的形式流转,或者一个液态玻璃构成的界面在 XR 空间中变幻形态,例如导航界面自然地变换成空中的玻璃板、手边的玻璃球等多种形态(反之,Google 想象中的 XR 导航是一片贴在地上的、无任何实感的 2D 地图,显得缺少设计思考,非常敷衍)。
Android XR 中的导航界面。软件界面与真实环境完全割裂,只是拙劣的图层叠加。液态玻璃实际上给 XR 世界的 UI 设计奠定了很重要的基础。这里不得不先谈到 XR 中 UI 可能的变化:
一、抛开「画布」与手指的流动变化在 XR 空间中,界面的长宽高不受限,不局限于矩形空间,连续界面的尺寸、位置都可以变化,因此需要一种具有「变形」特质的视觉载体。
想象今天在 iPhone 上点开 Netflix,你会先看见大量电影海报铺排在屏幕的矩形空间内;再点击其中一张海报,你会看见这部电影的简介,仍处于这个矩形空间内;最后你点击播放按钮,电影开始播放,依旧被框定同一个矩形空间内。
这当然是因为矩形屏幕带来的物理显示,在设计上,我们把这个固定不变的矩形空间称作「画布」。
所有界面受限于矩形画布,以 Netflix App 为例。即使页面的功能不同、信息密度不同,也要受到同一个尺寸形状的硬性束缚。正如在 Painting VR 中作画不需要画布,XR 界面也不需要以一块固定尺寸的画布为基底——挑选电影的界面可能会大到像房间的一面墙壁,电影详情是弹出在手边的一片 A4 大小的界面,电影播放的画面则是震撼的 IMAX 尺寸——当界面间的逻辑联系不再以「画布堆叠」为隐喻,可变形的界面就成为了必然。
在 XR 空间中作画,可以摆脱画布的限制。(艺术家:Anna Zhilyaeva)微观来说,XR 所需要的控件的「中间态」也与这种可变形 / 流动性不谋而合。我们都注意到液态玻璃风格的控件有了比以往更多的「状态」:例如一个简单的滑块,有了更明确的被按下状态(放大、变透明);几个 Tab 间切换的时候,按钮有放大和流动的效果,这是以往不存在的中间状态。也许在平面 UI 中,这些中间状态显得华而不实,但在 XR 空间中,这些中间状态恰是用户注意力焦点的完美体现。
这是因为在平面 UI 中,我们的指尖才是我们真正的注意力焦点(比如每个人打字时都不会看键盘),UI 不需要真正回应你的目光,只需要对指尖的点触产生反应。而在 XR 界面中,当你看向一个按钮时,这个按钮就应当放大、变透明,以示被选中;当你的视觉焦点在 Tab 栏上游走时,液态玻璃按钮的左右流动将显得极其自然。(有没有注意到,液态玻璃按钮流动的样子,和眼动仪指示的高度相似?)
液态玻璃按钮运动变形,和眼动仪指示的眼神焦点流变极其类似。在 Slidebar 控件和 Tab 栏上甚至更明显。二、透明界面成为真实环境的「取景框」不应遮挡背景的真实世界,因此需要一种「透明」的视觉载体。这一方面是为了基础的安全考虑(尽量保留真实环境的可见度),但更重要的是,XR 世界的交互范式可能会迎来更底层的转变:用户的注意力不一定需要完全聚焦于界面,而是需要将一部分注意力放在界面外的现实环境中。
例如将来通过 XR 设备,你可能时不时就需要与周围环境中的文本、人、物体发生交互,界面此时应该恰到好处地「后退」,而非占据你所有的注意力。
打比方说,今天的界面是一个「盒子」,你需要先把东西装进去,才能发生交互;而 XR 世界的界面应该是一个「取景框」,你与框中的对象而非框本身发生交互,而取景框当然是越透明越好。
Apple Visual Intelligence,界面退后,仅作为「取景框」存在。除此之外,图标等次要界面元素的透明化也是服务于这一主旨。
三、再一次用「拟物」唤起熟悉感最后,比较次要地,这种视觉载体最好能拥有现实中物体的质感,在光照、黑暗等多种环境下,拥有令人信服、不出戏的视觉效果,从而在 XR 生态铺开的早期帮助用户更好地接受和理解其界面(想想 iOS 早期的拟物化,你不把一个按钮做成可以用手指去点按的样子,用户可能意识不到那里可以按)。
早年间,按钮必须看起来是个「按钮」,而不能只是一行字。液态玻璃几乎完美地符合了以上特点:Liquid 的可变形、Glass 的透明,以及 HDR 高光和边缘折射为这种材质赋予的可信的、熟悉的外观。
综上,Apple 做出液态玻璃并不是单纯的美学考虑(实际上这个玩意在审美上并没有什么先进性,几乎就是前几年酸性设计中常用的液滴变形、水波折射等效果的精致和无聊版本,大众接受度也一般),而是从 XR 界面设计的「第一性原理」出发,创造出了一种逻辑坚实的新设计规范。
酸性风格的平面设计,这一张算是「口味清淡」的。Liquid Glass 属实已经被平面设计师们玩腻了。附:原本想用偶然看到的一段科幻影视作品作为反例,但无奈找不到。如果有人知道是什么剧或电影,欢迎告诉我!那段画面中出现了一种有着「纸张」质感的 XR 界面,恰好可以与液态玻璃形成绝佳的对照。
液态玻璃的当下新事物出现时,批评的声音总是更响亮。然而仅从发布会的情况来看,液态玻璃确实存在欠打磨的问题。
抛开所谓的「可读性」等过于个例化的问题不谈,我想,最大的问题是,液态玻璃有必要运用在手机 / 平板上吗?正如 watchOS 的界面是 iOS 界面的某种「简化版」,让 iOS / iPadOS 作为 visionOS 的简化版,这样「和而不同」的设计系统是不是也可行呢?
除了让用户提前熟悉并喜爱 Vision Pro 的交互方式之外,支持全平台液态玻璃化的猜想无外乎几点:
苹果已经在思考未来多设备间的信息 / 界面流转方式,例如尚未适配、不能自由变形的 iPhone 界面,流转到 XR 中,就以一片 iPhone 大小的玻璃片来承载;呼应将要推出的玻璃机身 iPhone(可能性不大。苹果近年来在硬件上玩玻璃的各种工艺,可能确实对设计液态玻璃有所帮助,但不太可能仅仅因为软硬件美学上的匹配,就去做设计上这么大的改变。反过来说,macOS 也用上了液态玻璃,难道要出一款玻璃机身的 MacBook 吗?);原本只是用于 visionOS 的设计,因为近年更新内容实在太少,所以顺势推广到全平台,填充发布会时长(?)。另一方面,反对全平台液态玻璃化的意见不胜枚举,此处不多赘述(欢迎在评论区补充),其中我最担心的,是今后的十年间,苹果和开发者的「审美博弈」可能引致的种种问题:对照当年推动扁平化设计的力度,如今的液态玻璃化力度可谓有增无减。然而,从 iOS 7 至今,对苹果的界面框架不屑一顾的各大厂自行完成的扁平化 UI 中存在各种让人如鲠在喉的微妙偏差;将来的液态玻璃界面若也任由各家自由发挥,恐怕又是新一轮的美学和性能灾难。
iOS 7 时代:家家都「扁」,各个不同。液态玻璃的将来一种设计风格,总是从新鲜走向平常,从激进走向平庸,从锐利走向柔和,从规整走向混乱,这似乎也符合自然界「熵增」的原理。
我们必须要接受一个前提:Vision Pro 几乎是全世界第一款真正拓展设计边界的「双目设备」,而目前为止其他所有带有 UI 的设备,无一例外都是「单目设备」。在双目映射的三维空间中做信息的分层分区,是 UI 设计上前所未有的挑战,而苹果处心积虑交出的液态玻璃答卷,也有相当大的可能会失败。
我始终忘不了当年初见 Android 4.0 的 Holo 设计时的惊讶,这也太帅了!和 iOS 那种老气的拟物画风太不一样了!所以苹果用液态玻璃教育了用户之后,其他厂商是否可能站在苹果的肩膀上摘桃子?尤其是那些重视设计、又愿意投入重金的 AI 独角兽,是否能够发明出一种比液态玻璃更好的「数字材质」,非常值得期待。(是的,还没用上液态玻璃,我就已经在盼着它过时了……)
当时觉得 Android 的 Holo Design(右)比 iOS 酷得多。回到主题。液态玻璃尝试用一种材质去为交互空间分区,这种划分(以未来的眼光来看)无疑是生硬的、低效的。打比方来说,就好像初学摄影时练习使用取景器,我们不得不将眼睛凑到取景器前,才能准确把握取景范围——取景器内的,才是我能拍到的;取景器外,被黑色遮挡,什么都看不见。然而随着练习的积累、意识的进步,你拥有了一对 photographer‘s eyes,你不再需要取景器,只需要眼睛的快速聚焦、至多用手指比划一个方框,就能对最终成片了然于胸。
我们对 XR 界面的理解也将走过这样一个过程,液态玻璃只是我们现在不得不使用的「取景器」,而且不光是我们需要它,连创造 XR 交互界面的设计师也同样需要它。想象未来的 XR 界面能有多自然,或许可以为我们想象 after Liquid Glass 的交互方式有所帮助:
透过头戴式显示器,我看向我的狗狗,房间微微变暗,狗狗的周身泛起微光。轻柔的交互提示音响起,几条建议选项浮现在我的近前,我在空气中轻点第一个选项,为它明天的疫苗注射新建日程提醒。选项文字化作一个小光球,飞向我腕上的智能手表,手表轻轻震动以示接收,恰如有人向我的信箱中投入一封信……
最后,基本完稿之后,才看到这篇文章:Liquid Design Isn’t Aesthetic Flair — It’s Apple Leading the Way to the Spatial Future by Ritesh Tiwari