Entwerfen adaptiver Karten für Ihre Microsoft Teams-App

Eine adaptive Karte enthält einen Freihandform-Textkörper mit Kartenelementen und optionalen Aktionen. Adaptive Karten sind Aktionen erfordernde Inhaltsausschnitte, die Sie einer Unterhaltung über einen Bot oder eine Messagingerweiterung hinzufügen können. Mithilfe von Text, Grafiken und Schaltflächen ermöglichen diese Karten eine umfassende Kommunikation mit Ihrer Zielgruppe.

Das Framework für adaptive Karten wird in vielen Microsoft-Produkten verwendet, einschließlich Microsoft Teams. Sie können Karten in Nachrichten über Bots oder Messagingerweiterungen an Benutzer senden. Benutzer können auch Aktionen auf Karten durchführen, wenn diese bereitgestellt werden.

Übersichtsbeispiel für eine adaptive Karte.

Microsoft Teams-UI-Kit

Umfassendere Entwurfsrichtlinien für adaptive Karten, einschließlich Elemente, die Sie nach Bedarf abrufen und ändern können, finden Sie im Microsoft Teams-UI-Kit. Das UI-Kit deckt auch wesentliche Themen wie Designs, Barrierefreiheit und dynamische Größenanpassung ab.

Designer für adaptive Karten

Sie können ihre adaptiven Karten auch direkt im Browser entwerfen.

Typen von adaptiven Karten

Hero

Unsere größte Karte. Wird für die Freigabe von Artikeln oder Szenarien verwendet, in denen ein Bild den größten Teil der Geschichte erzählt.

Mobil

Beispiel einer adaptiven Hero-Karte auf einem Mobilgerät.

Desktop

Beispiel einer adaptiven Hero-Karte.

Miniaturansicht

Wird zum Senden einer einfachen, Aktionen erfordernden Nachricht verwendet.

Mobil

Beispiel einer adaptiven Miniaturansichtskarte auf einem Mobilgerät.

Desktop

Beispiel einer adaptiven Miniaturansichtskarte.

Liste

Wird in Szenarien verwendet, in denen der Benutzer ein Element aus einer Liste auswählen soll, die Elemente jedoch nicht viel Erklärung benötigen.

Mobil

Beispiel einer adaptiven Listenkarte auf einem Mobilgerät.

Desktop

Beispiel einer adaptiven Listenkarte.

Digest

Wird für News-Digests und Round-Up-Beiträge verwendet. Hinweis: Wir empfehlen ein einzelnes Update oder Newselement der Miniaturansichtskarte.

Mobil

Beispiel einer adaptiven Digestkarte auf einem Mobilgerät.

Desktop

Beispiel einer adaptiven Digestkarte.

Medien

Wird verwendet, wenn Sie Text und Medien kombinieren möchten, z. B. Audio oder Video.

Mobil

Beispiel einer adaptiven Medienkarte auf einem Mobilgerät.

Desktop

Beispiel einer adaptiven Medienkarte.

Personen

Am besten geeignet, wenn Sie effizient vermitteln möchten, wer an einer Aufgabe beteiligt ist.

Mobil

Beispiel einer adaptiven Personenkarte auf einem Mobilgerät.

Desktop

Beispiel einer adaptiven Personenkarte.

Anforderungsticket

Wird verwendet, um von einem Benutzer schnelle Eingaben zum automatischen Erstellen einer Aufgabe oder eines Tickets zu erhalten.

Mobil

Beispiel einer adaptiven Anforderungsticketkarte auf einem Mobilgerät.

Desktop

Beispiel einer adaptiven Anforderungsticketkarte.

ImageSet

Wird verwendet, um mehrere Miniaturansichten von Bildern zu senden.

Mobil

Beispiel einer adaptiven Bildergruppenkarte auf einem Mobilgerät.

Desktop

Beispiel einer adaptiven Bildergruppenkarte.

ActionSet

Wird verwendet, wenn der Benutzer eine Schaltfläche auswählen soll, und Sie dann zusätzliche Benutzereingaben über dieselbe Karte erfassen möchten.

Mobil

Beispiel einer adaptiven Aktionsgruppenkarte auf einem Mobilgerät.

Desktop

Beispiel einer adaptiven Aktionsgruppenkarte.

ChoiceSet

Wird verwendet, um mehrere Eingaben vom Benutzer zu erfassen.

Mobil

Beispiel einer adaptiven Auswahlgruppenkarte auf einem Mobilgerät.

Desktop

Beispiel einer adaptiven Auswahlgruppenkarte.

Anatomie

Adaptive Karten sind sehr flexibel. Es wird jedoch dringend empfohlen, mindestens die folgenden Komponenten auf jeder Karte zu verwenden.

Mobil

Beispiel der Anatomie adaptiver Karten auf einem Mobilgerät.

