--- title: "iPhone Duo : où vont les barres de votre app GoodBarber" description: "Sur l'iPhone Duo, les barres de votre app GoodBarber passent dans un rail le long de la caméra, à vos couleurs : il suffit de recompiler votre app." canonical_url: "https://fr.goodbarber.com/blog/iphone-duo-ou-vont-les-barres-de-votre-app-a1501/" lang: fr date: 2026-11-12 last_updated: 2026-11-12 --- # iPhone Duo : où vont les barres de votre app Sur l'iPhone Duo, Apple range les commandes dans une colonne, le long de la caméra. Ce rail, le système ne le compose que pour ses propres barres : pour celles d'une app GoodBarber, il a fallu le dessiner. Une seule largeur, des icônes seules, des capsules aux couleurs de votre app : vos utilisateurs gardent leurs repères, et il vous suffit de recompiler. ![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) [Lesia PIETRI](https://fr.goodbarber.com/blog/author/lesia-pietri/)Head of Product Design [Choisissez **GoodBarber** commeSource d’actualités préféréeChoisissez **GoodBarber** comme](https://www.google.com/preferences/source?q=fr.goodbarber.com) 12 nov. 2026 · 5 min de lecture ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98656937-68861149.jpg?v=1794301537.2291713) L'écran extérieur de l'iPhone Duo est plus large et moins haut que celui d'un iPhone. Apple en a tiré une règle simple : la barre de navigation, la TabBar et les boutons quittent le haut et le bas de l'écran pour une colonne sur le côté, avec la barre d'état et la caméra. La hauteur revient au contenu, et les commandes restent à portée de main. Apple appelle cette colonne les « vertical controls ». Le système ne déplace pourtant que ses propres barres. Celles d'une app GoodBarber viennent de son design system, et il les laisse où l'app les a posées. La question était donc d'abord une question de design : que devient une TabBar quand elle passe d'une ligne à une colonne, et comment une app reste-t-elle reconnaissable dans une bande aussi étroite ? Le rail devait rester l'app, pas devenir une barre d'Apple. ## iPhone Duo fermé : un rail le long de la caméra ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98656937-68861150.jpg?v=1794302163.3050234) Premier parti pris pour les apps GoodBarber : une seule largeur pour tout ce qui entre dans le rail de l'iPhone Duo, celle d'un raccourci, avec son icône au centre. Le retour, la recherche, les favoris, chaque onglet de la TabBar tiennent dans la même case, et la colonne se lit d'un trait. Le rail ne porte que des icônes ; leurs noms ne disparaissent pas pour autant, VoiceOver les lit. Sur Eastside, l'app de démo d'une école de musique, la colonne reste calme et laisse les couleurs des annonces au premier plan. Deuxième parti pris, celui d'Apple : ce qui était en haut reste en haut, ce qui était en bas reste en bas. Le retour et les raccourcis ouvrent la colonne, la TabBar la ferme. Celui qui connaît l'app sur son téléphone n'a rien à réapprendre : sa carte de l'app est la même, elle a seulement pivoté. ## Tournez le téléphone, le rail change de côté [L'iPhone Duo fermé tourne d'un côté puis de l'autre : le rail suit la caméra, les icônes restent droites.](https://player.vimeo.com/video/1245376868?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0&dnt=1) Couché en paysage, l'iPhone Duo fermé emporte son rail avec la caméra : à droite dans un sens, à gauche dans l'autre. Les icônes restent droites, et c'est le contenu qui se recale autour. Ce côté appartient à l'appareil : une app en arabe ou en hébreu garde son rail contre la caméra. Vu de près, c'est un détail ; à l'usage, c'est ce qui rend le geste naturel. On remarque dans une interface ce qui résiste au geste. Un rail qui suit l'appareil se fait oublier, et c'est exactement ce qu'on lui demande. ## iPhone Duo ouvert : le rail en paysage, les barres en portrait [L'iPhone Duo ouvert passe du paysage au portrait : les barres quittent le rail pour revenir en haut et en bas.](https://player.vimeo.com/video/1245376869?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0&dnt=1) Ouvert en paysage, l'écran intérieur de l'iPhone Duo garde le rail ; tourné en portrait, c'est la seule pose où les barres reviennent en haut et en bas. Sur Tweed & Cheviot, l'app de démo d'une société d'histoire naturelle, la recherche et les favoris remontent dans la barre de navigation, et la TabBar reprend le bas. Le passage pourrait désorienter, et c'est l'ordre qui l'en empêche : ce qui ouvrait le rail ouvre la barre, et les onglets gardent leur suite. Une commande se repère par sa place parmi les autres, bien plus que par le bord où elle s'accroche. En portrait, la barre de navigation reste aussi en place quand on fait défiler. En se cachant, elle laisserait passer le texte sous l'heure, logée dans le coin de l'écran. Tant que les repères tiennent, l'écran peut changer de forme autant qu'il veut. ## Dans un article, le rail ne garde que les outils du texte ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98656937-68861153.jpg?v=1794301949.0997427) Dans un article, une app GoodBarber sur l'iPhone Duo ne garde que ce qui sert au texte. La TabBar s'efface, comme sur le téléphone dès qu'un écran a un retour ; le retour monte seul en haut du rail, et une capsule en bas rassemble les outils du lecteur : commenter, partager, grossir les lettres, garder pour plus tard. Des actions qui vont ensemble partagent leur capsule. À l'ouverture de l'article, les capsules du rail changent en fondu, au rythme de la page qui arrive : le rail suit la navigation d'un seul mouvement. La photo d'en-tête, elle, monte jusqu'en haut de l'écran et passe sous le rail. Les icônes d'une barre transparente sont souvent claires, faites pour se poser sur une image ; sans fond, elles finiraient blanches sur une page blanche. Chaque capsule garde donc un fond, ni blanc pur ni noir pur, mais un ton adouci, teinté de la couleur de ses icônes, avec le contraste que demande l'accessibilité. Le contraste juste plutôt que le plus fort : un fond nuancé est plus soigné. ## Les barres de votre app, à vos couleurs ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98656937-68861154.jpg?v=1794301542.2612038) Dans une app GoodBarber, chaque barre est dessinée par l'app : elle porte ses propres couleurs et sa propre forme, et le rail les garde. Chaque capsule prend le fond de la barre d'où elle vient. Sa forme suit celle de votre [TabBar](https://fr.goodbarber.com/blog/tabbar-place-a-une-nouvelle-generation-a1343/), des angles droits à la pilule, sur tous les écrans de l'app, y compris ceux où la TabBar n'apparaît pas. Côte à côte, les rails d'Eastside, de Tweed & Cheviot et de The Current ne parlent pas la même langue visuelle, et c'est voulu. Le moteur de GoodBarber fait le reste. Il demande au système la place d'une barre sur ce côté, qui évite déjà la caméra, et y pose les capsules dans l'ordre de l'écran. Le rail suit le design que vous avez déjà, sans réglage à ajouter. ## Ce qu'il vous reste à faire : recompiler votre app iOS ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98656937-68861155.jpg?v=1794301543.3212106) Dans le back office, « Recompiler et soumettre » recompile votre app iOS avec le rail ; la mise à jour arrive chez vos utilisateurs une fois publiée, après la revue de l'App Store. Rien à redessiner, rien à régler. Votre app Android, votre PWA et votre app iPad restent telles quelles. Pour voir le rail bouger, ouvrez et fermez l'iPhone Duo sur [notre page iPhone Duo](https://fr.goodbarber.com/iphone-duo/?utm_campaign=iphone-duo). Ce qui change pour votre app, d'un écran à l'autre, est dans [notre article de lancement](https://fr.goodbarber.com/blog/iphone-duo-l-iphone-pliable-ce-qui-change-pour-votre-app/). Les règles d'Apple et leurs sources sont rassemblées, en anglais, sur les fiches [Where the bars go](https://duoapps.com/patterns/where-the-bars-go/) et [Custom bars](https://duoapps.com/patterns/custom-bars/) de DuoApps. Et si vous n'avez pas encore d'app, [créez la vôtre](https://fr.goodbarber.com/create/?utm_campaign=iphone-duo). Suivez GoodBarber sur Google [![Ajouter en tant que source préférée sur Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-fr.fa4aafcf456d.png)](https://www.google.com/preferences/source?q=fr.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) À propos de l'auteur Lesia PIETRI Head of Product Design Je suis Head of Product Design chez GoodBarber. Je dirige le design du produit : le design system sur lequel toutes les apps sont construites, les layouts qui servent de point de départ, et le parcours qui mène d'une idée à une app publiée. Mon travail, c'est qu'une personne qui n'a jamais ouvert un outil de design publie quand même une app qui a l'air pensée, écran après écran. Designer dans l'âme, je passe mes journées sur les détails que personne ne nomme : les espacements, les contrastes, le poids d'un titre. J'écris ici sur le design de GoodBarber, et sur les nouveautés du produit : les fonctionnalités, les layouts et les thèmes. [Voir tous ses articles](https://fr.goodbarber.com/blog/author/lesia-pietri/)[LinkedIn](https://www.linkedin.com/in/lesia-pietri-150824116/)