Partager via


Conception de votre application Microsoft Teams avec des modèles d’interface utilisateur

Concevez votre application Microsoft Teams plus rapidement avec des modèles d’interface utilisateur. Les modèles sont une collection de composants basés sur l’interface utilisateur Fluent qui fonctionnent dans des cas d’usage Teams courants, ce qui vous donne plus de temps pour trouver la meilleure expérience pour vos utilisateurs.

Prise en main des outils et des exemples

Les ressources suivantes peuvent vous aider à concevoir et développer votre application à l’aide de modèles d’interface utilisateur.

Kit d’interface utilisateur de Microsoft Teams

Récupérez des modèles d’interface utilisateur pour la conception de votre application à partir du Kit d’interface utilisateur Microsoft Teams, qui inclut également des informations détaillées sur l’utilisation, l’anatomie, l’accessibilité et les meilleures pratiques.

Les playbooks d’application et les modèles d’interface utilisateur sont également disponibles pour vous aider à prendre en main les applications étendues dans Microsoft 365.

Composants Fluent UI React

Affichez et testez des composants Fluent UI React individuels dans votre navigateur.

Exemple d’application

Installez un exemple d’application pour voir l’apparence et le comportement des modèles d’interface utilisateur dans les contextes Teams.

Calendrier

Dans Teams, un calendrier est l’endroit où un utilisateur affiche, planifie et gère les événements à venir et passés pour lui-même ou pour un groupe.

Principaux cas d’usage

  • Planifier des réunions et des événements
  • Obtenir des rappels de réunions et d’événements à venir
  • Afficher les planifications

Ordinateur de bureau

Exemple montrant un modèle d’interface utilisateur de calendrier sur le bureau.

Tableau de bord

Un tableau de bord affiche différents types de contenu dans un emplacement central (par exemple, une application ou un onglet personnel Teams). Les utilisateurs doivent être en mesure de personnaliser au moins une partie de ce qu’ils voient sur un tableau de bord.

Principaux cas d’usage

  • Analyser les données
  • Métriques de rapport
  • Organiser différentes informations au même endroit

Mobile

Exemple montrant un modèle d’interface utilisateur de tableau de bord sur mobile.

Ordinateur de bureau

Exemple montrant un modèle d’interface utilisateur de tableau de bord sur le bureau.

Visualisation de données

Vous pouvez utiliser différentes tailles de carte (simple, double et complète) pour empiler et organiser les visualisations de données sur la même page. Les cartes sont mises à l’échelle pour s’adapter à la disposition des colonnes et remplir des espaces vides.

Principaux cas d’usage

  • Afficher des informations complexes
  • Créer un tableau de bord

Mobile

Exemple montrant un modèle d’interface utilisateur de visualisation des données sur mobile.

Ordinateur de bureau

Exemple montrant un modèle d’interface utilisateur de visualisation des données sur le bureau.

État vide

Le modèle d’état vide peut être utilisé pour de nombreux scénarios, notamment la connexion, les expériences de première exécution, les messages d’erreur, etc. Il est très flexible : adaptez-le pour utiliser un, quelques-uns ou tous les composants dans la conception suivante.

Principaux cas d’usage

  • Connexion
  • Messages de bienvenue et expériences de première utilisation
  • Messages de réussite
  • Messages d’erreur

Mobile

Exemple montrant un modèle d’interface utilisateur d’état vide sur mobile.

Ordinateur de bureau

Exemple montrant un modèle d’interface utilisateur d’état vide sur le bureau.

Filtre

Un filtre vous permet de réduire les informations que vous voyez en fonction des critères sélectionnés. Vous pouvez inclure des filtres avec des tableaux, des listes, des cartes et d’autres composants qui organisent le contenu.

Principaux cas d’usage

Organisation du contenu dans :

  • Listes
  • Tables
  • Tableaux de bord
  • Visualisation de données

Exemple montrant un modèle de filtre.

Formulaire

Les formulaires sont utilisés pour collecter, valider et envoyer des entrées utilisateur de manière structurée. L’étiquetage clair et les regroupements logiques des champs d’entrée sont essentiels pour une bonne expérience utilisateur.

Principaux cas d’usage

  • Connexion
  • Profils utilisateur
  • Paramètres
  • Collection d’entrées utilisateur

Mobile

Exemple montrant un modèle d’interface utilisateur de formulaire sur mobile.

Ordinateur de bureau

Exemple montrant un modèle d’interface utilisateur de formulaire sur le bureau.

Répertorier

Vous pouvez utiliser une liste pour afficher les éléments associés dans un format numérisable et permettre aux utilisateurs d’effectuer des actions sur une liste entière ou des éléments individuels.

Principaux cas d’usage

  • Afficher les données
  • Actions contextuelles sur le contenu de l’application

Mobile

Exemple montrant un modèle d’interface utilisateur de liste sur mobile.

Ordinateur de bureau

Exemple montrant un modèle d’interface utilisateur de liste sur le bureau.

Connexion

Vous pouvez concevoir des flux de connexion d’application pour différents contextes Teams et fournisseurs d’identité. L’exemple suivant inclut l’authentification unique (SSO), que nous recommandons pour l’expérience d’authentification la plus simple.

Cas d’usage principal

Authentifier les utilisateurs

Mobile

Exemple montrant un modèle d’interface utilisateur de connexion sur mobile.

Ordinateur de bureau

Exemple montrant un modèle d’interface utilisateur de connexion sur le bureau.

Paramètres

Les écrans de paramètres permettent aux utilisateurs de configurer leurs préférences avec votre application.

Notes

Les paramètres sont un conteneur pour les composants d’interface utilisateur de base.

Cas d’usage principal

Gérer les fonctionnalités de l’application

Exemple montrant un modèle de paramètres.

Tableau des tâches

Un tableau de tâches, parfois appelé tableau kanban ou couloirs de natation, est un ensemble de cartes souvent utilisées pour suivre l’état des articles de travail ou des billets. Il peut également être utilisé pour trier n’importe quel type de contenu en catégories. Vous pouvez modifier et déplacer les cartes entre les colonnes.

Principaux cas d’usage

  • Gestion de projet. Attribution de tâches et suivi de l’état.
  • Réflexion. Ajout d’idées dans différentes catégories.
  • Exercices de tri. Organiser n’importe quel type d’informations dans des compartiments.

Mobile

Exemple montrant un modèle d’interface utilisateur de tableau des tâches sur mobile.

Ordinateur de bureau

Exemple montrant un modèle d’interface utilisateur de tableau des tâches sur le bureau.

Assistant

Un Assistant guide un utilisateur à travers plusieurs écrans pour effectuer une tâche (par exemple, un processus d’installation).

Principaux cas d’usage

  • Configuration
  • Intégration
  • Expériences de première utilisation

Mobile

Exemple montrant un modèle d’interface utilisateur d’Assistant sur mobile.

Ordinateur de bureau

Exemple montrant un modèle d’interface utilisateur d’Assistant sur le bureau.

Voir aussi