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

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

Mise en place d’outils et d’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érer 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 complètes sur l’utilisation, l’anatomie, l’accessibilité et les meilleures pratiques.

Microsoft Teams’interface utilisateur

Affichez et testez les Teams d’interface utilisateur et les composants associés dans votre navigateur.

Importez ces modèles et composants associés directement dans Teams projet d’application.

Exemple d’application

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

Tableau de bord

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

Principaux cas d’utilisation

  • Analyser les données
  • Mesures du rapport
  • Organiser différentes informations au même endroit

Mobile

L’exemple montre un modèle d’interface utilisateur de tableau de bord sur mobile.

Bureau

L’exemple montre un modèle d’interface utilisateur de tableau de bord sur un ordinateur de bureau.

Visualisation de données

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

Principaux cas d’utilisation

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

Mobile

L’exemple montre un modèle d’interface utilisateur de visualisation de données sur un appareil mobile.

Bureau

L’exemple montre un modèle d’interface utilisateur de visualisation de données sur un ordinateur de bureau.

État vide

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

Principaux cas d’utilisation

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

Mobile

L’exemple montre un modèle d’interface utilisateur d’état vide sur mobile.

Bureau

L’exemple montre un modèle d’interface utilisateur d’état vide sur un ordinateur de 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’utilisation

Organisation du contenu dans :

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

Exemple de 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 de champs d’entrée sont essentiels pour une bonne expérience utilisateur.

Principaux cas d’utilisation

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

Mobile

L’exemple montre un modèle d’interface utilisateur de formulaire sur mobile.

Bureau

L’exemple montre un modèle d’interface utilisateur de formulaire sur un ordinateur de bureau.

Répertorier

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

Principaux cas d’utilisation

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

Mobile

L’exemple montre un modèle d’interface utilisateur de liste sur mobile.

Bureau

L’exemple montre un modèle d’interface utilisateur de liste sur un ordinateur de bureau.

Connexion

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

Cas d’utilisation principaux

  • Authentifier les utilisateurs

Mobile

L’exemple montre un modèle d’interface utilisateur de la signature sur un appareil mobile.

Bureau

L’exemple montre un modèle d’interface utilisateur de la signature sur le bureau.

Paramètres

Paramètres sont les écrans où les utilisateurs peuvent configurer leurs préférences avec votre application. (Remarque : Paramètres est un conteneur pour les composants d’interface utilisateur de base.)

Cas d’utilisation principaux

  • Gérer les fonctionnalités de l’application

L’exemple montre un modèle de paramètres.

Tableau des tâches

Un tableau des tâches, parfois appelé « kanban board » ou « pistes de course » est une collection de cartes souvent utilisées pour suivre l’état des éléments de travail ou des tickets. 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’utilisation

  • Gestion de projet. Affectation de tâches et état de suivi
  • Brainstorming. Ajout d’idées dans différentes catégories
  • Exercices de tri. Organisation de n’importe quel type d’informations dans des compartiments

Mobile

L’exemple montre un modèle d’interface utilisateur du tableau des tâches sur mobile.

Bureau

L’exemple montre un modèle d’interface utilisateur du 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’utilisation

  • Configuration
  • Intégration
  • Expériences de première expérience

Mobile

L’exemple montre un modèle d’interface utilisateur d’Assistant sur mobile.

Bureau

L’exemple montre un modèle d’interface utilisateur d’Assistant sur un ordinateur de bureau.

Voir aussi