Entwerfen Sie Ihre Microsoft Teams-Messaging-Erweiterung

Messagingerweiterungen sind Tastenkombinationen zum Einfügen von App-Inhalten oder zum Bearbeiten einer Nachricht, ohne von der Konversation weg zu navigieren. Um Ihr App-Design zu steuern, beschreiben und veranschaulichen die folgenden Informationen, wie Benutzer Messagingerweiterungen in Teams hinzufügen, verwenden und verwalten können.

Microsoft Teams-UI-Kit

Umfassende Richtlinien für den Entwurf von Messaging-Erweiterungen, einschließlich Elementen, die Sie nach Bedarf abrufen und ändern können, finden Sie im Microsoft Teams-UI-Kit.

Hinzufügen einer Messaging-Erweiterung

In den folgenden Teams-Kontexten können eine Messaging-Erweiterung hinzufügen:

  • Aus dem Teams-Store.
  • In einem Kanal, Chat oder einer Besprechung (vor, während und nachher) in der Nähe des "Verfassen"-Felds. Beachten Sie, dass wenn Sie eine Messaging-Erweiterung an einer dieser Stellen hinzufügen, nur Sie sie in diesem Kontext verwenden können.

Das folgenden Beispiele zeigen, wie eine Messaging-Erweiterung in einem Kanal hinzufügt werden kann.

Mobil

Das Beispiel zeigt, wie eine Messaging-Erweiterung in der Nähe des "Verfassen"-Felds in einem Kanal auf Mobilgeräten hinzugefügt wird.

Desktop

Das Beispiel zeigt, wie eine Messaging-Erweiterung in der Nähe des "Verfassen"-Felds in einem Kanal hinzugefügt wird.

Einrichten einer Messaging-Erweiterung

Die Authentifizierung ist nicht obligatorisch, aber wenn Ihre App zum Beispiel eine Art Ticketverfolgungstool ist, müssen Sie sich Benutzer möglicherweise anmelden, um die Messaging-Erweiterung zu verwenden.

Aus Gründen der Konsistenz zwischen Teams-Apps können Sie den Anmeldebildschirm nicht anpassen. Wenn Sie die Authentifizierung mit einmaligem Anmelden (Single Sign-On, SSO) verwenden, werden Benutzer automatisch angemeldet.

Mobil

Das Beispiel zeigt den Setupbildschirm der Messaging-Erweiterung mit einer Anmeldeschaltfläche auf Mobilgeräten.

Desktop

Das Beispiel zeigt den Setupbildschirm der Messaging-Erweiterung mit einer Anmeldeschaltfläche.

Typen von Messaging-Erweiterungen

Messaging-Erweiterungen können Suchbefehle, Aktionsbefehle oder beides aufweisen. Ihre Befehle hängen von den Features Ihrer App und davon ab, wie diese in Teams-Anwendungsfälle passen.

Suchbefehle

Mit Suchbefehlen können Benutzer Ihre Messaging-Erweiterung dazu nutzen, schnell externe Inhalte zu finden und in eine Nachricht einzufügen. Suchbefehle werden häufig im "Verfassen"-Feld zur Verfügung gestellt. Sie können z. B. eine Diskussion beginnen oder etwas zu einer Diskussion hinzufügen, indem Sie einen Teil des Inhalts teilen – ohne Teams verlassen zu müssen.

Mobil

Das Beispiel zeigt eine suchbasierte Messaging-Erweiterung, die über das "Verfassen"-Feld auf mobilen Geräten gestartet wurde.

Desktop

Das Beispiel zeigt eine suchbasierte Messaging-Erweiterung, die über das "Verfassen"-Feld gestartet wurde.

Layoutoptionen für das "Verfassen"-Feld

Sie haben einige Optionen zum Anzeigen von Suchergebnissen für Messaging-Erweiterung, einschließlich Listen- und Rasteransichten.

Abbildungen mit Layoutoptionen für Suchergebnisse von Messaging-Erweiterung.

Aktionsbefehle