Leistungsindikator Beschreibung
A Kopfzeile: Sorgen Sie dafür, dass Ihre Kopfzeilen klar und präzise sind.
B Textkörper: Übermitteln Sie hier Details, die entweder zu lang oder nicht wichtig genug sind, um sie in die Kopfzeile aufzunehmen.
C Primäre Aktionen: Schließen Sie als bewährte Methode 1 bis 3 primäre Aktionen ein. Es können bis zu sechs eingefügt werden.

Desktop

Beispiel der Anatomie adaptiver Karten.

Leistungsindikator Beschreibung
A Kopfzeile: Sorgen Sie dafür, dass Ihre Kopfzeilen klar und präzise sind.
B Textkörper: Übermitteln Sie hier Details, die entweder zu lang oder nicht wichtig genug sind, um sie in die Kopfzeile aufzunehmen.
C Primäre Aktionen: Schließen Sie als bewährte Methode 1 bis 3 primäre Aktionen ein. Es können bis zu sechs eingefügt werden.

Bewährte Methoden

Karten, die für eine schmale Bildschirmskalierung auf breiteren Bildschirmen konzipiert sind (das Gegenteil ist nicht der Fall). Sie sollten auch davon ausgehen, dass Benutzer Ihre Karten nicht nur auf dem Desktop anzeigen.

Spaltenlayouts

Dient ColumnSet zum Formatieren des Karteninhalts in eine Tabelle oder ein Raster. Es gibt mehrere Optionen zum Formatieren der Spaltenbreite. Diese Richtlinien helfen Ihnen zu verstehen, wann sie jeweils verwendet werden.

  • "width": "auto": Passt die Größe jeder Spalte in der ColumnSet Anpassung an den App-Inhalt an, den Sie in diese Spalte einschließen.
    • Do: Verwenden Sie dies, wenn Sie Inhalte mit unterschiedlicher Breite haben und eine bestimmte Spalte nicht priorisieren müssen.
    • Do: Für jede TextBlock, legen Sie "wrap": true fest, da Text standardmäßig nicht umbrochen wird.
    • Don‘t: Legen Sie "width": "auto" für jeden Spaltencontainer fest. Wenn Sie beispielsweise eine Eingabe und eine Schaltfläche nebeneinander haben, wird die Schaltfläche möglicherweise auf einigen Bildschirmen abgeschnitten. Legen Sie stattdessen auto für die Spalte mit Schaltflächen und anderen Inhalten fest, die immer vollständig sichtbar sein müssen.
  • "width": "stretch": Ändert die Spaltengröße basierend auf der verfügbaren ColumnSet-Breite. Wenn mehrere Spalten den "stretch"-Wert verwenden, teilen sie sich gleichermaßen die verfügbare Breite.
    • Do: Verwenden Sie eine Spalte, wenn alle anderen Spalten eine statische Breite haben. Beispielsweise haben Sie Miniaturbilder in einer Spalte, die alle 50 Pixel breit sind.
  • "width": "<number>": Ändert die Größe von Spalten mit einem Anteil der verfügbaren ColumnSet-Breite. Wenn Sie beispielsweise drei Spalten mit "width": "1", "width": "4" und "width": "5"festlegen, nehmen die Spalten 10, 40 und 50 Prozent der verfügbaren Breite in Anspruch.
  • "width": "<number>px": Passt die Spaltengröße auf eine bestimmte Pixelbreite an. Dieser Ansatz ist beim Erstellen von Tabellen nützlich.
    • Do: Verwenden Sie diese Einstellung, wenn sich die Breite der Anzeige nicht ändern muss (z. B. Zahlen und Prozentsätze).
    • Don‘t: Versehentlich die Breite der Anzeige der Karte überschreiten. Beachten Sie, dass die verfügbare Bildschirmbreite vom Gerät abhängt. Teams Mobile unterstützt auch kein horizontales Scrollen wie Teams Desktop.

Beispiel: Wissen, wann Spalten gestreckt werden sollen

Do: Auf diesem Bildschirm befinden sich am unteren Rand der Karte zwei Spalten. Die Breite der Eingabekomponente wird auf stretch festgelegt, während die die Breite der Schaltfläche Auswählen auf auto festgelegt ist. Dadurch wird sichergestellt, dass die Schaltfläche vollständig angezeigt wird.

Abbildung zeigt, wie die Spaltenbreite in adaptiven Karten festgelegt wird.

Don‘t: Auf diesem Bildschirm haben beide Spalten width auf auto festgelegt. Dadurch wird die Schaltfläche Auswählen auf der rechten Seite im Vergleich zur Eingabe leicht abgeschnitten.

Abbildung zeigt, wie die Spaltenbreite in adaptiven Karten nicht festgelegt wird.

Beispiel: Verwenden weniger Spalten

Do: Layouts werden auf Mobilgeräten mit weniger Spalten in der Regel besser angezeigt.

Abbildung zeigt die richtige Spaltenmenge in adaptiven Karten.

