Conception de Cartes adaptatives pour votre application Microsoft Teams

Article
11/07/2024

Une carte adaptative contient un corps libre d’éléments de carte et un ensemble facultatif d’actions. Les cartes adaptatives sont des extraits de contenu exploitables que vous pouvez ajouter à une conversation via un bot ou une extension de message. À l’aide de texte, de graphiques et de boutons, ces cartes fournissent une communication enrichie à votre public.

L’infrastructure de carte adaptative est utilisée dans de nombreux produits Microsoft, y compris Teams. Vous pouvez envoyer des cartes dans des messages aux utilisateurs via des bots ou des extensions de message. Les utilisateurs peuvent également effectuer des actions sur les cartes lorsqu’ils sont présents.

Kit d’interface utilisateur de Microsoft Teams

Vous trouverez des instructions de conception plus complètes pour Cartes adaptatives dans Teams, y compris les éléments que vous pouvez récupérer et modifier en fonction des besoins, dans le Kit d’interface utilisateur Microsoft Teams. Le kit d’interface utilisateur couvre également des sujets essentiels tels que le thème, l’accessibilité et le dimensionnement réactif.

Obtenir le Kit d’interface utilisateur de Microsoft Teams (Figma)

Concepteur de cartes adaptatives

Vous pouvez également commencer à concevoir vos Cartes adaptatives directement dans le navigateur.

Essayer le concepteur Cartes adaptatives

Collection de démarrage de carte adaptative

La collection de démarrage de carte adaptative est un ensemble organisé de modèles de cartes adaptatives pour Teams. Ces modèles servent de point de départ pratique pour vous inspirer à concevoir votre propre carte adaptative. Les modèles vous aident à comprendre les principes de conception de Microsoft, offrent des insights sur la structure correcte et vous aident à explorer les modèles d’interaction dans les cartes adaptatives. Vous pouvez utiliser les modèles tels quels ou les personnaliser en fonction des besoins de votre application.

Modèles de carte adaptative

Types de Cartes adaptatives

Bannière

Notre carte la plus grande. À utiliser pour partager des articles ou des scénarios dans lesquels une image indique la majeure partie de l’histoire.

Mobile

Exemple montrant une carte de bannière de Carte adaptative sur un mobile.

Ordinateur de bureau

Exemple montrant une carte de bannière de Carte adaptative.

Miniature

Permet d’envoyer un message actionnable simple.

Mobile

Ordinateur de bureau

Répertorier

À utiliser dans les scénarios où vous souhaitez que l’utilisateur choisisse un élément dans une liste et où les éléments n’ont pas besoin de beaucoup d’explications.

Mobile

Exemple montrant une carte de liste de Carte adaptative sur un mobile.

Ordinateur de bureau

Digérer

À utiliser pour les résumés d'actualités et les articles de synthèse. Remarque : nous vous recommandons la carte miniature pour une simple mise à jour ou un élément d’actualités.

Mobile

L’exemple montre une carte de condensé de Carte adaptative sur mobile.

Ordinateur de bureau

Médias

À utiliser lorsque vous souhaitez combiner du texte et des médias, tels que l'audio ou la vidéo.

Mobile

Exemple montrant une carte média de Carte adaptative sur mobile.

Ordinateur de bureau

Personnes

Utilisez lorsque vous souhaitez communiquer efficacement les personnes impliquées dans une tâche.

Mobile

Exemple montrant une carte de contacts de Carte adaptative sur mobile.

Ordinateur de bureau

Ticket de demande

Permet d’obtenir des entrées rapides d’un utilisateur pour créer automatiquement une tâche ou un ticket.

Mobile

Exemple montrant une carte de ticket de demande de Carte adaptative sur un mobile.

Ordinateur de bureau

ImageSet

Permet d’envoyer plusieurs miniatures d’image.

Mobile

Exemple montrant une carte de jeu d’image de Carte adaptative sur un mobile.

Ordinateur de bureau

Exemple montrant une carte de jeu d’image de Carte adaptative.

Exemple pour ActionSet

Utilisez cette option lorsque vous souhaitez que l’utilisateur sélectionne un bouton, puis recueille d'autres entrées utilisateur sur la même carte.

