Freigeben über


Entwerfen von Dialogen für Ihre Microsoft Teams-App

Sie können modale Popupfunktionen in Ihrer Teams-App mit Dialogen (in TeamsJS v1.x als Aufgabenmodule bezeichnet) erstellen. Verwenden Sie diese Funktion, um Rich-Media und Informationen anzuzeigen, oder eine komplexe Aufgabe abzuschließen.

Beispiel für ein Dialogfeld.

Microsoft Teams-UI-Kit

Umfassendere Richtlinien für den Dialogentwurf, einschließlich Elementen, die Sie nach Bedarf abrufen und ändern können, finden Sie im Microsoft Teams UI Kit.

Öffnen eines Dialogs

Dialoge können von praktisch überall in Ihrer App gestartet werden.

  • Registerkarte: Ein Dialogfeld kann über einen beliebigen Link innerhalb einer Registerkarte gestartet werden. Verwenden Sie dies in Szenarien, in denen der Benutzer sich auf eine Interaktion konzentrieren soll.
  • Bot: Ein Dialog kann über einen Link in einer Botnachricht gestartet werden.
  • Adaptive Karte: Ein Dialogfeld kann von einer adaptiven Karte (gesendet mit einer Nachrichtenerweiterung oder von einem Bot) gestartet werden, wenn ein Benutzer eine Schaltfläche auswählt.
  • Nachrichtenerweiterung (Aktionsbefehle): Mit Nachrichtenerweiterungen können Sie eine bestimmte Aktion für Nachrichteninhalte ausführen. Wenn Sie eine Aktion auswählen, wird ein Dialogfeld geöffnet.
  • Nachrichtenerweiterung (Kontext des Verfassenfelds): Im Feld "Verfassen" können Sie eine Nachrichtenerweiterung entwerfen, um anstelle des typischen Flyouts ein Dialogfeld zu öffnen. Reservieren Sie Dialoge für komplexe Interaktionen, z. B. das Ausfüllen eines Formulars.

Anatomie

Dialoge bieten eine flexible Oberfläche für gehostete App-Umgebungen. Sie werden mit einem iframe (Desktop) oder webview (mobil) erstellt, sodass Sie Dialoge mit unseren Benutzeroberflächenvorlagen (empfohlen) oder von Grund auf neu entwerfen können.

Sie können auch mit dem Framework für Adaptive Karten erstellt werden. Dies kann eine einfachere und schnellere Möglichkeit sein, häufige Szenarien (z. B. Formulare) zu vereinfachen.

Mobilgeräte

Abbildung der Ui-Anatomie eines Dialogfelds auf Mobilgeräten.

Leistungsindikator Beschreibung
1 Kopfzeile: Erstellen Sie Ihre Kopfzeilen klar und präzise. Beschreiben Sie die Aufgabe, die Benutzer ausführen sollen.
2 App-Name: Vollständiger Name Ihrer App.
3 Schaltfläche „Schließen“:Schließt das Dialogfeld. Wendet keine ungespeicherten Änderungen in App-Inhalten an.
4 WebView: Reaktionsfähiger Bereich, der Ihre App-Inhalte hostet.
5 Aktionen (optional): Schaltflächen im Zusammenhang mit Ihren App-Inhalten.

Desktop

Abbildung der Ui-Anatomie eines Dialogfelds.

Leistungsindikator Beschreibung
1 App-Symbol
2 App-Name: Vollständiger Name Ihrer App.
3 Kopfzeile: Erstellen Sie Ihre Kopfzeilen klar und präzise. Beschreiben Sie die Aufgabe, die Benutzer ausführen sollen.
4 Schaltfläche „Schließen“:Schließt das Dialogfeld. Wendet keine ungespeicherten Änderungen in App-Inhalten an.
5 iFrame: Reaktionsfähiger Bereich, der Ihre App-Inhalte hostet.
6 Aktionen (optional): Schaltflächen im Zusammenhang mit Ihren App-Inhalten.

Entwerfen mit Benutzeroberflächenvorlagen

Erwägen Sie die Verwendung von Vorlagen für allgemeine Layouts in Ihren Dialogfeldern. Jede besteht aus kleineren Komponenten, um ein elegantes, reaktionsfähiges Design zu erstellen, das sofort verwendet oder für Ihr Szenario oder das Look & Feel Ihrer Marke angepasst werden kann.

  • Liste: Listen können verwandte Elemente in einem durchsuchbaren Format anzeigen und es Benutzern ermöglichen, Aktionen für eine ganze Liste oder einzelne Elemente auszuführen.
  • Formular: Formulare dienen zum strukturierten Sammeln, Überprüfen und Übermitteln von Benutzereingaben.
  • Leerer Status: Die Vorlage „leerer Status“ kann für viele Szenarien verwendet werden, z. B. für die Anmeldung, die Erfahrung beim ersten Ausführen, Fehlermeldungen und vieles mehr.

Beispiele

Liste

Listen funktionieren in einem Dialogfeld gut, da sie einfach zu scannen sind.

Mobil

Beispielliste in einem Dialogfeld auf Mobilgeräten.

Desktop

Beispielliste in einem Dialogfeld.