Don't: Die Verwendung zu vieler Spalten kann Ihre Karteninhalte auf Mobilgeräten überladen.

Abbildung zeigt, wie sich zu viele Spalten negativ auf das Layout der adaptiven Karten auswirken können.

Beispiel: Feste Breite hat ihre Position

Wenn sich die Größe von etwas, das Sie anzeigen, nicht ändern muss, legen Sie die Spalten auf eine bestimmte Pixelbreite fest. Dieses Beispiel zeigt die linke Spalte mit einer Größe von 50 Pixeln, während die Beschreibungen neben den Miniaturbildern die Länge der Karte strecken

Abbildung zeigt, wie die Spaltenbreite in adaptiven Karten festgelegt wird.

Text

Unabhängig davon, ob Sie TextBlock, ColumnSet oder Input.ChoiceSet verwenden, legen Sie die wrap-Eigenschaft auf true fest, damit Ihr Kartentext auf Mobilgeräten nicht abgeschnitten wird.

Beispiel: Sicherstellen, dass Text nicht abgeschnitten wird

Do: Auf diesem Bildschirm ist auf der Karte eine wrap-Eigenschaft auf true festgelegt. Dadurch kann der Text an eine beliebige Bildschirmgröße angepasst werden.

Abbildung zeigt, wie Text in adaptiven Karten umbrochen wird.

Don‘t: Auf diesem Bildschirm verwendet die Karte nicht die wrap-Eigenschaft, sodass der Text auf dem Bildschirm eines Mobilgeräts abgeschnitten wird.

Abbildung zeigt, was passieren kann, wenn Sie Text nicht in adaptiven Karten umbrechen.

Container

Mit einem Container können Sie eine Reihe verwandter Elemente gruppieren.

  • Do: Verwenden Sie die style-Eigenschaft, um einen Container hervorzuheben.
  • Do: Verwenden Sie die selectAction-Eigenschaft, um eine Aktion den anderen Elementen im Container zuzuordnen.
  • Do: Verwenden Sie die Action.ToggleVisibility-Eigenschaft, um eine Gruppe von Elementen reduzierbar zu machen.
  • Don‘t: Verwenden Sie Container aus einem anderen als dem zuvor erwähnten Grund.

Bilder

Befolgen Sie diese Richtlinien, wenn Sie Bilder in Ihre Karten einschließen.

  • Do: Entwerfen Sie Bilder für Bildschirme mit hohem DPI-Wert, um Pixel zu vermeiden. Es ist besser, ein Bild mit 100x100 Pixeln bei 50x50 Pixeln anzuzeigen als umgekehrt.
  • Do: Wenn Sie die genaue Größe Ihrer Bilder steuern müssen, verwenden Sie die Eigenschaften "width" und "height".
  • Don‘t: Fügen Sie die Auffüllung in Ihre Bilder ein. Dies führt in der Regel zu unerwünschten Abständen und Layoutproblemen.
  • In Bezug auf die Hintergrundfarbe:
    • Do: Verwenden Sie transparente Hintergründe, damit sich Ihre Bilder an jedes Teams-Design anpassen.
    • Don‘t: Fügen Sie eine feste Hintergrundfarbe ein, es sei denn, eine bestimmte Farbe muss für Ihre Benutzer sichtbar sein.
    • Don‘t: Fügen Sie einer "TextBlock" eine Hintergrundfarbe hinzu, die die Lesbarkeit beeinträchtigt. Wenn Ihr Hintergrund z. B. dunkel ist, verwenden Sie eine hellere Textfarbe und umgekehrt.

Aktionen

Bewährte Methode: Eine adaptive Karte sollte nur eine kleine Gruppe von Aktionen enthalten.

Was Sie tun sollten: bis zu sechs primäre Aktionen verwenden

Adaptive Karten unterstützen zwar bis zu sechs primäre Aktionen, auf den meisten Karten werden diese jedoch nicht benötigt. Aktionen sollten klar, präzise und unkompliziert sein. Weniger ist mehr.

Bewährte Methode: Benutzer sollten nicht mit zu vielen Aktionen auf einer adaptiven Karte überfordert werden.

Was Sie nicht tun sollten: mehr als sechs primäre Aktionen verwenden

Adaptive Karten sollten schnelle, handlungsrelevante Inhalte präsentieren. Zu viele Aktionen können einen Benutzer überfordern.

Häufigkeit

Bewährte Methode bezüglich der Häufigkeit adaptiver Karten.

Was Sie tun sollten: Präzise sein

Es ist einfach, mehrere Karten in eine Unterhaltung zu senden, aber sobald Karten aus der Ansicht scrollen, werden sie weniger nützlich. Versuchen Sie, sich auf das Wesentliche zu beschränken. Dies gilt insbesondere in einem Kanal, in dem Benutzer weniger Toleranz für das haben, was sie als „Rauschen“ wahrnehmen.

Siehe auch