Le splash screen est l'écran affiché au lancement d'une application, souvent avec le logo. On explique son rôle, les règles d'Apple et d'Android, et comment le concevoir sans pénaliser l'expérience.
Un splash screen, ou écran de démarrage, est l’écran affiché pendant quelques instants à l’ouverture d’une application (ou, plus rarement, d’un site) : en général le logo sur un fond de couleur, parfois animé. Il sert à faire patienter pendant le chargement tout en posant l’identité de la marque. Aujourd’hui, Android et iOS encadrent strictement cet écran, et sur un site web il est le plus souvent à éviter.
On voit ici à quoi sert un splash screen, la différence avec l’écran de lancement d’Apple, les règles actuelles d’Android, le cas des sites et des PWA, puis les bonnes pratiques de design pour qu’il donne une bonne première impression sans faire perdre de temps à l’utilisateur.
Sommaire
- Qu’est-ce qu’un splash screen ?
- À quoi sert un écran de démarrage ?
- Splash screen et écran de lancement : que dit Apple ?
- Comment fonctionne le splash screen sur Android ?
- Faut-il un splash screen sur un site web ?
- Comment bien concevoir un splash screen ?
- Comment intégrer le splash screen au projet de design ?
- Quelles erreurs éviter ?
- Questions fréquentes
- Sources
Qu’est-ce qu’un splash screen ?
Le splash screen (littéralement « écran d’éclaboussure », traduction que personne n’utilise) désigne l’écran d’accueil temporaire qui s’affiche au lancement d’une application ou d’un logiciel, avant l’interface principale. On parle aussi d’écran de démarrage ou d’écran de chargement. Il occupe généralement tout l’écran et contient le plus souvent le logo, parfois une animation ou une barre de progression.
Le terme recouvre en réalité plusieurs choses qu’il vaut mieux distinguer :
- L’écran système au lancement d’une application mobile, affiché par Android ou iOS pendant que l’application démarre.
- Un écran de marque affiché par l’application elle-même, par exemple en début de parcours d’accueil (onboarding).
- Une page d’introduction sur un site web, qui s’affiche avant la page d’accueil. Très répandue au début du web, elle a quasiment disparu.
- L’écran de démarrage d’un logiciel de bureau, comme ceux des logiciels de création graphique pendant le chargement de leurs modules.
À quoi sert un écran de démarrage ?
Un splash screen bien conçu remplit trois rôles :
- Rassurer : l’utilisateur voit immédiatement que son geste a été pris en compte et que l’application se lance. Sans cela, un écran vide ou figé donne l’impression d’un bug.
- Donner l’impression d’un lancement rapide : un affichage immédiat, cohérent avec l’écran qui suit, rend l’attente moins perceptible.
- Poser l’identité de la marque : logo, couleur dominante, éventuellement une courte animation. C’est la première chose que voit l’utilisateur à chaque ouverture.
Ce qu’un splash screen ne doit pas être : une page de publicité, un mur qui retarde volontairement l’accès au contenu ou un écran de connexion déguisé. Les utilisateurs l’ont appris depuis longtemps, et les systèmes d’exploitation l’encadrent désormais.
Splash screen et écran de lancement : que dit Apple ?
Apple fait une distinction nette dans ses Human Interface Guidelines. Sur iOS, iPadOS et tvOS, l’application doit fournir un écran de lancement (launch screen), que le système affiche dès que l’application démarre et remplace rapidement par le premier écran. Selon Apple, cet écran « n’est ni une partie de l’onboarding ni un splash screen », et sa seule fonction est de donner l’impression d’une application rapide et prête à l’emploi.
Les consignes d’Apple pour l’écran de lancement :
- Le concevoir presque identique au premier écran de l’application, pour éviter un flash désagréable à la transition. Si l’application affiche d’abord une couleur unie, l’écran de lancement ne montre que cette couleur.
- Éviter le texte, même si le premier écran en contient, car il ne serait pas traduit.
- Ne pas en faire une occasion de branding : pas de logo ni d’élément de marque, sauf s’ils font partie fixe du premier écran.
- Respecter l’orientation de l’appareil et le mode clair ou sombre.
Et si vous tenez à un vrai splash screen de marque ? Apple suggère de l’afficher au début du parcours d’accueil (onboarding), ou, s’il n’y en a pas, juste après la fin du lancement. Apple le décrit comme un visuel soigné qui communique la marque et les informations nécessaires de façon concise.
Comment fonctionne le splash screen sur Android ?
Depuis Android 12, le système affiche un écran de démarrage pour toutes les applications, via l’API SplashScreen. La bibliothèque de compatibilité AndroidX (core-splashscreen) apporte ce fonctionnement aux versions à partir de l’API 23 (Android 6.0). Google demande aux applications ciblant Android 12 et plus d’abandonner leurs écrans de démarrage maison (une activité dédiée au splash, par exemple) au profit de cette API.
L’écran se compose de trois éléments personnalisables :
| Élément | Règle |
|---|---|
| Icône de l’application | Image vectorielle, fixe ou animée. Animation recommandée de 1 000 ms maximum |
| Fond de l’icône (optionnel) | Crée du contraste entre l’icône et le fond de la fenêtre |
| Fond de la fenêtre | Une couleur unie opaque |
| Dimensions de l’icône | 240 × 240 dp avec fond d’icône (contenu dans un cercle de 160 dp), 288 × 288 dp sans fond (cercle de 192 dp) |
À savoir : l’écran s’affiche lors d’un démarrage « à froid » ou « tiède », jamais quand l’application est simplement ramenée au premier plan. Il disparaît dès que l’application dessine sa première image. On peut le prolonger le temps de charger des données, mais Google recommande que l’animation puisse être sautée confortablement et déconseille d’y ajouter une image de marque en bas d’écran, même si l’API le permet.
Si vous développez avec un outil multiplateforme comme Flutter, les écrans de démarrage natifs iOS et Android restent à configurer pour chaque système (voir notre article sur le développement d’applications avec Flutter).
Faut-il un splash screen sur un site web ?
Dans la grande majorité des cas, non. Une page d’introduction ou un écran de chargement plein écran avant la page d’accueil pose trois problèmes :
- Il retarde l’accès au contenu. Or la vitesse d’affichage du contenu principal est mesurée par le Largest Contentful Paint (LCP), l’un des Core Web Vitals de Google, qui doit rester sous 2,5 secondes pour au moins 75 % des visites. Un écran qui masque la page ne fait que repousser ce moment. Voir notre article sur le Largest Contentful Paint.
- Il ressemble à un interstitiel intrusif. La documentation Google Search conseille de ne pas masquer toute la page avec un interstitiel et de ne pas rediriger l’utilisateur vers une page séparée, car cela gêne à la fois les visiteurs et la compréhension du contenu par les moteurs.
- Les visiteurs le sautent ou quittent le site, surtout sur mobile avec une connexion moyenne.
Les exceptions légitimes sont les écrans imposés par la loi (vérification d’âge, consentement aux cookies), qui doivent rester des surcouches et non des redirections. Pour montrer votre univers de marque, préférez une page d’accueil forte et rapide, avec éventuellement une micro-interaction ou une animation légère qui ne bloque rien.
Le cas des progressive web apps
Une PWA installée sur Android bénéficie d’un écran de démarrage généré automatiquement : selon la documentation web.dev, Chrome le crée à partir des champs name, background_color et icons du manifeste de l’application. Fournir des icônes de 192 et 512 pixels suffit dans la plupart des cas, et il est conseillé d’accorder la couleur de fond à celle de la page qui se charge. Plus de détails dans notre article sur les progressive web apps.
Comment bien concevoir un splash screen ?
Même encadré par les systèmes, l’écran de démarrage reste un élément de design à ne pas bâcler. C’est le premier contact visuel à chaque ouverture de l’application. Voici les principes à suivre :
- Partir de l’identité visuelle : couleur de marque en fond, logo ou icône bien centré et lisible en petit. Un logo compliqué ou chargé de texte passe mal à cette taille.
- Soigner la transition : l’écran de démarrage doit s’enchaîner sans rupture avec le premier écran (même couleur de fond, même position du logo si celui-ci reste affiché).
- Faire court : l’écran doit disparaître dès que l’application est prête. On ne rallonge pas un chargement pour montrer une animation.
- Animer avec retenue : sur Android, une animation d’icône de 1 000 ms maximum. Une écriture progressive pour un logo manuscrit, un assemblage de formes pour un logo géométrique : l’effet doit rester simple.
- Prévoir le mode sombre et les différentes tailles et orientations d’écran.
- Tester sur un appareil d’entrée de gamme et une connexion lente, là où l’écran reste visible le plus longtemps.
Pour animer un logo sans alourdir l’application, les animations vectorielles au format Lottie sont une option courante (voir notre article sur Lottie). Si votre identité n’est pas encore adaptée aux petits formats d’écran, un travail sur votre identité visuelle (logo déclinable, icône, palette) est le bon point de départ avant de dessiner l’écran de démarrage.
Comment intégrer le splash screen au projet de design d’une application ?
L’écran de démarrage paraît simple, puisqu’il reprend surtout le logo. Il demande pourtant plus de temps que prévu dès qu’on veut l’animer ou le décliner proprement sur chaque plateforme. Mieux vaut donc le prévoir dès le planning de design, et non au dernier moment avant la publication sur les stores.
- Au moment de la charte : vérifier que le logo existe en version icône, lisible en petit, et qu’une couleur de fond de marque est définie pour le mode clair et le mode sombre.
- Pendant la maquette : dessiner l’écran de démarrage en même temps que le premier écran de l’application, pour que la transition soit fluide. Sur iOS, c’est même la règle : l’écran de lancement doit ressembler au premier écran.
- Avant le développement : préparer les fichiers aux formats attendus, en particulier une icône vectorielle respectant les dimensions Android et, si besoin, l’animation.
- En recette : tester les démarrages à froid sur plusieurs appareils, en mode clair et sombre, en portrait et en paysage.
Si votre application prévoit un écran de marque plus riche (animation, message d’accueil), placez-le au début de l’onboarding, comme le suggère Apple, plutôt que dans l’écran système. Vous gardez ainsi un lancement rapide et un vrai moment de marque pour les nouveaux utilisateurs, que les habitués ne revoient pas à chaque ouverture.
Quelles erreurs éviter ?
- Un délai artificiel de plusieurs secondes pour « montrer la marque » : l’utilisateur ne vient pas pour ça.
- Du texte ou un slogan sur l’écran de lancement iOS : Apple le déconseille, et il ne serait pas traduit.
- Une vidéo lourde en lecture automatique : elle ralentit le démarrage et consomme des données.
- Un écran de démarrage maison en plus de celui d’Android 12 : l’utilisateur voit alors deux écrans successifs. Utilisez l’API SplashScreen.
- Une rupture visuelle entre l’écran de démarrage et l’interface (couleur différente, logo qui saute d’une position à l’autre).
- Une page d’introduction sur un site avant la page d’accueil.
Questions fréquentes
Comment dit-on splash screen en français ?
On parle d’écran de démarrage, d’écran de lancement ou d’écran de chargement. Le terme anglais reste le plus utilisé par les développeurs et les designers.
Combien de temps doit durer un splash screen ?
Le moins longtemps possible : il doit disparaître dès que l’application est prête. Sur Android, Google recommande une animation d’icône de 1 000 ms maximum.
Peut-on mettre son logo sur l’écran de lancement iOS ?
Apple le déconseille, sauf si le logo fait partie fixe du premier écran de l’application. Pour un écran de marque, Apple suggère plutôt de l’intégrer au début de l’onboarding.
Un splash screen nuit-il au référencement d’un site ?
Il peut le faire s’il masque tout le contenu ou redirige vers une page séparée : Google déconseille ces interstitiels, et l’affichage du contenu principal est retardé.
Quelle différence entre splash screen et onboarding ?
Le splash screen couvre le temps de lancement, en une seule image. L’onboarding est une suite d’écrans qui présentent l’application et ses fonctions aux nouveaux utilisateurs.
