Adaptive Karten für den Entwurf von Agents

Adaptive Karten sind eine leistungsstarke Möglichkeit, um zu gestalten, wie Agents Informationen präsentieren und mit Benutzern interagieren. Anstatt sich allein auf Nur-Text zu verlassen, können Agents mit strukturierten, interaktiven Karten reagieren, die relevante Inhalte anzeigen, Eingaben sammeln und Aktion steuern – alles innerhalb des Unterhaltungsflusses.

Karten können auf zwei Arten angezeigt werden:

• Eigenständig: Die Karte ist die vollständige Antwort des Agenten, vollständig in sich abgeschlossen und enthält alles, was der Benutzer benötigt, um sie zu verstehen und entsprechend zu handeln.
• Gekoppelt mit einer Nachricht: Die Karte begleitet Text vor oder nachher, wobei die Nachricht Kontext bereitstellt und die Karte Struktur, Interaktion oder Aktion behandelt.

Adaptive Karten basieren auf einem JSON-basierten Format und werden als systemeigene Benutzeroberfläche gerendert, die sich automatisch an ihre Hostumgebung anpasst – einschließlich Hell- und Dunkelmodus, Bildschirmgröße und Microsoft 365-Oberflächen wie Teams, Outlook und Copilot Chat.

Als Designer treffen Sie bei Karten die Entscheidungen, die sich am sichtbarsten auf das Nutzererlebnis des Agenten auswirken. In den folgenden Abschnitten werden der Aufbau von Karten, Entwurfsprinzipien und die Ressourcen behandelt, die Sie benötigen, um mit der Erstellung zu beginnen.

Warum Adaptive Karten für das Agentdesign wichtig ist

Wenn ein Agent antwortet, kommt man mit reinem Text nur begrenzt weiter. Adaptive Karten ermöglichen Agents eine umfassendere, leistungsfähigere Präsenz in der Unterhaltung – eine Präsenz, die gezielt, strukturiert und bewusst gestaltet wirkt, anstatt einfach nur generiert.

Als Designer sind Karten ein primäres Tool zur Gestaltung der Darstellung eines Agents und der Interaktion mit Benutzern.

Gut gestaltete Karten:

• Verleihen Sie Agenten eine ausdrucksstärkere Stimme. Anstatt eine Wand von Text zurückzugeben, lassen Karten Agents Inhalte auf eine Weise anzeigen, die der Komplexität der Informationen entspricht – Diagramme für Daten, Bilder für Kontext, strukturierte Layouts für mehrteilige Antworten. Die Karte prägt, wie nützlich und vertrauenswürdig der Agent wirkt.
• Verringern Sie Reibungspunkte in Gesprächen. Anstatt Nachverfolgungsfragen einzeln zu stellen, können Agents Eingaben, Dropdowns und Auswahlsätze verwenden, um alles zu erfassen, was sie in einem einzigen Schritt benötigen, um die Interaktion effizient und fokussiert zu halten.
• Bringen Sie Ihre Marke und Persönlichkeit zum Ausdruck. Karten sind der Ort, an dem sich die visuelle Identität eines Agents befindet. Typografie, Ikonografie, der Rhythmus des Layouts und der Ton von Aktionsbeschriftungen tragen alle dazu bei, ob der Agent als ausgereifter, vertrauenswürdiger Assistent oder als Nebensache wahrgenommen wird.
• Geben Sie Designern einen Platz am Tisch. Bei Agent-Erlebnissen sind Design und Logik von Natur aus getrennt – der Agent steuert die Daten und Entscheidungen, aber Sie bestimmen Layout, Hierarchie und Interaktionsmuster. Diese Trennung ist eine Chance. Eine gut gestaltete Karte kann selbst eine einfache Antwort eines Agenten überlegt und zielgerichtet wirken lassen.
• Erstellen Sie Konsistenz über Oberflächen hinweg. Karten werden in Teams, Outlook, Microsoft 365 Copilot Chat und anderen Hosts in einer gemeinsamen visuellen Sprache dargestellt, damit der Agent konsistent und wiedererkennbar wirkt, wo auch immer Benutzer ihm begegnen.

Aufbau einer Karte

Adaptive Karten sind hochgradig anpassbar, aber die meisten Agentkarten teilen eine Reihe allgemeiner Komponenten. Wenn Sie diese Elemente verstehen, können Sie beabsichtigte Entscheidungen zu Struktur, Hierarchie und Interaktion treffen.

Ein paar Prinzipien, die Sie berücksichtigen sollten:

