apple-design-duo

Entwerfen für das iPhone Duo

Überblick

Quelle: Apple Human Interface Guidelines, „Designing for iPhone Duo“ (neue Seite, 9. September 2026). https://developer.apple.com/design/human-interface-guidelines/designing-for-iphone-duo

Kernprinzip: Eine App, die fließend über zwei Displays und viele Posen hinweg skaliert. Entwerfen Sie kein Layout pro Pose; verwenden Sie Größenklassen (compact width = äußeres Display, regular width = inneres Display) und lassen Sie die Standard-Systemkomponenten die Anpassung vornehmen. Alle normalen iOS HIG gelten weiterhin.

Rufen Sie die obige Seite auf, wenn Sie den genauen Wortlaut oder die Entwickler-API für eine Regel benötigen.

Die Hardware in einem Absatz

Äußeres Display (geschlossen genutzt): breiter und kürzer als andere iPhones, Kamera fest in einer Ecke und immer sichtbar. Inneres Display (offen genutzt): Kamera hinter dem Display verborgen, bis sie aktiv ist. Ein zentrales Scharnier ermöglicht Buch-, Flach- und Steh-Kanten-Posen. Symbolleisten, Registerkartenleisten, Statusleiste und Dynamic Island befinden sich auf der Seite (vertikale Achse), außer auf dem inneren Display im Hochformat.

Kurz-Checkliste

Layout

• Für Größenänderung bauen: Größenklassen, Layout-Ränder, Safe-Area-Insets. Keine festen Breiten, nichts an ein einzelnes Display gebunden.
• Gleiche Funktionalität und gleicher Zustand auf beiden Displays und in jeder Pose. Das innere Display kann eine zusätzliche Hierarchieebene hinzufügen (Mail: Liste oder Nachricht geschlossen, beides nebeneinander geöffnet).
• Reservierte Regionen beachten: äußere Kamera (immer, wächst in Dynamic Island hinein), innere Kamera (nur wenn aktiv), Faltbereich (nur wenn teilweise geöffnet). Verwenden Sie ReservedRegion (SwiftUI) / UIView.ReservedRegion (UIKit) für benutzerdefinierte Komponenten.
• Beim Falten: Bevorzugen Sie selbstanpassende Container (Split Views gleichen Bereichsbreiten aus), verwenden Sie eine gerade Anzahl von Rasterspalten, nehmen Sie kleine Anpassungen vor, nie eine dramatische Neuanordnung.
• Split-Ansichten: Auf dem inneren Display erweitern, auf dem äußeren auf einen Bereich reduzieren, automatisch.
• Anordnungsansichten (ArrangementView / UIArrangementViewController): Zwei Ansichten, primär + sekundär. Split (nebeneinander oder gestapelt, aus HStack/VStack-ähnlichen Layouts) oder overlay (übereinandergelegt, aus ZStack-ähnlichen Layouts). Navigationscontainer außerhalb halten.

Vertikale Steuerelemente

• Die seitliche Platzierung des Systems beibehalten; im Allgemeinen nicht überschreiben.
• Inhaltsbereich ist asymmetrisch: Verwenden Sie Safe Areas, damit seitliche Steuerelemente (einschließlich der einer anderen App im Split View) den Inhalt nie überdecken. Steuerelemente bleiben bei RTL-Sprachen auf derselben Seite.
• Reihenfolge der Symbolleiste, von oben nach unten: Primäre Navigation (Zurück, Schließen), dann prominente Aktionen (Fertig), dann die restlichen Gruppen wie gehabt.
• Überlauf geht standardmäßig von unten nach oben; legen Sie die Sichtbarkeitspriorität fest (ToolbarItemVisibilityPriority / UIBarButtonItemVisibilityPriority), damit häufige Aktionen (Verfassen, Neue Notiz) und mit Badges versehene Elemente sichtbar bleiben.
• Gruppieren Sie Elemente mit ToolbarItemGroup / UIBarButtonItemGroup; fügen Sie nie manuelle feste Abstände hinzu.
• Jedes nicht-textuelle Symbolleistenelement erhält sowohl einen Titel als auch ein Symbol. Minimieren Sie reine Text-Schaltflächen (sie bleiben in einer horizontalen Leiste).
• Bei engem Platz: Navigationsfokussierte Ansichten komprimieren die Symbolleiste in den Überlauf (Standard); aufgabenfokussierte Ansichten minimieren stattdessen die Registerkartenleiste (ToolbarVerticalCompressionBehavior / UIVerticalBarCompressionBehavior).
• Verwenden Sie das System-Überlaufmenü; Auslassungspunkte sind nur für Überlauf.
• Steuerelemente, die zu einem nicht-nachgestellten Bereich gehören, bleiben neben diesem Bereich (Mail-Listensteuerelemente bleiben über der Liste).
• Immersive, nicht scrollende Benutzeroberflächen können die volle Breite einnehmen, wenn nichts mit dem Dynamic Island oder der Statusleiste kollidiert (Taschenrechner geht 5 Spalten x 4 Zeilen).

