Entwerfen Ihrer Microsoft Teams-App mit erweiterten UI-Komponenten

Die folgenden Komponenten sind eine Kombination aus grundlegenden UI-Komponenten, die Sie für allgemeine Teams Entwurfssituationen wie navigation verwenden können.

Microsoft Teams-UI-Kit

Basierend auf Fluent Uienthält das Microsoft Teams UI Kit Komponenten und Muster, die speziell für die Erstellung Teams Apps entwickelt wurden. Im UI-Kit können Sie die hier aufgeführten Komponenten direkt in Ihr Design einfügen und weitere Beispiele für die Verwendung der einzelnen Komponenten anzeigen.

Breadcrumbs sind eine Navigationshilfe, die die Hierarchie Ihrer App vermittelt. Sie helfen Benutzern zu verstehen, wie die angezeigte Seite in die Gesamtumgebung passt, und ermöglichen den Zugriff mit einem Klick auf höhere Ebenen in dieser Hierarchie.

Häufigste Anwendungsfälle

  • Kommunizieren der Hierarchie
  • Navigation

Mobilgeräte

Beispiel zeigt eine Breadcrumbvorlage auf Mobilgeräten.

Desktop

Beispiel zeigt eine Breadcrumbvorlage auf dem Desktop.

Linker Navigationsbereich

Verwenden Sie die linke Navigationsleiste, um mehrere Seiten in Ihrer Teams Registerkarte zu durchsuchen. Im folgenden Beispiel befindet sich die linke Navigation zwischen der Kanalliste und dem Registerkarteninhalt.

Häufigste Anwendungsfälle

  • Durchsuchen Sie mehrere Seiten innerhalb einer Teams Registerkarte.
  • Teilen Sie komplexe Apps auf mehrere Seiten auf.

Mobilgeräte

Beispiel zeigt eine Vorlage für die linke Navigation auf mobilgeräten.

Desktop

Beispiel zeigt eine Vorlage für die linke Navigation auf dem Desktop.

Benachrichtigungsleiste

Eine Benachrichtigungsleiste ist ein dedizierter Bereich zum Anzeigen kurzer, wichtiger Nachrichten, für die der Benutzer keine sofortigen Maßnahmen ergreifen muss. Bestimmte Hintergrundfarben und Symbole sind bestimmten Nachrichtentypen zugeordnet (siehe unten).

Häufigste Anwendungsfälle

  • Kritische Meldungen, Fehler und Warnungen
  • Erfolgsmeldungen
  • Informations- oder Werbenachrichten

Mobilgeräte

Beispiel zeigt die Benachrichtigungsleisten-UI-Vorlage auf mobilgeräten.

Desktop

Beispiel zeigt Vorlagen für die Benachrichtigungsleiste auf dem Desktop.

Phasenansicht

Mit der Phasenansicht können Benutzer Inhalte wie ein Bild, eine Datei oder eine Website auf einer großen Oberfläche in Teams sehen, ohne den Kontext zu wechseln. Diese Komponente dient in erster Linie zum Anzeigen von Inhalten. Verwenden Sie sie nicht für komplexe Interaktionen.

Erfahren Sie, wie Sie die Phasenansichtimplementieren.

Häufigste Anwendungsfälle

  • Anzeigen von Inhalten auf einer großen Oberfläche innerhalb Teams anstelle einer anderen App oder eines anderen Browsers
  • Spotlight-Medien oder andere umfangreiche Inhalte

Mobilgeräte

Ihre App kann eine Phase über eine adaptive Karte, einen freigegebenen Link oder visuelle Komponenten (z. B. ein Diagramm) starten.

Beispiel zeigt eine Phasenvorlage auf mobilgeräten.

Desktop

Beispiel zeigt eine Phasenvorlage auf dem Desktop.

Symbolleiste

Eine Symbolleiste ist ein Container zum Gruppieren einer Gruppe von Steuerelementen.

Häufigste Anwendungsfälle

  • Kontextbezogene Aktionen für App-Inhalte
  • Kontextfilter und -suche
  • Navigation und Breadcrumbs

Mobilgeräte

Beispiel zeigt eine Symbolleistenvorlage auf mobilgeräten.

Desktop

Beispiel zeigt eine Symbolleistenvorlage auf dem Desktop.