iOS 26 : nos recommandations pour une app Best in Glass

Depuis plusieurs mois, le nouveau langage de design d’Apple a fait couler pas mal de Liquid sous les posts. Qu’on l’apprécie ou pas (voire qu'on adore le détester), Liquid Glass est indéniablement une prouesse technique. Dès la sortie officielle d’iOS 26 ce lundi 15 septembre, (quasi) toutes les applications natives d’Apple ont été mises à jour, et depuis les grands acteurs de l’App Store commencent à sortir des nouvelles versions intégrant Liquid Glass. D’ici quelques mois, l'écosystème Apple tout entier aura été unifié et modernisé pour prendre en charge cette nouvelle apparence. 

Cyrille, Lead Developer iOS, a décortiqué pour vous (et pour son plaisir !) iOS 26, et vous guide pour orchestrer une parfaite intégration de Liquid Glass dans la prochaine version de votre application, depuis la conception jusqu’à l’implémentation technique.

En conception : une nouvelle vision de l’expérience utilisateur

Il ne sert à rien de se ruer tête baissée dans Xcode. En effet, une chose à ne pas négliger, c’est que Liquid Glass n’est pas qu’une refonte visuelle : de nouveaux paradigmes d’UX sont mis en place pour faciliter la navigation dans les apps, notamment au niveau des tabs (onglets en bas d’écran) et des écrans de recherche.

Si vous souhaitez embrasser le nouveau design d’Apple, il va être nécessaire de revoir les parcours de navigation et de recherche pour les appareils compatibles iOS 26, tout en vous assurant que votre app continuera de fonctionner comme avant pour tous ceux qui ne feront pas la mise à jour. Un passage par la case conception est donc indispensable pour garantir une expérience fluide !

Navigation plein écran

Les barres d’onglet (tab bar, en bas) ne sont plus collées aux bords de l’écran, mais flottantes.
Les barres de navigation (nav bar, en haut) ne sont plus rectangulaires mais transparentes, avec un effet de flou progressif.
Le contenu principal de vos écrans, qui était auparavant contraint par ces barres, est donc désormais libre d’occuper tout l’écran.

Ce nouveau design plein écran est automatique et obligatoire dès lors que vos apps sont compilées avec le SDK iOS 26 et utilisent les composants de navigation natifs UIKit ou SwiftUI.
(On vous explique plus bas comment “contourner" cette obligation à court terme, le temps de travailler sur votre nouveau design).

Nouveaux paradigmes facultatifs

L'onglet de recherche peut désormais être visuellement scindé du reste de la tab bar. Le système le place alors automatiquement à droite, sans autre emplacement possible.

Ceci remet en question le design de certaines tab bar qui portent, en leur centre, un bouton d'action proéminent — pratique qui a toujours été contraire aux guidelines Apple, selon lesquelles la tab bar ne doit jamais proposer d'actions mais uniquement des changements de contexte de navigation.

Cet onglet de recherche se transforme en champ de recherche quand on l’active, et les autres onglets se "rétractent" en un seul — ce qui ressemble fonctionnellement à un bouton "back", mais pour les onglets.

Le champ de recherche, qui se trouvait par convention en haut d'écran (sous la nav bar), se retrouve donc en bas d'écran, un peu comme la barre d'adresse de Safari, ou le champ de composition de texte dans toutes les messageries. Cela facilite l'accès (pour le pouce) et la saisie car il n'est plus nécessaire de faire des allers-retours (avec les yeux) entre le clavier et le champ de recherche quand on y saisit du texte.

“Liquid Glass apporte transparence et profondeur à la recherche, créant une fluidité qui change notre rapport aux résultats et suggestions. Les guidelines sont encore floues (!), mais c’est justement une chance pour les designers : imaginer des scénarios où la recherche s’adapte au contenu, où les suggestions flottent de façon contextuelle et où les filtres prennent une dimension presque spatiale. Pour un UI designer, c’est l’opportunité d’explorer une recherche plus sensible, vivante et intuitive.”

Alex Gomes, Lead UI Designer

Dans les longs écrans scrollables, il est possible de rétracter la tab bar en un seul bouton au scroll, et la faire réapparaître facilement au tap, ou au scroll en sens inverse :

Une "barre accessoire" peut prendre place au-dessus de la tab bar, et venir se "coller" au bas de l'écran au scroll.

Cette fonctionnalité est notamment exploitée par Apple Music, mais peut aussi servir à héberger un panier par exemple :

L’enjeu en design : le bon dosage pour votre UI

Une fois votre navigation repensée pour iOS 26 (tout en continuant d'assurer le fonctionnement sous les versions antérieures), il est temps de passer à l'étape de maquettage.

Les deux principaux outils d'édition du marché, Figma et Sketch, disposent depuis fin août de nouvelles fonctionnalités leur permettant de répliquer du Liquid Glass. Mais attention : ce n'est pas un rendu pixel-perfect !

Techniquement, le rendu Liquid Glass est un mécanisme extrêmement complexe, basé entre autres sur des shaders. Apple n'a bien évidemment pas rendu le code source public, et Figma et Sketch ont du "bidouiller" pour concevoir quelque chose qui ressemble à du Liquid Glass, mais qui n'en est pas. Ce que vous pourrez donc réaliser avec ces outils ne sera jamais un rendu final, mais n’est-ce pas le propre d’une maquette ?

De manière générale, sauf à re-développer soi-même tous les composants système de navigation, aucune maquette n'est pixel-perfect sur tous les appareils. Les marges système, notamment, changent de device en device, et même d'une version d'iOS à l'autre sur le même appareil.

Notre conseil : en ce qui concerne la navigation, utilisez les maquettes pour montrer l'idée générale, et faites confiance à vos développeurs, ils connaissent les normes de leur plateforme par cœur.

“Liquid Glass unifie et fluidifie l’expérience au sein de l’écosystème Apple, en conciliant spécificités des interfaces et identité commune. C’est la plus grande refonte graphique depuis iOS 7, pensée pour allier immersion, accessibilité et ouvrant la voie aux futurs usages hybridés avec le monde réel.”

Anne-Sophie Gotteland, Head of UI

Variantes de Liquid Glass

Tout d’abord, il faut savoir que Liquid Glass ne se préoccupe pas du mode clair ou sombre de l’ensemble de votre interface. Les composants Liquid Glass adaptent naturellement leur apparence aux contenus qu'ils recouvrent, transformant leurs effets de transparence en nuances plus profondes pour offrir une expérience élégante et lisible sur tous les arrière-plans : le choix du verre clair ou foncé est automatiquement effectué par le système en temps réel, en fonction du contenu affiché en-dessous.

iOS 26 propose deux variantes principales : le mode "clear", complètement transparent, et le mode "regular" qui donne un effet laiteux, fumé et opaque :

Ces deux variantes peuvent être teintées avec une couleur arbitraire :

Les contrôles voisins peuvent être regroupés dans un unique « conteneur » Liquid Glass, qui s’anime de façon organique :

Malgré cela, il n'est pas conseillé d'utiliser Liquid Glass partout où c'est possible. C'est un effet qui doit être réservé aux composants proéminents (call-to-action, navigation, …), et qui ne devrait pas apparaître dans le contenu principal de l’application :

"You may be tempted to use Liquid Glass everywhere but it is best reserved for the navigation layer that floats above the content of your app."
WWDC25-219: Meet Liquid Glass

Rétro-compatibilité du design system

N'utiliser Liquid Glass que dans les éléments de navigation permet aussi de répondre à une problématique cruciale, celle de la rétro-compatibilité.

En mettant à jour vos apps pour iOS 26, il est très improbable que vous décidiez d’arrêter net le support des versions antérieures d’iOS. C'est là que la flexibilité d’un design system bien pensé s’avère payante : en créant des variantes des composants de navigation, et des variables reflétant les différences entre ancien et nouveau design, il est facile de concevoir des maquettes universelles.

Si vos apps sont aussi publiées sur Android, il est fort probable que vous ayez déjà des composants multi-variantes pour les deux plateformes ; il suffit alors de considérer iOS 26 comme une troisième plateforme dans votre outil design préféré.

Design universel iOS+Android

Si, en revanche, vous exploitez un design commun entre iOS et Android… il est alors peut-être temps de faire diverger les deux plateformes ! Un design exclusivement orienté Liquid Glass sera difficilement portable sur Android ; un design universel (inspiré par exemple du Material Design) fera quant à lui encore plus ressentir l’absence d’adhérence aux conventions iOS.

La meilleure solution est de designer des contenus communs (agnostiques de la plateforme et même de la version des OS), et de laisser chaque plateforme gérer la navigation selon ses propres conventions. Quelques écrans complets peuvent être déclinés sous Android, iOS 18, iOS 26 afin de servir de démonstration aux parties prenantes, mais n’ont pas besoin de servir de référence aux développeurs.

Côté tech : Apple nous livre (presque) du clé en main

Du code natif et intuitif

Liquid Glass est facilement pris en charge aussi bien par UIKit que par SwiftUI, et amplement documenté chez Apple :

• Lors de la WWDC25, la session Meet Liquid Glass présente en vidéo les nouveautés ;
• Les immanquables Human Interface Guidelines ont été mises à jour pour expliquer les concepts d’usage ;
• L’article Adopting Liquid Glass détaille les implémentations à effectuer pour SwiftUI, UIKit et même AppKit (pour macOS).

Afin d’assurer une transition en douceur et n’utiliser Liquid Glass que sur les appareils qui le supportent, vous devrez utiliser les habituels tests if #available(iOS 26, *), par exemple :

struct LoginButton: View {
    var body: some View {
        if #available(iOS 26, *) {
            Button("Connexion") { /*...*/ }
                .buttonStyle(.glassProminent)
        }
        else {
            Button("Connexion") { /* ... */ }
                .buttonStyle(.borderedProminent)
        }
    }
}

Ainsi, si vous n’utilisez que des composants de navigation système et que vous disposez d’un design system correctement implémenté de façon atomique, la transition sera très facile.

Dans le cas où vos écrans ont été implémentés de façon monolithique, ou si vous utilisez des composants de navigation maison, l'introduction de Liquid Glass est plus complexe. Il faut alors commencer par une passe de refactoring afin de découpler correctement les contenus, les décorations, la navigation de vos écrans, pour retrouver des composants atomiques qu’il sera plus facile de moderniser.

N’oubliez pas non plus le support des tablettes, si celui-ci est activé dans votre projet. Les UX de navigation ont aussi changé sur les iPad, notamment au niveau des Tab Bar, et il ne faut pas les laisser de côté lors de vos tests de non-régression.

Et le multi-plateforme ?

Si vous avez opté pour des applications multi-plateforme iOS et Android avec Flutter ou React Native, la situation est différente :

Flutter

En Flutter, le moteur de rendu de l'UI est entièrement indépendant de l'OS sur lequel il tourne, il ne supporte donc pas Liquid Glass nativement. Plusieurs pistes d’adoption sont possibles :

• utiliser un package qui serait basé sur l’utilisation de PlatformView pour laisser iOS effectuer lui-même le rendu de certains composants : ce n’est pas du tout pensé pour ça, plutôt pour exploiter des écrans entiers (WebView, SDK tiers type cartographie, …). De plus, cela découple fortement le code iOS/Android et fait perdre tout l’intérêt de Flutter.
• attendre que Google mette à jour les widgets Cupertino, si votre app les utilise. Cette mise à jour est actuellement à l’étude, mais l’implémentation sera certainement réalisée avec un shader maison qui ne ressemblera pas à 100% au Liquid Glass d’Apple.

React Native

En React Native, le rendu utilise les composants natifs de chaque plateforme, à condition évidemment de compiler votre projet iOS en utilisant Xcode 26.

Le choix de vos librairies de navigation va être déterminant. Le combo Expo 54 et Expo router v6, fraîchement annoncés, permet d’ores et déjà de profiter de Liquid Glass sur iOS. Si vous utilisez React Native CLI, il vous faudra attendre la mise à jour de votre librairie ou vous tourner vers une nouvelle qui le prend en charge.

Pas tout à fait prêt à vous lancer ?

Sachez que, comme pour chaque mise à jour de son OS, Apple laisse aux éditeurs la possibilité de soumettre sur l'App Store des applications compilées avec la version précédente d’Xcode. Vous pouvez donc rester sur Xcode 16 et le SDK iOS 18 pour l'instant, en revanche vous ne pourrez pas profiter des autres nouveautés iOS 26, telles que l’IA en local (le Foundation Models Framework fera lui aussi l’objet d’un article à venir...).

À plus court terme, il vous est également possible d’utiliser Xcode 26 et le SDK iOS 26 en désactivant uniquement Liquid Glass grâce à l’option UIDesignRequiresCompatibility, mais Apple a clairement annoncé à la WWDC que ce flag est temporaire et sera inhibé d'ici quelques mois.

En conclusion : aucun frein technique, mais une conception holistique

La mise à jour de vos apps pour iOS 26 est une vraie opportunité de montrer la réactivité et le modernisme de votre marque. Correctement réalisée, elle prouve votre attention et votre respect pour les choix de vos utilisateurs, au même titre que les options d’accessibilité par exemple.

La difficulté ne réside pas dans l’implémentation technique, mais dans la conception holistique du projet : une UX cohérente, pas seulement au sein de votre app mais avec tout le système, une UI moderne et fluide, nécessitent une réflexion en profondeur.

De votre marque, moderne et respectueuse, à vos utilisateurs, rassurés et fidélisés par une expérience familière, en passant par toute la chaîne de conception et de production qui emploie des techniques et des outils modernes, tout le monde y est gagnant !

--
Vous souhaitez être accompagné ?
Cyrille* sera ravi d’en discuter avec vous !
uainfo@useradgents.com

(*nous aussi)