• Führen Sie mit den wichtigsten Informationen. Karten sollten schnell Einblicke und Aufgabenabschluss erleichtern; sie sollten Benutzer zu einem Aufgabenmodul oder zur vollständigen Anwendung für komplexere Interaktionen weiterleiten.
• Erstellen Sie eine visuelle Hierarchie. Verwenden Sie Schriftgrad, Farbe und Platzierung, damit die wichtigsten Informationen gut sichtbar und leicht durchsucht werden können.
• Die progressive Offenlegung zulassen. Führen Sie mit den relevantesten Inhalten, und lassen Sie Die Benutzer bei Bedarf mehr aufdecken; Erwägen Sie abgeschnittenen Text mit "Mehr anzeigen/weniger anzeigen"-Optionen oder reduzierbare Abschnitte.
• Beschränken Sie Aktionen auf das Wesentliche. Priorisieren Sie Aktionen, die direkt zur Erledigung der Aufgabe beitragen – zum Beispiel Senden bei Formularen, Genehmigen/Ablehnen bei Workflows oder Details anzeigen bei Übersichtskarten. Dynamisches Design. Karten sollten für alle Bildschirmgrößen und Kontexte angepasst werden. Das Adaptive Karten-Framework unterstützt vier responsive Breakpoints – Wide, Standard, Narrow und Very Narrow –, sodass Sie Layouts effektiv an verschiedene Kontexte und Kartengrößen anpassen können. Anleitungen zum Entwerfen über verschiedene Haltepunkte finden Sie unter Dynamisches Layout.

Einen tieferen Einblick in die Anatomie, bewährte Methoden, Symbole und Illustrationen finden Sie unter "Entwerfen bewährter Methoden" auf der Adaptive Karten-Website.

Beispiele

Die folgenden Beispiele zeigen die Bandbreite der Erfahrungen, die Sie mit Adaptive Karten in Agentszenarien erstellen können, von einfachen Aufgabenlisten bis hin zu umfassenden Genehmigungsworkflows und Datenvisualisierungen. Jedes Beispiel stellt ein anderes Layoutmuster und einen anderen Anwendungsfall dar.

Suchen Sie nach einem Ausgangspunkt für Ihre eigenen Designs? Das Microsoft Teams UI Kit und Microsoft Teams Repository für adaptive Kartenbeispiele umfassen eine Vielzahl von Vorlagen und Komponenten zum Erstellen.

Mit dem Erstellen beginnen

Der obige Abschnitt "Anatomie" gibt Ihnen ein mentales Modell, wie Karten strukturiert sind. Wenn Sie bereit sind, tiefer zu gehen – Erkunden von Layoutmustern, Komponenten, Stilen und echten Beispielen – verwenden Sie die folgenden Ressourcen:

• Adaptive Karten Designer, ein browserbasiertes Tool zum Erstellen und Testen von Kartenlayouts in Echtzeit, ohne JSON manuell zu schreiben.

  Der Designer enthält Vorlagen für Einstiegskarten. Auch die Adaptive Karten Homepage enthält Vorlagen. Verwenden Sie sie als Inspiration oder praktische Ausgangspunkte für Ihre eigenen Designs. Jede Vorlage enthält README-Anweisungen im Repository für adaptive Kartenbeispiele Microsoft Teams, wenn Sie direkt mit JSON arbeiten möchten.

  Note

  Legen Sie die Zielversion fest, um die vom Zielhost unterstützte Schemaversion zu testen.

• Microsoft Teams UI Kit (Figma Community). Das Teams UI Kit enthält zwei dedizierte Adaptive Karten Seiten:

  • Adaptive Karten: Übersicht, bewährte Methoden, Startkarten, Inspiration und Anatomie.
  • Card Design Toolkit: Ein vollständiges Designsystem zum Erstellen von Adaptive Karten in Teams. Modulare, an Designs anpassbare Komponenten für alles – von einfachen Benachrichtigungen bis hin zu komplexen responsiven Benutzererlebnissen – einschließlich aller Elemente, Eingabefelder, Stile, Farben und Typografie.

• Adaptive Karten Website, der autoritative Verweis für alles, was Adaptive Karten umfasst. Wichtige Ziele für Designer sind:

  • Bewährte Methoden für das Entwerfen von Layoutideen, visuellen Hierarchien und überlegungen beim Strukturieren einer Karte.
  • Elementreferenz: Jedes Element und jeder Eingabetyp mit Beispielen und Anleitungen.

Schema- und Hostkompatibilität

Adaptive Karten Schemaunterstützung variiert je nach Host. Entwerfen und testen Sie anhand der von Ihrem Zielhost unterstützten Schemaversion. Karten, die nicht unterstützte Schemaelemente verwenden, können unbemerkt fehlschlagen oder in der Produktion falsch gerendert werden.

Um eine bestimmte Schemaversion zu testen, legen Sie die version Target im Adaptive Karten Designer fest, bevor Sie das Kartenlayout abschließen.

Verwandte Inhalte

• Designer für Adaptive Karten. Browserbasiertes Tool zum Erstellen und Testen von Kartenlayouts.
• Microsoft Teams Beispiele für adaptive Karten. Startvorlagen für Teams und Copilot-Erfahrungen.
• Microsoft Teams UI Kit. Seiten zu Adaptive Karten und zum Toolkit für das Kartendesign.
• Best Practices für den Entwurf von Adaptive Karten. Layoutideen, visuelle Hierarchie und Kartenentwurfsanleitungen.
• Dynamisches Layout. Entwerfen für verschiedene Breakpoints.
• Adaptive Karten in Copilot Studio. Schemaunterstützung, Fragen- und Nachrichtenknotenverwendung und Erstellungsressourcen.