Diseño de Tarjetas adaptables para la aplicación de Microsoft Teams

Artículo
11/18/2021
Tiempo de lectura: 10 minutos

Una tarjeta adaptable contiene un cuerpo de forma libre de elementos de tarjeta y un conjunto opcional de acciones. Tarjetas adaptables son fragmentos de contenido accionables que puede agregar a una conversación a través de un bot o una extensión de mensajería. Con texto, gráficos y botones, estas tarjetas proporcionan una comunicación enriquecida a la audiencia.

El marco de tarjeta adaptable se usa en muchos productos de Microsoft, incluido Teams. Puede enviar tarjetas dentro de mensajes a los usuarios a través de bots o extensiones de mensajería. Los usuarios también pueden realizar acciones en las tarjetas cuando estén presentes.

Ejemplo de información general de una tarjeta adaptable.

Kit de UI de Microsoft Teams

En el Kit de UI de Microsoft Teams encontrará instrucciones de diseño de bot más completas, que incluyen elementos que puede usar y modificar como quiera. El kit de interfaz de usuario también trata temas esenciales como temas, accesibilidad y ajuste de tamaño con capacidad de respuesta.

Obtener el Kit de UI de Microsoft Teams (Figma)

Diseñador de tarjetas adaptables.

También puede empezar a diseñar el Tarjetas adaptables directamente en el explorador.

Pruebe el diseñador de Tarjetas adaptables

Tipos de Tarjetas adaptables

Elemento principal

Nuestra tarjeta de mayor tamaño. Se usa para compartir artículos o escenarios en los que una imagen cuenta la mayor parte de la historia.

Móvil

En el ejemplo se muestra una tarjeta de elemento principal de tarjeta adaptable en dispositivos móviles.

Escritorio

En el ejemplo se muestra una tarjeta de elemento principal de tarjeta adaptable.

Miniatura

Se usa para enviar un mensaje sencillo que requiere acción.

Móvil

Escritorio

Lista

Se usa en escenarios en los que desea que el usuario elija un elemento de una lista, pero los elementos no necesitan mucha explicación.

Móvil

En el ejemplo se muestra una tarjeta de lista de tarjetas adaptables en dispositivos móviles.

Escritorio

En el ejemplo se muestra una tarjeta de lista de tarjeta adaptable.

Digest

Se usa para resúmenes de noticias y publicaciones de redondear. Nota: Se recomienda la tarjeta miniatura para una sola actualización o elemento de noticias.

Móvil

Ejemplo se muestra una tarjeta de resumen de tarjeta adaptable en dispositivos móviles.

Escritorio

ejemplo se muestra una tarjeta de resumen de tarjeta adaptable.

Multimedia

Úselo cuando quiera combinar texto y elementos multimedia, como audio o vídeo.

Móvil

En el ejemplo se muestra una tarjeta multimedia de tarjeta adaptable en dispositivos móviles.

Escritorio

En el ejemplo se muestra una tarjeta multimedia de tarjeta adaptable.

Contactos

Se recomienda cuando se transmite de forma eficaz quién está implicado en una tarea.

Móvil

En el ejemplo se muestra una tarjeta de contactos de tarjeta adaptable en dispositivos móviles.

Escritorio

En el ejemplo se muestra una tarjeta de contactos de tarjeta adaptable.

Solicitar vale

Se usa para obtener entradas rápidas de un usuario para crear automáticamente una tarea o un vale.

Móvil

En el ejemplo se muestra una tarjeta de vale de solicitud de tarjeta adaptable en dispositivos móviles.

Escritorio

En el ejemplo se muestra una tarjeta de vale de solicitud de tarjeta adaptable.

ImageSet

Se usa para enviar varias miniaturas de imagen.

Móvil

En el ejemplo se muestra una tarjeta de conjunto de imágenes de tarjeta adaptable en dispositivos móviles.

Escritorio

En el ejemplo se muestra una tarjeta de conjunto de imágenes de tarjeta adaptable.

ActionSet

Úselo cuando quiera que el usuario seleccione un botón y, a continuación, recopile la entrada adicional del usuario de la misma tarjeta.

Móvil

En el ejemplo se muestra una tarjeta de conjunto de acciones de tarjeta adaptable en dispositivos móviles.

Escritorio

En el ejemplo se muestra una tarjeta de conjunto de acciones de tarjeta adaptable.

ChoiceSet

Se usa para recopilar varias entradas del usuario.

Móvil

En el ejemplo se muestra una tarjeta de conjunto de opciones de tarjeta adaptable en dispositivos móviles.

Escritorio

En el ejemplo se muestra una tarjeta de conjunto de opciones de tarjeta adaptable.

