Windows Dev Center

Ressources visuelles des vignettes et des toasts (applications Windows Runtime)

Cette rubrique décrit les exigences de taille pour les ressources de fichier image utilisées dans les vignettes et les toasts.

Exigences générales en matière d’image

Les images sources de vignette et de toast doivent avoir des dimensions inférieures ou égales à 1024 x 1024 pixels, une taille de fichier inférieure ou égale à 200 Ko et une extension .png, .jpg, .jpeg ou .gif. Aucune profondeur de couleur ni couleur particulière n’est imposée pour une image tant qu’elle respecte les autres exigences.

Vignettes carrées et larges

Les vignettes sont affichées sur l’écran d’accueil et peuvent être soit larges (310 x 150 pixels à une échelle de 100 %) soit carrées. Il existe plusieurs tailles de vignettes :

  • Petite (70 x 70) (Windows uniquement)
  • Petite (71 x 71) (Windows Phone uniquement)
  • Moyenne (150 x 150)
  • Large (310 x 150)
  • Grande (310 x 310) (Windows uniquement)

Un utilisateur peut redimensionner votre vignette uniquement en fonction des tailles pour lesquelles une image de logo est fournie dans le fichier manifeste de l’application (package.appxmanifest). Un logo de vignette moyenne est nécessaire, au minimum. Si vous ne fournissez rien d’autre, la vignette de votre application sera toujours moyenne (150 x 150). De plus, seules les charges utiles des modèles de vignettes moyennes seront affichées dans les notifications par vignette de l’application. Cette approche peut suffire dans certains scénarios.

Si plusieurs images de logo sont fournies dans le manifeste, vous pouvez spécifier une vignette moyenne ou large en tant que vignette à utiliser par défaut quand la vignette est épinglée à l’écran d’accueil.

Remarque   Dans les applications du Windows Phone Store, cette option n’existe pas. Une vignette est toujours épinglée à l’écran d’accueil en tant que vignette moyenne, même si l’utilisateur peut la redimensionner.

L’utilisateur peut changer la taille de votre vignette à tout moment. Il n’existe aucun moyen de savoir par programmation quelle est la taille actuellement utilisée. Seules les notifications qui correspondent à sa taille actuelle sont affichées. Ainsi, chaque notification par vignette envoyée à votre application doit inclure un modèle pour chaque taille prise en charge. Par exemple, si vous incluez uniquement un modèle large dans une notification et si l’utilisateur a choisi d’afficher la vignette moyenne, cette notification ne s’affichera pas sauf si l’utilisateur la redimensionne selon le format large avant qu’elle n’expire.

Choix d’une forme de vignette

  • Utilisez la vignette moyenne pour une vignette statique, en d’autres termes, si votre application n’utilise pas de notifications pour envoyer des mises à jour à la vignette.
  • Utilisez la vignette moyenne avec un badge si votre application prend uniquement en charge les scénarios avec des notifications résumées courtes. Par exemple, utilisez une vignette d’application SMS (Short Message Service) qui affiche uniquement le nombre de nouveaux messages reçus.
  • Utilisez la vignette large ou la grande vignette uniquement si votre application comporte un contenu nouveau et intéressant à proposer à l’utilisateur et que les notifications qui remettent ce contenu sont envoyées fréquemment (toutes les semaines au minimum). Le contenu d’une vignette large ou d’une grande vignette est destiné à être « vivant ». Ayez une bonne raison pour occuper l’espace supplémentaire.

Autres ressources visuelles

  • Minuscule (30 x 30) (Windows uniquement)
  • Minuscule (44 x 44) (Windows Phone uniquement)

Les ressources petites et minuscules ne sont pas des vignettes dynamiques. Elles montrent uniquement le logo de la vignette, conformément au manifeste de l’application. La petite vignette est utilisée dans l’écran d’accueil. En revanche, la vignette minuscule est utilisée uniquement dans les résultats de recherche et la liste Applications.

Comment les images sont mises à l’échelle dans une application Windows Runtime

L’écran d’accueil d’un appareil Windows prend en charge quatre valeurs d’échelle qui affectent les dimensions d’image : 80 %, 100 %, 140 % et 180 %. Les applications du Windows Phone Store prennent en charge les valeurs 100 %, 140 % et 240 % via le manifeste, mais également les valeurs 120 %, 160 %, 180 %, 200 %, 220 %, 300 % et 400 % dans la pratique.

