DuoAppsiPhone Duo layout patterns
Each pattern answers one layout question for iPhone Duo: numbered rules, a demo, and sources. Every line is marked Apple or Recommendation, and a single Recommendation line makes the whole pattern a Recommendation.
- Apple
- Stated by Apple
- Recommendation
- Recommended by DuoApps
Where toolbars and tab bars go on iPhone Duo
On iPhone Duo, the toolbar, the tab bar, and navigation buttons move to the side, in a single column: navigation at the top, the tab bar at the bottom. Only the inner display in portrait keeps horizontal bars. That side can be the right or the left: use the system bars, and treat each side of the safe area separately.
Symbols, not labels: bar items on iPhone Duo
On iPhone Duo, a bar item moves to the side as a symbol alone: a text-only item or a segmented control stays horizontal, and so does a view the app draws itself, unless the app declares that it can go vertical. Give every item a symbol and a title, turn a count into a badge, and keep horizontal only the items whose text carries information, like the amount on a cart button.
Don’t stretch: the screen-by-screen checklist for iPhone Duo
Closed in landscape, iPhone Duo has a short, wide screen: a portrait view stretched across it becomes unreadable. The DuoApps recommendation, by screen type: a list adds columns, a form stays centered at a maximum width, an article caps the height of its header image, and only a full-screen view fills the whole space.
Designing around the fold on iPhone Duo
When iPhone Duo is partially folded, the inner display curves at its center: anything in that fold is hard to see and hard to tap. System components move out of it on their own. Keep your own interactive elements out of it as much as possible, moving them a little and together; scrolling content doesn’t need to avoid it, and in a grid, prefer an even number of columns.
If your app draws its own bars
Apple first asks you to use the bars that the system’s navigation containers provide: on iPhone Duo, they’re the only ones that move to the side on their own. If your app draws its own, keep them clear of the reserved regions, treat each side of the safe area separately, place them on the side where the system puts its own, and manage the overflow menu yourself.