Spiele

• In jeder Pose spielbar. Ausrichtungssperre ist in Ordnung, aber füllen Sie den Bildschirm. Halten Sie Text- und Steuerelementgrößen konsistent. Bevorzugen Sie die Änderung des Seitenverhältnisses gegenüber Letterbox/Pillarbox; falls unvermeidbar, füllen Sie die Polsterung mit Kunst.

Aus Apples Tech Talks

Details aus den drei Duo Tech Talks, die die HIG-Seite nicht explizit nennt (111466 Design for iPhone Duo, 111462 Raise the bar with iPhone Duo, 111463 Strike a pose with adaptive layouts).

Systemverhalten zum Entwerfen

• Äußeres Display: Steuerelemente befinden sich auf der rechten Seite für die Reichweite des rechten Daumens. Dynamic Island erweitert sich vertikal, wenn Live Activities eintreffen, und teilt sich den Seitenstreifen mit App-Leisten. Wenn der Platz ausgeht, werden App-Elemente automatisch in den Überlauf verschoben.
• Teilweise gefaltet (Buch): Text, Bilder und interaktive Elemente verschieben sich von der Krümmung weg. Bei Hochformat-Faltung wandern interaktive Elemente in die untere Hälfte.
• Split View Multitasking: Ziehen Sie eine App mit der Home-Geste zur Seite, was eine gleichmäßige 50/50-Teilung ergibt. Die Steuerelemente jeder App sitzen an ihrer äußeren Kante.
• Bild-in-Bild kann oben angeheftet werden; die darunter liegende App wird vertikal in der Größe angepasst, und das Video füllt bei Faltung die Hälfte des Bildschirms.
• Blätter: Auf dem äußeren Display werden Blatt-Symbolleisten vertikal. Auf dem inneren Display sind Blätter mit horizontalen Leisten zentriert. Bei Faltung gleiten Blätter von der Faltung weg. Mit preferredPlacement hat ein links platziertes Blatt keine vertikale Leiste und ein rechts platziertes bekommt eine.
• Eingebaute Faltungsvermeidung (Blätter, Alarme, Menüs, Symbolleistenschaltflächen und mehr) schiebt interaktive Elemente von der Knicklinie weg. Scrollbarer Inhalt muss die Faltung nicht vermeiden.

Opt-in für vertikale Balken

1. Neu gegen das neueste SDK erstellen.
2. Verwenden Sie die Balken, die Navigationscontainern gehören: SwiftUI .toolbar auf NavigationStack, NavigationSplitView oder TabView; UIKit-Elemente, die auf einem View-Controller innerhalb von UINavigationController/UITabBarController gesetzt sind. Benutzerdefinierte UIToolbar/UINavigationBar/UITabBar-Inhalte werden nicht verschoben.

• Nur Container am Displayrand werden vertikal. In einer Split-Ansicht tut dies nur die Detailspalte; Inspektoren erhalten keinen eigenen vertikalen Balken.
• Zuordnung: Obere Symbolleistenelemente gehen an den oberen Rand des Streifens, untere Elemente an den unteren Rand, und die Registerkartenleiste bleibt unten ausgerichtet. Flexible Abstandshalter haben eine Höhe von Null; feste Abstandshalter behalten ihre Größe.
• Zurück/Schließen: Automatisch mit einem Navigations-Controller. Benutzerdefinierte verwenden .cancellationAction (SwiftUI) oder ein führendes Element mit leftItemSupplementsBackButton = false (UIKit). Prominente Aktionen verwenden topBarPinnedTrailing (SwiftUI) oder pinnedTrailingGroup (UIKit).

