Partager via

Disposition et mise à l’échelle de votre application Microsoft Teams

Une disposition de grille permet à votre application d’être cohérente et garantit des relations reconnaissables entre les composants de conception. Vous pouvez en savoir plus sur votre système de grille et des conseils pour la mise à l’échelle et les niveaux de zoom dans votre application pour passer les critères de soumission.

La mise à l’échelle et la conception réactive sont essentielles pour toutes les applications Teams afin que les utilisateurs puissent interagir avec certitude avec toutes les interfaces. Pour passer la révision du Microsoft Teams Store, le texte entier doit être visible et non tronqué.

Conception de disposition

L’unité de base de 4 pixels de la grille permet aux composants de s’adapter de manière cohérente à toutes les tailles d’affichage dans Teams. Dans l’exemple suivant, le rayon d’angle de chaque bouton est de 4 pixels.

L’exemple montre un exemple de pixels dans la disposition.

Toujours suivre la grille

L’exemple montre les pixels dans chaque dimension et espace.

Rendre le service réactif

L’exemple montre les recommandations en matière de disposition réactive.

Utiliser des espaces blancs

Exemple montrant l’utilisation des espaces blancs.

Mise à l’échelle et réactivité

Mobile

Les conceptions mobiles doivent être de 320 pixels.

Exemple montrant une disposition réactive sur un appareil mobile.

Ordinateur de bureau

La taille minimale du bureau est de 550 pixels.

Exemple pour 550 pixels

L’exemple montre la disposition réactive minimale sur le bureau.

Exemple pour 2560 pixels

Exemple montrant une disposition réactive sur le bureau.

Orientation de la page

Mobile

Remarque

Les applications mobiles Teams prennent en charge à la fois le mode paysage et le mode portrait.

Mode Portrait

Exemple montrant une orientation de page en mode portrait dans Teams Mobile.

Mode paysage

Exemple montrant une orientation de page en mode paysage dans Teams Mobile.

Meilleures pratiques

L’exemple montre un retour à la ligne afin que le texte soit lisible à tous les niveaux de zoom.

À faire : utiliser la habillage automatique afin que le texte soit lisible à tous les niveaux de zoom

Évitez le chevauchement et la troncation du texte.

L’exemple montre un chevauchement de texte et de boutons qui peuvent ne pas répondre aux normes d’accessibilité.

À ne pas faire : laisser le texte et les boutons se déplacer et se chevaucher à mesure que le niveau de zoom change

Le texte et les boutons qui se chevauchent risquent de ne pas répondre à nos normes d’accessibilité.

Exemple montrant un retour à la ligne afin que le texte soit lisible à toute largeur.

À faire : utiliser la habillage du mot afin que le texte soit lisible à toutes les largeurs

Évitez la troncation avec le redistribuage, en hiérarchisant les appels aux actions (CTAs) et les éléments d’action.

L’exemple montre que le texte et les CTAs ne sont pas utilisables sans retour automatique à la ligne.

À ne pas faire : laissez le texte ou les expressions CTA être coupés ou devenir illisibles à mesure que la largeur de la fenêtre change

Sans habillage des mots, le texte et les expressions CTAs ne sont pas utilisables.

L’exemple montre une conception réactive pour éviter les chevauchements au niveau du zoom.

À faire : assurez-vous que votre application est lisible à l’échelle de 200 %

Utilisez la conception réactive pour éviter le chevauchement et la troncation du texte.

Exemple montrant un contenu tronqué au niveau du zoom.

À ne pas faire : Tronquer et couper le contenu à n’importe quel niveau de zoom

Il est recommandé de tester jusqu’à 200 % du zoom.

L’exemple montre comment le texte doit être visible et accessible aux utilisateurs.

À faire : texte et couleurs pour l’accessibilité

Le texte entier doit être visible et utilisé pour tous les utilisateurs, ce qui signifie qu’il doit dépasser certains ratios de couleurs, en fonction de son utilisation. Pour case activée vos niveaux de contraste, case activée le vérificateur de contraste WebAIM.

L’exemple montre un texte qui ne répond pas aux normes de contraste.

À ne pas faire : soumettez votre application avec du texte qui ne satisfait pas aux normes de contraste

Les applications Teams doivent être accessibles à tous les utilisateurs présentant n’importe quel niveau de déficience visuelle ou de handicap. Les soumissions dont le texte n’est pas accessible ne sont pas acceptées.

Exemple montrant une résolution pour éviter le chevauchement et la troncation.

À faire : Tester votre application avec une résolution de 1920 x 1080

Évitez le chevauchement et la troncation du texte.

L’exemple montre une résolution incorrecte qui ne répond pas aux normes.

À ne pas faire : soumettre votre application pour révision sans test à la résolution par défaut de Teams

Votre application risque de ne pas réussir le processus de soumission s’il existe des problèmes avec une résolution de 1920 x 1080.

Exemple montrant la réactivité des applications mobiles.

À faire : Tester la réactivité de l’application mobile

La vue mobile de votre application doit être réactive, de la même manière que le point d’arrêt le plus étroit d’une application web.

Exemple montrant un texte coupé ou illisible sur l’application mobile.

À ne pas faire : autoriser la troncation sur votre application mobile

Rien ne doit être coupé ou illisible sur votre application mobile.

Exemple montrant les en-têtes lisibles à tous les niveaux de zoom.

À faire : vérifier que les en-têtes sont toujours lisibles à tous les niveaux de zoom

Si les en-têtes tronquent, utilisez une info-bulle afin que les utilisateurs puissent lire les en-têtes en pointant.

L’exemple montre un en-tête tronqué sans fonctionnalité de pointage.

À ne pas faire : Tronquer les en-têtes sans fonctionnalité de pointage

Votre application ne réussira pas la soumission Teams si elle a des en-têtes illisibles sans fonctionnalité de pointage.

Voir aussi

FAQ sur l’orientation de la page