Aktionsbefehle ermöglichen es Personen, Aktionen auszulösen und Anforderungen in externen Diensten in Teams zu verarbeiten. Wenn Ihre App beispielsweise Bestellungen nachverfolgt, kann ein Benutzer eine neue Bestellung erstellen, indem er den Inhalt der Nachricht eines Kollegen direkt in seinem Chat verwendet.

Aktionsbasierte Messaging-Erweiterungen erfordern häufig, dass Benutzer ein Formular oder eine andere Art von Konfiguration innerhalb eines Modals ausfüllen müssen. Sie können diese Erfahrungen mit Aufgabenmodulenerstellen.

Öffnen einer Messaging-Erweiterung

Das "Verfassen"-Feld und Nachrichten oder Beiträge sind die primären Kontexte, in denen Benutzer Messaging-Erweiterungen verwenden.

Über das "Verfassen"-Feld

Nach dem Hinzufügen können Benutzer Ihre Messaging-Erweiterung öffnen, indem sie ihr App-Symbol unter dem "Verfassen"-Feld auswählen. In diesen Beispielen verfügt die Erweiterung über Such- und Aktionsbefehle.

Mobil

Das Beispiel zeigt, wie Sie eine Messaging-Erweiterung über das "Verfassen"-Feld auf Mobilgeräten öffnen.

Desktop

Das Beispiel zeigt, wie Sie eine Messaging-Erweiterung über das "Verfassen"-Feld öffnen.

Aus einer Chatnachricht oder einem Kanalbeitrag

Nach dem Hinzufügen können Benutzer das Symbol Weitere in der Chatnachricht oder im Kanalbeitrag auswählen, um die Aktionsbefehle Ihrer Erweiterung zu finden. Ihre Erweiterung wird möglicherweise basierend auf der Nutzung unter Weitere Aktionen aufgeführt.

Chatnachricht

Das Beispiel zeigt, wie Sie eine Messaging-Erweiterung aus einer Chatnachricht öffnen.

Kanalbeitrag

Das Beispiel zeigt, wie Sie eine Messaging-Erweiterung aus einem Kanalbeitrag auf mobilen Geräten öffnen.

Verwenden einer Messaging-Erweiterung

In den folgenden Szenarien wird veranschaulicht, wie Benutzer Messaging-Erweiterungen in erster Linie verwenden.

Einfügen von Inhalt in eine Nachricht

1. Wählen Sie eine Messaging-Erweiterung aus. Benutzer können über das "Verfassen"-Feld nach dem Inhalt suchen, den sie freigeben möchten.

Mobil

Das Beispiel zeigt einen Benutzer, der auf einem Mobilgerät über das "Verfassen"-Feld nach Inhalten sucht, die eingefügt werden sollen.

Desktop

Das Beispiel zeigt einen Benutzer, der nach Inhalten sucht, die aus dem "Verfassen"-Feld eingefügt werden sollen.

2. Inhalt einfügen. Nach der Veröffentlichung können andere Personen auf den Inhalt antworten oder diesen auswählen, um weitere Informationen in Ihrer App anzuzeigen.

Mobil

Das Beispiel zeigt, wie ein Benutzer auf einem Mobilgerät Inhalte in einer Kanalunterhaltung postet.

Desktop

Das Beispiel zeigt, wie ein Benutzer Inhalte in einer Kanalunterhaltung postet.

Aktionen für eine Nachricht ausführen

1. Wählen Sie eine Messaging-Erweiterung aus. Ihre App kann einen oder mehrere Aktionsbefehle enthalten.

Das Beispiel zeigt, wie ein Benutzer einen Aktionsbefehl für die Messaging-Erweiterung auswählt.

2. Führen Sie die Aktion aus. Ihre App kann alle Inhalte oder Daten empfangen und verarbeiten, die von der Nachrichtenaktion gesendet werden. Benutzer führen die Aktion in Ihrer App aus, während sie in ihrer Unterhaltung bleiben.

Beispiel für das Ausführen von Aktionen für eine Nachricht.

Messaging-Erweiterungen ermöglichen es Ihnen auch, Rich-Links aus einer erkannten URL in eine Nachricht einzufügen. (Diese Funktion wird alsEntfalten von Linksbezeichnet).

1. Fügen Sie einen erkannten Link in das "Verfassen"-Feld ein.

