Diseño de tarjetas adaptables para su aplicación de Microsoft Teams

Una tarjeta adaptable contiene un cuerpo de forma libre de elementos de tarjeta y un conjunto opcional de acciones. Las tarjetas adaptables son fragmentos de código accionables que puede Agregar a una conversación a través de un bot o una extensión de mensajería. Mediante el uso de 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, incluidos Teams. Puede enviar tarjetas dentro de los mensajes a los usuarios a través de bots o extensiones de mensajería. Los usuarios pueden realizar acciones en las tarjetas cuando están presentes.

Ejemplo muestra una tarjeta adaptable.

Kit de IU de Microsoft Teams

Puede encontrar directrices de diseño más completas para las tarjetas adaptables en Microsoft Teams, incluidos los elementos que puede captar y modificar según sea necesario, en el kit de interfaz de usuario de Microsoft Teams. El kit de la interfaz de usuario también cubre temas esenciales como temas de temas, accesibilidad y ajuste de tamaño.

Diseñador de tarjetas adaptables

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

Tipos de tarjetas adaptables

Elemento principal

Nuestra tarjeta más grande. Use para compartir artículos o escenarios en los que una imagen indica la mayor parte del artículo.

Ejemplo muestra una tarjeta adaptable.

Thumbnail

Usar para enviar un mensaje accionable sencillo.

Ejemplo muestra una tarjeta adaptable.

Lista

Úselo en escenarios donde desea que el usuario seleccione un elemento de una lista, pero los elementos no necesitan mucha explicación.

Ejemplo muestra una tarjeta adaptable.

Digest

Se usa para resúmenes de noticias y entradas de redondeo. Nota: se recomienda usar la tarjeta en miniatura para un solo elemento de actualización o de noticias.

Ejemplo muestra una tarjeta adaptable.

Audiovisual

Se usa cuando se desea combinar texto y medios, como audio o vídeo.

Ejemplo muestra una tarjeta adaptable.

Contactos

Se usa mejor para transmitir con eficacia quién está implicado en una tarea.

Ejemplo muestra una tarjeta adaptable.

Vale de solicitud

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

Ejemplo muestra una tarjeta adaptable.

ImageSet

Use para enviar varias miniaturas de imagen.

Ejemplo muestra una tarjeta adaptable.

ActionSet

Use esta opción cuando quiera que el usuario seleccione un botón y, a continuación, reúna los datos proporcionados por el usuario desde la misma tarjeta.

Ejemplo muestra una tarjeta adaptable.

ChoiceSet

Usar para recopilar varias entradas del usuario.

Ejemplo muestra una tarjeta adaptable.

Anatomía

Ilustración que muestra la anatomía de la interfaz de usuario de una tarjeta adaptable.

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

Counter Descripción
A Header: hacer que los encabezados sean claros y concisos, pero descriptivos.
B Copia del cuerpo: Use para transmitir detalles que sean demasiado largos o que no sean lo suficientemente grandes como para incluirlos en el encabezado.
C Acciones principales: como procedimiento recomendado, incluya las acciones principales de 1-3. Se permiten seis como máximo.

Procedimientos recomendados

Acciones principales y secundarias

Ejemplo que muestra un procedimiento recomendado de tarjetas adaptables.

Do: usar hasta seis acciones principales

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

Ejemplo que muestra un procedimiento recomendado de tarjetas adaptables.

No: usar más de seis acciones principales

Las tarjetas adaptables deben presentar contenido rápido y accionable. Muchas acciones pueden sobrecargar a un usuario.

Frecuencia

Ejemplo que muestra un procedimiento recomendado de tarjetas adaptables.

Do: ser conciso

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