# iPhone Duo UI UX 适配指南：折叠屏设计不是多做几个尺寸

原网页：https://www.jvds.cn/share/ui-design/iphone-duo-ui-ux-design-guide
语言：zh-CN
发布：2026-10-10
作者：界达设计 JVDS

iPhone Duo 带来的真正变化，不是设计软件里多出几个画板尺寸，而是同一个产品会在使用过程中持续改变可用空间、方向、分区方式和操控姿态。

如果团队仍按“手机端、平板端”两个静态端点工作，界面可能在完全展开时看起来正常，却会在半折叠、旋转、分屏或系统控件移动后出现信息断层。

JVDS 的判断是：折叠屏适配首先是状态系统设计，其次才是像素和组件适配。产品需要保持任务连续、信息层级稳定，并让布局根据空间重新组织，而不是机械缩放。

![苹果官方 iPhone Duo 展开状态邮件双栏界面](https://www.jvds.cn/upload/2026/1010/1791600645305-341577.png)

## 01 把六种设备姿态归纳为三类布局状态

设备可以闭合、展开、旋转或部分折叠，但产品团队不应该为每一种姿态建立完全独立的页面。这样会迅速产生多套逻辑、重复组件和难以维护的验收标准。

更可执行的做法，是先把界面归纳为三类状态：紧凑单列、宽屏双列和折叠分区。设备姿态只是触发条件，真正决定布局的应该是可用宽度、安全区域和内容关系。

紧凑单列用于外屏或窄窗口，重点是完成一个核心任务。宽屏双列用于展开内屏，可以同时展示主列表与详情。折叠分区用于铰链形成明显边界时，让上下或左右区域承担不同角色。

三类状态之间必须共享业务数据和操作进度。用户展开设备后，不应该重新进入页面、丢失输入内容，或发现刚才使用的功能突然消失。

![iPhone Duo 的不同设备姿态](https://www.jvds.cn/upload/2026/1010/1791600645295-162372.png)

## 02 侧边控件的目的不是新奇，而是把高度还给内容

iPhone Duo 在部分横向场景中把状态栏、工具栏或标签导航放到侧边，核心原因是设备更宽、更矮。继续占用上下空间，会压缩正文、视频、表格和任务操作区。

使用系统组件时，应优先接受系统提供的布局变化。系统控件能够根据方向和空间自动调整位置，也能更稳定地处理安全区域、辅助功能和未来系统更新。

自定义控件则需要回答三个问题：它是否必须常驻，它属于全局导航还是当前内容，它在空间不足时应该折叠、进入更多菜单，还是降低优先级。

侧边栏不是所有页面的统一答案。沉浸式图片、地图、视频和部分游戏界面可以让背景延伸到更大区域，但关键操作仍要避开系统保留区域，并保持足够的触控尺寸。

![侧边控件如何释放垂直内容空间](https://www.jvds.cn/upload/2026/1010/1791600645301-705386.png)

## 03 展开后不能只是拉宽内容

从外屏进入内屏后，最常见的错误是把卡片、输入框和正文直接拉长。页面虽然填满了屏幕，却没有增加信息价值，阅读行长反而可能变得难以控制。

宽屏适配应优先重组信息层级。列表与详情可以并排，筛选条件可以从抽屉变成固定侧栏，播放器可以与播放列表同屏，商品信息与操作区也可以形成稳定分栏。

是否增加第二列，要看它能否减少来回跳转。仅仅为了填空而增加推荐、广告或装饰模块，会让展开状态变得更吵，而不是更高效。

JVDS 通常先画信息关系，再画响应式界面。先确定哪些信息必须同时出现、哪些可以延后显示，再决定列数、比例、间距和断点。

![iPhone Duo 紧凑状态下的邮件界面](https://www.jvds.cn/upload/2026/1010/1791600645302-127083.png)

## 04 分屏界面中的操作必须靠近它影响的内容

当内屏同时显示列表和详情时，不能把所有按钮统一搬到最右侧。用户需要判断一个操作影响的是整个产品、当前详情，还是左侧列表中的选中项。

局部操作应靠近对应内容。例如邮件列表的筛选和新建操作属于列表区域，回复和转发属于详情区域。全局导航则应保持相对稳定，帮助用户理解自己仍处于同一产品中。

当工具栏空间不足时，压缩顺序应该跟随任务。以编辑、创建和处理为主的页面，应优先保留高频任务操作；以浏览和切换模块为主的页面，则应优先保留全局导航。

不要依赖固定坐标决定按钮位置。更可靠的设计交付物应描述操作分组、优先级和溢出规则，让开发可以根据真实可用空间进行布局。

![iPhone Duo 分栏界面的就近操作设计](https://www.jvds.cn/upload/2026/1010/1791600645303-558760.png)

## 05 铰链不是一条装饰线，而是条件性保留区域

折叠屏的中部区域会随着角度变化影响内容。完全展开时，它可能接近连续画布；部分折叠时，它会成为明显边界，系统弹窗、菜单和分栏需要避开这一区域。

设计稿不应简单画一条固定宽度的中线。更好的表达方式是标注安全区域、允许跨越的背景层、不可跨越的文字与按钮，以及折叠角度变化时的布局策略。

摄像头、动态状态区域和系统控件同样会改变可用空间。组件应该基于安全区域和布局边距工作，而不是依赖某一个设备截图中的绝对坐标。

重要标题、主要按钮、表单输入和关键数据不要压在折叠边界上。大面积背景、非关键图像或可以连续裁切的视觉内容，则可以跨越边界，维持画面完整感。

![iPhone Duo 外屏摄像头保留区域](https://www.jvds.cn/upload/2026/1010/1791600645303-890350.png)

![iPhone Duo 内屏摄像头与折叠区域](https://www.jvds.cn/upload/2026/1010/1791600645302-490895.png)

## 06 半折叠模式值得设计，但不是所有产品都需要专属界面

半折叠模式的价值来自新的使用方式，而不是设备看起来更特别。视频通话、拍摄、直播、演示和远程控制，可以把一侧作为内容区，另一侧作为控制区。

如果业务没有明确的上下分工，就不必为半折叠状态创造一套新流程。保持原有布局可用、内容不被遮挡、操作不会跳位，通常比增加低频功能更重要。

判断是否值得专项设计，可以看三个条件：设备能否独立放置，两个区域是否承担不同任务，以及这种姿态是否能明显减少用户的手持或切换成本。

半折叠界面还需要处理角度变化。接近展开或闭合的临界区间，不应频繁触发布局跳转。状态切换需要稳定阈值、过渡反馈和输入内容保护。

![iPhone Duo 计算器在不同屏幕状态下的布局变化](https://www.jvds.cn/upload/2026/1010/1791600645304-203411.png)

## 07 设计交付物必须从页面清单升级为状态矩阵

传统页面清单只说明有哪些页面，却无法描述同一页面在不同空间中的变化。折叠屏项目需要增加状态矩阵，记录布局、导航、工具栏、分栏和内容连续性。

组件规范也要写清响应行为。一个工具栏按钮至少需要定义常驻、低优先级、进入溢出菜单和隐藏四种可能，而不是只交付一个静态排列。

![空间不足时优先保留工具栏操作](https://www.jvds.cn/upload/2026/1010/1791600645304-773204.png)

![空间不足时优先保留标签导航](https://www.jvds.cn/upload/2026/1010/1791600645305-936898.png)

开发阶段应根据可用空间、尺寸类别和系统保留区域布局，避免用设备名称或固定宽度判断界面。未来设备尺寸变化时，这套逻辑仍能继续工作。

测试也不能只看几张设计稿。团队需要覆盖外屏、内屏、旋转、部分折叠、分屏窗口、文字放大和辅助功能，并验证任务是否能够连续完成。

## 08 iPhone Duo 适配检查清单

| 检查阶段 | 必须确认的问题 | 完成标准 |
| --- | --- | --- |
| 信息架构 | 展开后是否需要同时展示第二层信息 | 新增内容能够减少切换，而不是填满空间 |
| 布局状态 | 紧凑、宽屏和折叠分区如何切换 | 状态连续，输入和任务进度不会丢失 |
| 导航控件 | 侧边栏、工具栏和标签栏谁更重要 | 高频操作可见，低频操作有明确溢出路径 |
| 安全区域 | 铰链、摄像头和系统区域影响哪些元素 | 文字与关键操作不被遮挡或切断 |
| 组件交付 | 组件在空间不足时如何压缩和重组 | 设计与开发使用同一套优先级规则 |
| 测试验收 | 不同姿态、方向、分屏和辅助功能是否覆盖 | 每种状态都能完成核心任务 |

折叠屏项目不需要为每种姿态制作一套完全独立的产品。真正重要的是定义稳定的内容关系、操作优先级和状态切换规则，让界面能够在不同空间中自然重组。

## 常见问题

**iPhone Duo 适配是不是增加几个设计尺寸就可以？**

不够。尺寸只是结果，还需要定义布局状态、信息层级、控件优先级、安全区域和任务连续性，否则静态画板无法覆盖真实使用过程。

**所有工具栏和导航都必须移动到侧边吗？**

不需要。系统组件应优先遵循系统布局，自定义控件则根据内容关系和任务优先级决定位置。局部操作应尽量靠近它影响的内容。

**展开内屏后一定要做双栏吗？**

不一定。只有当第二栏能够减少跳转、支持比较或保持上下文时，双栏才有价值。阅读型页面仍应控制正文宽度，而不是强行填满屏幕。

**半折叠模式是否必须单独设计？**

不是。只有当上下或左右区域能够承担明确不同的任务时，才值得专项设计。否则应优先保证现有界面稳定可用。

**项目验收时最容易遗漏什么？**

最容易遗漏状态切换中的任务连续性，例如输入内容丢失、选中项重置、按钮跳位和弹窗跨越折叠区域。验收应以完整任务为单位，而不是只比较截图。

| 相关服务 | 了解详情 |
| --- | --- |
| APP UI UX 设计 | [查看服务详情](https://www.jvds.cn/service/uiux) |
| 复杂产品与设计系统 | [查看服务详情](https://www.jvds.cn/service/uiux) |
| 项目咨询 | [联系界达设计](https://www.jvds.cn/contact) |