Diseñando iconos adaptativos

Android O presenta un nuevo formato de icono de aplicación: iconos adaptativos. Los íconos adaptativos pueden hacer que los dispositivos sean más coherentes al unificar la forma de todos los íconos de aplicaciones y abrir la puerta a interesantes efectos visuales. Esta publicación explica cómo funcionan y explora algunas técnicas para diseñarlos.

Para echar un vistazo al origen de esta característica, consulte:

Fundamentos

Tamaño y forma

Los íconos adaptativos tienen un tamaño de 108dp * 108dp pero están enmascarados hasta un máximo de 72dp * 72dp. Diferentes dispositivos pueden suministrar diferentes máscaras que deben ser de forma convexa y pueden alcanzar un mínimo de 33dp desde el centro en algunos lugares.

Ejemplos de máscaras de diferentes formas que se aplican

Debido al alcance mínimo de la máscara, puede considerar un círculo centrado de 66dp de diámetro como una zona segura, garantizada para no ser cortada.

Zona segura dentro de una máscara cuadrada redondeada

Keylines

Íconos clave

Las formas clave son la base de la cuadrícula de iconos que ayuda a que las proporciones visuales de su icono sean consistentes con los iconos de otras aplicaciones. Las formas clave son:

  • Círculos: 52dp y 36dp de diámetro
  • Cuadrado: 44dp * 44dp, radio de esquina de 4dp
  • Rectángulos: 52dp * 36dp y 36dp * 52dp, radio de esquina de 4dp

Consulte las plantillas incluidas al final de este artículo.

Capas

Los iconos adaptativos en realidad están formados por dos capas; un primer plano y un fondo. Ambas capas son 108dp * 108dp; el fondo debe ser completamente opaco, mientras que el primer plano puede incluir transparencia. Estas capas se apilan unas encima de otras.

Proporcionar elementos en dos capas separadas que son más grandes que el tamaño visualizado (es decir, enmascarado) crea la oportunidad de interesantes tratamientos visuales y animaciones. Exactamente qué efectos pueden aplicarse y cuándo aún es una pregunta abierta; depende de los fabricantes de dispositivos y lanzadores decidir. Aquí hay algunos ejemplos simples que podría imaginar: paralaje o pulsos traduciendo o escalando independientemente cada capa antes de aplicar la máscara.

Como los iconos de 108dp * 108dp están enmascarados hasta 72dp * 72dp, los 18dp externos en cada lado pueden considerarse el contenido "extra", que solo se revela durante el movimiento.

Consideraciones de diseño

Las pautas de diseño de materiales para crear íconos de productos aún se aplican mucho. Específicamente, la anatomía del icono, las sombras y el acabado permanecen, pero ahora puede colocar elementos en las capas de primer plano o de fondo para obtener diferentes efectos.

Ahora estoy seguro de que muchos íconos estarán bien ubicados al colocar su marca en primer plano sobre un fondo de color sólido y llamarlo día. Esto asegurará que su ícono encaje bien en el dispositivo. Lo que me emociona es cómo nosotros, como comunidad, exploraremos estas nuevas limitaciones y encontraremos formas interesantes, divertidas e innovadoras de crear iconos deliciosos. Aquí hay algunas cosas a tener en cuenta y algunas ideas para explorar potencialmente.

Recorte

Debido a la naturaleza dinámica de los iconos adaptativos, no puede saber la forma exacta de la máscara que se aplicará. Por esa razón, es mejor colocar elementos críticos como la marca de su marca dentro de la zona segura y mantenerse alejado de los bordes de la máscara.

Anclaje de fondo

Colocar algunos elementos que pueden parecer estar en primer plano, en realidad en el fondo, significa que se moverán de forma independiente. Por ejemplo, la aplicación de calculadora coloca la mayoría de los elementos en primer plano, pero el botón igual en el bloque de color de acento en el fondo:

Los elementos en diferentes capas enfatizan las capas

Esto crea oportunidades interesantes para el movimiento donde se ancla visualmente en el bloque de color brillante, pero se mueve menos que los elementos de primer plano, creando una sensación de profundidad.

Mascaras enmascaradas

