Especificações de design de ícones do Google Play

Os Apps e jogos do Google Play estão adotando um novo sistema de ícones para adaptar melhor os materiais gráficos dos desenvolvedores aos vários formatos, dispositivos e layouts de IU do Google Play, além de dar consistência e um visual mais limpo ao Google Play.

As formas uniformizadas têm um visual mais interessante e facilitam a compreensão. Elas ajudam os usuários a se concentrar no material gráfico, e não na própria forma. Elas corrigem problemas de alinhamento causados por espaços em branco aleatórios para melhorar a exibição das informações ao redor, como título, classificação e preço.

Forma livre — formato original
Ícones uniformizados — novo formato

Esta página descreve as diretrizes que você precisa seguir ao criar recursos para os Detalhes do app no Google Play. Por exemplo, como o Google Play faz a renderização dinâmica dos cantos arredondados e sombras projetadas dos ícones de apps, é preciso omitir esses elementos dos recursos originais.

Importante: se você quiser saber mais sobre como criar os ícones na tela de início do APK, que são independentes dos ícones do Google Play descritos nesta página, consulte os recursos abaixo:

  • Ícones adaptáveis para Android
    Siga estas diretrizes de ícones do APK para saber como criar a versão adaptável dos ícones na tela de início, um recurso introduzido no Android 8.0 (nível 26 da API).
  • Ícones de produtos
    Conheça os princípios do Material Design para ícones de produtos, incluindo diretrizes de design, formas, especificações e tratamento.

Criar recursos

Esta seção descreve algumas diretrizes que você precisa seguir ao criar recursos visuais para seu app no Google Play.

Atributos

Você pode usar o próprio ícone para preencher todo o espaço do recurso ou criar e posicionar elementos como logotipos na grade de linhas-chave. Ao inserir o material gráfico, use as linhas-chave como um guia, não uma regra rígida.

Ao criar esse material, verifique se ele está de acordo com o seguinte:

  • Tamanho final: 512 px x 512 px
  • Formato: PNG de 32 bits
  • Espaço de cores: sRGB
  • Tamanho máximo do arquivo: 1.024 KB
  • Forma: quadrado completo, devido ao mascaramento dinâmico feito pelo Google Play (raio equivalente a 20% do tamanho do ícone)
  • Sombra: nenhuma, devido ao processamento dinâmico das sombras feito pelo Google Play (mais informações sobre a inclusão de sombras em materiais gráficos na seção "Sombras" abaixo)
Tamanho total do recurso
Linhas-chave do ícone de produto

Depois do upload do recurso, o Google Play aplica dinamicamente a máscara arredondada e a sombra para garantir a consistência entre todos os ícones do app/jogo.

O novo recurso de ícone está à esquerda. As três imagens seguintes do lado direito mostram o processamento dinâmico do ícone pelo Google Play.

Dimensionamento

Utilize todo o espaço do recurso como plano de fundo ao lidar com gráficos minimalistas.

Use as linhas-chave como guias para posicionar elementos gráficos (ou seja, logotipos).

Material gráfico sem margens (recurso final)
Resultado final após a aplicação dinâmica de sombras e cantos arredondados pelo Google Play

Não force o ajuste do logotipo ou material gráfico a todo o espaço do recurso. Em vez disso, use a grade de linhas-chave.

O que não fazer:
Não force alterações drásticas em marcas e materiais gráficos para criar versões sem margens.
O que fazer:
Posicione o ícone de forma livre usando as linhas-chave.

Os materiais gráficos ilustrados costumam funcionar bem como ícones sem margens.

O que não fazer:
Não reduza o tamanho de materiais gráficos ilustrados para caber nas linhas-chave.
O que fazer:
Use todo o espaço do recurso para que o material gráfico ocupe o ícone inteiro.

Sombras

O Google Play adiciona dinamicamente uma sombra ao redor do ícone final após o upload.

Ao adicionar sombras dentro do seu ícone, mantenha a consistência com a plataforma Android seguindo as diretrizes de Material Design do Google.

O que não fazer:
Não adicione sombras ao recurso final.
O que fazer:
Se quiser, crie efeitos de sombra e iluminação dentro do material gráfico.

Raio dos cantos

O Google Play aplica dinamicamente o raio dos cantos. Isso garante a consistência quando o ícone é redimensionado em diferentes layouts de IU. O raio é equivalente a 20% do tamanho do ícone.

O que não fazer:
Não arredonde as margens do recurso final.
O que fazer:
Preencha todo o recurso com o material gráfico se possível.

Selos

Os selos incorporados prejudicam o visual do material gráfico e não ficam bem quando ele é reduzido para caber no espaço do ícone.

Cuidado:
Evite divulgar promoções no material gráfico.
Cuidado:
Evite usar selos de marca.

Adaptação da marca

Se as formas forem uma parte essencial do logotipo, não force a inserção do material gráfico em um formato sem margens. Em vez disso, posicione o material na nova grade de linhas-chave.

Da esquerda para a direita: recurso de ícone original, novo recurso (adaptação recomendada) e novo ícone renderizado no Google Play

Se possível, escolha uma cor do plano de fundo para o recurso de acordo com sua marca e não inclua transparência. Os recursos transparentes exibirão a cor do plano de fundo da IU do Google Play.

Da esquerda para a direita: recurso de ícone original, novo recurso (adaptação recomendada) e novo ícone renderizado no Google Play

Se não houver uma forma clara ao redor do logotipo que o defina, adicione um plano de fundo sem margens a ele.

Da esquerda para a direita: recurso de ícone original, novo recurso (adaptação recomendada) e novo ícone renderizado no Google Play

Se o material gráfico for flexível o suficiente, considere fazer alguns ajustes para utilizar todo o tamanho do recurso. Se isso não for possível, coloque o logotipo em uma grade de linhas-chave.

Da esquerda para a direita: recurso de ícone original, novo recurso (adaptação recomendada) e novo ícone renderizado no Google Play

Modo legado

Os recursos de ícone originais que não foram atualizados de acordo com as novas especificações serão migrados para o modo legado e reduzidos em 75% para o tamanho da grade de linhas-chave (512 x 0,75 = 384 px).

Não será permitido fazer upload de ícones nas especificações originais a partir de maio de 2019. Veja mais detalhes sobre cronogramas.

Os recursos de ícone originais serão automaticamente transferidos para o modo legado e reduzidos em 75% para a nova grade de linhas-chave.

Fazer o download de modelos e recursos de design

Para começar, faça o download de um destes modelos de recursos: