少数派·China·Monday, September 28, 2026 at 07:00 AM

比起折痕， iPhone Duo 的交互设计更加令人着迷

Translate

阿斯巴盐

在发布会之前，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 设计师在具体的问题、在软硬件、用户场景、交互形态彻底发生改变的时候，体现出来的「元设计原则」，会更加具有价值。

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

从 Chan 的分享推导出来的「元设计原则」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「书」的隐喻重塑了 Duo 的设计起点

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

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

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

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

“It can be used partially folded, like a book.”
它可以像一本书那样，半折着使用。
——《Design for iPhone Duo》

而这种围绕「书」来展开的设计隐喻，贯穿了视觉、交互和开发。

用「书」的隐喻进行搭建

我们拿起一本书，不需要先决定它应该展开到哪个标准角度。两页可以承载一张跨页照片，也可以各自呈现内容；书脊连接两边，又会在半开时影响观看。打开一半，可能正好适合握着读，完全摊开，则让两边的内容同时进入视野。

这些平常得很少需要说明的经验，放到折叠屏上，却对应着一组具体的设计问题：机身怎样打开，内容怎样分布，弯曲的中间区域会影响什么，以及两侧怎样在变化中保持关系。

「手机加平板」是很好的「经验延续」，它告诉用户屏幕之间的映射关系，但是「书」的隐喻则进一步，提供了一套更加深入的原型，用户对于开合过程、两侧关系和握持方式会有更加明确的映射。

在我看来，这正是「书」能够成为 Duo 设计主线的原因。原本散落在硬件、视觉和交互中的问题，有了可以一起讨论的空间。Apple在教程中明确使用了书的类比；将它与展开动画、侧边控件进一步串联起来，则是本文沿着这条线索所作的分析。

这也延续着早期 Macintosh 通过熟悉事物帮助人理解数字界面的思路。不过，隐喻并不要求把现实物体的限制完整搬过来。1987 年 HIG 在讨论隐喻时，留下过一句重要的提醒：

“The metaphor need not be taken to its logical extremes.”
不必把隐喻推演到逻辑上的极端。
——《Human Interface Guidelines: The Apple Desktop Interface》（1987）

书中的跨页照片可能被书脊挡住，数字界面里的内容与控件却可以调整位置；纸页只能显示印好的内容，数字界面可以根据任务收起列表、展开控制。借用书的经验，是为了让人更容易理解这片空间，具体安排仍然要服从数字内容与操作的需要。

因此，Dock 的位置需要考虑内容空间与手指可达性，玻璃材质需要解释控件的存在与层次。它们可以共同服务于这本能够展开的「书」，但每个部件不必都有一个对应的纸质物品。

用动画效果重塑具有真实感的虚拟空间

这套空间经验，在展开动画里有一处尤其直观的表现，也是 Duo 的演示中最让我想反复看的一处设计。

从合拢到展开，外屏这一侧对应的半边内屏，先呈现出一片柔化的光色。随着机身继续打开，模糊逐渐减弱，沙丘与山脊的轮廓显露出来，最后与另一半接成完整的锁屏。演示中的两侧并非始终保持相同的清晰度，正在展开的那一侧，承担着更明显的视觉变化。

*《Leverage multiple displays and scenes on iPhone Duo》*

用户展开机身，一边看见画面逐渐铺开。硬件的动作与软件的变化，在这一小段过程中对应了起来。相比直接亮起一块完整的大屏，这个过程让人有机会看懂，眼前的内容怎样从原先的显示范围，延伸到新的空间。

「书」与 Liquid Glass 在这里提供了两种可以配合的经验。书页绕着书脊转动，逐渐朝向观看者，解释了展开的次序与可见范围；玻璃在不同观看角度下呈现出的光色变化，则为这段过程提供了一种材质上的联想。它在模拟真实书展开的方式，又贴合Liquid Glass 的材质特点。

这当然不是纸页光学现象的完整复刻。纸页并不必然随着转动而模糊，玻璃的倾斜也不能单独解释演示中的全部效果。值得关注的，是软件选择用逐渐清晰的画面，让这片正在展开的虚拟3D空间变得「似乎是真的存在」。

Chan 在 2025 年的《Meet Liquid Glass》中，谈过透明物体怎样通过光线的弯曲传达自身的存在、形态与运动，也明确将视觉和运动作为整体设计。他在介绍材质的显现与消隐时说：

“Instead of fading, Liquid Glass objects materialize in and out by gradually modulating the light bending and lensing, ensuring a graceful transition that preserves the optical integrity of the material.”
Liquid Glass 对象通过逐步调整光线弯曲与透镜效果来显现和消隐，使过渡过程保持材质在光学表现上的完整性，而不是简单淡入淡出。
——《Meet Liquid Glass》，WWDC 2025