Was vertikal wird, was horizontal bleibt

• Vertikale Balken haben eine feste Breite und flexible Höhe, daher eignen sie sich für Nur-Symbol-Elemente. Elemente mit einem Symbol werden vertikal; reine Text-Elemente (Bearbeiten, Segmentierte Steuerelemente, breite Textschaltflächen) bleiben in der horizontalen Navigationsleiste.
• Überschreiben Sie mit der neuen AxisBehavior-API: Verwenden Sie horizontal-only für ein Element, das zwischen Symbol und Text wechselt (eine benutzerdefinierte Auswahl; die System-Schaltfläche Bearbeiten behandelt dies selbst), und vertical-preferred für eine benutzerdefinierte Ansicht, die eine vertikale Form hat (z.B. ein Kompass).
• Wandeln Sie Text- und Symbolelemente mit einem Badge (iOS 26 Badge-API) in Nur-Symbol um, z.B. eine Posteingangsanzahl. Behalten Sie den Text, wenn er echte Informationen trägt (ein Warenkorb-Gesamtbetrag).
• Tastatur-Zubehörleisten bleiben an der Tastatur haften.
• Benutzerdefinierte Ansichten: Passen Sie in die feste Breite oder stellen Sie ein vertikales Layout bereit. Lesen Sie toolbarVerticalEdge (Umgebungswert oder Trait), der nil ist, wenn Balken nicht vertikal sein können.
• Vertikale Balken haben standardmäßig keinen Scrollkanteneffekt. Sie erhalten nur dann einen Hintergrund, wenn Transparenz reduzieren eingeschaltet ist. Benutzerdefinierte Inhalte müssen in beiden Fällen lesbar bleiben.
• Zum Abmelden (eine einseitige, untenlastige App wie Taschenrechner oder ein Blatt mit nur einer Schließen-Schaltfläche) verwenden Sie toolbarVerticalBehavior / preferredVerticalBarBehavior. Ein Blatt ohne vertikale Leiste endet knapp vor der Kamera.
• Kompression pro Ansicht: toolbarCompressionBehavior. Sichtbarkeitspriorität kann hoch, niedrig oder benutzerdefiniert sein; setzen Sie sie zuerst nach Gruppe, dann nach Element.

Layout-Muster

• Äußeres Display: Die meisten Inhalte benötigen einen Versatz, damit sie nicht hinter den Steuerelementen verborgen sind, was die Ausrichtung an horizontalen Safe-Area-Insets für Sie erledigt. Zentrieren Sie nur bei immersiven, nicht scrollenden Benutzeroberflächen auf dem gesamten Display, wenn sich nichts Interaktives unter den Balken befindet. Ein gemischter Ansatz ist ein vollbreiter Hintergrund mit eingesetzten scrollenden Inhalten, wobei alle interaktiven Elemente innerhalb des eingesetzten Bereichs bleiben.
• Inneres Display, damit es nicht nur eine gestreckte Telefon-App ist: Verwenden Sie eine Split-Ansicht, ein gestapeltes Layout, das bei großer Breite zu 2 Spalten wird (Musik), oder bei informationsdichten Apps die Registerkartenleiste als Seitenleiste (Gesundheit).
• Optionales Layout für die Tisch-Pose (Laptop): Medien oben, Steuerelemente auf der stabilen unteren Hälfte. Es muss jedes Steuerelement und dieselbe Hierarchie beibehalten.
• Verschiebung: Verschieben Sie ein Element aus einem reservierten Bereich in den Bereich, der seinem Zweck entspricht. Wählen Sie den Umfang: Verschieben Sie ein Element allein, wenn es allein steht, verschieben Sie verwandte Elemente zusammen, und verschieben Sie Dinge nicht weit von ihrer Quelle. In der Buch-Pose gehen Alarme auf die nachgestellte Seite, in der Nähe, wo sie beim Schließen wieder erscheinen. In der Tisch-Pose geht flüchtiger Inhalt nach oben und antippbare Steuerelemente nach unten. Die Suche bleibt über der Ansicht, die sie durchsucht. Für ein Raster behalten Sie die äußeren Ränder bei und verbreitern Sie die Rinne am Scharnier (Fitness).
• System-Split-Ansichten gleichen sich bei Faltung auf 50/50 aus (Erinnerungen).

