Icône de l’application Teams pour microsoft Teams Store et barre d’application
Cet article fournit des instructions pour la création d’icônes dans votre écosystème d’applications afin d’aider les concepteurs et à envoyer l’icône d’application appropriée. Le fait de suivre ces instructions crée l’uniformité et l’équilibre dans votre écosystème d’applications et met l’accent sur l’illustration de votre icône d’application.
Icône de l’application
Lors de l’envoi de votre package d’application, incluez deux versions PNG de l’icône de l’application, une icône de couleur et une icône de plan. Pour que votre application passe la révision du Microsoft Teams Store, ces icônes doivent répondre à certaines exigences de taille. Suivez les étapes pour vous assurer que les icônes de votre application correspondent aux normes du Magasin Teams.
Disposition équilibrée
Les icônes sont destinées à créer une disposition uniforme. Ces instructions vous aident à créer l’icône de votre application à soumettre.
Création de vos ressources
Microsoft Teams a besoin de deux ressources lors de la soumission de l’application pour générer les icônes de l’application.
| Compteur | Description |
|---|---|
| 1 | Format PNG plein fond de 192 x 192 pixels. Utilisez l’espace complet des ressources comme arrière-plan. Il est utilisé dans le Magasin Teams ou dans les fenêtres volantes. |
| 2 | Icône de format PNG par défaut ou de repos à 32 x 32 pixels. Cette icône est utilisée comme état de repos/par défaut dans la barre de l’application et d’autres emplacements dans le produit. |
Architecture des icônes de couleur
Les dimensions de l’icône d’application couleur doivent être de 192 x 192 pixels. Si vous avez une icône de logo, le logo doit tenir dans la zone sécurisée de 120 x 120 au centre.
L’icône envoyée doit être un carré complet. Teams applique automatiquement le masquage pour des formes d’icône cohérentes dans l’application.
Attributs d’icône
Coloré
Arrière-plan blanc
Utilisation de l’icône d’application
Reportez-vous à cette liste pour connaître les zones de contenu dans lesquelles votre icône s’affiche dans le produit, selon le type d’application ou la fonctionnalité.
Application personnelle
Menu volant d’application
Bot (vue de canal)
Menu volant d’extension de message
Menu volant des applications de réunion
Barre U de réunion
Meilleures pratiques
À faire : suivez la recommandation concernant la zone sécurisée (120 x 120)
Si vous avez un logo, il est recommandé de le conserver dans la zone sécurisée de 120 x 120 à l’intérieur de l’icône au format PNG 192 x 192.
À ne pas faire : agrandir l’icône par rapport à la zone sécurisée
Voici un exemple de logo à l’intérieur de l’icône au format PNG qui ne se trouve pas dans la zone sécurisée. Il crée un remplissage irrégulier (espace négatif) autour de l’icône.
À faire : Fournir une purge complète pour les coins arrondis
Si vous avez une image de fond complet, chargez simplement un format PNG carré à 192 x 192. Les coins sont arrondis dynamiquement.
À ne pas faire : arrondir les coins de votre icône
Ne tournez pas les coins. Soumettre au carré parfait à 192 x 192, les angles sont arrondis dynamiquement.
À faire : charger une icône sans bordure
La bordure est ajoutée automatiquement. Dans ce cas, chargez simplement votre format PNG sans bordure, même s’il est sur un arrière-plan blanc.
À ne pas faire : ajouter une bordure
Les bordures sont ajoutées dynamiquement. Si vous incluez une bordure au format PNG, cela entraîne une duplication indésirable sur les arrière-plans blancs.
À faire : fournir suffisamment de contraste
Considérez votre icône pour avoir un contraste suffisant par rapport à l’arrière-plan. Il est recommandé d’utiliser un ratio de 4,5:1 pour une meilleure accessibilité.
À ne pas faire : fondu de l’icône
Évitez le contraste faible pour vos icônes. Assurez-vous que l’arrière-plan et l’icône que vous utilisez dans votre format PNG ont un contraste suffisant.
À faire : Élever votre marque
Concentrez-vous sur votre marque en utilisant une couleur plate comme arrière-plan.
À ne pas faire : évitez de placer l’icône de votre marque dans un cercle
Élevez votre marque en conservant l’icône de marque dans une zone sécurisée de 96 x 96.
À faire : abréger les mots longs dans l’icône de l’application
Si vous avez un nom d’application long, essayez d’abréger afin qu’il soit plus facile à lire lorsque votre icône est redimensionnée à la taille 32 x 32.
À ne pas faire : inclure plusieurs mots dans l’icône de l’application
Évitez d’utiliser plusieurs mots sur l’icône. Il est impossible de lire le texte lorsque l’icône a des tailles plus petites, par exemple 32 x 32 ou 36 x 36.
À faire : Créer un solde (96 x 96)
Élevez votre marque en gardant l’équilibre. Restez dans la zone sécurisée 96 x 96 pour un sentiment d’équilibre.
À ne pas faire : asymétrie ou étirement de votre icône
Conservez votre icône dans la zone sécurisée. N’étirez pas votre icône dans une direction ou une autre.