沿着这个思路看 iPhone Duo，模糊与清晰度的变化，可以被理解为对表面姿态变化的视觉解释。这里讨论的是两者在设计方法上的联系，现有材料并没有交代这段展开效果的具体渲染算法，也不能据此确定模糊程度与铰链角度之间的精确对应关系。

它又接回了 Chan 在 2018 年讨论的那个前提：人在动作中观察反馈，也会据此调整接下来的动作。展示一次顺利展开，还不足以证明停顿、折返时都能同样跟手，但它已经让开合获得了可见的回应。在触碰应用里的按钮之前，打开机身本身，就已经是一次交互。

「书」为这片空间提供了熟悉的组织方式，材质与运动则让展开的过程可以被理解。接下来更实际的问题是：用户手会怎么放置？内容可以随着屏幕铺开，那些用了多年的操作入口，又应该放在哪里？

Dock 和工具栏为什么需要换一个位置？

回到发布会，最醒目的变化之一，自然是竖起来的 Dock，以及移到侧边的导航和工具。

过去的 iPhone 大多是一块相对纵向狭长的屏幕。顶部安排导航，底部放置标签与工具，中间留给内容，这套布局已经成为使用习惯。这套习惯和「共识」已经扎实到绝大多数不会去考虑换掉它。

右侧竖排工具栏和 Dock 的合理性

「书」是 Duo 设计的主线。就像「卡片」是 webOS 的设计支点，「数字纸」是 Material Design 的核心隐喻，「液态玻璃」是 Liquid Glass 的设计关键。当人握住书的时候，多数时候会选择握住书的一侧，尤其是右侧，哪怕是 A7 尺寸的护照和护照本。

相应的，展开之后的 iPhone Duo ，就如同护照展开，将 Dock 置于底部的设计绝对不会是一个跟手的位置。

iPhone Duo 合拢后的外屏更宽，继续在上下两端铺设控制栏，会占去一部分本就有限的纵向空间；握着手机的拇指，也不会因为屏幕面积增加就凭空长出一截，但是移动到侧面，无疑会合理得多。

按钮放在老地方，形式上当然让用户感到熟悉。但使用条件已经改变，同样的位置未必仍然好用。顶部和底部并不是不能动的祖制，只要调整之后，用户仍然得找得到、够得着，也记得住，足够跟手，就是好的设计。

这种设计真正巧妙的地方在于，传统的 UI 界面顶部和底部用于交互的控制组件，独立出来，统一移动到右侧拇指握住屏幕的位置，就像把屏幕的上下两块切下来，旋转 90 度之后拼到侧面，而原本承载上下滚动浏览的内容部分，则保留在原来的位置。

在《Raise the bar with iPhone Duo》这个视频中，Apple 将保留纵向内容空间、改善可达性，列为控制栏移向侧边的直接理由。讲座讨论的是应用内的导航栏、工具栏和标签栏；它们与用于进入、切换应用的 Dock 职责不同，但在这款设备上，都沿侧边来排布操作入口。

这样的设计，让原本成熟的、明确的 iOS 应用组件，都有了明确的去处，为 iPhone Duo 的应用适配提供了明确的方向，而不会出现简单粗暴的缩放、留白，开发者也无需为此八仙过海、各开脑洞，导致适配效果千奇百怪这样的结局。

内外屏工具栏的设计延续性

更值得注意的，是这种变化在开合前后的延续性。

把合拢的外屏与横向展开的内屏放在一起看，常用控件仍然沿着右侧外缘排列。屏幕变宽了，内容可以多铺开一列，而交互的入口却保留在了原来的位置，也就是屏幕右侧。

但是 iPhone Duo 和其他同类的折叠屏设备，会存在一个问题，屏幕折叠状态、朝向会一直发生变化，每种形态之下，你的工具栏、交互模式，似乎都要重新做适配。比如，内屏展开状态下，将内屏转成竖向后，控制栏不会一直在右侧，而是会回到水平布局。因此，这里值得讨论的，是一组常见的使用情境之间的衔接，而非所有姿态下都固定不动的粗暴适配。

承载推送信息和状态通知的灵动岛/摄像头，提供高频交互的共享工具栏，距离虎口和拇指最近的侧边，就是整套设计规范所精心挑选的锚点，无论怎么旋转和折叠，这个以摄像头为转轴的工具栏（绝大多数场景下都是完全不变的），还真的就像刻舟求剑一样，成为了不变的锚点。

在上面这个案例当中，外屏的横向布局之下，共享工具栏的展开依然遵循着围绕镜头/灵动岛来延伸排布的核心逻辑。

“Because controls on the vertical axis stay aligned with the hardware, they hold the same position relative to the camera on the outer display, and stay on the same side in right-to-left languages.”
由于纵向上的控件始终与硬件对齐，它们在外屏上与摄像头保持相对固定的位置，在从右向左书写的语言中也保持在同侧。
——Apple HIG：Designing for iPhone Duo / Vertical controls