Creo que puede haber oportunidades interesantes para colocar elementos de máscara en primer plano, es decir, elementos sólidos con áreas recortadas. Considere un posible icono para Google Play Store, esto podría construirse de una manera "obvia", es decir, colocar el triángulo de color en primer plano sobre un fondo blanco.

Un primer plano

En lugar de hacer esto, podríamos usar un fondo colorido y un primer plano blanco con el triángulo restado para producir la misma salida estática:

Un fondo colorido alternativo con primer plano de enmascaramiento

Esta configuración permitiría que los colores que "se asoman" se muevan independientemente de la máscara y revelen diferentes partes del fondo cuando se traducen o escalan.

La izquierda es una composición regular; Justo con un primer plano de enmascaramiento

Luces y sombras

La interacción de los efectos de iluminación y las sombras colocadas en capas separadas puede tener resultados interesantes. Por ejemplo, usar la técnica de sombra larga en el elemento de primer plano puede tener una interacción lúdica a medida que se mueve dentro del área enmascarada. Del mismo modo, los efectos de iluminación se pueden colocar en la capa de primer plano en lugar de hornearse en el fondo. Por ejemplo, se puede colocar una capa de "acabado" en primer plano para emular una fuente de luz. Colocar esto en primer plano significa que se reproducirá sobre la capa de fondo cuando esté en movimiento, moviéndose a una velocidad diferente.

Ejemplo de sombra en primer plano y fuente de luz (exagerada) proyectada en el fondo

Tenga cuidado de no crear un efecto que no tenga sentido, p. una sombra que se separa de un elemento de primer plano o se mueve detrás de un elemento de fondo. También recuerde que es probable que se vean muchos íconos juntos, así que sea conservador con los efectos de iluminación a medida y manténgase cerca de las pautas de materiales.

Dejar atrás

Puede colocar elementos en la capa de fondo que están completamente oscurecidos por la capa de primer plano y solo se muestran bajo movimiento.

Elementos solo revelados bajo movimiento

Recursos y herramientas.

Aquí está mi archivo de bocetos que puede usar como plantilla mientras crea íconos adaptativos. Incluye la cuadrícula de iconos, formas clave y área segura. Se implementa como un símbolo, por lo que al cambiar el elemento maestro se actualizarán las copias, lo que le dará una vista previa con diferentes máscaras aplicadas.

También he subido una plantilla de Adobe Illustrator si eso es lo que más te gusta.

Además, consulte estos otros recursos que he encontrado:

  • Herramienta de vista previa de icono adaptativo
  • Plantilla de Affinity Designer
  • Las plantillas de Bjango incluyen iconos adaptativos
  • Plantilla de Figma (requiere inicio de sesión)
  • Plantilla de Adobe XD

Zona de juegos de iconos adaptativos

Al desarrollar íconos adaptativos, he llegado a apreciar que muchas de las sutilezas provienen de la interacción de los elementos de primer plano y de fondo cuando se aplican los efectos de movimiento. Esto sigue siendo una pregunta abierta, ya que todavía tenemos que ver cómo los fabricantes de dispositivos y lanzadores implementarán esto. Para ayudar a investigar este espacio, he creado una pequeña aplicación de prueba para ayudarte a evaluarla mientras creas tu ícono:

Experimenta con máscaras y efectos de movimiento aplicados a tus íconos

La aplicación muestra todas las aplicaciones instaladas en su dispositivo con iconos adaptativos. Al desplazarse por la cuadrícula se aplican efectos de paralaje a los iconos y al tocar un icono se aplica un efecto de escala. Puede configurar la intensidad de los efectos y cambiar la máscara aplicada a todos los iconos. Esperemos que esta herramienta te ayude a imaginar cómo aparecerá tu ícono y cómo se moverá en diferentes dispositivos.

Puede descargar un APK o verificar la fuente en github:

Ve y adáptate

Esperemos que esta publicación te haya brindado la información y algo de inspiración para diseñar un increíble ícono adaptativo para tu aplicación. Como usuario, no puedo esperar a que mis aplicaciones se vuelvan más coherentes. Sin embargo, lo que me emociona aún más es ver qué soluciones creativas se nos ocurren como comunidad.

Si eres un desarrollador que busca construir un ícono adaptativo, únete a mí en la parte 3: Implementación de íconos adaptativos.