Reservierte Regionen API

• SwiftUI: reservedRegion auf GeometryProxy (von GeometryReader oder onGeometryChange). UIKit: reservedRegion auf UIView. Verwenden Sie .frame für das Layout.
• Es gibt zwei Arten. Eine Divisions-Region (die Faltung) ist nur aktiv, wenn gefaltet ist, und hat eine Breite von Null, wenn flach. Eine Okkulsions-Region (die innere FaceTime-Kamera) ist nur aktiv, wenn die Kamera eingeschaltet ist.
• Aktive Regionen werden standardmäßig zurückgegeben; verwenden Sie includeInactive, um vorauszuplanen (z.B. wählen Sie eine gerade Spaltenanzahl, wenn eine Divisionsregion existiert).
• Bei kamerazentrierten Apps halten Sie wichtige Inhalte und Steuerelemente von der inneren Kamera fern.
• Der Faltzustand als Interaktionseingabe wird im Talk Leverage multiple displays and scenes on iPhone Duo behandelt, der nicht in diesem Skill enthalten ist.

Anordnungsansichten (iOS 27.1)

• SwiftUI: ArrangementView(primary, secondary) innerhalb eines NavigationStack, gestylt mit .arrangementViewStyle(.split) (der Standard) oder .overlay. Verwenden Sie .split.axes(...), um die Split-Richtung einzuschränken; wenn es nicht entlang der primären Achse aufteilen kann, zeigt es nur die primäre Ansicht.
• UIKit: UIArrangementViewController als Root des Navigations-Controllers, updateArrangement mit UISplitArrangement.
• Overlay: Gestapelt, wenn flach, nebeneinander, wenn gefaltet. Lesen Sie overlayArrangementZIndex (SwiftUI) oder state(for:) dann .zIndex (UIKit), um zwischen reduzierten und erweiterten sekundären Ansichten umzuschalten.
• Auswahl: Folgen Sie vorhandenen Mustern (HStack/VStack wird split, ZStack wird overlay). Andernfalls verwenden Sie overlay für eine Vordergrund-/Hintergrundbeziehung, bei der das teilweise Verbergen von scrollbarem Inhalt in Ordnung ist (Barrierefreiheits-Reader), und split für Haupt-/Detail, bei dem keine Ansicht verborgen werden darf (Podcasts-Transkript).
• Platzieren Sie keine Navigationscontainer innerhalb einer ArrangementView, und platzieren Sie keine ArrangementView innerhalb von List/ScrollView.

Bereitschaftsprüfung (aus den Talks)

1. Neu mit dem neuesten SDK erstellen.
2. Balken prüfen: Systemcontainer, Elementreihenfolge, Symbole mit Titeln.
3. Benutzerdefinierte Elemente vertikal bereit machen.
4. Überlaufprioritäten festlegen.
5. Zentrierte Layouts prüfen: Sollte jedes zu 2 Spalten werden, verschoben werden oder eine ArrangementView verwenden?
6. Die reservierte Regionen API für priorisierte, manuell platzierte Steuerelemente übernehmen.

Duo Craft Layer (aus dem apple-design Skill)

Die HIG sagt, was sich anpasst. Dieser Abschnitt wendet Apples Leitfaden zu flüssigen Schnittstellen und Designprinzipien (WWDC Designing Fluid Interfaces, Principles of Great Design) darauf an, wie es sich auf dem Duo anfühlen sollte. Dies sind angewandte Prinzipien, keine HIG-Regeln. Für das vollständige Bewegungs-Toolkit (Projektion, Gummiband-Effekt, Geschwindigkeitsübergabe) laden Sie auch Emil Kowalskis apple-design Skill (von emilkowalski/skills) und übersetzen Sie dessen Web-Beispiele in SwiftUI/UIKit.

Falt- und Größenänderungsbewegung

