在发布会之前,iPhone Duo 中间的折痕是否明显,会不会超越目前已有的折叠屏手机,是我最关心的事情。但是当 iPhone Duo 的宣传视频出来的时候,Apple 为折叠屏设备交上的交互设计方案,是更加令我在着迷的事情。

折叠屏设备天然就面对复杂的形态和使用场景。早在微软端出 Surface Duo 的时候,Fluent Design 的官方页面上就提供了一套堪称繁杂的产品使用形态描述和交互逻辑的梳理。

这套不算成熟的交互在实际的响应上受限于硬件响应迟缓,在系统上同样被 Android 生态过于自由所拖累,整个系统实际上即使按照交互逻辑来使用同样一言难尽。Surface Duo 系列历经 2 代而亡,是非常合理的止损。不过这套不算成熟的设计,为后续的柔性折叠屏设备趟出了早期的道路。

不过,问题无法回避。沿袭自普通智能机的交互逻辑,融入一部分平板式布局来适配内屏,加上一些不算复杂的分屏交互,折叠屏的交互设计其实一直都算不上规范化。

新任 CEO 特努斯在接受采访的时候,多次提到他们不会推出不成熟的产品。发布会之后,Apple 官方设计规范上线,官方开发者网站的 6 个 Tecktalk 视频发布,藏在 iPhone Duo 发布会和宣发视频背后的设计逻辑,逐渐清晰。从我的视角来看,iPhone Duo 的这套系统交互设计,有可能还真的是目前的「最佳实践」。

更有意思的是,Duo 背后的设计脉络可以追溯到更久之前的过去。

事实上,在 2012 年移动端设计爆发式发展之后,交互设计的「共识」越多,厂商就越趋向于更少探讨底层逻辑和原理(这也使得锤科在某种程度上显得弥足珍贵)。如今移动端设计在某种意义上更趋近于乐高式的组合,导航栏、瓷片区、金刚区,类似这样的融合了运营概念、功能指向和视觉要素的 UI 模组,是设计系统进化到今天之后诞生的高度特化的模块,似乎让界面更加乐高化,而设计的起点也无需从人开始,似乎可以直接从这些模块开始即可。

相应的,UI 界面开始高度趋同,风味近似。但是在双屏出现之后,这种趋同可能是所有问题当中最小的——几乎所有的双屏乃至三屏用户都在关心,XX 应用什么时候给 XX 手机做适配,而这种适配多数时候也仅仅只是让界面周边的留白和排版,在展开的内屏上,显得不那么突兀而已。面对复杂的硬件和场景,厂商也好,应用也罢,「适配」追求的仅仅是「够用」,更像是某种权宜之计,而非从用户出发的解决方案。

1987 年的 Apple 出版了《Human Interface Guidelines》,第一章的标题是 Philosophy,关于人与工具的关系,书里有一句话说得很直白:

People aren't trying to use computers—they're trying to get their jobs done.

大家从来都是想搞定手头的工作,使用电脑并非最终的目的。

Apple《Human Interface Guidelines: The Apple Desktop Interface》(1987)

Apple 在最早的这份规范当中,先讨论使用者/用户本身,随后才进入到设计的隐喻,然后再推导直接操作、一致性的原则与反馈机制。人的目标是搞定自己的事情。界面应该让人能够进行探索,用户能控制操作过程,并预判行动的结果。这是 HIG 对用户的基本理解,窗口、菜单和图标则需要在这个前提下得到解释。

即使是设计师也经常习惯于从范式开始,但是很多问题需要回退到更原始的场景、用户的意图,要从哪里开始设计,怎样在不重新造轮子的前提下,真正创建贴合新场景的产品,这是 iOS、Mac OS X 、iPadOS 需要考虑的问题。

新的硬件和新的场景出现,设计和交互的逻辑、策略,需要重新回溯到「人本身」再推导、重梳理,然后出发。

最开始让我注意到 Apple 这套习惯的,是设计师 Chan Karunamuni 在 WWDC 上的分享。

在 Apple 出版那套人机设计规范 31 年后,2018 年的 WWDC 上 《Designing Fluid Interfaces》的开场部分,设计师 Chan Karunamuni 花了相当多的时间解释交互设计的底层逻辑。人并不是每次都想好了完整的指令,身体才开始行动。推到一半可以停,方向不对可以改,我们会看着反馈不断调整接下来的动作。

相比于「学习如何使用 UI」,让 UI 界面学会适应人的机制更加合理。这套应用在 iPhone X 上的卡片式交互,在我看来是更加趋近于阶段性成熟的解决方案。随着 webOS 问世的这套卡片交互机制问世于 2009 年 1 月,距离这场 2018 年的 WWDC,时间已经过去了快 10 年。