即使是内屏同时开两个 APP 分列两侧的情形，它也将工具栏的位置，进行镜像排列，进一步强调这种围绕侧边栏和镜头/灵动岛的排布逻辑。

这也让我重新想到「书」的隐喻。

书页可以展开，眼前的内容可以从一面变成两面，边缘仍然提供着握持与定位的参照。竖起来的 Dock，很容易让人联想到贴在书页边缘的一枚书签。这个联想有趣的地方，在于内容不断变化时，仍然有一个容易找到的入口，就像「书签」永远是你定位到上一次在「书」中阅读位置的不变的锚点。

它并不意味着 Dock 会像书签一样记录阅读进度，也不能直接证明侧边布局就是从书签推导出来的；这是我借助「书」来理解这套界面的一种方式。

明确的锚点和连贯的空间

Chan 在 2018 年讨论过与此相通的问题：运动中的界面，需要维持空间上的一致性。页面从右边进入，返回时也从右边退出，人便能够借助这条路径理解界面在虚拟空间中的位置，并预判接下来的手势。界面里的东西可以移动，但移动需要符合已经建立的空间认识。

之前基于 Chan 的分享，也推导出了相应的原则：

空间连贯：形态可以改变，已经理解的关系应当保持连续性。

沿着这个思路看 Duo，值得保留的空间参照，就不只是页面的来路与去处，还有位于侧面的最高频度的操作入口。

iPhone Duo 在展开或者闭合前后，屏幕中心、内容宽度和栏目数量、横竖方向都可能发生变化，但是最常用的控制组件永远会沿着熟悉的边缘来排列，就像你在之前的 iPhone 上永远会下意识去顶部和底部找工具一样。在这里保持连续性的是「你要的操作就在右手的侧边栏」的预期，而非每一个按钮完全不变的坐标，或者等待开发者灵光一闪重新布局的新的按钮位置。

当然，新的iPhone Duo 设计规范也不是完全写死的规则。设备边缘（绝大多数时候是右侧）排布控件只是其中一层参照。工具与它所操作的内容之间，还有另一层不能随意打破的关系。

HIG 对此有一句直接的要求：

“Locate controls near the content they affect.”
将控件放在它所影响到的内容附近。
——Apple HIG：Designing for iPhone Duo / Vertical controls

管理邮件列表的工具，就应当让人看得出它属于列表；处理单封邮件的操作，也不能与之混在一起。分栏界面中的工具，并不会为了排出整齐的一条侧栏，就全部搬到最右边。控制栏讲座同样强调，控件需要保持与所属容器的关联。

这两层要求放在一起，侧边布局的逻辑就基本完整了。设备形态发生改变，控件可以重新安排位置；但用户寻找操作入口、辨认工具归属时所依赖的关系，不仅有明确的锚点，还遵循着和之前类似的空间关系。屏幕尺寸改变了，APP 形态改变了，工具栏的大小都在变，但是空间位置和组件位置大致不变，交互方式和逻辑清晰且保持连续性。

这也是我认为 Duo 与 Chan 先前分享最值得联系起来的地方。所谓回到人的使用处境，具体到这里，就是重新检查那些早已熟悉的位置：哪些位置仍然方便，哪些已经需要调整，调整以后又该留下什么参照。屏幕提供了更大的布局自由，设计也因此需要更认真地处理用户已经形成的认识。

铰链转动时，UI 控件需要应对更多的变化

iPhone Duo 多出的不只是一套柔性的内屏，还有一个关键的交互要素，铰链。

当铰链转动的时候，问题就又多了一层。它一边承接用户的操作，一边改变屏幕的形状。用户打开的已经不只是一块更大的显示区域，观看角度、点按位置和可用空间也在同一个过程中持续变化。

这也是 Duo 的交互比普通尺寸适配更复杂的地方。合上、半开、完全展开，只是几个容易命名的状态。人在这些状态之间停住、折回或继续展开，同样属于真实交互的过程，在状态和情境上，也存在差异。

铰链既是转轴，也是输入的变量

Apple 给 APP 提供了两类铰链的数据信息。一类信息会表明设备当前合上、部分打开还是完全展开，可以理解为几个明确的档位；另一类持续报告铰链的转动角度。前者适合判断屏幕现在处于哪种形态，后者适合让效果紧跟手上的动作。

《Leverage multiple displays and scenes on iPhone Duo》这个视频使用一把虚拟吉他作为直观的案例。案例中铰链就像吉他的摇把，音高随着角度连续变化。屏幕角度随着手腕只转动一点，声音立刻随之变动，在中途反向转动，音高也需要跟着降低。这里铰链的角度变化，直接成为演奏的一部分。这个案例很好地演示了铰链作为变量的可能性。

