iPhone Duo 来了！写给UI设计师的折叠屏适配思路

一、全文速览图

iPhone Duo 折叠手机在昨晚的苹果发布会中如期而至，成为 iPhone 家族的新系列机型。

但我们今天并不是要讨论硬件和分析选购条件的，这个价格也没有讨论的必要（毕竟它可以直接抢到不是）。我们主要要讨论的，就是移动端界面设计面向折叠屏的适配问题，因为这类设备的数量开始越来越多了。

光近几个月就发布了不少折叠机型，比如常规折叠 vivo X Fold6 和 OPPO Find N6，阔折叠有华为的 Pura X Max 和小米的 Xiaomi 18 Fold。

虽然安卓品牌每年都在发新机，但对市场的影响有限。但作为智能手机界的苹果，也跟着发布折叠机以后，情况就不一样了。

因为苹果凭借自身品牌的曝光度和影响力，会让折叠机的热度和普及度再上一个台阶。

所以作为 UI 设计师，我们就不得不正视折叠屏的适配问题，在前期的界面设计中就要考虑相关的框架设计标准。

二、折叠屏的类型认识

在了解适配之前，我们首先要认识折叠屏是一个泛指，并不是所有折叠都是一个规格，市面上目前存在的折叠屏可以简单分成三种，小折叠、普通折叠、阔折叠。

小折叠是尺寸最小的折叠，比如小米 Flip、三星 Galaxy Z Flip 等，可以概括成是将一个常规手机屏幕做出折叠的形态，所以展开内屏以后，和常规的手机屏幕别无二致，没有额外的适配要求。反而我们应该关注的是小屏状态的适配。

普通折叠，就是常规手机屏幕展开后，得到两个手机屏幕并排效果的接近正方形的内屏，是一种比较“奇葩”的尺寸。

阔折叠，是展开后接近 16:9 的平板比例的折叠屏类型，所以外屏只能做成比较矮胖的比例，是从今年才真正开始进入大众视野的折叠类型（以前的那些影响力太弱）。

这三类折叠屏的演进是由界面适配和前端工程决定的，认识它们背后的驱动因素对 UI 设计师来说非常有帮助。

第一台量产的折叠屏应该属于三星2019年2月发布的 Galaxy Fold，奠定了折叠屏的基础形态。即外屏使用起来像一台普通的手机，展开后可以获得更大的显示面积。

这里要重点注意，就是常规形态的折叠屏，它的决定因素其实是外屏，因为这类折叠屏首先要保证的就是外屏用起来像“一台正常的手机”。

所以外屏虽然宽度可能更窄一点，但整体比例和常规手机非常接近。但展开以后，得到的比例就会非常地“抽象了”，是以前任何 UI 设备都不会使用的接近正方形的比例。

这个比例之所以抽象，是因为它在很多场景的使用中都存在局限，比如看视频、玩游戏，比例不对要不然画面会被裁切，要不然上下就要留黑边。而常规应用要完美适配内屏也非常的困难，因为这个比例等于更改了应用原先的展示和交互逻辑。

折叠屏展开的最佳使用方法是开双应用，解决要同时多开应用的痛点，比如一边订票一边看攻略。而 OPPO、vivo 在这个方向上玩出了很多新的花样，把内屏的应用场景开发到了极致。

接着登场的就是小折叠，小折叠与其说是创新，不如说是翻盖机的“复古”，只是一种形式上的返祖。外屏基本只能用来接收消息，正常使用手机还要翻盖，完全是为了做而做，外观装饰性大于实用性的设备。

所以小折叠一直没有引起太多的关注，路上用的人也不多，属于我们可以先忽略的类型。

然后就到了阔折叠，阔折叠核心要解决的问题，就是普通折叠内屏比例不合理的问题。除了用户使用场景不满屏的核心痛点以外，更大的痛点是要解决开发者应用适配的难题。

相信大家都知道除了 iPad 以外，近几年安卓平板的发展也非常的迅猛，持有量节节攀升，主流安卓应用几乎都会主动适配平板设备。既然平板能适配，那么做一个和平板比例基本一样的折叠屏出来，就可以无缝衔接，解决普通折叠屏内屏适配率极低的尖锐问题。

同理，最近新推出的阔直板手机，也是基于这种比例和适配便捷性开发出来的（很多厂商准备跟进）。

苹果推出的首款折叠是阔折叠也考虑到这点，如果推出一个全新比例的屏幕让开发者适配，是完全不现实的。而如果展开的内屏和 iPad mini 使用相同的比例，那么就可以直接接入自己庞大的 iPad 应用生态，在最短的时间内提供给用户最成熟的系统体验。

所以，在最后我们可以总结出，做普通折叠和阔折叠的适配是两套方法，得先确认要适配的是哪种折叠类型，然后再使用对应的适配标准。

三、折叠屏的适配方式