webOS 在交互隐喻在现代交互设计上的贡献毋庸置疑。而 Chan 和 Apple 对于交互细节的推演,将卡片交互的颗粒度进行更深细腻的处理,移动端交互不再只是显性的回合制的操作和回馈,而是实时动态多变的一套繁复系统,软硬件开始为用户的每一个操作可能性做好应对和准备。

“So, it’s not that our interfaces should be fluid, it’s that we’re fluid, and our interfaces need to be able to respond to that.”

不是界面本身足够具有流动性,而是我们身为人一直在变化,界面需要能够对此作出相应的反馈。

——《Designing Fluid Interfaces》,WWDC 2018

机器当然无法直接「预测」用户的手指怎么运动,但是硬件可以观察手指停顿时的加速度变化:停得越快,变化越明显,系统就越快识别这次动作转向。这种对于用户动作和行为的理解,对于「上下文」的琢磨,在此后推导到了更多设计细节当中。

从 2018 年的这场《Designing Fluid Interfaces》开始,我开始关注到 Chan Karunamuni,他除了 2018 年这场分享以及偶尔在 Twitter 上发一发设计案例之外,他最有价值的分享,分别是 2023 年 WWDC 上针对灵动岛设计的分享,以及 2025 年针对全新的 Liquid Glass 的分享。身为交互设计师的他,总会在这些分享中透露一些非常有趣的设计范式和探索的思路。

在 2023 年WWDC 上,Chan 在关于灵动岛的分享中,有一处很小的布局设计,值得停下来看看。

灵动岛需要随着实时活动的变化,展开、收起,容纳不同数量的信息。设计师很容易将注意力放在每一种状态内部:如何利用空间,怎样安排图形与文字。Chan 则提醒,设计展开后的视图时,还需要照顾到它展开之前的样子:

“When laying out your expanded view, try and maintain the relative placement of things between the two views. That way there’s a coherence between them.”

设计展开视图时,尽量维持元素在两种视图中的相对位置,让它们之间保持连贯。

——《Design dynamic Live Activities》,WWDC 2023

这句话看起来只是在讨论排版,却把变化前后的两次观看联系了起来。用户刚刚在较小的灵动岛里辨认过信息,展开之后,这些信息的相对位置仍然能够帮助他继续寻找。 UI 可以随着交互需要变大,信息量也可以增加,但是用户刚刚建立的认知、布局的感知,则不应该随之丢弃,而应该保持延续。

而这其中的细致考量是值得关注的。一个控件有多少种形态,是很容易看见的,而用户在面对这些形态之间切换时,是否需要重新辨认一遍里面的东西,则很容易被略过的事情。Chan 将这个问题明确地放进了设计要求之中。

到了 2025 年《Meet Liquid Glass》的开场,他又将这类设计经验,放进了一段更长的历史:

“It builds on learnings from all the way from the Aqua user interface of Mac OS X, through to the realtime blurs of iOS 7, to the fluidity of iPhone X, the flexibility of the Dynamic Island, and the immersive interface of visionOS.”

它建立在一路积累的经验之上:从 Mac OS X 的 Aqua 界面,到 iOS 7 的实时模糊、iPhone X 的流畅交互、灵动岛的灵活变化,以及 visionOS 的沉浸式界面。

——《Meet Liquid Glass》, WWDC 2025

如果你关注过 Apple 在 Mac 和 iOS 视觉发展历程,应该很容易注意到这当中潜藏的 Apple 手头积累的丰富设计资产。这句话不仅仅是对视觉的描述,Chan 将材质、实时模糊、手势交互和控件的形态变化,放在了同一条经验积累的线上。沿着这条线看,Liquid Glass 与过去设计之间的联系,也就超出了玻璃、高光这些外观上的相似,而是整个 Apple 设计发展史关键点的叠加,一种带有传承意味的总结。

这为我此前感受到的延续性,提供了一处明确的依据。那些已经在不同产品中被讨论、尝试过的设计问题,会随着硬件和使用条件的变化,再次进入设计师的视野。新的视觉语言,也可以成为重新组织这些经验的机会。

当然,Chan 的这两场分享远不止这些内容,但这两处已经足以让人继续追问:从 iPhone X 到灵动岛,再到 Liquid Glass,哪些判断方式在不同的设计中反复出现?而这些藏在规则之下的方法,不断浮现的更加底层的策略,是否是更有价值的「元设计原则」?更重要的是,相比于「流畅、自然、一致性」这种相对空泛、大而化之的原则,Chan 这样一线的 Apple 设计师在具体的问题、在软硬件、用户场景、交互形态彻底发生改变的时候,体现出来的「元设计原则」,会更加具有价值。

于是,沿着这些线索,我梳理出来了下面的内容。