Mobil

Das Beispiel zeigt, wie ein Benutzer auf einem Mobilgerät einen Link in das "Verfassen"-Feld eingibt.

Desktop

Das Beispiel zeigt, wie ein Benutzer einen Link in das "Verfassen"-Feld eingibt.

2. Inhalt einfügen. Wenn Ihre App die URL im "Verfassen"-Feld erkennt, rendert sie den Link als Karte, die eine inhaltsreiche Vorschau des Webinhalts bereitstellt. (Weitere Informationen finden Sie unter Entwurfsrichtlinien für Adaptive Karten.)

Mobil

Das Beispiel zeigt, wie die URL auf einem Mobilgerät umfangreiche Inhalte in das "Verfassen"-Feld einschließt, da sie von Ihrer App erkannt wird.

Desktop

Das Beispiel zeigt, wie die URL umfangreiche Inhalte in das "Verfassen"-Feld einschließt, da sie von Ihrer App erkannt wird.

Verwalten einer Messaging-Erweiterung

Benutzer können Ihre Messaging-Erweiterung anheften, entfernen oder konfigurieren, wenn Sie mit der rechten Maustaste auf Ihr Symbol klicken.

Anatomie

Messaging-Erweiterung im "Verfassen"-Feld

Das folgenden Beispiele zeigen eine Messaging-Erweiterung, die über das "Verfassen"-Feld geöffnet wird.

Mobil

Abbildung zeigt die UI-Anatomie einer Messaging-Erweiterung im Feld "Verfassen"auf einem Mobilgerät.

Leistungsindikator Beschreibung
1 App-Name: Vollständiger Name Ihrer App.
2 Menüsymbol für Aktionsbefehle (optional): Öffnet eine Liste von Aktionsbefehlen für Ihre Messaging-Erweiterung (sofern vorhanden).
3 Suchfeld: Ermöglicht Benutzern das Suchen von App-Inhalten, die sie einfügen möchten.
4 Registerkartenmenü (optional): Stellt mehrere Inhaltskategorien bereit.
5 Menü "Aktionsbefehle" (optional): Zeigt die Liste der Aktionsbefehle an (sofern angegeben).
6 App-Inhalt: Hauptsächlich zum Anzeigen von Suchergebnissen.

Desktop

Abbildung zeigt die UI-Anatomie einer Messaging-Erweiterung im Feld "Verfassen".

Leistungsindikator Beschreibung
1 App-Logo: Farbsymbol Ihres App-Logos.
2 App-Name: Vollständiger Name Ihrer App.
3 Menüsymbol für Aktionsbefehle (optional): Öffnet eine Liste von Aktionsbefehlen für Ihre Messaging-Erweiterung (sofern vorhanden).
4 Suchfeld: Ermöglicht Benutzern das Suchen von App-Inhalten, die sie einfügen möchten.
5 Registerkartenmenü (optional): Stellt mehrere Inhaltskategorien bereit.
6 Menü "Aktionsbefehle" (optional): Zeigt die Liste der Aktionsbefehle an (sofern angegeben).
7 App-Inhalt: Hauptsächlich zum Anzeigen von Suchergebnissen. Im folgenden Beispiel wird das Listenlayout verwendet (Rasterlayout ist eine weitere Option).
8 App-Logo: Gliederungssymbol Ihres App-Logos.

Menü "Verwalten der Messaging-Erweiterung"

Abbildung zeigt die UI-Anatomie eines "Verwalten der Messaging-Erweiterung"-Menüs.

Leistungsindikator Beschreibung
1 Lösen sie: Verfügbar, wenn der Benutzer Ihre App angeheftet hat.
2 Entfernen: Entfernt die Messaging-Erweiterung aus dem Kanal, Chat oder der Besprechung.

Bewährte Methoden

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

Setup und allgemeine Nutzung

Beispiel für Setup und allgemeine Nutzung.

Was Sie tun sollten: Integration mit einmaligem Anmelden

Mit Single Sign-On ist der Anmeldevorgang einfacher, schneller und sicherer. Wenn sich ein Benutzer bereits bei Ihrer persönlichen App angemeldet hat, muss er sich auch nicht erneut anmelden, um auf die Messaging-Erweiterung zuzugreifen.

