iPhone Duo 的 Vertical Bar
我将上周称为同时关注任天堂和苹果的人最快乐的一周:任天堂开了新一场直面会,苹果也如预期一样发布了折叠屏手机 iPhone Duo。
今年的 WWDC 26 发布的内容,在视觉方面,对于中国大陆用户可以说没有什么大变动,反而是 iPhone Duo 的应用界面有很大的变化,这也是我一直在关注 Apple 折叠屏时最关心的点。熬夜看完发布会后的早上,我也第一时间看完了 Developer 的几个新视频。
软件上最明显一点变化是 Status Bar + Tab Bar + Toolbar 放到了右侧,官方名称是 Vertical Bar,在下面我会试图从苹果给出的这个「答案」,来推测一下这个设计的部分决策过程。
在正式的发布会前,从供应链硬件泄露的情况,我们已经知道了这款折叠屏的大致比例,我们按照自己的理解猜测了一个大致分辨率,为产品提前做了一些适配的设计稿,现在也证实了我们的猜测值和真实的非常接近。而在这个适配设计的过程中,我发现了一些简单适配后不自然的地方。
我们仅以折叠后的外屏来做计算,总体的屏幕面积没有太大变化,但是屏幕比例发生了很明显改变:宽度变宽和高度变小。在高度方面,回顾过往的手机不断的变化历程,基本是向屏幕比例变得更加修长的方向发展的,而这个高度一反常态地变小,在用户已经习惯看修长的手机内容时,就产生了一个特别的「问题」。
我们来做一道简单的数学题,以目前 17 Pro 的分辨率 402 x 874 来计算,减去标准 Status Bar + Tab Bar + Toolbar 的高度共 262,可视内容高度大概是 612 pt。
前两天苹果更新了设计文件,确认了 Duo 折叠后的外屏分辨率为 466 x 678,如果完全不变动任何的布局,减去上面 262 的高度后,可视内容的高度只剩下了 416 pt,和普通手机屏幕一对比,可以看到内容的可视高度变成了原来的 68%左右。
通俗点的形容就是,如果你在你的 17 Pro 上,屏幕上一共能显示 100 字,你买了新手机 iPhone Duo 后,你的屏幕变得只能显示 68 个字了。
为什么前面的问题两字加了引号,就是因为这个不自然的事实,有些人不一定会认为这是一件需要解决的事情。
另一方面,控件区域和内容区域的高度比例接近 0.6,也即 3:5,这种做法给我一种很像是在一个很小的模态弹窗内进行内容滚动的感觉,体验起来非常难受。
接下来看看苹果的处理方式,使用 Vertical Bar 后,这一列的宽度占据了 84 pt,内容宽度方面变回了 382 pt,跟 iPhone 15 Pro 的逻辑宽度接近,保证了宽度和普通手机不会相差太远。而高度方面,因为本来占据高度的几项控件都移动到了右侧,可视内容的高度就等于了整个屏幕高度即 678 pt。因此,相对于普通版的手机,尽管宽度稍微缩小了一些,但可视内容最终可能还会变多一些,至少任何一个人从现有的手机换到 iPhone Duo 后,都不会出现可见内容大幅度减少的情况,而相比于什么都不处理的方式适配,可视内容高度是它的 163%。
这就是我对苹果给出的「答案」的其中一点理解,从这个适配策略来看,可以看到苹果把「可视内容不会变化太多」放到了极高的优先级,不过这个设计本身肯定还有很多其他的决策因素,我的这点推测也仅仅是根据「答案」来写了一部分过程。
虽然 Vertical Bar 这个改动在可视内容上有它的合理性,但细看之下,其他方面需要处理的东西也非常多,Developer 的视频里一些其他值得关注的要点和疑惑点,我也一并列出来。
- Vertical Bar 中的灵动岛效果也变成纵向了;
- 菜单过多时放到 Vertical Bar 后的处理方式,官方给了两个参考方案:可以选择仅部分放在 Vertical Bar 中,或者通过分配优先级来优先显示,其他放在「更多」按钮中;
- Vertical Bar 中,返回按钮和上下 Chevron 图标放在一起时,以及 Sheet 全屏时,关闭和确认按钮会显示在 Vertical Bar 上,这两者看静态图都极具迷惑性;
- 实际上也允许操作放置于主内容区域,总结起来其实就是,根据功能的定义,选择合适的地方放置,并非必须全部放置到新的 Vertical Bar 中;

- Vertical Bar 需要适配成可以在左边或者右边显示,因为左右分屏后,应用的 Vertical Bar 分别在两个应用的左边和右边,这样有可能就会变成左边应用的返回在左上角,右边应用的返回在右上角摄像头下方;
- 官方演示了看视频时在横屏全屏、竖屏全屏,和分屏非 1:1 和 1:1 时切换的状态,这几个状态下视频都是 fit 屏幕尺寸,这意味着至少在三个状态下视频怎么都会被裁切掉,谁这么看视频啊…
- 完全展开时界面结构可以是非 1:1 布局,开始折叠后自动变成 1:1,弯曲处会变成视觉上自然的分隔线,这是 Duo 的应用设计里很特别的一点;

- 展开时可以通过 API 控制 Sheet 显示的位置,在左侧时关闭和确认按钮会在上方,右侧的在 Vertical Bar 上;


- 内屏允许和 iPad 一样创建多窗口实例,同时出现 Sheet 时,窗口的关闭按钮会同时出现在 Sheet 的左右两边;

- 官方提供了 API 可以获取铰链的角度;
- 内容允许仅部分超过 Vertical Bar 的安全区;
上面的一些改动,Apple 提到使用原生的控件会自动适配,而且从上面摘取的部分交互来看,第一个版本的观感有些地方还是比较混乱,不排除后续会有改动,如果要遵循官方的规范,这两点都让使用非原生开发适配 Duo 变得更麻烦一些。
文章写于 Xcode 27.1 发布前,部分凭视频猜测的内容可能和实际不一样。另外,我没有太多接触折叠屏的经验,硬件方面就不评价了。