而之前让人惊艳的开屏幕动画效果当中，模糊程度的变化过程恰恰就是根据铰链的转动角度来进行识别，这也是铰链角度状态最简单直观的应用之一。

与此同时，铰链角度变化的数据，则成为连接不同开合状态的桥梁，这也使得从一个状态到另外一个状态的过程中，UI 具体控件的每一个变化，都有了明确的依据。

「过程可控」的原则，在这里有了更具体的含义。设计需要兼顾整个动作过程，同时也要判断哪些变化值得立即反馈，哪些 UI 应该保持稳定。持续回应和保持稳定并不冲突，它们共同保证人可以控制动作，也可以看清下一步。

多变的「书」，必须搭配灵活的控件

内外双屏设备的「尺寸适配」永远只是权宜之计，「交互兼容」必然是一件复杂的事情。这本数字之书不会如同印刷品一样等候安静阅读，双屏之间的空间变化，内屏角度和状态的变化，每一个 APP 都需要认真应对，随之变化。Apple 目前给到的这套方案，虽不一定完美，但是在很多场景下已经是最佳实践。

设备半折时，内屏中央会形成一块不适宜显示和阅读的的弯曲区域。《Strike a pose with adaptive layouts on iPhone Duo》这个讲座中，用一本真正的书和跨页图片来解释这种不够便利的情境，iPhone Duo 的内容和控件跨过折叠区域时，也会遇到相似的问题。

最直接的处理，是把靠近中央的内容全部推向两侧。Apple 在后面的演示里作了更细致的区分。比如平摊状态下居中的弹出框会移动到一侧，来确保可读性，而附带菜单的图片所构成的一对关联组件，则会自动分布到铰链两侧，但同时会靠近居中的铰链，来强调两者之间的关联性。这毫无疑问也是「空间连贯」这个原则的应用。

另一方面，文章、信息流、文档和列表的处理又有所不同。它们本来就能上下滚动，显示在折痕附近的内容，可以随着滚动离开中央。为了当前受到影响的一小段内容，让整篇文章突然跳向另一侧，或者突然间拆分整个布局，反而会打断阅读。不过在设计上，这些微妙的变化需要变化多少，取决于内容是否还能看清，用户的手指能否点中；哪些东西需要一起移动，则取决于它们原来是什么关系。

提示框的位置变化，则更加典型。平铺状态下弹出框居中，像书一样半折时，提示框会自主移动到靠近共享工具栏的右侧，合上竖屏状态下和手机常规弹出框一样重回居中。但是更有意思的地方在于，当 iPhone Duo 如同笔记本电脑一样支在桌面上之时，使用情境再次改变，最佳视角集中在旋转弯折之后的上屏，于是，作为关键信息的弹出框自然移动到上屏。

但是在播放界面下，播放的内容才是信息消费的主体，控制播放的控件对应的交互相对低频，自然就置于和视角不平行的下屏，这种切割也贴合「情境先行」的原则。

「情境」即是交互的「上下文」，到了这里已经非常具体，而设计主要依靠这些要素来进行判断：眼睛从多远的地方看，主要看的是什么，手指在哪一块屏幕上操作，控件属于哪项内容，摊开的时候页面怎么组织，合上以后哪些会折叠，哪些保持显示，等等等等。

更具体的设计细节，在今天这篇尝试溯源的文章很难全部说完，但是文末来源链接当中，会包含所有的相关的设计规范、WWDC 视频和面向设计师和开发者的 Teck Talk 视频。

结语

iPhone Duo 这台手机到底怎么样，恐怕结论需要等到半年甚至一年之后，才会有足够冷静、清晰的结论。我最初的关注点，其实是它的折痕是否真的不那么明显。但是显然，比起硬件，Apple 在设计上投入的心力可能更容易看到效果。

从 Macintosh 到 Chan，再到 iPhone Duo 的 iOS 设计适配，比起「设计演化」这种定义，我更愿意把这条线索理解为一种持续重新提问的能力。熟悉的卡片依然是常规的信息组织方式，沿用了多年的工具栏需要重新规划可用性和易用性，开合这样简单的动作演化出复杂的场景，其中也藏着停留、折返和继续工作的不同需求。

「书」的隐喻让这些变化有了容易理解的起点。此后，iOS 的软件要让 UI 组件的变化、收纳和避让有充分的理由，让用户可以看清反馈，持续交互，也能随时改变主意。第一章末尾归纳的那些原则，至此才落实到具体的操作里。

阅读规范，查看官方的视频，其实可以非常清晰感受到新系统和新规范的复杂度，这个过程有点头疼，但是也充满乐趣。

引用与资料来源

View the original on 少数派 →

KioskNews shows a cleaned-up reading view extracted from the publisher’s page — the original always lives on their site, not ours.