Beispiel für die Integration mit einmaligem Anmelden.

Was Sie nicht tun sollten: Benutzer aus der Unterhaltung entfernen

Messaging-Erweiterungen sind Tastenkombinationen, die den Kontextwechsel reduzieren sollen. Ihre Erweiterung sollte Benutzer beispielsweise nicht zu einer Webseite außerhalb von Teams weiterleiten.

Was Sie tun sollten: Hervorheben Ihrer Messaging-Erweiterung

Messaging-Erweiterungen sind nicht immer leicht zu finden. Fügen Sie Screenshots zur Verwendungsweise auf der Detailseite Ihrer App ein. Wenn Ihre App auch einen Bot enthält, können Sie die Hilfedokumentation zur Messaging-Erweiterung in eine Bot-Willkommenstour aufnehmen.

Vorlagen

Beispiel für Vorlagen.

Was Sie tun sollten: Lassen Sie Teams nach Möglichkeit einen Teil der Entwurfsarbeit erledigen

Wenn es für Ihre Anwendungsfälle sinnvoll ist, sollten Sie eine suchbasierte Messaging-Erweiterung erstellen. Teams rendert diese Arten von Erweiterungen mit integriertem Design und Barrierefreiheit.

Beispiel für die Verarbeitung von Entwurfsarbeiten.

Was Sie nicht tun sollten: Einbetten der gesamten App in ein Aufgabenmodul

Wenn Ihre Messaging-Erweiterung Aktionsbefehle erfordert, halten Sie das Aufgabenmodul schlicht, und zeigen Sie nur die Komponenten an, die zum Abschließen der Aktion erforderlich sind.

Design

Beispiel für Design.

Was Sie tun sollten: Teams-Farbtoken nutzen

Jedes Teams-Design verfügt über ein eigenes Farbschema. Um Designänderungen automatisch zu verarbeiten, verwenden Sie Farbtoken (Fluent UI) in Ihrem Entwurf.

Beispiel für Farbtoken.

Was Sie nicht tun sollten: Hartcodieren von Farbwerten

Wenn Sie keine Teams-Farbtoken verwenden, sind Ihre Designs weniger skalierbar und benötigen mehr Zeit für die Verwaltung.

Aktionen

Beispiel für Aktionen.

Was Sie tun sollten: Aktionsbefehle einschließen, die im Kontext sinnvoll sind

Nachrichtenaktionen sollten sich auf das beziehen, was ein Benutzer sieht. Geben Sie Benutzern beispielsweise eine Verknüpfung zum Erstellen eines Problems oder Arbeitselements mithilfe des Texts in einem Beitrag einer Person an.

Beispiel für Aktionsbefehle.

Was Sie nicht tun sollten: Aktionsbefehle einschließen, die nicht kontextbezogen sind

Eine Nachrichtenaktion zum Anzeigen Ihres Dashboards scheint wahrscheinlich von den meisten Unterhaltungen getrennt zu sein.

Suchvorgänge

Was Sie tun sollten: Suchergebnisse während der Eingabe anzeigen

Geben Sie vorgeschlagene Suchergebnisse an, während Benutzer Text eingeben. Möglicherweise finden sie so den benötigten Inhalt schneller mit einer minimalen Anzahl von Zeichen.

Was Sie nicht tun sollten: Benutzer müssen eine Abfrage übermitteln

Sie können festlegen, dass Benutzer eine Taste drücken oder eine Schaltfläche auswählen, um Abfragen an Ihre App zu senden. Obwohl dies für Ihren App-Services-Dienst einfacher sein kann, sind Benutzer möglicherweise verwirrt, dass sie während der Texteingabe keine Echtzeitsuchergebnisse sehen.

Was Sie tun sollten: Erwägen Sie Nullausdrucksabfragen

Bevor ein Benutzer beispielsweise etwas in das Suchfeld schreibt, zeigen Sie an, was er zuletzt in Ihrer App angesehen hat. Es ist möglich, dass sie diesen Inhalt in ihre Unterhaltung einfügen möchten.