Vous pouvez fournir une ressource d’image distincte pour chaque valeur d’échelle ou uniquement un sous-ensemble de ces images, et laisser le système mettre à l’échelle l’image la plus proche. Comme votre vignette peut être affichée sur une grande diversité d’appareils, il vaut mieux inclure des versions mises à l’échelle des images dans votre package d’application afin que le système puisse choisir la version la plus appropriée à l’appareil et ses paramètres. Bien que cela ne donne pas les meilleurs résultats, si vous souhaitez fournir uniquement une seule ressource d’image et vous fier entièrement à la mise à l’échelle, fournissez la ressource de 180 % pour une application Windows et la ressource de 240 % pour une application du Windows Phone Store.

Les images de logo fournies via le manifeste doivent avoir exactement les dimensions demandées en pixels. Les images fournies dans une notification par vignette ou une notification toast n’ont pas ce besoin, tant qu’elles répondent aux exigences générales décrites ci-dessus. Si une image ne correspond pas aux dimensions de la zone d’image de la notification, le système la met à l’échelle et la rogne en fonction des besoins.

Pour plus d’informations sur la dénomination et l’organisation de vos images, voir Définition des ressources d’application.

Détails sur le dimensionnement, le remplissage, la mise à l’échelle et la transparence pour les applications du Windows Phone Store:  

Comme indiqué précédemment, fournissez au minimum les ressources de mise à l’échelle de 240 % pour une application du Windows Phone Store, et de préférence des ressources de mise à l’échelle de 140 et 100 %.

Les ressources de fichier image proprement dites doivent avoir un arrière-plan transparent, comme indiqué par l’effet damier dans les illustrations ci-dessous (les illustrations font également allusion à la façon dont la couleur située au-dessous transparaît). Dans le manifeste de votre application, définissez la valeur de la propriété appropriée sur « Assets\<nom_ressource>.png » ainsi qu’une valeur pour VisualElements@BackgroundColor. Vous pouvez utiliser la couleur d’arrière-plan de la marque de votre application ou définir la couleur d’arrière-plan sur « transparent » pour correspondre à l’apparence des applications intégrées.

Nom de la propriété dans le manifeste de l’application<nom_ressource>.scale-100.png<nom_ressource>.scale-140.png<nom_ressource>.scale-240.png

Square71x71Logo

(Petite vignette de l’écran d’accueil)

ressource 71 x 71 px

remplissage 19,19 px

logo 32 x 32 px

ressource 99 x 99 px

remplissage 27,27 px

logo 45 x 45 px

ressource 170 x 170 px

remplissage 46,46 px

logo 77 x 77 px

Square150x150Logo

(Vignette moyenne de l’écran d’accueil)

ressource 150 x 150 px

remplissage 45,45 px

logo 60 x 60 px

ressource 210 x 210 px

remplissage 63,63 px

logo 84 x 84 px

ressource 360 x 360 px

remplissage 108,108 px

logo 144 x 144 px

Wide310x150Logo

(Large vignette de l’écran d’accueil)

ressource 310 x 150 px

remplissage 125,45 px

logo 60 x 60 px

ressource 434 x 210 px

remplissage 175,63 px

logo 84 x 84 px

ressource 744 x 360 px

remplissage 300,108 px

logo 144 x 144 px

Square44x44Logo

(Liste « Toutes les applications »)

ressource 44 x 44 px

remplissage 6,6 px

logo 32 x 32 px

ressource 62 x 62 px

remplissage 9,9 px

logo 44 x 44 px

ressource 106 x 106 px

remplissage 15,15 px

logo 76 x 76 px

Package/Propriétés/Logo

ressource 50 x 50 px

remplissage 9,9 px

logo 32 x 32 px

ressource 70 x 70 px

remplissage 12,12 px

logo 46 x 46 px

ressource 120 x 120 px

remplissage 20,20 px

logo 80 x 80 px

 

Rubriques associées

Exemples de localisation et de ressources d’application
Concevoir des applications pour le marché international
Catalogue de modèles de vignette
Recommandations et liste de vérification sur les vignettes
Démarrage rapide : création d’une vignette par défaut à l’aide de l’éditeur de manifeste de Microsoft Visual Studio
Démarrage rapide : envoi d’une mise à jour de vignette
Schéma XML des vignettes
Exemple de vignettes et de badges d’application
Vue d’ensemble des vignettes et des notifications par vignette
Choix des images de votre application
Définition des ressources d’application

 

 

Afficher:
© 2015 Microsoft