Anatomía

Tarjetas adaptables tienen mucha flexibilidad. Pero, como mínimo, se recomienda incluir los siguientes componentes en cada tarjeta.

Móvil

En el ejemplo se muestra la anatomía de la tarjeta adaptable en dispositivos móviles.

Contador	Descripción
A	Encabezado: haga que los encabezados sean claros y concisos.
N	copia del cuerpo: transmita detalles que son demasiado largos o no son lo suficientemente importantes como para incluirlos en el encabezado.
C	Acciones principales: como procedimiento recomendado, incluya de 1 a 3 acciones principales. Puede tener hasta seis.

Escritorio

En el ejemplo se muestra la anatomía de la tarjeta adaptable.

Contador	Descripción
A	Encabezado: haga que los encabezados sean claros y concisos.
N	copia del cuerpo: transmita detalles que son demasiado largos o no son lo suficientemente importantes como para incluirlos en el encabezado.
C	Acciones principales: como procedimiento recomendado, incluya de 1 a 3 acciones principales. Puede tener hasta seis.

Procedimientos recomendados

Las tarjetas diseñadas para una pantalla estrecha se escalan bien en pantallas más anchas (lo contrario no es cierto). También debe suponer que los usuarios no solo verán las tarjetas en el escritorio.

Diseños de columna

Use ColumnSet para dar formato al contenido de la tarjeta en una tabla o cuadrícula. Hay varias opciones para dar formato al ancho de columna. Estas directrices le ayudan a comprender cuándo usar cada una de ellas.

"width": "auto": cambia el tamaño de cada columna del ColumnSet para ajustarse al contenido de la aplicación que incluya en esa columna.
- Hacer: se usa cuando tiene contenido de ancho variable y no es necesario dar prioridad a una columna específica.
- Hacer: para cada TextBlock, establezca "wrap": true ya que el texto no se ajusta de forma predeterminada.
- No hacer: establezca "width": "auto" para cada contenedor de columnas. Por ejemplo, si tiene una entrada y un botón en paralelo, es posible que el botón se corte en algunas pantallas. En su lugar, establezca auto para la columna con botones y otro contenido que siempre debe estar completamente visible.
"width": "stretch": tamaño de las columnas según el ColumnSetwidth disponible. Cuando varias columnas usan el valor "stretch", comparten igualmente el ancho disponible.
- Hacer: se usa con una columna si todas las demás columnas tienen un ancho estático. Por ejemplo, tiene imágenes en miniatura en una columna de 50 píxeles de ancho.
"width": "<number>": Ajusta el tamaño de las columnas con una proporción del ancho ColumnSet disponible. Por ejemplo, si establece tres columnas con "width": "1", "width": "4" y "width": "5", las columnas ocuparán un 10, 40 y un 50 por ciento del ancho disponible.
"width": "<number>px": Ajusta tamaño de las columnas en un ancho de píxel específico. Este enfoque es útil al crear tablas.
- Hacer: se usa cuando no es necesario cambiar el ancho de lo que se muestra (por ejemplo, números y porcentajes).
- No hacer: supera accidentalmente el ancho de lo que puede mostrar la tarjeta. Recuerde que el ancho de pantalla disponible depende del dispositivo. Teams Mobile tampoco admite el desplazamiento horizontal como el escritorio de Teams.

Ejemplo: saber cuándo se deben ampliar las columnas

Diseño
Código

Hacer: en esta pantalla, hay dos columnas en la parte inferior de la tarjeta. El ancho del componente de entrada se establece en stretch, mientras que el ancho del botón Seleccionar se establece en auto. Esto garantiza que el botón permanece completamente a la vista.

La imagen muestra cómo establecer el ancho de columna en Tarjetas adaptables.

No hacer: en esta pantalla, ambas columnas estánwidthestablecidas en auto. Esto hace que el botón Seleccionar de la derecha se corte ligeramente en comparación con la entrada.

La imagen muestra cómo no establecer el ancho de columna en Tarjetas adaptables.

Este es el código para implementar el ejemplo de diseño que debe seguir.

{
  "$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"
    }
  ]
}

Ejemplo: Uso de menos columnas

Hacer: los diseños tienden a mostrarse mejor en dispositivos móviles con menos columnas.

La imagen muestra la cantidad correcta de columnas en Tarjetas adaptables.

No hacer: el uso de demasiadas columnas puede saturar el contenido de la tarjeta en dispositivos móviles.

La imagen muestra cuántas columnas pueden afectar negativamente al diseño de tarjeta adaptable.

