Especificaciones de diseño de íconos de Google Play

Las Apps y juegos de Google Play están adoptando un nuevo sistema de íconos con el fin de ajustar mejor la diversidad del material gráfico de los desarrolladores a los distintos dispositivos, factores de forma y diseños de Google Play, así como para aportar coherencia y un aspecto más sencillo a la plataforma.

Las formas uniformes son más atractivas a nivel visual y más fáciles de asimilar. Ayudan a los usuarios a enfocarse en el material gráfico en lugar de las formas. Permiten solucionar problemas de alineación causados por el espacio abierto aleatorio para presentar mejor la información circundante, como el título, la clasificación y el precio.

Modo de forma libre: formato original
Modo uniforme: formato nuevo

En esta página se describen los lineamientos que debes seguir cuando crees elementos para la ficha de Play Store de tu app en Google Play. Por ejemplo, dado que Google Play procesa las esquinas redondeadas y sombras paralelas de forma dinámica para los íconos de la app, debes omitirlas en los elementos originales.

Importante: Si te interesa obtener información sobre cómo crear íconos de selector de APK, que son independientes de los íconos de Google Play que se describen en esta página, consulta los recursos que se indican a continuación:

  • Íconos adaptables de Android
    Sigue estos lineamientos acerca de los íconos de APK para obtener información sobre cómo crear íconos de selector adaptables incorporados en Android 8.0 (nivel de API 26).
  • Íconos de productos
    Descubre los principios de material design sobre íconos de productos, incluidos los lineamientos para el diseño, las formas, las especificaciones y el tratamiento de los íconos.

Cómo crear elementos

En esta sección se describen algunos lineamientos que debes seguir cuando crees elementos visuales para tu app en Google Play.

Atributos

El material gráfico de los íconos puede rellenar todo el espacio del elemento. También puedes diseñar y posicionar elementos de material gráfico, como logotipos, en la cuadrícula de líneas clave. Cuando coloques el material gráfico, usa líneas clave como guía en lugar de una regla fija.

Cuando crees el material gráfico, asegúrate de que cumpla con lo siguiente:

  • Tamaño final: 512 px × 512 px
  • Formato: PNG de 32 bits
  • Espacio de color: sRGB
  • Tamaño máx. del archivo: 1024 KB
  • Forma: Cuadrado completo (Google Play realiza el enmascarado de forma dinámica; el radio será equivalente al 20% del tamaño del ícono)
  • Sombra: Ninguna (Google Play procesa las sombras de forma dinámica; consulta la sección "Sombras" más abajo para conocer cómo incluir sombras en el material gráfico)
Tamaño total de los elementos
Líneas clave de los íconos de productos

Después de que se carga el elemento, Google Play aplica de forma dinámica la máscara redondeada y la sombra para garantizar la coherencia entre todos los íconos del juego o app.

Del lado izquierdo aparece el nuevo elemento de ícono. Las siguientes tres imágenes del lado derecho muestran el procesamiento dinámico que realiza Google Play del ícono.

Definición del tamaño

Cuando trabajes con material gráfico minimalista, usa el espacio completo del elemento como fondo.

Usa las líneas clave como guías para posicionar los elementos de material gráfico (p. ej., logotipos).

Material gráfico con sangrado completo (elemento final)
Resultado final con sombras y esquinas redondeadas aplicadas de forma dinámica por Google Play

No fuerces tu logotipo o material gráfico para que se ajusten al espacio completo del elemento. En cambio, usa la cuadrícula de líneas clave.

Qué no debes hacer:
No fuerces una transformación drástica de la marca y el material gráfico para que tengan sangrado completo.
Qué debes hacer:
Coloca el material gráfico del ícono de forma libre en las líneas clave.

Por lo general, el material gráfico ilustrado funciona bien como un ícono con sangrado completo.

Qué no debes hacer:
No reduzcas el tamaño del material gráfico ilustrado para que se ajuste a las líneas clave.
Qué debes hacer:
Usa el espacio completo del elemento de manera que el material gráfico ocupe todo el ícono.

Sombras

Google Play agregará de forma dinámica una sombra paralela alrededor del ícono final una vez que se cargue.

Cuando agregues sombras dentro del material gráfico del ícono, ten en cuenta la coherencia con la plataforma de Android. Para ello, sigue los lineamientos sobre el material de Google.

Qué no debes hacer:
No agregues sombras paralelas al elemento final.
Qué debes hacer:
Puedes crear iluminación y sombras dentro del material gráfico.

Radio de esquina

Google Play aplica radios de esquinas de forma dinámica. Esto garantiza la coherencia cuando se cambia el tamaño del ícono en diferentes diseños de IU. El radio será equivalente al 20% del tamaño del ícono.

Qué no debes hacer:
No redondees los bordes del elemento final.
Qué debes hacer:
Cuando sea posible, rellena todo el elemento con material gráfico.

Insignias

Las insignias incorporadas toman espacio del material gráfico en sí y no se adaptan bien al ícono.

Precaución:
Evita comunicar promociones en el material gráfico.
Precaución:
Evita usar insignias de marcas.

Adaptación de la marca

Si las formas son una parte fundamental de un logotipo, no fuerces el material gráfico para que tenga sangrado completo. En cambio, colócalo en la nueva cuadrícula de líneas clave.

De izquierda a derecha: elemento del ícono original, nuevo elemento del ícono (adaptación recomendada), nuevo ícono procesado en Google Play.

Si es posible, elige un color de fondo para el elemento que sea adecuado para tu marca y no incluya transparencia. Los elementos transparentes mostrarán el color de fondo de la IU de Google Play.

De izquierda a derecha: elemento del ícono original, nuevo elemento del ícono (adaptación recomendada), nuevo ícono procesado en Google Play.

Si no hay una forma distintiva alrededor del logotipo que lo defina, colócalo en un fondo con sangrado completo.

De izquierda a derecha: elemento del ícono original, nuevo elemento del ícono (adaptación recomendada), nuevo ícono procesado en Google Play.

Si el material gráfico es lo suficientemente flexible, considera modificarlo para que use el tamaño del elemento por completo. Si no es posible, vuelve a colocar el logotipo en una cuadrícula de líneas clave.

De izquierda a derecha: elemento del ícono original, nuevo elemento del ícono (adaptación recomendada), nuevo ícono procesado en Google Play.

Modo heredado

En última instancia, los elementos del ícono original que no se hayan actualizado según las nuevas especificaciones se migrarán al modo heredado y se ajustarán al 75% del tamaño de la cuadrícula de líneas clave (512 * 0.75 = 384 px).

A partir de mayo de 2019, no se permitirá la carga de íconos con las especificaciones originales. Consulta más detalles sobre los cronogramas.

Los elementos del ícono original se convertirán en elementos con modo heredado de forma automática y se ajustarán al 75% de la nueva cuadrícula de líneas clave.

Descarga las plantillas y los recursos de diseño

Para comenzar, descarga una de las plantillas de elementos proporcionadas: