Entwerfen Ihrer Microsoft Teams-App mit UI-Vorlagen

Entwerfen Sie Ihre Microsoft Teams-App schneller mit UI-Vorlagen. Die Vorlagen sind eine Sammlung von Fluent UI-basierten Komponenten, die in allgemeinen Teams Anwendungsfällen funktionieren, sodass Sie mehr Zeit haben, um die beste Benutzererfahrung zu ermitteln.

Erste Schritte mit Tools und Beispielen

Die folgenden Ressourcen können Ihnen beim Entwerfen und Entwickeln Ihrer App mithilfe von Benutzeroberflächenvorlagen helfen.

Microsoft Teams-Benutzeroberflächenbausatz

Nutzen Sie UI-Vorlagen für Ihr App-Design aus dem Microsoft Teams UI Kit, das auch umfassende Informationen zur Verwendung, Anatomie, Barrierefreiheit und bewährten Methoden enthält.

Microsoft Teams UI-Bibliothek

Anzeigen und Testen einzelner Teams UI-Vorlagen und zugehöriger Komponenten in Ihrem Browser.

Importieren Sie diese Vorlagen und zugehörigen Komponenten direkt in Ihr Teams App-Projekt.

Beispiel-App

Installieren Sie eine Beispiel-App, um zu sehen, wie UI-Vorlagen in Teams Kontexten aussehen und sich verhalten.

Dashboard

Ein Dashboard zeigt verschiedene Inhaltstypen an einem zentralen Ort an (Teams persönliche App oder Registerkarte). Benutzer sollten in der Lage sein, zumindest einige der Elemente anzupassen, die sie auf einem Dashboard sehen.

Häufigste Anwendungsfälle

  • Analysieren von Daten
  • Berichtsmetriken
  • Organisieren unterschiedlicher Informationen an einem Ort

Mobilgeräte

Beispiel zeigt eine Dashboard-UI-Vorlage auf mobilgeräten.

Desktop

Beispiel zeigt eine Dashboard-UI-Vorlage auf dem Desktop.

Datenvisualisierung

Sie können unterschiedliche Kartengrößen (einzel, doppelt und vollständig) verwenden, um Datenvisualisierungen auf derselben Seite zu stapeln und zu organisieren. Die Karten werden so skaliert, dass sie in das Spaltenlayout passen und leere Leerzeichen ausfüllen.

Häufigste Anwendungsfälle

  • Anzeigen komplexer Informationen
  • Erstellen eines Dashboards

Mobilgeräte

Beispiel zeigt eine Vorlage für die Datenvisualisierung auf mobilen Geräten.

Desktop

Beispiel zeigt eine Datenvisualisierungs-UI-Vorlage auf dem Desktop.

Leerer Zustand

Die leere Statusvorlage kann für viele Szenarien verwendet werden, einschließlich Anmeldung, Erste Ausführung, Fehlermeldungen und vieles mehr. Es ist äußerst flexibel– passen Sie es an die Verwendung einer, einiger oder aller Komponenten im folgenden Design an.

Häufigste Anwendungsfälle

  • Anmelden
  • Willkommensnachrichten und Erfahrungen bei der ersten Ausführung
  • Erfolgsmeldungen
  • Fehlermeldungen

Mobilgeräte

Beispiel zeigt eine leere Status-UI-Vorlage auf mobilgeräten.

Desktop

Beispiel zeigt eine leere Status-UI-Vorlage auf dem Desktop.

Filter

Mit einem Filter können Sie die angezeigten Informationen basierend auf den ausgewählten Kriterien reduzieren. Sie können Filter in Tabellen, Listen, Karten und andere Komponenten einschließen, die Inhalte organisieren.

Häufigste Anwendungsfälle

Organisieren von Inhalten in:

  • Listen
  • Tabellen
  • Dashboards
  • Datenvisualisierung

Beispiel zeigt eine Filtervorlage.

Formular

Formulare werden verwendet, um Benutzereingaben strukturiert zu erfassen, zu überprüfen und zu übermitteln. Klare Beschriftungen und logische Gruppierungen von Eingabefeldern sind entscheidend für eine gute Benutzererfahrung.

Häufigste Anwendungsfälle

  • Anmelden
  • Benutzerprofile
  • Einstellungen
  • Benutzereingabesammlung

Mobilgeräte

Beispiel zeigt eine Formular-UI-Vorlage auf mobilgeräten.

Desktop

Beispiel zeigt eine Formular-UI-Vorlage auf dem Desktop.

Liste

Sie können eine Liste verwenden, um verwandte Elemente in einem scannbaren Format anzuzeigen und Benutzern das Ausführen von Aktionen für eine gesamte Liste oder einzelne Elemente zu ermöglichen.

Häufigste Anwendungsfälle

  • Anzeigen von Daten
  • Kontextbezogene Aktionen für App-Inhalte

Mobilgeräte

Beispiel zeigt eine Listen-UI-Vorlage auf mobilgeräten.

Desktop

Beispiel zeigt eine Listen-UI-Vorlage auf dem Desktop.

Anmelden

Sie können App-Anmeldeflüsse für unterschiedliche Teams Kontexte und Identitätsanbieter entwerfen. Das folgende Beispiel enthält einmaliges Anmelden (Single Sign-On, SSO), das wir für die einfachste Authentifizierung empfehlen.

Häufigster Anwendungsfall

  • Authentifizieren von Benutzern

Mobilgeräte

Beispiel zeigt eine Benutzeroberflächenvorlage für die Anmeldung auf mobilgeräten.

Desktop

Beispiel zeigt eine Vorlage für die Anmeldung auf der Benutzeroberfläche auf dem Desktop.

Einstellungen

Einstellungen Bildschirme können Benutzer ihre Einstellungen mit Ihrer App konfigurieren. (Hinweis: Einstellungen ist ein Container für grundlegende UI-Komponenten.)

Häufigster Anwendungsfall

  • Verwalten von App-Features

Beispiel zeigt eine Einstellungsvorlage.

Task Board

Ein Task Board, manchmal auch als "Tickets Board" oder "Boot" bezeichnet, ist eine Sammlung von Karten, die häufig verwendet werden, um den Status von Arbeitselementen oder Tickets nachzuverfolgen. Es kann auch verwendet werden, um alle Arten von Inhalten in Kategorien zu sortieren. Sie können die Karten bearbeiten und zwischen Spalten verschieben.

Häufigste Anwendungsfälle

  • Projektmanagement Zuweisen von Aufgaben und Nachverfolgungsstatus
  • Brainstorming. Hinzufügen von Ideen in verschiedenen Kategorien
  • Sortierübungen. Organisieren beliebiger Informationen in Buckets

Mobilgeräte

Beispiel zeigt eine Task Board-UI-Vorlage auf mobilgeräten.

Desktop

Beispiel zeigt eine Task Board-UI-Vorlage auf dem Desktop.

Assistent

Ein Assistent führt einen Benutzer durch mehrere Bildschirme, um eine Aufgabe abzuschließen (z. B. einen Setupprozess).

Häufigste Anwendungsfälle

  • Einrichtung
  • Onboarding
  • Erfahrungen bei der ersten Ausführung

Mobilgeräte

Beispiel zeigt eine Assistenten-UI-Vorlage auf mobilgeräten.

Desktop

Beispiel zeigt eine Assistenten-UI-Vorlage auf dem Desktop.

Siehe auch