Directrices de diseño de componentes de bucle

Microsoft Loop componentes son unidades de productividad activas y accionables que permanecen sincronizadas y se mueven libremente entre las aplicaciones de Microsoft 365. Incluye la capacidad de crear componentes de bucle mediante la evolución de una tarjeta adaptable existente en un componente de bucle o la creación de un nuevo componente de bucle basado en tarjeta adaptable.

Características clave del componente de bucle

En directo: la tarjeta adaptable debe actualizarse automáticamente cuando se carga la tarjeta, como al abrir un correo electrónico o chat, para reflejar la información más reciente.

Incrustado: las tarjetas adaptables están incrustadas, por lo que no se necesita nada específico.

Accionable: los componentes de bucle permiten al usuario realizar acciones para completar un flujo dentro del propio componente; más allá de simplemente ver información o abrir un explorador. Si la tarjeta adaptable es una experiencia de solo vista, busque oportunidades para que sea accionable, ya que se trata de un elemento básico de la tarjeta para deleitar a los usuarios. Asegúrese de que una tarjeta adaptable con experiencia de solo vista no cambie a un componente de bucle; en este caso, debe seguir siendo solo una tarjeta adaptable.

Nota:

Es posible que determinados permisos de usuario o modos del componente no sean accionables, pero los casos comunes deben ser accionables.

Puede hacer que la tarjeta adaptable sea accionable mediante la inclusión de cualquiera de las siguientes acciones:

• Aprobación de un informe de gastos
• Agregar un comentario
• Actualizar una fecha
• Actualizar el precio, como el importe en dólares
• Cambio de un valor de asignación o estado
• Adición o actualización de datos

Portable: al agregar el atributo URL según sea necesario en la guía para desarrolladores, se garantiza que el componente se pueda copiar en vivo en cualquier lugar donde se admita el componente de bucle basado en tarjeta adaptable.

Propiedad	Función
Vivir	La información más reciente se rellena en la tarjeta. Si hay varias instancias, permanecen sincronizadas a medida que se realizan actualizaciones.
Embedded	Las tarjetas se pueden colocar en documentos y conversaciones independientes del resto del contenido.
Procesable	Las tareas se pueden completar en línea.
Portátil	Los componentes pueden funcionar en la aplicación de Microsoft 365 que admite componentes de bucle.

Elementos de componente de bucle

Un componente de bucle basado en tarjeta adaptable consta del cuerpo, el encabezado y el borde.

Elemento de componente de bucle	El desarrollador proporciona	La plataforma proporciona
Cuerpo	Contenido totalmente controlado por usted	Representación y aplicación de estilos de controles en función del código.
Header	Icono y nombre	Los elementos y el diseño son estándar y los proporciona la plataforma
Border	ND	Borde estándar para todos los componentes de bucle.

Cuerpo del componente de bucle

El cuerpo del componente loop hace que el componente sea único. Puede proporcionar a los usuarios una experiencia positiva y aumentar el uso y la retención mediante la creación de un componente que incluya los atributos del componente loop y proporcione el valor del cliente.

Los detalles del cuerpo del componente vienen determinados por los detalles de las necesidades y escenarios de los usuarios.

A continuación se muestran los procedimientos recomendados para un cuerpo de componente de bucle:

• Vaya a La página principal de tarjetas adaptables y revise el artículo de información general sobre tarjetas adaptables para comprender los conceptos básicos y los principios básicos de diseño de las tarjetas adaptables.
• Siga las directrices de diseño de tarjeta adaptable, que incluyen herramientas, ejemplos, notas sobre el diseño dinámico y la densidad de píxeles.
• En la lista siguiente se proporcionan las consideraciones específicas del componente de bucle:
  • Asegúrese de que el componente es fiel a los atributos de los componentes de bucle, como, live, actionable, embedded y portable.
  • No agregue un botón independiente para abrir en el explorador.
  • No agregue un encabezado o borde duplicados.

No agregue un botón independiente para abrir en el explorador.

El encabezado del componente loop proporciona una manera estándar de abrir una vista basada en explorador del componente en función de la dirección URL. Por lo tanto, no es necesario agregar un botón independiente al componente para acciones como Ver detalles o Abrir en web.

Puede agregar botones o vínculos para vistas más específicas, por ejemplo, Ver elementos relacionados. Cuando sea posible, proporcione la información necesaria y la interacción dentro de la tarjeta.

No agregar un encabezado o borde duplicados

Todos los componentes de bucle tienen un encabezado y un borde estándar. Asegúrese de que el código de la tarjeta adaptable no debe duplicar el encabezado y el borde. Puede tener un título específico del elemento para el componente, pero asegúrese de que el nombre y el icono de la aplicación no son iguales.

Encabezado del componente de bucle

La plataforma proporciona el encabezado del componente e incluye elementos estándar, como el logotipo de la aplicación, el nombre de la aplicación, la ubicación compartida y la copia.

Contador	Descripción
1	Logotipo de la aplicación: logotipo de aplicación a todo color de la aplicación.
2	Nombre de la aplicación: nombre completo de la aplicación.
3	Ubicaciones compartidas (control de bucle)
4	Copiar componente

El nombre de la aplicación se extrae del contrato del componente. Se recomienda usar un nombre conciso para la aplicación.

El logotipo de la aplicación se extrae del contrato del componente. Asegúrese de que el logotipo proporcionado funciona en fondos claros y oscuros, ya que el mismo recurso se usa para temas claros, oscuros y de contraste alto en Microsoft Teams.

Borde del componente de bucle

El borde del componente separa el componente del contenido que lo rodea. Ayuda a los usuarios a comprender que el componente loop está en directo y separado del contenido que lo rodea, como el correo electrónico o el chat.

El borde aparece automáticamente.

Paso siguiente

Componentes de bucle basado en tarjeta adaptable