Design for iPhone Duo
Design iPhone Duo apps that adapt across outer and inner displays, folding poses, side controls, sheets, and fold avoidance.
TL;DR
- Design primarily for compact width on the outer display and regular width on the inner display, not for every individual fold pose.
- Use layout margins and horizontal safe area insets so content offsets automatically around side controls and system UI.
- Expect toolbars, tab bars, navigation controls, the status bar, Dynamic Island, and Live Activities to share vertical space along the device edge; wide controls may need to remain in horizontal bars.
- Use system components where possible so sheets, alerts, menus, toolbar buttons, and other controls inherit built-in behavior that avoids the fold region.
Core design model
iPhone Duo has a compact outer-display experience and a wide inner-display experience. The device can be closed, open, partially folded like a book, seated on a table like a laptop, or standing on its edges, so apps need to feel like one continuous experience across many physical poses.
The key recommendation is not to design a bespoke layout for every pose. Instead, target size classes: compact width for the outer display and regular width for the inner display. Avoid fixed widths, fixed breakpoints, or metrics tied to a specific screen size.
- Design for free resizability across different aspect ratios.
- Build layouts with layout margins and horizontal safe area insets.
- Preserve the same app hierarchy and functionality when the device opens, closes, or folds.
- If adding a special hands-free tabletop layout, keep the same controls and general hierarchy as other poses.
Controls move to the side
To maximize vertical content space and improve reachability, many controls move from the top and bottom to the side edge of the display. This applies on the outer display and also on the inner display in most configurations. The exception called out is the inner display in portrait, where horizontal bars remain because there is enough vertical space.
Side controls share vertical space with system elements such as the redesigned status bar, Dynamic Island, and Live Activities. If there is not enough room, app controls automatically collapse into an overflow menu.
- Top toolbar buttons map to the top of the vertical control area.
- Bottom toolbar buttons map to the bottom of the vertical control area.
- Tab bars stay bottom-aligned within the side control region.
- Controls that are too wide for the side area, such as text buttons or segmented controls, should remain in the navigation bar.
Outer display layout
The closed outer display is wider and shorter than a traditional iPhone. Because controls occupy the side, most content should be offset so it is not hidden behind app or system controls. If a layout already respects horizontal safe area insets, this offset is handled automatically.
Not every layer needs the same treatment. Immersive, highly visual, non-scrolling interfaces can remain centered on the full display when interactive elements are not blocked. Mixed layouts can also work, such as a full-width background image or header with inset scrollable foreground content.
- Use safe area insets for most readable or interactive content.
- Keep all interactive elements inside the safe/inset scrollable region when using full-width visual backgrounds.
- Avoid assuming the visual center and the interactive safe center are the same on the outer display.
Inner display layout
The inner display should not feel like a stretched iPhone layout. Use the extra width to surface more content or hierarchy while keeping the app predictable when users open and close the device during a task.
- Use split views to show multiple levels of hierarchy at once.
- Rearrange vertically stacked content into a two-column layout when horizontal space is available.
- For information-dense tab-based apps, consider presenting the tab bar as a sidebar on the inner display.
- Do not gate functionality behind a specific pose or display configuration.
Sheets and fold avoidance
Sheets adapt by pose. On the outer display, sheet controls move to the side by default, though the vertical bar can be disabled when that better fits the content, such as a sheet with only one toolbar button. On the inner display, sheets use standard horizontal bars in both landscape and portrait.
When the device is partially folded, sheets slide away from the fold. System components also nudge interactive elements away from the curve region because controls are difficult to target when they land in the fold.
- Use system sheets, alerts, menus, toolbar buttons, and related components to inherit built-in fold avoidance behavior.
- Keep interactive elements away from the hinge or curve region whenever possible.
- Scrollable content does not need to avoid the fold region in the same way as interactive controls.
Related Sessions
Strike a pose with adaptive layouts on iPhone Duo
Design adaptive iPhone Duo layouts around the hinge, cameras, reserved regions, and two-view arrangements in SwiftUI and UIKit.
Build a great camera experience for iPhone Duo
Use iPhone Duo's virtual and individual front cameras, direction coordination, preview layout, aspect ratio, and rotation APIs for polished capture apps.