Mobile

Exemple montrant une carte de jeu d’action de Carte adaptative sur un appareil mobile.

Ordinateur de bureau

ChoiceSet

Permet de collecter plusieurs entrées de l’utilisateur.

Mobile

Exemple montrant une carte d’ensemble de choix de Carte adaptative sur un appareil mobile.

Ordinateur de bureau

Anatomie

Cartes adaptatives ont de nombreuses flexibilités. Mais au minimum, nous vous suggérons vivement d’inclure les composants suivants dans chaque carte.

Mobile

Exemple illustrant l'anatomie de la Carte adaptative sur un appareil mobile.

Compteur	Description
A	En-tête : rendez vos en-têtes clairs et concis.
B	Copie du corps : transmettez des détails trop longs ou pas assez importants pour être inclus dans l’en-tête.
C	Actions principales : il est recommandé d’inclure entre 1 et 3 actions principales. Un groupe peut comporter jusqu’à six.

Ordinateur de bureau

Exemple illustrant l'anatomie de la Carte adaptative.

Compteur	Description
A	En-tête : rendez vos en-têtes clairs et concis.
B	Copie du corps : transmettez des détails trop longs ou pas assez importants pour être inclus dans l’en-tête.
C	Actions principales : il est recommandé d’inclure entre 1 et 3 actions principales. Un groupe peut comporter jusqu’à six.

Meilleures pratiques

Cartes conçues pour une échelle d’écran étroite sur des écrans plus larges (l’inverse n’est pas vrai). Vous devez également supposer que les utilisateurs n’afficheront pas uniquement vos cartes sur le Bureau.

Mises en page des colonnes

Utilisez ColumnSet pour mettre en forme le contenu de votre carte dans une table ou une grille. Plusieurs options s’offrent à vous pour la mise en forme de la largeur des colonnes. Ces recommandations vous aident à comprendre quand utiliser chacune d’elles.

"width": "auto": dimensionne chaque colonne de l’application pour qu’elle corresponde au contenu de l’application ColumnSet que vous incluez dans cette colonne.
- Àfaire : utilisez lorsque vous avez un contenu de largeur variable et n’avez pas besoin de hiérarchiser une colonne spécifique.
- À faire : Pour chaque TextBlock , définir "wrap": true puisque le texte ne s’enveloppe pas par défaut.
- À ne pas faire: définir "width": "auto" pour chaque conteneur de colonnes. Par exemple, si vous avez une entrée et un bouton côte à côte, le bouton peut être coupé sur certains écrans. Définissez plutôt la colonne avec des boutons et d’autres contenus qui auto doivent toujours être complètement visibles.
"width": "stretch": dimensionne les colonnes en fonction de la ColumnSet largeur disponible. Lorsque plusieurs colonnes "stretch" utilisent la valeur, elles partagent également la largeur disponible.
- À faire : utilisez avec une colonne si toutes vos autres colonnes ont une largeur statique. Par exemple, vous avez des images miniatures dans une colonne qui font toutes 50 pixels de large.
"width": "<number>": dimensionne les colonnes à l’aide d’une proportion de la ColumnSet largeur disponible. Par exemple, si vous définissez trois colonnes avec , et , les colonnes "width": "1", "width": "4" et "width": "5", prenons jusqu’à 10, 40 et 50 pour cent de la largeur disponible.
"width": "<number>px": dimensionne les colonnes à une largeur de pixel spécifique. Cette approche est utile lors de la création de tableaux.
- À faire : utilisez lorsque la largeur de ce que vous affichez n’a pas besoin de changer (par exemple, les nombres et les pourcentages).
- Ne pas : dépasser accidentellement la largeur de ce que la carte peut afficher. N’oubliez pas que la largeur d’écran disponible dépend de l’appareil. Teams pour téléphone ne prend pas non plus en charge le défilement horizontal comme Teams bureau.

Exemple : savoir quand étirer les colonnes

Concevoir
Code

À faire : dans cet écran, il y a deux colonnes en bas de la carte. La largeur du composant d’entrée est définie sur stretch, tandis que la largeur du bouton Sélectionner est définie sur auto . Cela garantit que le bouton reste entièrement en vue.

