Compartir a través de


Iconos de diseño para la adquisición y administración de agentes

Un agente de Copilot es una aplicación para Microsoft 365 y su paquete de aplicaciones debe incluir dos archivos de icono que representen al agente en la interfaz de usuario de administración y adquisición de aplicaciones de Teams, Office, Copilot y otras aplicaciones de Microsoft 365. En este artículo se describen los requisitos y procedimientos recomendados para crear estos iconos.

Aplicaciones para iconos de Microsoft 365

El paquete de aplicación para cualquier aplicación para Microsoft 365 debe incluir dos iconos que representen la extensión en varios lugares, incluidos los siguientes:

  • La aplicación almacena en las distintas aplicaciones de Microsoft 365, como la tienda de aplicaciones de Teams.
  • La página Administrar aplicaciones a la que se puede acceder desde varias aplicaciones de Microsoft 365.
  • Las barras de aplicación de Teams, Outlook y la aplicación Microsoft 365 Copilot.

Uno de ellos debe ser un icono de color y el otro un icono de esquema y ambos deben tener formato PNG. Estos iconos deben cumplir ciertos requisitos de tamaño. En este artículo se especifican los requisitos y procedimientos recomendados para diseñar estos iconos.

Diseño equilibrado

Los iconos están diseñados para crear un diseño uniforme. Estas directrices le ayudan a crear el icono de la aplicación.

Diagrama que muestra el diseño uniforme de los iconos de aplicación.

Creación de recursos

Microsoft 365 necesita dos recursos durante el envío de la aplicación para generar los iconos.

Diagrama que muestra los dos recursos para generar iconos de aplicación.

Contador Descripción
1 Un formato PNG de sangrado completo a 192 x 192 píxeles. Utilice el espacio de recursos completo como fondo. Esto se usa, por ejemplo, en la Tienda Teams o en los controles flotantes.
2 Icono de formato PNG predeterminado o rest de 32 x 32 píxeles. Este icono se usa como estado de rest/default en la barra de aplicaciones y en otras ubicaciones del producto.

Arquitectura de icono de color

Las dimensiones del icono de aplicación de color deben ser de 192 x 192 píxeles. Si tienes un icono de logotipo, el logotipo debe caber dentro del área segura de 120 x 120 en el centro.

El icono enviado debe ser un cuadrado completo. Teams aplica automáticamente el enmascaramiento para formas de icono coherentes en toda la aplicación.

Diagrama que muestra las dimensiones del icono de aplicación de color del icono de logotipo.

Atributos de icono

Color

Diagrama que muestra los atributos de icono de un icono de color.

Fondo blanco

Diagrama que muestra los atributos de color de un icono con fondo blanco.

Uso del icono de aplicación

Los iconos pueden aparecer en otros lugares de las aplicaciones de Microsoft 365, en función de los tipos de extensiones o funcionalidades que se incluyan en la aplicación para Microsoft 365. A continuación, se muestran algunos ejemplos.

Aplicación personal

Diagrama que muestra el icono de aplicación en la aplicación personal.

Control flotante de la aplicación

Diagrama que muestra el icono de aplicación en el control flotante de la aplicación.

Bot (vista de canal)

Diagrama que muestra un icono de aplicación en la vista de canal del bot.

Control flotante de extensión de mensaje

Diagrama que muestra un icono de aplicación en el control flotante de la extensión de mensaje.

Control flotante de aplicaciones de reunión

Diagrama que muestra un icono de aplicación en el control flotante de la aplicación de reunión.

Barra U de reunión

Diagrama que muestra un icono de aplicación en la barra de U de la reunión.

Procedimientos recomendados

Diagrama que muestra un logotipo dentro del área segura.

Hacer: Siga la recomendación para el área segura (120 x 120)

Si tiene un logotipo, guárdelo dentro del área segura de 120 x 120 dentro del icono de formato PNG 192 x 192.

Diagrama que muestra un logotipo que no está dentro del área segura.

No: Haga que el icono sea más grande que el área segura.

A continuación se muestra un ejemplo de un logotipo dentro del icono de formato PNG que no está dentro del área segura. Crea relleno desigual (espacio negativo) alrededor del icono.

Diagrama que muestra un icono con sangrado completo.

Hacer: Proporcionar sangrado completo para esquinas redondeadas

Si tiene una imagen de sangrado completa, simplemente cargue un formato PNG cuadrado en 192 x 192. Las esquinas se redondea dinámicamente.

Diagrama que muestra un icono con esquinas redondeadas.

No lo haga: redondee las esquinas del icono

No redondee las esquinas. Enviar en el cuadrado perfecto en 192 x 192, las esquinas se redondea dinámicamente.

Diagrama que muestra una carga de icono sin borde.

Hacer: Cargar un icono sin borde

El borde se agrega automáticamente. En este caso, solo tiene que cargar el formato PNG sin borde, incluso si está en un fondo blanco.

Diagrama que muestra una carga de icono con un borde.

No: Agregar un borde

Los bordes se agregan dinámicamente. Si incluye un borde en el formato PNG, se producirá una duplicación no deseada en fondos blancos.

Diagrama que muestra un icono de aplicación con suficiente contraste.

Hacer: Proporcionar suficiente contraste

Asegúrese de que el icono tiene suficiente contraste con respecto al fondo. Se recomienda una relación de 4,5:1 para mejorar la accesibilidad.

Diagrama que muestra un icono de aplicación que se desvanece.

No lo haga: Desvanezca el icono

Evite el contraste bajo de los iconos. Asegúrese de que el fondo y el icono que usa en el formato PNG tienen suficiente contraste.

Diagrama que muestra un icono de aplicación con la marca con privilegios elevados.

Hacer: Elevar la marca

Céntrese en su marca usando un color plano completo como fondo.

Diagrama que muestra un icono de aplicación con la marca en un círculo.

No: Evite colocar el icono de marca en un círculo

Eleva tu marca manteniendo el icono de marca dentro del área segura de 96 x 96.

Diagrama que muestra un icono de aplicación con abreviatura.

Hacer: Abreviar palabras largas en el icono de la aplicación

Si tiene un nombre de aplicación largo, intente abreviar para que sea más fácil de leer cuando el icono cambie de tamaño a 32 x 32.

Diagrama que muestra un icono de aplicación con varias palabras.

No: Incluir varias palabras en el icono de la aplicación

Evite usar varias palabras en el icono. Es imposible leer el texto cuando el icono está en tamaños más pequeños, por ejemplo, 32 x 32 o 36 x 36.

Diagrama que muestra un icono de aplicación equilibrada.

Hacer: Crear saldo (96 x 96)

Eleva tu marca manteniendo el equilibrio. Ajádase al área segura de 96 x 96 para una sensación de equilibrio.

Diagrama que muestra un icono de aplicación sesgado o extendido.

No: Sesgar o estirar el icono

Mantenga el icono dentro del área segura. No estires el icono en una dirección u otra.