Recommandations en matière d’écran de démarrage

Applies to Windows and Windows Phone

Suivez les recommandations ci-dessous pour personnaliser l’écran de démarrage et créer un écran de démarrage étendu afin d’offrir à vos utilisateurs une bonne expérience de lancement.

Voir cette fonctionnalité en action dans le cadre de notre série Fonctionnalités d’application de A à Z:  Interface utilisateur des applications du Windows Store de A à Z

Pratiques conseillées et déconseillées

  • Personnalisez l’écran de démarrage afin de rendre votre application unique. Votre écran de démarrage est constitué d’une image et d’une couleur d’arrière-plan que vous pouvez personnaliser. Un écran de démarrage bien conçu peut contribuer à rendre votre application plus attrayante.

    La combinaison de l’image et de la couleur d’arrière-plan choisies permet d’obtenir un écran de démarrage qui s’affiche correctement quel que soit le format de l’appareil sur lequel votre application est installée. Lorsque l’écran de démarrage apparaît, seules les dimensions de l’arrière-plan sont modifiées afin de prendre en charge toute une variété de tailles d’écran. Votre image reste toujours intacte.

    Pour apprendre à ajouter et personnaliser cet écran de démarrage, voir Démarrage rapide : ajout d’un écran de démarrage.

  • Créez un écran de démarrage étendu afin de réaliser des tâches supplémentaires avant d’afficher la page d’accueil de votre application. Vous pouvez contrôler davantage l’expérience de chargement de votre application en créant un écran de démarrage étendu qui imite l’écran de démarrage affiché par Windows. En imitant l’écran de démarrage affiché par le système, vous pouvez créer une expérience de chargement fluide et informative à vos utilisateurs. Si votre application nécessite davantage de temps pour préparer son interface utilisateur ou charger des données réseau, vous pouvez utiliser l’écran de démarrage étendu pour afficher un message à l’utilisateur pendant que votre application achève ces tâches.

    L’écran de démarrage étendu pour le Windows Store se trouve ci-dessous. Remarquez que cet écran est identique à l’écran de démarrage initial auquel a été ajouté un contrôle de progression « anneau indéterminé » pour indiquer à l’utilisateur le chargement de l’application.Capture d’écran de l’écran de démarrage étendu du Windows Store

    Pour en savoir plus sur l’utilisation de la classe SplashScreen pour créer un écran de démarrage étendu, voir Comment faire pour étendre l’écran de démarrage (applications du Windows Store en JavaScript et HTML) ou Comment faire pour étendre l’écran de démarrage (applications du Windows Store en C#/VB/C++ et XAML).

    Pour une vue d’ensemble des contrôles de progression, notamment l’anneau indéterminé, voir Recommandations en matière de contrôle de progression.

    Astuce  Si vous utilisez le chargement de fragment pour charger votre écran de démarrage étendu, il se peut que vous aperceviez un scintillement entre le moment où vous sortez de l’écran de démarrage Windows et celui où s’affiche l’écran de démarrage étendu. Ce scintillement apparaît car le chargement de fragment commence à charger votre écran de démarrage étendu de manière asynchrone, avant que le gestionnaire d’événements activated termine son exécution. Vous pouvez éliminer entièrement ce désagrément visuel en ayant recours au modèle de conception illustré par l’exemple d’écran de démarrage. Au lieu d’être chargé sous forme de fragments, l’écran de démarrage étendu est simplement peint par-dessus l’interface utilisateur de l’application. Lorsque vos tâches de chargement supplémentaires sont terminées, vous pouvez cesser d’afficher votre écran de démarrage étendu pour révéler la page d’accueil de votre application. En guise d’alternative, si vous souhaitez continuer à charger votre écran de démarrage étendu sous forme de fragment, vous pouvez éliminer le scintillement en obtenant un report d’activation et en réagissant aux événements activated de manière asynchrone. Obtenez un report pour un événement activé en appelant la méthode activatedOperation.getDeferral.

  • N’utilisez pas l’écran de démarrage, ni l’écran de démarrage étendu, pour afficher des publicités. L’écran de démarrage a pour objectif de faire savoir aux utilisateurs que l’application qu’ils souhaitent utiliser démarre, lors de son chargement. Introduire des éléments étrangers au sein de l’écran de démarrage conduit l’utilisateur à avoir des doutes sur l’application qu’il a lancée et rend l’identification de cette dernière plus difficile d’un simple coup d’œil.

  • N’utilisez pas l’écran de démarrage étendu en tant que moyen pour afficher plusieurs images d’écran de démarrage. L’écran de démarrage et l’écran de démarrage étendu visent à offrir à vos utilisateurs une expérience de chargement lissée et fluide. L’utilisation de votre écran de démarrage étendu pour afficher plusieurs images d’écran de démarrage différentes est susceptible de distraire et de perturber vos utilisateurs. Votre écran de démarrage doit, au contraire, uniquement poursuivre l’expérience de chargement actuelle tandis que les autres tâches sont en cours d’achèvement.

  • N’utilisez pas l’écran de démarrage, ni l’écran de démarrage étendu, pour afficher une page « À propos de ». L’écran de démarrage ne doit pas afficher d’informations sur la version de l’application ou d’autres métadonnées associées. Affichez ces informations au niveau de la description de votre application dans le Windows Store ou dans l’application elle-même.

Expérience utilisateur

  • Utilisez une image identifiant clairement votre application. Utilisez une image et un modèle de couleurs identifiant clairement l’application, afin que les utilisateurs sachent qu’ils ont lancé l’application appropriée. Un écran unique contribue également à renforcer votre image de marque.

  • Utilisez une image d’écran de démarrage PNG transparente pour des résultats visuels optimaux. L’utilisation d’une image PNG transparente permet à la couleur d’arrière-plan choisie d’être visible à travers l’image de l’écran de démarrage. Sinon, votre écran de démarrage risque de sembler décousu et peu attrayant avec une couleur d’arrière-plan d’image différente.

  • Fournissez une version de votre image d’écran de démarrage dimensionnée pour les trois facteurs d’échelle. Toutes les applications doivent avoir une image d’écran de démarrage de 620 x 300 pixels (lorsqu’une échelle x1 est utilisée par le périphérique). Nous vous conseillons également d’inclure des images d’écran de démarrage supplémentaires pour une échelle x1,4 et x1,8. Le fait de fournir des images pour les trois facteurs d’échelle aide à créer une expérience de démarrage propre et cohérente sur différents périphériques.

    Utilisez le tableau suivant pour déterminer la taille requise de l’image de l’écran de démarrage pour chaque facteur d’échelle :

    ÉchelleTaille de l’image (pixels)
    1x620 x 300
    x1.4868 x 420
    x1.81116 x 540

     

  • Choisissez une image qui utilise la zone allouée par le système pour l’image d’écran de démarrage. Lors de votre choix d’image d’écran de démarrage, essayez de tirer parti de l’espace alloué à chaque facteur d’échelle. Reportez-vous au tableau d’échelle et de taille d’image pour déterminer la taille de l’image d’écran de démarrage pour chaque facteur d’échelle.

    Une image de meilleure qualité contribue à produire un écran de démarrage de haute qualité.

  • Affichez l’interface utilisateur liée au système et à un événement une fois que l’écran de démarrage disparaît. Vous pouvez déterminer le moment approprié pour afficher l’interface liée au système et à un événement en écoutant l’événement dismissed de l’écran de démarrage. Sinon, l’interface utilisateur associée (comme le volet de recherche, une boîte de dialogue de message ou le broker d’authentification web) risque de s’afficher en même temps que l’écran de démarrage. Ceci peut provoquer des effets visuels indésirables.

  • Lancez des animations d’ouverture lorsque l’écran de démarrage disparaît. De nombreuses applications souhaitent afficher des animations d’entrée de contenu chaque fois que la page d’accueil de l’application est chargée. Vous pouvez déterminer quand lancer les animations en écoutant l’événement dismissed de l’écran de démarrage.

Écrans de démarrage étendus

  • Veillez à ce que votre écran de démarrage étendu ressemble à l’écran de démarrage affiché par Windows. Votre écran de démarrage étendu doit utiliser les mêmes couleurs d’arrière-plan et d’image que l’écran de démarrage Windows. L’utilisation d’une image et d’une couleur cohérentes permet de garantir que la transition de l’écran de démarrage Windows vers l’écran de démarrage étendu de votre application offre un aspect professionnel et harmonieux pour vos utilisateurs.

  • Positionnez votre image d’écran de démarrage étendu aux coordonnées utilisées par Windows pour afficher l’image d’écran de démarrage. Pour découvrir comment positionner l’image de votre écran de démarrage étendu en utilisant la classe SplashScreen, voir Comment étendre l’écran de démarrage.

  • Ajustez la position de votre écran de démarrage étendu afin de réagir aux événements de redimensionnement tels que la rotation. Votre écran de démarrage étendu doit s’ajuster aux coordonnées de l’image d’écran de démarrage en cas de mise à l’échelle de l’application ou de rotation de l’appareil, en écoutant l’événement onresize. Cela permet de garantir une expérience de chargement de votre application fluide et professionnelle indépendamment de la façon dont les utilisateurs manipulent leur appareil ou modifient la disposition des applications sur leur écran.

  • Si vous affichez votre écran de démarrage étendu pendant plus de quelques secondes, ajoutez un anneau de progression afin que vos utilisateurs sachent que le chargement de l’application est toujours en cours. Utilisez le contrôle d’anneau de progression indéterminée pour faire savoir aux utilisateurs que votre application ne s’est pas bloquée et qu’elle sera disponible rapidement. Pensez à afficher une ligne de texte à côté de l’anneau de progression afin d’expliquer brièvement ce que fait votre application. Par exemple, votre écran de démarrage étendu peut afficher un anneau de progression avec un message « Chargement en cours ».

    Donner un aspect réactif à votre application et informer vos utilisateurs de ce qui se produit contribuent à créer une expérience de chargement positive pour les utilisateurs. Pour découvrir comment ajouter un anneau de progression indéterminée et du texte, voir Démarrage rapide : ajout de contrôles de progression.

Indications d’utilisation supplémentaires

Chaque application du Windows Store doit avoir un écran de démarrage constitué d’une image d’écran de démarrage et d’une couleur d’arrière-plan. Vous pouvez personnaliser ces deux caractéristiques.

Windows affiche cet écran de démarrage immédiatement lorsque l’utilisateur lance une application. Il fournit des informations pendant que les ressources d’applications sont initialisées. Dès que votre application autorise l’interaction, Windows ferme l’écran de démarrage.

Un écran de démarrage bien conçu peut contribuer à rendre votre application plus attrayante. Le Windows Store utilise l’écran de démarrage simple et discret suivant : Aperçu de l’exemple d’écran de démarrage défini à l’échelle de 75 %.

Cet écran de démarrage est créé en combinant un arrière-plan vert et une image PNG transparente.

Vous pouvez utiliser la classe SplashScreen pour personnaliser l’expérience de lancement de votre application en étendant l’écran de démarrage et en déclenchant des animations d’entrée.

Considérations de sécurité

L’article suivant fournit des indications pour l’écriture de code C++ sécurisé.

Résolution des problèmes

JavaScript : éviter un scintillement pendant la transition vers votre écran de démarrage étendu

La rubrique Comment étendre l’écran de démarrage inclut des conseils pour vous aider à éviter de voir un scintillement : si vous remarquez un scintillement pendant la transition vers votre écran de démarrage étendu, ajoutez onload="" à votre balise <img> comme ceci : <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Image d’écran de démarrage" onload="" />. Le système attend alors que votre image soit affichée avant de basculer vers l’écran de démarrage étendu, ce qui empêche le scintillement.

C++ : éviter un scintillement pendant la transition vers votre écran de démarrage étendu

Si vous avez suivi les instructions de la rubrique Comment étendre l’écran de démarrage, vous pouvez remarquer un scintillement pendant la transition vers votre écran de démarrage étendu. Ce scintillement se produit si vous activez la fenêtre active (en appelant Window.Current.Activate) avant la fin du rendu du contenu de la page. Vous pouvez réduire le risque de voir un scintillement en veillant à ce que votre image d’écran de démarrage étendu soit lue avant que vous n’activiez la fenêtre active. En outre, vous devez utiliser un minuteur pour essayer d’éviter que le scintillement n’entraîne un bref délai d’attente pour votre application, par exemple 50 ms, avant que vous n’activiez la fenêtre active. Malheureusement, il n’existe aucun moyen garanti pour empêcher ce scintillement car le code XAML effectue le rendu du contenu de manière asynchrone ni pour prévoir à quel moment le rendu sera terminé.

Si vous avez suivi les instructions de la rubrique Comment étendre l’écran de démarrage et que vous remarquez un scintillement pendant la transition vers votre écran de démarrage étendu, suivez ces étapes pour veiller à ce que votre image d’écran de démarrage étendu soit lue et que votre application patiente un bref instant avant d’activer la fenêtre active :

  1. Dans ExtendedSplash.xaml, mettez à jour le balisage de votre image d’écran de démarrage étendu pour vous avertir lorsque cette dernière a été lue.

    
    <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png" ImageOpened="extendedSplashImage_ImageOpened"/>
    
    

    L’événement ImageOpened est déclenché lorsque l’image a été lue. Comme indiqué dans l’exemple, vous devez inscrire l’événement ImageOpened en ajoutant l’attribut ImageOpened et en spécifiant le nom du gestionnaire d’événements (extendedSplashImage_ImageOpened).

  2. Dans ExtendedSplash.xaml, ajoutez du code dans votre classe ExtendedSplash qui active la fenêtre active en fonction d’un minuteur et une fois que votre image d’écran de démarrage étendu a été lue.

    
            private DispatcherTimer showWindowTimer;
            private void OnShowWindowTimer(object sender, object e)
            {
                showWindowTimer.Stop();
     
                // Activate/show the window, now that the splash image has rendered
                Window.Current.Activate();
            }
     
            private void extendedSplashImage_ImageOpened(object sender, RoutedEventArgs e)
            {
                // ImageOpened means the file has been read, but the image hasn't been painted yet.
                // Start a short timer to give the image a chance to render, before showing the window
                // and starting the animation.
                showWindowTimer = new DispatcherTimer();
                showWindowTimer.Interval = TimeSpan.FromMilliseconds(50);
                showWindowTimer.Tick += OnShowWindowTimer;
                showWindowTimer.Start();
            }
    
    

    Cet exemple montre à la fois comment répondre à un événement ImageOpened et comment utiliser un minuteur pour faire patienter votre application un bref instant avant d’activer la fenêtre active.

  3. Révisez votre méthode OnLaunched comme ceci :

    
    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        if (args.PreviousExecutionState != ApplicationExecutionState.Running)
        {
            bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
            ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
            Window.Current.Content = extendedSplash;
        }
    
        // ExtendedSplash will activate the window when its initial content has been painted.
    }
    
    

    Dans l’exemple, nous avons supprimé l’appel à Activate pour la fenêtre active. Cette activation est plutôt effectuée par l’objet ExtendedSplash une fois que l’événement ImageOpened s’est déclenché pour indiquer que l’image d’écran de démarrage étendu a été lue.

  4. Testez votre code sur autant d’appareils différents et dans autant de circonstances différentes que possible pour vous assurer que votre code permet d’éviter efficacement le scintillement !

Rubriques associées

Pour les concepteurs
Comment étendre l’écran de démarrage
Démarrage rapide : ajout d’un écran de démarrage
Exemple d’écran de démarrage
Pour les développeurs (HTML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
Démarrage rapide : ajout de contrôles de progression
Pour les développeurs (XAML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
ImageOpened
OnLaunched
Activate

 

 

Afficher:
© 2014 Microsoft