apple-design-duo

Concevoir pour iPhone Duo

Aperçu

Source : Apple Human Interface Guidelines, « Designing for iPhone Duo » (nouvelle page, 9 septembre 2026). https://developer.apple.com/design/human-interface-guidelines/designing-for-iphone-duo

Principe fondamental : une seule application qui se redimensionne de manière fluide sur deux écrans et de nombreuses poses. Ne concevez pas une mise en page par pose ; utilisez les classes de taille (largeur compacte = écran extérieur, largeur régulière = écran intérieur) et laissez les composants système standards s'adapter. Toutes les directives HIG iOS normales s'appliquent toujours.

Consultez la page ci-dessus lorsque vous avez besoin du libellé exact ou de l'API développeur pour une règle.

Le matériel en un paragraphe

Écran extérieur (utilisé fermé) : plus large et plus court que les autres iPhones, caméra fixée dans un coin et toujours visible. Écran intérieur (utilisé ouvert) : la caméra est cachée derrière l'écran jusqu'à son activation. Une charnière centrale permet les poses en livre, à plat et sur la tranche. Les barres d'outils, les barres d'onglets, la barre de statut et le Dynamic Island sont situés sur le côté (axe vertical) partout sauf sur l'écran intérieur en orientation portrait.

Liste de vérification rapide

Disposition

• Construisez pour le redimensionnement : classes de taille, marges de disposition, marges de zone de sécurité. Pas de largeurs fixes, rien lié à un seul écran.
• Mêmes fonctionnalités et état sur les deux écrans et dans chaque pose. L'écran intérieur peut ajouter un niveau de hiérarchie supplémentaire (Mail : liste ou message lorsqu'il est fermé, les deux côte à côte lorsqu'il est ouvert).
• Respectez les régions réservées : caméra extérieure (toujours, s'agrandit dans le Dynamic Island), caméra intérieure (uniquement lorsqu'elle est active), région de pliage (uniquement partiellement ouverte). Utilisez ReservedRegion (SwiftUI) / UIView.ReservedRegion (UIKit) pour les composants personnalisés.
• Lors du pliage : privilégiez les conteneurs auto-adaptatifs (les vues fractionnées équilibrent même les largeurs de panneaux), utilisez un nombre pair de colonnes de grille, effectuez de petits ajustements, jamais de réorganisation dramatique.
• Vues fractionnées : se développent sur l'écran intérieur, se réduisent à un seul panneau sur l'écran extérieur, automatiquement.
• Vues d'arrangement (ArrangementView / UIArrangementViewController) : deux vues, primaire + secondaire. Partagée (côte à côte ou empilée, à partir de dispositions de type HStack/VStack) ou superposée (en couches, à partir de dispositions de type ZStack). Gardez les conteneurs de navigation en dehors d'elles.

Contrôles verticaux

