Conception de votre application Microsoft Teams avec des composants d’interface utilisateur avancés

Les composants suivants sont une combinaison de composants d’interface utilisateur de base que vous pouvez utiliser pour les situations Teams conception courantes, telles que la navigation.

Kit d’interface utilisateur de Microsoft Teams

Basé sur Fluent’interfaceutilisateur, le kit Microsoft Teams’interface utilisateur inclut des composants et des modèles spécifiquement conçus pour créer des applications Teams. Dans le kit d’interface utilisateur, vous pouvez récupérer et insérer les composants répertoriés ici directement dans votre conception et voir d’autres exemples d’utilisation de chaque composant.

Les barre de navigation sont une aide à la navigation qui véhicule la hiérarchie de votre application. Ils aident les utilisateurs à comprendre comment la page qu’ils affichent s’intègre à l’expérience globale et offrent un accès en un clic aux niveaux supérieurs de cette hiérarchie.

Cas d’utilisation principaux

  • Hiérarchie de communication
  • Navigation

Mobile

L’exemple montre un modèle de lacrumb sur mobile.

Bureau

L’exemple montre un modèle de lacrumb sur le bureau.

Navigation gauche

Utilisez le navigation de gauche pour parcourir plusieurs pages dans votre onglet Teams gauche. Dans l’exemple suivant, le navigation gauche se trouve entre la liste de canaux et le contenu de l’onglet.

Cas d’utilisation principaux

  • Parcourez plusieurs pages dans un Teams onglet.
  • Décomposez les applications complexes en plusieurs pages.

Mobile

L’exemple montre un modèle de navigation gauche sur un appareil mobile.

Bureau

L’exemple montre un modèle de navigation gauche sur un ordinateur de bureau.

Barre de notification

Une barre de notification est une zone dédiée à l’affichage de messages brefs et importants qui ne nécessitent pas que l’utilisateur prenne des mesures immédiates. Des icônes et couleurs d’arrière-plan spécifiques sont associées à des types de messages spécifiques (voir ci-dessous).

Cas d’utilisation principaux

  • Messages critiques, erreurs et avertissements
  • Messages de réussite
  • Messages d’information ou promotionnels

Mobile

Exemple de modèle d’interface utilisateur de barre de notification sur mobile.

Bureau

L’exemple montre les modèles d’interface utilisateur de la barre de notification sur le bureau.

Vue d’étape

La vue d’étape permet aux utilisateurs de voir du contenu, tel qu’une image, un fichier ou un site web, sur une grande surface dans Teams sans changer de contexte. Ce composant est principalement destiné à l’affichage du contenu. Ne l’utilisez pas pour des interactions complexes.

Découvrez comment implémenter une vue d’étape.

Cas d’utilisation principaux

  • Afficher le contenu sur une grande surface dans Teams au lieu d’une autre application ou navigateur
  • Média à la une ou autre contenu enrichi

Mobile

Votre application peut lancer une étape à partir d’une carte adaptative, d’un lien partagé ou de composants visuels (tels qu’un graphique).

L’exemple montre un modèle d’étape sur mobile.

Bureau

L’exemple montre un modèle d’étape sur ordinateur de bureau.

Barre d'outils

Une barre d’outils est un conteneur permettant de grouper un ensemble de contrôles.

Cas d’utilisation principaux

  • Actions contextuelles sur le contenu de l’application
  • Filtre contextuel et recherche
  • Navigation et barre de navigation

Mobile

L’exemple montre un modèle de barre d’outils sur mobile.

Bureau

L’exemple montre un modèle de barre d’outils sur un ordinateur de bureau.