La capture d’écran montre comment définir la largeur de colonne des Cartes adaptatives.

À ne pas faire: dans cet écran, les deux colonnes width ont été définies sur auto . Ainsi, le bouton Sélectionner à droite est légèrement coupé par rapport à l’entrée.

La capture d’écran montre comment ne pas définir la largeur de colonne dans les Cartes adaptatives.

Voici le code pour l’implémentation de l’exemple de conception que vous devez suivre.

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "TextBlock",
      "text": "I wasn't able to identify the type of expense. Select from the list:",
      "wrap": true,
      "id": "typePrompt",
      "spacing": "Medium",
      "size": "Medium"
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Phone Bill",
          "data": {
            "msteams": {
              "type": "messageBack",
              "displayText": "Phone Bill",
              "action": "Phone Bill"
            },
            "action": "Phone Bill"
          }
        },
        {
          "type": "Action.Submit",
          "title": "Taxi and Other Transportation",
          "data": {
            "msteams": {
              "type": "messageBack",
              "displayText": "Taxi and Other Transportation",
              "action": "Taxi and Other Transportation"
            },
            "action": "Taxi and Other Transportation"
          }
        },
        {
          "type": "Action.Submit",
          "title": "Entertainment_misc",
          "data": {
            "msteams": {
              "type": "messageBack",
              "displayText": "Entertainment_misc",
              "action": "Entertainment_misc"
            },
            "action": "Entertainment_misc"
          }
        },
        {
          "type": "Action.Submit",
          "title": "Car Rental",
          "data": {
            "msteams": {
              "type": "messageBack",
              "displayText": "Car Rental",
              "action": "Car Rental"
            },
            "action": "Car Rental"
          }
        },
        {
          "type": "Action.Submit",
          "title": "Airfare",
          "data": {
            "msteams": {
              "type": "messageBack",
              "displayText": "Airfare",
              "action": "Airfare"
            },
            "action": "Airfare"
          }
        }
      ],
      "spacing": "Medium"
    },
    {
      "type": "TextBlock",
      "text": "     ",
      "wrap": true
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "Input.ChoiceSet",
              "choices": [
                {
                  "title": "Meals",
                  "value": "Meals"
                },
                {
                  "title": "Parking/Tolls",
                  "value": "Parking/Tolls"
                },
                {
                  "title": "Accomodation",
                  "value": "Accomodation"
                },
                {
                  "title": "Fuel-Gas/Petrol/Diesel",
                  "value": "Fuel-Gas/Petrol/Diesel"
                },
                {
                  "title": "Hotel",
                  "value": "Hotel"
                },
                {
                  "title": "Meals - Employees Only",
                  "value": "Meals - Employees Only"
                },
                {
                  "title": "Accomodations",
                  "value": "Accomodations"
                },
                {
                  "title": "Misc.Expenses",
                  "value": "Misc.Expenses"
                },
                {
                  "title": "Please Categorize",
                  "value": "Please Categorize"
                }
              ],
              "placeholder": "All",
              "id": "expenseTypes",
              "value": "Meals - Employees Only"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "ActionSet",
              "actions": [
                {
                  "type": "Action.Submit",
                  "title": "Select",
                  "data": {
                    "msteams": {
                      "type": "messageBack",
                      "displayText": "Select",
                      "action": "applyType"
                    },
                    "action": "applyType"
                  }
                }
              ]
            }
          ]
        }
      ],
      "spacing": "ExtraLarge"
    }
  ]
}

Exemple : utilisation de moins de colonnes

À faire : les dispositions ont tendance à s’afficher mieux sur les appareils mobiles avec moins de colonnes.

La capture d’écran montre le bon nombre de colonnes dans les Cartes adaptatives.

À ne pas faire : l’utilisation d’un trop grand nombre de colonnes peut encombrer le contenu de votre carte sur un appareil mobile.

La capture d’écran montre comment le nombre de colonnes peut affecter négativement la disposition de la carte adaptative.

