Icono de aplicación de Teams para la Tienda Teams y la barra de aplicaciones
En este artículo se proporcionan las directrices para crear iconos en el ecosistema de aplicaciones para ayudar a los diseñadores y enviar el icono de aplicación correcto. Siguiendo estas directrices, se crea uniformidad y equilibrio en el ecosistema de la aplicación y se hace hincapié en la ilustración del icono de la aplicación.
Icono de aplicación
Al enviar el paquete de la aplicación, incluya dos versiones PNG del icono de aplicación, un icono de color y un icono de esquema. Para que la aplicación pase la revisión de Microsoft Teams Store, estos iconos deben cumplir determinados requisitos de tamaño. Siga los pasos para asegurarse de que los iconos de la aplicación se ajusten a los estándares de la Tienda Teams.
Diseño equilibrado
Los iconos están diseñados para crear un diseño uniforme. Estas directrices le ayudarán a crear el icono de la aplicación para su envío.
Creación de recursos
Microsoft Teams necesita dos recursos durante el envío de la aplicación para generar los iconos de la 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 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.
Atributos de icono
Color
Fondo blanco
Uso del icono de aplicación
Consulte esta lista para ver las áreas de contenido en las que se muestra el icono en el producto, según el tipo de aplicación o la funcionalidad.
Aplicación personal
Control flotante de la aplicación
Bot (vista de canal)
Control flotante de extensión de mensaje
Control flotante de aplicaciones de reunión
Barra U de reunión
Procedimientos recomendados
Hacer: Siga la recomendación para el área segura (120 x 120)
Se recomienda que si tiene un logotipo, guárdelo dentro del área segura de 120 x 120 dentro del icono de formato PNG 192 x 192.
No: Haga que el icono sea más grande que el área segura.
Este es 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.
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.
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.
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.
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.
Hacer: Proporcionar suficiente contraste
Considere que el icono tiene suficiente contraste con el fondo. Se recomienda una relación de 4,5:1 para mejorar la accesibilidad.
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.
Hacer: Elevar la marca
Céntrese en su marca usando un color plano completo como fondo.
No: Evite colocar el icono de marca en un círculo
Eleve su marca manteniendo el icono de marca dentro de un área segura de 96 x 96.
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.
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.
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.
No: Sesgar o estirar el icono
Mantenga el icono dentro del área segura. No estires el icono en una dirección u otra.