Teilen über


Entwerfen Ihrer Microsoft Teams-App mit Benutzeroberflächenvorlagen

Entwerfen Sie Ihre Microsoft Teams-App schneller mit Benutzeroberflächenvorlagen. Die Vorlagen sind eine Sammlung von Fluent UI-basierten Komponenten, die in gängigen Teams-Anwendungsfällen funktionieren, sodass Sie mehr Zeit haben, die beste Benutzererfahrung für Ihre Benutzer zu ermitteln.

Erste Schritte mit Tools und Beispielen

Die folgenden Ressourcen können Sie beim Entwerfen und Entwickeln Ihrer App mithilfe von Benutzeroberflächenvorlagen unterstützen.

Microsoft Teams-UI-Kit

Holen Sie sich Benutzeroberflächenvorlagen für Ihr App-Design aus dem Microsoft Teams UI Kit, das auch umfangreiche Informationen zu Verwendung, Anatomie, Barrierefreiheit und bewährten Methoden enthält.

Die App-Playbooks und UI-Vorlagen sind auch verfügbar, um Ihnen den Einstieg in die Apps zu erleichtern , die in Microsoft 365 erweitert wurden.

React-Komponenten der Fluent-Benutzeroberfläche

Anzeigen und Testen einzelner React-Komponenten der Fluent-Benutzeroberfläche in Ihrem Browser.

Beispiel-App

Installieren Sie eine Beispiel-App, um zu sehen, wie Benutzeroberflächenvorlagen in Teams-Kontexten aussehen und sich verhalten.

Kalender

In Teams ist ein Kalender, in dem ein Benutzer anstehende und vergangene Ereignisse für sich selbst oder eine Gruppe anzeigt, plant und verwaltet.

Wichtigste Anwendungsfälle

  • Planen von Besprechungen und Ereignissen
  • Abrufen von Erinnerungen an anstehende Besprechungen und Ereignisse
  • Anzeigen von Zeitplänen

Desktop

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

Dashboard

Ein Dashboard zeigt verschiedene Arten von Inhalten an einem zentralen Ort an (z. B. eine persönliche Teams-App oder Registerkarte). Benutzer sollten in der Lage sein, zumindest einen Teil der auf einem Dashboard angezeigten Elemente anzupassen.

Wichtigste Anwendungsfälle

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

Mobil

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

Desktop

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

Datenvisualisierung

Sie können verschiedene Kartengrößen (single, double und full) verwenden, um Datenvisualisierungen auf derselben Seite zu stapeln und zu organisieren. Die Karten werden an das Spaltenlayout angepasst und füllen Leerzeichen aus.

Wichtigste Anwendungsfälle

  • Anzeigen komplexer Informationen
  • Erstellen eines Dashboards

Mobil

Das Beispiel zeigt eine Vorlage für die Datenvisualisierungs-UI auf mobilgeräten.

Desktop

Das Beispiel zeigt eine Vorlage für die Datenvisualisierungs-Ui auf dem Desktop.

Leerer Zustand

Die leere Zustandsvorlage kann für viele Szenarien verwendet werden, einschließlich Anmeldung, Erstausführung, Fehlermeldungen und mehr. Es ist sehr flexibel – passen Sie es an, um eine, einige wenige oder alle Komponenten im folgenden Entwurf zu verwenden.

Wichtigste Anwendungsfälle

  • Anmelden
  • Begrüßungsnachrichten und Erstausführungserfahrungen
  • Erfolgsmeldungen
  • Fehlermeldungen

Mobil

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

Desktop

Beispiel zeigt eine leere Zustands-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 mit Tabellen, Listen, Karten und anderen Komponenten einschließen, die Inhalte organisieren.

Wichtigste Anwendungsfälle

Organisieren von Inhalten in:

  • Listen
  • Tabellen
  • Dashboards
  • Datenvisualisierung

Das Beispiel zeigt eine Filtervorlage.

Formular

Formulare werden verwendet, um Benutzereingaben auf strukturierte Weise zu sammeln, zu überprüfen und zu übermitteln. Klare Bezeichnungen und logische Gruppierungen von Eingabefeldern sind für eine gute Benutzererfahrung von entscheidender Bedeutung.

Wichtigste Anwendungsfälle

  • Anmelden
  • Benutzerprofile
  • Einstellungen
  • Benutzereingabesammlung

Mobil

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

Desktop

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

Auflisten

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.

Wichtigste Anwendungsfälle

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

Mobil

Beispiel für eine Listen-UI-Vorlage auf mobilgeräten.

Desktop

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

Anmelden

Sie können App-Anmeldeflows für verschiedene Teams-Kontexte und Identitätsanbieter entwerfen. Das folgende Beispiel enthält einmaliges Anmelden (Single Sign-On, SSO), das für die einfachste Authentifizierung empfohlen wird.

Häufigster Anwendungsfall

Authentifizieren von Benutzern

Mobil

Das Beispiel zeigt eine Vorlage für die Anmeldebenutzeroberflächen auf mobilgeräten.

Desktop

Das Beispiel zeigt eine Vorlage für die Anmeldebenutzeroberflächen auf dem Desktop.

Einstellungen

Auf Einstellungsbildschirmen können Benutzer ihre Einstellungen mit Ihrer App konfigurieren.

Hinweis

Settings ist ein Container für grundlegende Benutzeroberflächenkomponenten.

Häufigster Anwendungsfall

Verwalten von App-Features

Das Beispiel zeigt eine Einstellungsvorlage.

Task board

Ein Taskboard, manchmal auch als Kanban-Board oder Schwimmspuren bezeichnet, ist eine Sammlung von Karten, die häufig zum Nachverfolgen des Status von Arbeitselementen oder Tickets verwendet werden. Es kann auch verwendet werden, um jeden Inhaltstyp in Kategorien zu sortieren. Sie können die Karten bearbeiten und zwischen Spalten verschieben.

Wichtigste Anwendungsfälle

  • Projektmanagement Zuweisen von Aufgaben und Nachverfolgen des Status.
  • Brainstorming. Hinzufügen von Ideen in verschiedenen Kategorien.
  • Sortierübungen. Organisieren jeder Art von Informationen in Buckets.

Mobil

Beispiel zeigt eine Taskboard-Ui-Vorlage auf mobilgeräten.

Desktop

Das Beispiel zeigt eine Taskboard-Ui-Vorlage auf dem Desktop.

Assistent

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

Wichtigste Anwendungsfälle

  • Setup
  • Onboarding
  • Erste Ausführungserfahrungen

Mobil

Beispiel: Vorlage für die Benutzeroberfläche des Assistenten auf Mobilgeräten

Desktop

Das Beispiel zeigt eine Vorlage für die Benutzeroberfläche des Assistenten auf dem Desktop.

Siehe auch