Lorsque la taille d’un affichage n’a pas besoin de changer, définissez les colonnes sur une largeur de pixel spécifique. Cet exemple montre la colonne gauche dimensionnée à 50 pixels, tandis que les descriptions situées à côté des miniatures s'étendent sur toute la longueur de la carte.

La capture d’écran montre comment définir la largeur des colonnes dans les cartes adaptatives.

Voici le code pour implémenter l’exemple de conception.

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Pick up where you left off?",
      "weight": "bolder"
    },
    {
      "type": "ColumnSet",
      "spacing": "medium",
      "columns": [
        {
          "type": "Column",
          "width": "50px",
          "items": [
            {
              "type": "Image",
              "url": "https://unsplash.it/80?image=1083",
              "size": "medium"
            }
          ]
        },
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "TextBlock",
              "text": "Silver Star Mountain Range"
            },
            {
              "type": "TextBlock",
              "text": "Maps",
              "isSubtle": true,
              "spacing": "none"
            }
          ]
        }
      ],
      "selectAction": {
        "type": "Action.OpenUrl",
        "url": "https://www.msn.com"
      }
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "50px",
          "items": [
            {
              "type": "Image",
              "url": "https://unsplash.it/80?image=1082",
              "size": "medium"
            }
          ]
        },
        {
          "type": "Column",
          "width": "stretch",
          "style": "emphasis",
          "items": [
            {
              "type": "TextBlock",
              "text": "Kitchen Remodel for Homes"
            },
            {
              "type": "TextBlock",
              "text": "With EMPHASIS",
              "isSubtle": true,
              "spacing": "none"
            }
          ]
        }
      ],
      "selectAction": {
        "type": "Action.OpenUrl",
        "url": "https://www.AdaptiveCards.io"
      }
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "50px",
          "items": [
            {
              "type": "Image",
              "url": "https://unsplash.it/80?image=1080",
              "size": "medium"
            }
          ]
        },
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "TextBlock",
              "text": "The Witcher: A Series"
            },
            {
              "type": "TextBlock",
              "text": "Netflix",
              "isSubtle": true,
              "spacing": "none"
            }
          ]
        }
      ],
      "selectAction": {
        "type": "Action.OpenUrl",
        "url": "https://www.outlook.com"
      }
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "Resume all",
      "url": "ms-cortana:resume-all"
    },
    {
      "type": "Action.OpenUrl",
      "title": "More activities",
      "url": "ms-cortana:more-activities"
    }
  ]
}

Text

Que vous utilisiez TextBlock, ColumnSet, ou Input.ChoiceSet, définissezwrap la propriététrue de sorte que le texte de votre carte ne soit pas tronqué sur mobile.

Exemple : s’assurer que le texte ne tronque pas

Concevoir
Code

À faire : dans cet écran, la carte a une wrap propriété définie sur true. Cela permet au texte de s’ajuster à n’importe quelle taille d’écran.

La capture d’écran montre comment encapsuler du texte dans les Cartes adaptatives.

N’utilisez pas: dans cet écran, la carte n’utilise pas la propriété, de sorte que le texte se wrap coupe sur un écran mobile.

La capture d’écran montre ce qui peut se produire si vous n’encapsulez pas le texte dans les Cartes adaptatives.

Voici le code pour l’implémentation de l’exemple de conception que vous devez suivre.

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "What cuisine do you want?"
    },
    {
      "type": "Input.ChoiceSet",
      "id": "myColor",
      "style": "compact",
      "isMultiSelect": false,
      "value": "1",
      "choices": [
        {
          "title": "Chineese",
          "value": "1"
        },
        {
          "title": "Indian",
          "value": "2"
        },
        {
          "title": "Italian",
          "value": "3"
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Select the dishes that you like?"
    },
    {
      "type": "Input.ChoiceSet",
      "id": "myColor2",
      "style": "expanded",
      "wrap" : true,
      "isMultiSelect": false,
      "value": "1",
      "choices": [
        {
          "title": "Cauliflower with potatoes sautéed with garam masala",
          "wrap" : true,
          "value": "1"
        },
        {
          "title": "Patties of potato mixed with some vegetables fried",
          "wrap" : true,
          "value": "2"
        },
        {
          "title": "Green capsicum with potatoes sautéed with cumin seeds",
          "wrap" : true,
          "value": "3"
        }
      ]
    }
  ]
}