回到这几次 WWDC 的分享,Chan 当然不是这些交互设计的唯一贡献者,但他的讲解,让那些被我们概括为「自然」「流畅」的体验,有了可以追溯的设计依据。人的动作怎样发生,意图怎样改变,一个东西换了位置之后,我们又怎样认出它,这些细小的问题,实际决定着交互能否成立。

把这些分享与前面的 HIG、后文的适配设计放在一起,我愿意将其中相通的判断方式,归纳为几条「元设计原则」。这是本文的归纳,并非 Apple 正式命名的一套理论。之所以使用「元」这个字,是因为它们涉及更靠前的判断:在规定按钮放在哪里、界面怎样变化之前,先弄清这些安排应当依据什么。

情境先行:从人正在做的事情出发。

同一个功能,在不同处境下,未必能够采用相同的设计。用户正在看什么,手怎样握着设备,注意力能停留多久,都会影响界面的组织方式。沿用旧布局,或者打破旧布局,都需要回到这些具体条件中讨论。熟悉的设计值得保留,但使用条件改变以后,它是否仍然合适,还需要重新判断。

过程可控:动作开始以后,人仍然可以改变主意。

Chan 在 2018 年的 WWDC 上讨论的一个重要前提,是思考与动作可以同时发生。人会在操作中停顿、试探、转向,界面需要继续回应这些变化。因此,拖动、展开和切换的设计要覆盖整个过程:如果手还在动,那么控制权就不应当提前交给一段只能等待结束的动画。

空间连贯:形态可以改变,但是内在关系应当保持连续性。

页面从哪里进入,返回时又会跳转到哪里;菜单属于哪个按钮,控件对应哪部分内容,这些关系帮助用户理解界面的逻辑。保持连贯,并不要求所有东西固定在原来的坐标上。灵动岛可以改变大小,里面的信息也可以重新安排,但相对位置仍应帮助人认出变化前后的联系。

任务连续:呈现方式发生了改变,但是正在做的事情仍然接得上。

沿着这种对连续性的重视,还需要再往前再推导一下。空间缩小以后,一些信息可以暂时收起,但正在阅读的内容、已经作出的选择、尚未完成的输入,都应当被认真地保留下来。界面适应了新的尺寸,人也应当能够接着做刚才的事情,而不是重新寻找内容、重新建立认知的起点。

反馈明确:让人理解自己的动作正在带来什么变化。

UI 的反馈,需要让人知道动作已经被接收、对象正在怎样变化,以及接下来可以做什么。材质与运动也承担着这项工作。Chan 在 Liquid Glass 的分享中,将视觉与运动作为一体讨论:按钮展开成菜单,连续变化的轮廓能够解释两者的关系;光线与形变,也可以让操作得到及时、可感知的回应。效果的价值,要放在它说明了什么之中判断。

经验迁移:让已有经验帮助人理解新的交互。

面对 iPhone Duo 的时候,用户并非毫无经验地面对一块全新的屏幕。物体的惯性、空间中的远近、书页式的展开交互,以及长期使用界面形成的习惯,都可以帮助用户预判下一步。设计可以借用其中有用的关系,也可以舍弃现实物体的限制。隐喻的作用,是为陌生的操作提供一个理解的起点。

这些原则也给设计留下了检验的尺度:新的布局是否更符合当下的使用条件,变化是否仍然可控,原有的关系和任务是否得到保留。到了 iPhone Duo,屏幕本身开始改变形态,这些判断便有了更复杂的应用场景。而「书」,为这片不断变化的界面空间,提供了一种熟悉的组织方式。

往回追溯 50 年,Apple 骨子一直都是热衷于「拟物」。拟物从来都不是以物品为中心,而是要将现实世界的经验,迁移到数字世界,让人更加沉浸、更好理解的核心手段。

折叠屏手机很容易被解释成一部手机加上一块平板。合上时用小屏,打开时用大屏,功能分配看起来已经很清楚了。但这种理解,更多是在描述两种完成后的状态。设备打开到一半时应该怎样使用,两边的内容怎样保持联系,人又该怎样理解这片正在变化的空间,还需要一个更具体的组织起点。

这一次,Apple 的设计团队很明确地选择了「书」作为设计的起点。面向普通用户的发布会和宣传视频中,并未直接点明这一层的隐喻。但是交互设计师和开发者的教程当中,这种体验和交互上的核心,直接展开在需要理解交互的设计师和开发者眼前。

在《Design for iPhone Duo》这个视频当中,直接借用了这个类比:

“It can be used partially folded, like a book.”

它可以像一本书那样,半折着使用。

… Trimmed for readability. Visit the source for the full article.

Extracted and lightly reformatted for readability. · Source: zh