iPhone Duo : où vont les barres de votre app

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.

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é.

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é.

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, 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.

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. Ce qui change pour votre app, d'un écran à l'autre, est dans notre article de lancement. Les règles d'Apple et leurs sources sont rassemblées, en anglais, sur les fiches Where the bars go et Custom bars de DuoApps. Et si vous n'avez pas encore d'app, créez la vôtre.