Containers

A Container vous permet de grouper un ensemble d’éléments associés.

À faire : utilisez la style propriété pour mettre en avant un conteneur.
À faire : utilisez selectAction la propriété pour associer une action aux autres éléments du conteneur.
À faire : utilisez la Action.ToggleVisibility propriété pour rendre un groupe d’éléments réductible.
À ne pas faire : utilisez des conteneurs pour une raison autre que celle mentionnée précédemment.

Des images

Suivez ces instructions lorsque vous insérez des images dans vos cartes.

À faire : concevoir des images pour les écrans haute résolution afin d’éviter la pixelisation. Il est préférable d’afficher une image de 100 x 100 pixels à 50 x 50 pixels que l’inverse.
À faire : si vous devez contrôler la taille exacte de vos images, utilisez les width propriétés et les height propriétés.
À ne pas faire : incluez le remplissage avec vos images. Cela introduit généralement des problèmes d’espacement et de disposition indésirables.
En ce qui concerne la couleur d’arrière-plan :
- À faire : utilisez des arrière-plans transparents afin que vos images s’adaptent à n’importe Teams thème.
- À ne pas faire : inclure une couleur d’arrière-plan fixe, sauf si une couleur spécifique doit être visible pour vos utilisateurs.
- À ne pas faire : ajoutez une couleur d’arrière-plan à une couleur TextBlock qui nuit à la lisibilité. Par exemple, si votre arrière-plan est sombre, utilisez une couleur de texte plus claire et inversement.

Actions

La capture d’écran montre la meilleure pratique pour inclure uniquement un petit ensemble d’actions sur une carte adaptative.

À faire : utiliser jusqu’à six actions principales

Bien que Cartes adaptatives puisse prendre en charge six actions principales, la plupart des cartes n’en ont pas besoin. Les actions doivent être claires, concises et directes. Moins, c’est plus.

La capture d’écran montre la meilleure pratique pour ne pas surcharger les utilisateurs avec un trop grand nombre d’actions sur une carte adaptative.

À ne pas faire : utiliser plus de six actions principales

Les cartes adaptatives doivent présenter un contenu rapide et exploitable. Un trop grand nombre d’actions peut surcharger un utilisateur.

Fréquence

La capture d’écran montre les meilleures pratiques relatives à la fréquence des cartes adaptatives.

À faire : être concis

Il est facile d’envoyer plusieurs cartes dans une conversation, mais une fois que les cartes défilent hors de l’affichage, elles deviennent moins utiles. Essayez de vous limiter à l’essentiel. Cela est particulièrement vrai dans un canal où les utilisateurs ont moins de tolérance pour ce qu’ils considèrent comme du « bruit ».

Partager via

Conception de Cartes adaptatives pour votre application Microsoft Teams

Kit d’interface utilisateur de Microsoft Teams

Concepteur de cartes adaptatives

Collection de démarrage de carte adaptative

Types de Cartes adaptatives

Bannière

Mobile

Ordinateur de bureau

Miniature

Mobile

Ordinateur de bureau

Répertorier

Mobile

Ordinateur de bureau

Digérer

Mobile

Ordinateur de bureau

Médias

Mobile

Ordinateur de bureau

Personnes

Mobile

Ordinateur de bureau

Ticket de demande

Mobile

Ordinateur de bureau

ImageSet

Mobile

Ordinateur de bureau

Exemple pour ActionSet

Mobile

Ordinateur de bureau

ChoiceSet

Mobile

Ordinateur de bureau

Anatomie

Mobile

Ordinateur de bureau

Meilleures pratiques

Mises en page des colonnes

Exemple : savoir quand étirer les colonnes

Exemple : utilisation de moins de colonnes

Exemple : la largeur fixe a sa place

Text

Exemple : s’assurer que le texte ne tronque pas

Containers

Des images

Actions

À faire : utiliser jusqu’à six actions principales

À ne pas faire : utiliser plus de six actions principales

Fréquence

À faire : être concis

Voir aussi

Ressources supplémentaires