Cuando no sea necesario cambiar el tamaño de algo que se muestra, establezca las columnas en un ancho de píxel específico. En este ejemplo se muestra la columna izquierda con un tamaño de 50 píxeles, mientras que las descripciones situadas junto a las miniaturas amplían la longitud de la tarjeta.

La imagen muestra cómo establecer el ancho de columna en Tarjetas adaptables.

Este es el código para implementar el ejemplo de diseño.

{
  "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

Ya sea que este usando TextBlock, ColumnSet, o Input.ChoiceSet, establezca la wrap propiedad en true para que su texto de tarjeta no quede truncado en los dispositivos móviles.

Ejemplo: Asegurarse de que el texto no se trunca

Diseño
Código

Hacer: en esta pantalla, la tarjeta tiene una propiedad wrap establecida en true. Esto permite que el texto se ajuste a cualquier tamaño de pantalla.

Imagen muestra cómo ajustar texto en Tarjetas adaptables.

No hacer: en esta pantalla, la tarjeta no usa la propiedad wrap, por lo que el texto se corta en una pantalla móvil.

La imagen muestra lo que puede ocurrir si no ajusta texto en Tarjetas adaptables.

Este es el código para implementar el ejemplo de diseño que debe seguir.

{
  "$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"
        }
      ]
    }
  ]
}

Contenedores

Un Container permite agrupar un conjunto de elementos relacionados.

Hacer: use la propiedad style para enfatizar un contenedor.
Hacer: use la propiedad selectAction para asociar una acción a los demás elementos del contenedor.
Hacer: use la propiedad Action.ToggleVisibility para contraer un grupo de elementos.
No hacer: use contenedores por cualquier motivo distinto al mencionado anteriormente.

Imágenes

Siga estas instrucciones al incluir imágenes en las tarjetas.

Hacer: diseña imágenes para pantallas con valores altos de PPP para evitar la pixelación. Es mejor mostrar una imagen de 100x100 píxeles a 50x50 píxeles que al revés.
Hacer: si necesita controlar el tamaño exacto de las imágenes, use las propiedades width y height.
No hacer: incluir relleno con las imágenes. Esto suele introducir problemas de espaciado y diseño no deseados.
Con respecto al color de fondo:
- Hacer: use fondos transparentes para que las imágenes se adapten a cualquier tema de Teams.
- No hacer: incluye un color de fondo fijo a menos que un color específico sea visible para los usuarios.
- No hacer: Agrega un color de fondo a un TextBlock que afecta a la legibilidad. Por ejemplo, si el fondo es oscuro, use un color de texto más claro y viceversa.

Acciones

Procedimiento recomendado para incluir solo un pequeño conjunto de acciones en una tarjeta adaptable.

Hacer: Usar hasta seis acciones principales

Aunque Tarjetas adaptables puede admitir seis acciones principales, la mayoría de las tarjetas no lo necesitan. Las acciones deben ser claras, concisas y directas. Menos es más.

Procedimiento recomendado para no sobrecargar a los usuarios con demasiadas acciones en una tarjeta adaptable.

No: Usar más de seis acciones principales

Tarjetas adaptables debe presentar contenido rápido y accionable. Demasiadas acciones pueden sobrecargar a un usuario.

Frecuencia

Procedimiento recomendado sobre la frecuencia de la tarjeta adaptable.

Do: Sea conciso

Es fácil enviar varias tarjetas a una conversación, pero una vez que las tarjetas se desplazan fuera de la vista, resultan menos útiles. Intente limitarse a lo esencial. Esto es especialmente cierto en un canal en el que los usuarios tienen menos tolerancia a lo que perciben como "ruido".

Diseño de Tarjetas adaptables para la aplicación de Microsoft Teams

Valore su experiencia

Kit de UI de Microsoft Teams

Diseñador de tarjetas adaptables.

Tipos de Tarjetas adaptables

Elemento principal

Móvil

Escritorio

Miniatura

Móvil

Escritorio

Lista

Móvil

Escritorio

Digest

Móvil

Escritorio

Multimedia

Móvil

Escritorio

Contactos

Móvil

Escritorio

Solicitar vale

Móvil

Escritorio

ImageSet

Móvil

Escritorio

ActionSet

Móvil

Escritorio

ChoiceSet

Móvil

Escritorio

Anatomía

Móvil

Escritorio

Procedimientos recomendados

Diseños de columna

Ejemplo: saber cuándo se deben ampliar las columnas

Ejemplo: Uso de menos columnas

Ejemplo: el ancho fijo tiene su lugar

Text

Ejemplo: Asegurarse de que el texto no se trunca

Contenedores

Imágenes

Acciones

Hacer: Usar hasta seis acciones principales

No: Usar más de seis acciones principales

Frecuencia

Do: Sea conciso

Consulte también