• Falten ist eine kontinuierliche, benutzergesteuerte Geste. Layout-Änderungen, die ihr folgen (Bereichsbreiten gleichen sich aus, Raster-Neuanordnung, Inhalt bewegt sich vom Faltbereich weg), sollten dem Scharnier fließend folgen und unterbrechbar sein: Eine Person kann mitten in der Faltung anhalten oder umkehren. Animieren Sie daher immer vom aktuellen Bildschirmwert aus, springen Sie nie zum Endzustand.
• Verwenden Sie kritisch gedämpfte Federn für die Neuanordnung (SwiftUI .spring(duration: 0.4, bounce: 0) oder .smooth; UIKit UIView.animate(springDuration:bounce:) mit bounce: 0). Kein Hüpfen: Der Benutzer hat nichts gewischt, daher würde ein Überschwingen wie ein Defekt wirken.
• Räumliche Konsistenz über Displays hinweg: Wenn jemand das Gerät öffnet, bleibt das Element, das sie auf dem äußeren Display angesehen haben, der Anker (Mails geöffnete E-Mail wird zum nachgestellten Bereich, nicht zu einem neuen Bildschirm). Behalten Sie die Scrollposition und die Auswahl bei; die zusätzliche Hierarchieebene erscheint daneben.
• Kleine Anpassungen vor Neuanordnung (HIG) ist dieselbe Regel wie „Andeutung in Richtung der Änderung“: Elemente sollten sichtbar zu ihrer neuen Position gleiten, nicht teleportieren.

Seitliche Steuerelemente als Materialschicht

• Seitliche Symbolleisten und Registerkartenleisten schweben standardmäßig ohne Scrollkanteneffekt und ohne Hintergrund über dem Inhalt (gemäß dem Tech Talk). Fügen Sie keine harte Trennlinie oder Ihren eigenen Hintergrund hinzu; verwenden Sie Safe-Area-Insets, damit Inhalt nicht hinter der Leiste verborgen ist.
• Benutzerdefinierte Ansichten, die in der Leiste platziert sind, müssen über allem, was dahinter scrollt, lesbar bleiben, sowie über dem festen Hintergrund, der bei Transparenz reduzieren erscheint.

Prinzipien auf Duo abgebildet

• Vertrautheit: Überschreiben Sie nicht die Platzierung vertikaler Balken; es ist das neue Muskelgedächtnis der Plattform.
• Gruppierung und Zuordnung: Steuerelemente bleiben neben dem Bereich, den sie betreffen (Mail-Listensteuerelemente über der Liste).
• Orientierung: In jeder Pose sollten Personen immer noch antworten können „Wo bin ich, wie komme ich zurück“. Zurück/Schließen ist immer oben auf der vertikalen Achse.
• Flexibilität: Ein adaptives Layout, Dynamic Type skaliert damit. Testen Sie die größte Textgröße auf dem schmal-hohen äußeren Display mit Seitenleisten.
• Reaktion: Posenänderungen dürfen die Eingabe niemals blockieren. Tippen während einer Faltung sollten immer noch landen.

Barrierefreiheit

• Bei Bewegung reduzieren: Ersetzen Sie Neuanordnungsgleiten/Federn durch kurze Überblendungen.
• Bei Transparenz reduzieren: Seitenleisten werden fest.
• Große Oberflächen, die sich während einer Faltung bewegen: Halten Sie die Bewegung kurz und vermeiden Sie große Helligkeitssprünge.

Häufige Fehler

Fehler	Lösung
Benutzerdefiniertes Layout pro Pose	Größenklassen plus skalierbares Layout
Funktionen auf einem Display ausblenden	Gleiche Funktionalität auf beiden Displays
Interaktive Elemente unter seitlichen Balken	Verwenden Sie horizontale Safe-Area-Insets
Harte Trennlinie für seitliche Balken	Balken über Inhalt schweben lassen; Safe-Area-Insets für Inhalte verwenden
Text-Schaltflächen werden vertikal	In horizontale Navigationsleiste umwandeln oder durch Symbol + Badge ersetzen
Große Layout-Änderungen bei Faltung	Kleine Anpassungen, kritisches Dämpfen, fließende Neuanordnung
Inhalt unter äußerer Kamera	Reservierte Region API: Kameraplatzierung abfragen und Versatz rendern
Split View mit ungerader Spaltenzahl	Spaltenanzahl gerade halten, auch wenn die Divisionsregion inaktiv ist
Interaktive Faltdemonstration	Beispiel-App erstellen: Ein einfaches kompilierbares Xcode-Projekt mit SwiftUI generieren