Formular

Dialoge sind ein hervorragender Ort, um Formulare mit sequenziellen Benutzereingaben und Inlinevalidierung anzuzeigen. Sie können adaptive Karten als Möglichkeit zum Einbetten von Formularelementen nutzen.

Mobilgeräte

Beispielformular in einem Dialogfeld auf Mobilgeräten.

Desktop

Beispielformular in einem Dialogfeld.

Anmelden

Erstellen Sie einen fokussierten Anmelde- oder Registrierungsflow mit einer Reihe von Dialogen, sodass Benutzer problemlos sequenzielle Schritte durchlaufen können.

Mobil

Beispiel für die Anmeldung in einem Dialogfeld auf Mobilgeräten.

Desktop

Beispiel für die Anmeldung in einem Dialogfeld.

Medien

Einbetten von Medieninhalten in ein Dialogfeld für eine fokussierte Anzeige.

Mobil

Beispielmedieninhalte in einem Dialogfeld auf Mobilgeräten.

Desktop

Beispielmedieninhalt in einem Dialogfeld.

Leerer Zustand

Wird für Begrüßungs-, Fehler- und Erfolgsmeldungen verwendet.

Mobilgeräte

Beispiel für einen leeren Zustand in einem Dialogfeld auf Mobilgeräten.

Desktop

Beispiel für einen leeren Zustand in einem Dialogfeld.

Einbetten eines Katalogkarussells in ein iFrame (Desktop) oder eine WebView (Mobilgerät).

Mobilgeräte

Beispielbildkatalog in einem Dialogfeld auf Mobilgeräten.

Desktop

Beispielbildkatalog in einem Dialogfeld.

Umfrage

Dieses Beispiel zeigt Ergebnisse einer Umfrage, die von einer adaptiven Karte gestartet wurde. Die Umfrage kann auch in einem Dialogfeld platziert werden.

Mobil

Beispielabfrage in einem Dialogfeld auf Mobilgeräten.

Desktop

Beispielabfrage in einem Dialogfeld.

Bewährte Methoden

Verwenden Sie diese Empfehlungen, um eine hochwertige App-Erfahrung zu erstellen.

Benutzerfreundlichkeit

Beispiel für eine bewährte Methode für Dialoge (jeweils ein Dialog).

Do: Show one dialog at a time

Das Ziel besteht darin, dass sich der Benutzer auf das Erledigen einer Aufgabe konzentriert.

Beispiel für eine bewährte Methode für Dialoge (Auffüllen eines Dialogs über einen Dialog)

Nicht: Öffnen eines Dialogfelds über einem Dialogfeld

Dies führt zu einer unscharfen, verwirrenden Benutzererfahrung.

Reaktionsfähig

Beispiel für eine bewährte Methode für Dialoge (stellen Sie sicher, dass der Inhalt reaktionsfähig ist).

Tun: Sicherstellen, dass die Inhalte reaktionsfähig sind

Während adaptive Karten, die in einem Dialogfeld gehostet werden, auf mobilen Geräten gut gerendert werden, stellen Sie sicher, dass die Benutzeroberfläche reaktionsfähig ist und geräteübergreifend gut funktioniert, wenn Sie einen iframe zum Hosten von App-Inhalten verwenden.

Beispiel für eine bewährte Methode für Dialoge (keine horizontalen Bildlaufleisten verwenden).

Nicht tun: Horizontale Bildlaufleisten verwenden

Es ist eine bewährte Methode, Inhalte fokussiert und nicht zu lang zu halten. Wenn ein Bildlauf erforderlich ist, scrollen Sie vertikal und nicht horizontal.

Einfachheit

Beispiel für eine bewährte Methode für Dialoge (kurz halten)

Tun: Halten Sie Ihren Beitrag kurz.

Sie können ganz einfach einen Assistenten mit mehreren Schritten erstellen, aber das bedeutet nicht unbedingt, dass Sie es sollten! Ein Dialog mit mehreren Bildschirmen kann problematisch sein, da eingehende Nachrichten ablenkend sind und Benutzer dazu verleiten, das Dialogfeld zu beenden. Wenn Ihre Aufgabe wirklich involviert ist, wechseln Sie zu einer vollständigen Webseite anstelle eines Dialogfelds.

Beispiel für eine bewährte Methode für Dialoge (keine langen Interaktionen).

Nicht tun: Lange Interaktionen erstellen

Versuchen Sie, Ihre Interaktionen kurz zu halten und auf den Punkt zu bringen.

Fehlermeldungen

Beispiel für eine bewährte Methode für Dialoge (Verwenden von Inlinefehlermeldungen)

Tun: Verwenden von Inline-Fehlermeldungen

Anleitungen zur Inline-Fehlerbehandlung finden Sie in den Formularen zur Benutzeroberflächenvorlage.

Beispiel für eine bewährte Methode für Dialoge (Einfügen von Fehlermeldungen in Dialogfeldern)

Nicht tun: Fehlermeldungen in Dialogfelder einfügen

Fügen Sie keine Fehlermeldung in ein Dialogfeld über einem Dialogfeld ein. Dies führt zu einer verwirrenden Benutzererfahrung.