iPhone Duo Design Guidelines: From Adaptive UI to App Store Screenshots
Apple’s new “Designing for iPhone Duo” page describes an iPhone experience that adapts as the device opens, closes, and changes size. The useful design question is how the current task continues through those changes. This guide summarizes the published principles and adds an editorial review method for app teams.
Start with compact and regular layouts
Apple identifies compact width on the outer display and regular width on the inner display as the foundation. Use available space, safe areas, and margins instead of a bespoke screen for every pose. Standard system components provide much of the adaptation.
For a design review, choose one familiar task and draw its two useful states. A note list might show one selected note when space is limited and keep the list visible beside it when space expands. Write down what remains identical: the selection, draft content, account, and available actions. A wider composition should make the task clearer.
Keep the same task and information hierarchy
Opening the device should not look like entering a different product. Apple asks apps to preserve state and functionality across displays. Extra room can reveal another level of hierarchy while keeping the same content selected.
A useful review artifact is a before-and-after pair with matching sample content. If the outer view shows a selected itinerary, the inner view should make that same itinerary easy to locate. Compare the pairs without reading the captions. If reviewers cannot trace the current item, fix the interface before describing the change as seamless in marketing copy.
Review controls on the vertical edge
Duo moves familiar bars to the side on the outer display and in inner-display landscape. Inner-display portrait retains horizontal bars. Follow the system placement and preserve the relationship between controls and their content; there is no single fixed side inset to apply to every state.
Audit your highest-value action at the narrowest useful window. Verify that its label remains meaningful if the action moves into overflow. A toolbar that looks clean in one screenshot may become difficult to use after rotation. Test the destination and behavior of each action, not only its icon.
HIG: vertical controls ↗Apple’s control-positioning discussion ↗
Account for the fold and cameras
Reserved regions describe space affected by the hinge and cameras. Apple’s adaptive-layout talk distinguishes regions that divide the display from regions that obscure content, and explains that these regions can change with device state. System containers handle many adjustments; custom content may need additional layout work.
Look for important elements centered across the fold: a confirmation button, a small chart annotation, or a selected item. Ask whether modest movement or resizing keeps the relationship clear. Do not move a whole feed simply to avoid a center line; the right review is whether the content stays readable and its controls stay usable.
Use the container that matches the content
Navigation and content arrangement serve different purposes. Apple’s iOS 27.1 guidance introduces arrangement containers for primary and secondary content, including split and overlay behavior. The adaptive-layout talk explains when these complement existing navigation and where nesting them would be inappropriate.
Before adopting a container, name the relationship between the views. Is one a list that selects a detail, two equally necessary pieces of information, or a temporary layer over content? Draw that relationship first. Prefer the simplest standard container that expresses it and test it against the SDK version your app actually targets.
Apple: system containers and arrangement views ↗Prepare your app for iPhone Duo ↗
Turn the design review into a screenshot brief
Build the screenshot brief from states the app already supports. Select one outer capture that proves the focused task and one inner capture that demonstrates useful additional context. Keep content consistent across the pair so the difference is easy to understand.
Use headlines to explain the benefit, not the device mechanics. For example, “Keep the itinerary beside the map” is useful only when the release build actually supports that view. The display dimensions belong in the export configuration. The product promise belongs in the caption.
| Decision | Review question |
|---|---|
| Continuity | Does the same selected item survive the display change? |
| Additional space | Does the second region help the current task? |
| Controls | Can people still find the important action? |
| Marketing proof | Does the capture demonstrate the headline? |
Compose App Store screenshots for each display
Give both sets the same visual identity: palette, type style, headline voice, and sequence of benefits. Recompose each canvas around its real capture. A tall iPhone template can leave too little room for Duo’s shorter outer view; the wide inner view often needs a shorter headline and a larger uninterrupted area for product detail.
Start with a straight-on device and one clear promise. Keep the caption outside the device so it cannot cover controls or important content. Use a frameless layout when small UI detail needs more space. If you add perspective or a panorama, inspect every exported tile for clipped text, cropped controls, and an understandable reading order. These are composition suggestions, not extra Apple upload rules.
| Choice | Outer set | Inner set |
|---|---|---|
| First message | Show one useful outcome | Show how related context supports that outcome |
| Source capture | Actual compact interface | Actual expanded interface |
| Headline | Short line above or beside the device | Short line with room for the wider UI |
| Frame | Outer frame with its corner camera | Inner frame matching the open display |
| Final review | Primary action stays visible | Secondary content remains readable |
Learn from Apple’s Mail and Notes examples
Apple’s HIG shows Mail moving from one content level on the outer display to a message list beside the selected email on the inner display. Notes demonstrates split-view panes adjusting as the device folds. These are Apple’s interface examples, not evidence of third-party App Store screenshot campaigns.
For your own screenshot brief, carry one recognizable item across the pair: the same email, note, or saved place. Let readers see what the extra space helps them do. Only make a continuity claim after testing the transition in your app. The layout lesson transfers; Apple’s app imagery is not a substitute for your product’s captures.
Build and review the set in App Asset Kit
Open the Duo generator, upload genuine captures for one display, and choose a collection and palette. Keep the default straight-on composition for the first pass, then edit each headline. Select Outer or Inner and the matching orientation in the export controls; the preview should show the target you are reviewing.
Export that set, open the full-size PNGs, and save the editable project. Repeat with the other display’s own captures while retaining the palette and story. A template helps with composition; changing a preset does not adapt the app interface inside an uploaded image.
Frequently asked questions
Where are the official iPhone Duo design guidelines?
Apple publishes them in Human Interface Guidelines under “Designing for iPhone Duo,” with related Tech Talks on design, controls, and adaptive layouts.
Should every fold angle have a different UI?
Apple recommends adaptive layouts based on available space and small necessary adjustments, rather than a custom redesign for every pose.
Is the inner screen simply an iPad layout?
Treat it as an adaptable iPhone experience. Preserve the app’s hierarchy and state while using the extra space where it helps.
Are screenshot dimensions safe-area values?
No. Screenshot dimensions describe exported image pixels. Safe areas and reserved regions come from the app’s current layout environment.