我们先从普通的折叠屏适配说起，因为普通折叠屏适配难，比例像两台手机屏幕拼在一起，所以最常见的适配方式就是直接以双页的模式打开，即左边上级页面，右侧是展开的下级页面。

如果要应用平板的适配模式，那么普通折叠的高度又不够，导致可视区域不足，看起来非常的局促。

而面对安卓的阔折叠，那么适配逻辑就可以完全使用常规的平板适配逻辑，只要从设计之初让组件使用自动布局形式（布局尺寸变大元素移动）去适配屏幕尺寸变化即可。

再说 iPhone Duo 的适配，其实需要了解的要素并不多，主要就三个点：

1. 工具/导航栏的调节
2. 内屏横/竖屏布局适配
3. 不同产品形态适配

首先，工具/导航栏的变化。常规界面中工具和导航选项通常是放在页面的上方和底部，中间是内容区域。而在 Duo 中，这些操作选项被移动到右侧去并使用上下的分布，节省左侧内容区域的空间。

在这个设计模式下，内容只显示在左侧区域，这样不会和右侧的按钮叠加影响显示，同时和一般 iPhone 保持相同的主内容区域。

当然这个模式应该是可选的，如果我们要使用原始自定义布局直接应用进去应该也可以支持。具体的尺寸要等新的 iOS 官方组件库提供出来才能确定。

第二个问题就是内屏的布局适配，内屏作为一个 Mini 版的 iPad mini，多数应用应该都要支持它的横竖屏模式的有效显示。

首先说竖屏，它和手机比例是比较接近的，所以应用一般的组件自动布局就能适配，也就是常规的 iPad 平板的直接适配方式。

麻烦的是横屏模式，因为直接使用竖屏的逻辑去适配，是不可用的。横屏意味着要合理利用左右空间，就必须要直接调整这个页面的布局结构。而官方主要的建议就是左侧放边栏，右侧放内容和工具栏。

苹果现在很喜欢用侧边栏的原因，就是因为在横屏模式下，侧边栏会展开来占据一定的显示空间，让画面既包含交互的拓展性，也给内容更合理的展示区域比例。

但这是理想情况，因为如果我们没有使用官方布局框架来设计和开发前端页面，那么页面结构就可能完全不适用这套规则，比如点用户头像进个人主页左侧放什么菜单？

除此之外，官方还建议对页面进行布局的重新调整，比如下面这种做法，将封面放左侧列表放右侧。我只能说谢谢官方的建议，下次不要再建议了。

布局重排和网页响应式布局的逻辑是相同的，通过特定条件（网页是断点）触发同一个页面的不同布局样式。这种做法放在简单的页面里很容易实现，做个简单的位移和尺寸调整就好了。但放在复杂的页面中呢？以及你项目可能有很多页面，那就每个页面都要考虑重排的方式，这个工作量会大到非常夸张的地步（有AI编程也一样）。

所以即使是大厂的产品，只要产品页面复杂且数量多，对平板的支持基本处于“放弃治疗”的状态，因为要适配横屏的设计和开发成本是无法接受的，所以宁愿只使用最基础的自动布局适配模式。

又不是不能用.jpg

可以直接给一个结论，那就是如果你们的页面少而且特别简单，团队注重设计和体验，那么可以给页面都增加横屏的布局模式，这需要在前期完成全局交互框架的设计。

如果页面比较复杂，团队对设计师的重视程度没那么高，开发资源也不够多，那注定不会为了那么少的用户量（1W6起步价唷！）投入大量的精力适配，只会使用最基础的逻辑来适配。

还要记住一个基本的设计常识，那就是适配规则并不是万能的，在适配大屏上有很多问题是完全无法解决的。所以面向大屏，有些应用标题后面是会加 HD的……

当适配成本超过一定程度，那么开发者宁愿单独给 Pad 开发一个客户端，都比用一个客户端强行适配大小屏合理。而 Duo 后续大概率也会支持 iPad 应用的安装。所以前期不用太纠结于内屏的完整适配，要实现也是由团队推动而不是设计师推动。

第三个问题，就是 Duo 的其它硬件形态适配。除了外屏模式、内屏横屏、内屏竖屏外，还包括站立、半折、坐立等形态。具体可以看官方的手机介绍页面。

这只是硬件提供了更多的交互场景，但这不是必选项，要不要适配它们就不是设计的问题，而是产品决策，需要产品经理在需求端做确认再去适配，且不会所有页面都要去适配它们。

对 Duo 的适配介绍就先说到这里，更具体精细到像素尺寸的规则，就要等到后续官方组件库上架以后再分享了。

四、结尾

iPhone Duo 在短期内用户量会非常非常少，落实到真实工作中去适配的需求应该不会太多。但随着移动端机型规格的增加，未来要完整适配所有端的压力也会越来越大。

同时再强调一遍，那就是适配这件事靠 AI 也解决不了，得设计师自己做决策。

我们下篇再见~