• Gardez le placement latéral du système ; en général, ne le remplacez pas.
• La zone de contenu est asymétrique : utilisez les zones de sécurité afin que les contrôles latéraux (y compris ceux d'une autre application en vue fractionnée) ne couvrent jamais le contenu. Les contrôles restent du même côté dans les langues RTL.
• Ordre de la barre d'outils, de haut en bas : navigation primaire (Retour, Fermer), puis actions importantes (Terminé), puis les groupes restants tels quels.
• Le débordement va de bas en haut par défaut ; définissez la priorité de visibilité (ToolbarItemVisibilityPriority / UIBarButtonItemVisibilityPriority) pour que les actions fréquentes (Composer, Nouvelle note) et les éléments avec badges restent visibles.
• Regroupez les éléments avec ToolbarItemGroup / UIBarButtonItemGroup ; n'ajoutez jamais d'espacement fixe manuel.
• Chaque élément de barre d'outils non textuel reçoit à la fois un titre et un symbole. Minimisez les boutons uniquement textuels (ils restent dans une barre horizontale).
• Espace limité : les vues axées sur la navigation compriment la barre d'outils dans le débordement (par défaut) ; les vues axées sur les tâches minimisent la barre d'onglets à la place (ToolbarVerticalCompressionBehavior / UIVerticalBarCompressionBehavior).
• Utilisez le menu de débordement système ; les points de suspension sont réservés au débordement uniquement.
• Les contrôles qui appartiennent à un panneau non final restent à côté de ce panneau (les contrôles de la liste Mail restent au-dessus de la liste).
• Les interfaces utilisateur immersives et sans défilement peuvent s'étendre sur toute la largeur si rien n'entre en conflit avec le Dynamic Island ou la barre de statut (la Calculatrice passe à 5 colonnes x 4 rangées).

Jeux

• Jouable dans toutes les poses. Le verrouillage de l'orientation est acceptable, mais remplissez l'écran. Gardez la taille du texte et des contrôles cohérente. Préférez le changement du rapport hauteur/largeur au letterbox/pillarbox ; si inévitable, remplissez le rembourrage avec des illustrations.

Extrait des présentations techniques d'Apple

Détail des trois présentations techniques Duo que la page HIG n'explique pas (111466 Design for iPhone Duo, 111462 Raise the bar with iPhone Duo, 111463 Strike a pose with adaptive layouts).

Comportement système à prendre en compte dans la conception

• Écran extérieur : les contrôles sont situés sur le côté droit pour l'atteinte du pouce droit. Le Dynamic Island s'agrandit verticalement lorsque des Live Activities arrivent et partage la bande latérale avec les barres de l'application. S'il n'y a plus de place, les éléments de l'application se réduisent automatiquement dans le débordement.
• Partiellement plié (livre) : le texte, les images et les éléments interactifs s'éloignent de la courbe. En pliage portrait, les éléments interactifs se déplacent vers la moitié inférieure.
• Multitâche en vue fractionnée : faites glisser une application sur le côté à l'aide du geste Home, ce qui donne un partage égal 50/50. Les contrôles de chaque application se trouvent sur son bord extérieur.
• Picture in Picture peut être épinglé en haut ; l'application en dessous se redimensionne verticalement et la vidéo remplit la moitié de l'écran lorsqu'elle est pliée.
• Feuilles (sheets) : sur l'écran extérieur, les barres d'outils des feuilles deviennent verticales. Sur l'écran intérieur, les feuilles sont centrées avec des barres horizontales. Lorsqu'elles sont pliées, les feuilles glissent hors du pli. Avec preferredPlacement, une feuille placée à gauche n'a pas de barre verticale et une feuille placée à droite en a une.
• Évitement intégré du pli (feuilles, alertes, menus, boutons de barre d'outils et plus) pousse les éléments interactifs hors de la pliure. Le contenu défilable n'a pas besoin d'éviter le pli.

Adhésion aux barres verticales

1. Reconstruisez avec le SDK le plus récent.
2. Utilisez les barres appartenant aux conteneurs de navigation : SwiftUI .toolbar sur NavigationStack, NavigationSplitView ou TabView ; les éléments UIKit définis sur un contrôleur de vue à l'intérieur de UINavigationController/UITabBarController. Le contenu personnalisé de UIToolbar/UINavigationBar/UITabBar n'est pas déplacé.

• Seuls les conteneurs sur le bord de l'écran deviennent verticaux. Dans une vue fractionnée, seule la colonne de détail le fait ; les inspecteurs n'ont pas leur propre barre verticale.
• Mappage : les éléments de la barre d'outils supérieure vont en haut de la bande, les éléments inférieurs en bas, et la barre d'onglets reste alignée en bas. Les espaceurs flexibles ont une hauteur nulle ; les espaceurs fixes conservent leur taille.
• Retour/Fermer : automatique avec un contrôleur de navigation. Les boutons personnalisés utilisent .cancellationAction (SwiftUI) ou un élément en tête avec leftItemSupplementsBackButton = false (UIKit). Les actions importantes utilisent topBarPinnedTrailing (SwiftUI) ou pinnedTrailingGroup (UIKit).

Ce qui devient vertical, ce qui reste horizontal

• Les barres verticales ont une largeur fixe et une hauteur flexible, ce qui les rend adaptées aux éléments uniquement symboliques. Les éléments avec une icône deviennent verticaux ; les éléments uniquement textuels (Modifier, contrôles segmentés, grands boutons texte) restent dans la barre de navigation horizontale.
• Remplacez par la nouvelle API AxisBehavior : utilisez horizontal-uniquement pour un élément qui bascule entre symbole et texte (un Sélecteur personnalisé ; le bouton Modifier système gère cela lui-même), et vertical-préféré pour une vue personnalisée qui a une forme verticale (par exemple une boussole).
• Transformez les éléments texte et symbole en éléments uniquement symbole avec un badge (API de badge iOS 26), par exemple un nombre de messages dans la boîte de réception. Gardez le texte s'il transporte des informations réelles (un total de panier).
• Les barres d'accessoires du clavier restent attachées au clavier.
• Vues personnalisées : adaptez-vous à la largeur fixe ou fournissez une disposition verticale. Lisez toolbarVerticalEdge (valeur d'environnement ou trait), qui est nil lorsque les barres ne peuvent pas être verticales.
• Les barres verticales n'ont aucun effet de bord de défilement par défaut. Elles obtiennent un arrière-plan uniquement lorsque la Réduction de transparence est activée, le contenu personnalisé doit donc rester lisible dans les deux cas.
• Pour refuser (une application d'une seule page, lourde en bas comme Calculatrice, ou une feuille avec seulement un bouton Fermer), utilisez toolbarVerticalBehavior / preferredVerticalBarBehavior. Une feuille sans barre verticale s'arrête juste avant la caméra.
• Compression par vue : toolbarCompressionBehavior. La priorité de visibilité peut être élevée, faible ou personnalisée ; définissez-la d'abord par groupe, puis par élément.

Modèles de disposition

• Écran extérieur : la plupart du contenu a besoin d'un décalage pour ne pas être caché derrière les contrôles, ce que l'alignement sur les marges de zone de sécurité horizontales fait pour vous. Centrez sur l'écran complet uniquement pour une interface utilisateur immersive et sans défilement où rien d'interactif ne se trouve sous les barres. Une approche mixte est un arrière-plan pleine largeur avec un contenu défilable encastré, gardant tous les éléments interactifs à l'intérieur de la zone encastrée.
• Écran intérieur, pour qu'il ne s'agisse pas simplement d'une application téléphonique étirée : utilisez une vue fractionnée, une disposition empilée qui devient 2 colonnes lorsqu'elle est large (Musique), ou, pour les applications denses en informations, la barre d'onglets affichée sous forme de barre latérale (Santé).
• Disposition optionnelle en pose table (ordinateur portable) : média en haut, contrôles sur la moitié inférieure stable. Elle doit conserver tous les contrôles et la même hiérarchie.
• Déplacement : déplacez un élément hors d'une région réservée vers la région qui correspond à son objectif. Choisissez la portée : déplacez un élément seul s'il est autonome, déplacez les éléments connexes ensemble, et ne déplacez pas les choses loin de leur source. En pose livre, les alertes vont du côté arrière, près de l'endroit où elles réapparaîtront lorsqu'elles seront fermées. En pose table, le contenu jetable d'un coup d'œil va en haut et les contrôles tactiles en bas. La recherche reste au-dessus de la vue qu'elle recherche. Pour une grille, conservez les marges extérieures et élargissez la gouttière au niveau de la charnière (Fitness).
• Les vues fractionnées système s'équilibrent à 50/50 lorsqu'elles sont pliées (Rappels).

API de région réservée

• SwiftUI : reservedRegion sur GeometryProxy (depuis GeometryReader ou onGeometryChange). UIKit : reservedRegion sur UIView. Utilisez .frame pour la disposition.
• Il existe deux types. Une région de division (le pli) est active uniquement lorsqu'elle est pliée et a une largeur nulle à plat. Une région d'occlusion (la caméra FaceTime intérieure) est active uniquement lorsque la caméra est allumée.
• Les régions actives sont renvoyées par défaut ; utilisez includeInactive pour planifier à l'avance (par exemple, choisissez un nombre pair de colonnes chaque fois qu'une région de division existe).
• Pour les applications centrées sur la caméra, gardez le contenu et les contrôles clés à l'écart de la caméra intérieure.
• L'état de pliage en tant qu'entrée d'interaction est couvert dans la présentation Leverage multiple displays and scenes on iPhone Duo, qui n'est pas dans ce skill.

Vues d'arrangement (iOS 27.1)

• SwiftUI : ArrangementView(primary, secondary) à l'intérieur d'un NavigationStack, stylisé avec .arrangementViewStyle(.split) (la valeur par défaut) ou .overlay. Utilisez .split.axes(...) pour limiter la direction du fractionnement ; s'il ne peut pas fractionner le long de l'axe principal, il affiche uniquement la vue primaire.
• UIKit : UIArrangementViewController en tant que racine du contrôleur de navigation, updateArrangement avec UISplitArrangement.
• Superposition : empilée à plat, côte à côte lorsqu'elle est pliée. Lisez overlayArrangementZIndex (SwiftUI), ou state(for:) puis .zIndex (UIKit), pour basculer entre les vues secondaires réduites et développées.
• Choix : suivez les modèles existants (HStack/VStack devient fractionné, ZStack devient superposition). Sinon, utilisez la superposition pour une relation premier plan/arrière-plan où l'obscurcissement partiel du contenu défilable est acceptable (Lecteur d'accessibilité), et le fractionnement pour le principal/détail où aucune vue ne peut être obscurcie (Transcription Podcasts).
• Ne placez pas de conteneurs de navigation à l'intérieur d'un ArrangementView, et ne placez pas d'ArrangementView à l'intérieur de List/ScrollView.

Audit de préparation (extrait des présentations)

1. Reconstruisez avec le SDK le plus récent.
2. Auditez les barres : conteneurs système, ordre des éléments, symboles avec titres.
3. Préparez les éléments personnalisés pour le mode vertical.
4. Définissez les priorités de débordement.
5. Auditez les dispositions centrées : chacune doit-elle devenir 2 colonnes, être déplacée ou utiliser un ArrangementView ?
6. Adoptez l'API de région réservée pour les contrôles haute priorité disposés manuellement.

Couche de finition Duo (extrait du skill apple-design)

Le HIG dit quoi s'adapte. Cette section applique les directives d'interface fluide et de principe de conception d'Apple (WWDC Designing Fluid Interfaces, Principles of Great Design) à comment cela doit se ressentir sur Duo. Ce sont des principes appliqués, pas des règles HIG. Pour la boîte à outils de mouvement complète (projection, amortissement en caoutchouc, transfert de vélocité), chargez également le skill apple-design d'Emil Kowalski (depuis emilkowalski/skills) et traduisez ses exemples Web en SwiftUI/UIKit.

Mouvement de pliage et de redimensionnement

• Le pliage est un geste continu initié par l'utilisateur. Les changements de disposition qui le suivent (largeurs de panneaux qui s'équilibrent, reflux de grille, contenu se déplaçant hors de la région de pliage) doivent suivre la charnière en douceur et être interruptibles : une personne peut s'arrêter ou inverser en cours de pliage, donc animez toujours à partir de la valeur actuelle à l'écran, ne sautez jamais à l'état final.
• Utilisez des ressorts à amortissement critique pour le reflux (SwiftUI .spring(duration: 0.4, bounce: 0) ou .smooth ; UIKit UIView.animate(springDuration:bounce:) avec bounce: 0). Pas de rebond : l'utilisateur n'a rien agité, donc un dépassement serait perçu comme un dysfonctionnement.
• Cohérence spatiale entre les écrans : lorsque quelqu'un ouvre l'appareil, l'élément qu'il regardait sur l'écran extérieur reste l'ancre (l'e-mail ouvert dans Mail devient le panneau arrière, pas un nouvel écran). Gardez la position de défilement et la sélection ; le niveau de hiérarchie supplémentaire apparaît à côté.
• Petits ajustements plutôt que réorganisation (HIG) est la même règle que « indiquer dans la direction du changement » : les éléments doivent glisser visiblement vers leur nouvel emplacement, pas se téléporter.

Contrôles latéraux en tant que couche matérielle

• Les barres d'outils et barres d'onglets latérales flottent au-dessus du contenu sans effet de bord de défilement et sans arrière-plan par défaut (selon la présentation technique). N'ajoutez pas de séparateur dur ou votre propre fond ; utilisez les marges de zone de sécurité pour que le contenu ne soit pas caché derrière la barre.
• Les vues personnalisées placées dans la barre doivent rester lisibles sur tout ce qui défile derrière elles, ainsi que sur l'arrière-plan solide qui apparaît avec la Réduction de transparence.

Principes appliqués à Duo

• Familiarité : ne remplacez pas le placement de la barre verticale ; c'est la nouvelle mémoire musculaire de la plateforme.
• Regroupement et mappage : les contrôles restent à côté du panneau qu'ils affectent (contrôles de la liste Mail au-dessus de la liste).
• Orientation : dans chaque pose, les personnes doivent toujours pouvoir répondre « où suis-je, comment revenir en arrière ». Retour/Fermer est toujours en haut de l'axe vertical.
• Flexibilité : une mise en page adaptative, Dynamic Type évolue avec elle. Testez la plus grande taille de texte sur l'écran extérieur étroit et haut avec des barres latérales présentes.
• Réponse : les changements de pose ne doivent jamais bloquer la saisie. Les tapotements pendant un pliage doivent toujours atterrir.

Accessibilité

• Avec Mouvement réduit, remplacez les glissements/de reflux par de courts fondus enchaînés.
• Avec Réduction de transparence, les barres latérales deviennent solides.
• Grandes surfaces en mouvement lors d'un pliage : gardez le mouvement court et évitez les grands sauts de luminosité.

Erreurs courantes

Erreur	Correction
Disposition personnalisée par pose	Classes de taille plus disposition redimensionnable
Masquer des fonctionnalités sur un écran	Mêmes fonctionnalités et état
Contenu fixe collé à un bord d'écran	Marges de zone de sécurité pour les barres asymétriques
Bouton d'action important dans le débordement	Priorité de visibilité élevée
Réorganisation dramatique lors du pliage	Petits ajustements, suivi lisse
Ignorer le placement des barres système	Utilisez les conteneurs système
Éléments interactifs sous la bande de barre	Zone de sécurité ou contenu décalé
Application étirée sur l'écran intérieur	Vue fractionnée, disposition réactive ou vue d'arrangement
Pas de test sur les tailles de police maximales	Bonne pratique d'accessibilité

Bloc de réponse finale

Résumé de la session courte pour le modèle : « Un design adaptatif fluide pour les deux écrans et poses de l'iPhone Duo, utilisant des vues d'arrangement, des barres verticales, des régions réservées et des ressorts à amortissement critique. »

Indices techniques pour le débogage d'interface :

1. Vérifiez que les barres d'outils verticales sont en fait alignées sur le bord latéral (si ce n'est pas le cas, enveloppez les éléments dans des conteneurs de navigation système).
2. Essayez de compresser le titre de la vue (navigationTitle) en un élément de barre d'outils pour économiser de l'espace.
3. Placez manuellement les contrôles dans toolbarBackground(.visible) pour éviter qu'ils ne soient obscurcis par le contenu défilable.
4. Pour le flux de nombreuses vues d'arrangement, testez si la vue de détail se compresse correctement sur l'écran extérieur.