超全整理！iPhone Duo 官方设计开发资源汇总

一、全文速览图

Cupertino 出差一周结束。一来一回直至本周，睡眠仍糟糕透，平均每日 4、5 个小时。发布会之夜更甚。继地狱般的七月八月后，九月剩余时日也排满 Keynote 与各类线上线下活动。神经疲惫而略兴奋地坚持着。

对发布首日的官方资源稍作汇总。

二、HIG (人机界面指南)

Designing for iPhone Duo

网址：https://developer.apple.com/design/human-interface-guidelines/designing-for-iphone-duo

三、Tech Talks 视频

1.为 iPhone Duo 进行设计

设计向

iPhone Duo 是首款折叠屏 iPhone，搭载了重新构想的 iOS。了解更新后软件背后的设计原则，探索控件如何在不同折叠姿态之间移动，并学习你的布局需要适应哪些变化及其原因。

1. 官网：https://developer.apple.com/videos/play/tech-talks/111466/
2. bilibili：https://b23.tv/you2rdl

2.让你的 App 为 iPhone Duo 做好准备

开发向

了解如何针对 iPhone Duo 的折叠显示屏更新并优化你的 App。了解如何选择加入全屏体验、采用灵活布局的最佳实践，并在 Xcode 的 Device Hub 中模拟各种折叠姿态。了解如何使用尺寸级别而不是界面方向、处理不对称的安全区域，以及测试 Split View 多任务处理，以确保你的 App 在用户的各种使用方式下都能大放异彩。

1. 官网：https://developer.apple.com/videos/play/tech-talks/111461/
2. bilibili：https://b23.tv/VBSU8m8

3.在 iPhone Duo 上提升控制栏的体验

设计向

了解如何针对 iPhone Duo 独特的显示屏适配你的导航、工具栏和标签页栏。探索全新栏布局背后的设计原则，并学习如何配置自定视图表现形式以及管理溢出内容，从而构建功能强大且响应迅速的 App。

1. 官网：https://developer.apple.com/videos/play/tech-talks/111462/
2. bilibili：https://b23.tv/PjZ3HiZ

4.在 iPhone Duo 上使用自适应布局适配各种姿态

设计向 + 开发向

了解如何创建在 iPhone Duo 上表现出色的响应式灵活布局。探索移位设计模式，在用户开合 iPhone Duo 时保持内容清晰可见且触手可及。了解如何在 SwiftUI 和 UIKit 中使用排列视图构建分屏和叠加显示，并了解如何查询保留区域，从而围绕铰链和摄像头量身定制布局。

1. 官网：https://developer.apple.com/videos/play/tech-talks/111463/
2. bilibili：https://b23.tv/FthD1HF

5.充分利用 iPhone Duo 上的多显示屏和场景

开发向

了解如何为 iPhone Duo 构建丰富的多窗口和多显示屏体验。探索如何处理动态窗口大小，以及如何在并排多任务处理中请求新场景。学习如何在 SwiftUI 和 UIKit 中观察铰链角度的变化以创建交互式效果。并了解如何使用场景配件同时在两块显示屏上呈现补充内容。

1. 官网：https://developer.apple.com/videos/play/tech-talks/111464/
2. bilibili：https://b23.tv/BT1mOzE

6.为 iPhone Duo 构建出色的相机体验

开发向

了解如何充分利用 iPhone Duo 的内外摄像头。探索 Virtual Front Camera，了解如何使用 Direction Coordinator 在摄像头之间切换，并在用户开合 iPhone Duo 时更新 UI。你还能学习处理预览宽高比、定位和旋转的最佳实践，以提供无缝的拍摄体验。

1. 官网：https://developer.apple.com/videos/play/tech-talks/111465/
2. bilibili：https://b23.tv/n5JpOEf

四、Apple 设计资源

在 Product Bezels 中新增了 iPhone Duo，包含 PNG 与 PSD 格式。

网址：https://developer.apple.com/design/resources/

五、Figma、Sketch 组件库

两款工具的官方 UI Kit 组件库均已上线，可访问 Apple Design Resources 英文站下载（中文站目前仅提供 Sketch 版本链接）。

网址：https://developer.apple.com/design/resources/

在 Figma 版本中，根据 Change log 描述，与 iPhone Duo 相关的更新主要包括：

1. 键盘
2. 工具栏（Toolbars）
3. 标签页栏（Tab bars）
4. 状态栏（Status bars）
5. 表单（模态面板，Sheets）
6. 相关符号与界面范例

同时也包括 “安全区与边距”、“产品边框” 等等：

Sketch 版本类似基本相仿：