Gráfico de recursos do Google Play: tamanho, regras e dicas

O gráfico de recursos do Google Play é uma imagem de 1024 × 500 px, salva em JPEG ou PNG de 24 bits sem canal alfa, que todo app precisa enviar antes de publicar a página de detalhes. O Google a mostra como imagem de capa do seu vídeo de visualização (com um botão de play por cima), em coleções de apps em formato grande, incluindo anúncios, e em grupos de recomendação de jogos em formato grande.

O tamanho do gráfico de recursos é a parte fácil. A parte difícil é que o Google corta a imagem, coloca elementos de interface por cima e a exibe pequena, então o design precisa sobreviver às três coisas. Este guia explica a especificação, onde o gráfico aparece hoje de fato, a área segura e os padrões de design que funcionam.

Qual é o tamanho e o formato do gráfico de recursos do Google Play?

A especificação, segundo a página de ajuda sobre recursos de visualização do Google, é curta:

Duas coisas pegam muita gente. Primeiro, 1024 × 500 não é um tamanho predefinido comum, então designs feitos em 1920 × 1080 e reduzidos acabam com as bordas achatadas ou cortadas. Comece a tela já em 1024 × 500 (ou num múltiplo exato, como 2048 × 1000, e exporte reduzindo). Segundo, muitas ferramentas de design exportam PNG em 32 bits com canal alfa por padrão, mesmo quando nada é transparente. O Play Console recusa esses arquivos. Exporte em JPEG ou desative a transparência nas configurações de exportação do PNG.

Para a lista completa de dimensões do Android, incluindo capturas de tela de celular e tablet e o banner do Android TV, veja a nossa referência de tamanhos de capturas de tela para App Store e Play Store.

Onde o gráfico de recursos aparece no Google Play?

Guias mais antigos descrevem o gráfico de recursos como um grande banner no topo de toda página de app. Isso não é mais um retrato confiável. A página de ajuda atual do Google lista três lugares:

• Como imagem de capa do seu vídeo de visualização. Se você adicionar um vídeo de visualização do YouTube, o gráfico de recursos vira o quadro de capa dele. Sempre que o vídeo não for reproduzido automaticamente, o Google coloca um botão de play sobre o gráfico.
• Em coleções de apps em formato grande, incluindo anúncios. Algumas superfícies do Play mostram grupos de apps como cards largos, e esses cards usam o gráfico de recursos.
• Em grupos de recomendação de jogos em formato grande. Para jogos, as fileiras de recomendação que misturam vídeos de visualização e capturas de tela também mostram o gráfico de recursos.

Então, sendo honesto: num app sem vídeo de visualização, muitos visitantes da sua página talvez nunca vejam o gráfico de recursos na própria página. Ele importa mais quando o Google escolhe o seu app para um formato promocional maior, que é justamente a situação em que você quer que ele fique bonito. E, como é obrigatório, vale fazer direito uma vez em vez de subir uma imagem provisória.

Qual é a área segura do gráfico de recursos?

O Google não publica medidas em pixels para a área segura. A página de ajuda mostra as zonas de corte como áreas sombreadas num diagrama e descreve a regra em palavras:

• Mantenha os elementos visuais de destaque e o ponto focal perto do centro do gráfico.
• Não coloque elementos-chave (os exemplos do Google: logotipo da marca, nome do app, slogan principal e interface principal) nas zonas de corte perto das bordas.
• Deixe os elementos de fundo nas bordas.
• Conte com sobreposições de interface extras em alguns formatos, como o botão de play.

O Google deixa claro o que está em jogo: não respeitar o ponto focal e as zonas de corte "pode resultar em inelegibilidade para aparecer nesses formatos". Ou seja, um gráfico com o logotipo espremido num canto não vai fazer a sua página ser rejeitada, mas pode, sem alarde, custar a você espaço nas coleções em formato grande.

Uma regra prática para a área segura

Como o Google não dá números exatos, trabalhamos com uma moldura conservadora: tudo o que precisa ser lido fica na área central da tela, com margens generosas nos quatro lados, e nada importante fica onde um botão de play redondo cairia, bem no meio. Preencha a faixa externa com cor, textura ou um pedaço recortado da interface que continue bonito mesmo se for cortado. Depois confira o resultado vendo a imagem com uns 300 px de largura; se você não conseguir ler as palavras, elas estão pequenas demais.

Quanto texto um gráfico de recursos deve ter?

Menos do que você imagina. As boas práticas do Google para a página de detalhes do app dizem para "minimizar o uso de texto" e manter os elementos importantes perto do centro, e as diretrizes de recursos de visualização desaconselham encher o gráfico de detalhes finos que "não vão ficar visíveis em muitas telas de celular".

O que costuma funcionar:

• Uma linha, duas no máximo. O nome do app mais uma frase curta de benefício, por exemplo "Orçamento em dois toques" ou "Planeje as refeições da semana".
• Letras grandes. Se o gráfico aparece com um terço do tamanho, uma fonte de 24 px vira 8 px. Como ponto de partida, manteríamos o título com 60 px ou mais na tela de 1024 × 500.
• Texto localizado. O Google recomenda localizar o texto do gráfico e da marca por mercado. Se você não consegue manter versões traduzidas, um gráfico só com o nome do app (que normalmente não muda) viaja melhor do que um com um slogan em inglês.
• Sem repetição. As diretrizes do Google pedem para não duplicar mensagens entre a descrição curta, as capturas de tela, o gráfico de recursos e o vídeo, já que eles podem aparecer lado a lado.

O que não colocar num gráfico de recursos do Google Play

As diretrizes de recursos de visualização do Google listam vários elementos a evitar nos gráficos. Alguns vêm da política de metadados, que é obrigatória; outros são orientações que afetam como os seus recursos são promovidos. Juntando tudo:

O ponto das imagens de dispositivos surpreende, porque a moldura de celular é o padrão nas capturas de tela da App Store. No gráfico de recursos, o Google prefere ver a sua interface real, uma ilustração ou o universo da sua marca, sem um aparelho específico em volta. Se quiser mostrar a interface, recorte uma tela importante e coloque-a reta ou levemente inclinada, sem a borda do aparelho.

Padrões de design de gráfico de recursos que funcionam

De tanto olhar páginas no Play enquanto construíamos o Launch Shots, percebemos que a maioria dos bons gráficos de recursos cai em um de quatro padrões. Escolha um; é na mistura que nasce a bagunça.

1. Marca sobre cor

Seu logotipo ou o nome do app, centralizado, sobre uma cor de fundo marcante tirada do ícone, com um padrão sutil em direção às bordas. É a opção mais segura: nada importante perto das zonas de corte, nenhum texto para traduzir além do nome, e funciona em qualquer tamanho. Combina com utilitários e apps cujo nome já explica o produto.

2. Frase de benefício com um pedaço da interface

Uma frase curta de benefício de um lado do centro e um recorte da interface real (um gráfico, um card, um mapa) do outro, ambos dentro da área central. É o padrão que mais vende, então combina com apps em que a própria interface é a prova, como finanças, fitness e produtividade. Deixe o recorte da interface grande o bastante para ser reconhecido; uma tela inteira encolhida para caber fica ilegível.

3. Ilustração ou arte principal

Jogos e apps de conteúdo costumam usar arte principal: personagens, uma cena ou uma ilustração de destaque com o logotipo no meio. As fileiras de recomendação de jogos colocam o gráfico ao lado de vídeos e capturas de tela, então o ponto focal centralizado importa ainda mais aqui. Garanta que o rosto dos personagens não fique nas bordas, onde pode ser cortado.

4. Quadro de capa do vídeo

Se você tem um vídeo de visualização, pense o gráfico de recursos como a capa dele: uma imagem forte com uma área vazia bem definida no meio para o botão de play. Evite colocar o título bem no centro, onde o botão vai cobri-lo.

Como fazer um gráfico de recursos

1. Crie uma tela de 1024 × 500 (ou 2048 × 1000 para trabalhar em 2×).
2. Marque uma área segura central com guias e mantenha texto, logotipo e interface dentro dela.
3. Escolha o fundo a partir da paleta do ícone, evitando branco, preto ou cinza-escuro puros.
4. Adicione no máximo uma linha de texto, em letras grandes, e confira a prévia com uns 300 px de largura.
5. Exporte sem transparência: JPEG, ou PNG com a transparência desativada.
6. Escreva o texto alternativo descrevendo o gráfico numa frase.
7. Envie pelo Play Console na página de detalhes principal do app e adicione versões localizadas para os idiomas em que o texto muda.

Qualquer ferramenta de design resolve. Se você já produz as capturas de tela do Play num gerador, normalmente faz sentido criar o gráfico de recursos no mesmo lugar para que as cores e a tipografia combinem. O nosso gerador de capturas de tela para a Play Store exporta o gráfico de recursos no tamanho certo junto com as capturas de celular e tablet, e o envio direto para o Google Play Console evita o vai e vem de exportar e enviar de novo. Muitas equipes também fazem isso no Figma ou no Canva; a especificação é a mesma.

O gráfico de recursos deve combinar com as capturas de tela?

Ele deve parecer da mesma família, não uma cópia. O Google recomenda usar elementos, estilos e paletas de cor parecidos ou complementares nos gráficos da sua página e, no mesmo fôlego, desaconselha duplicar mensagens. Na prática: mesmas cores e mesma fonte, mensagem diferente. Se a sua primeira captura de tela diz "Registre cada gasto automaticamente", o gráfico de recursos pode trazer a marca e uma ideia mais ampla, como "Seu dinheiro em ordem".

Para o lado das capturas de tela, os nossos guias sobre como fazer capturas de tela para a App Store e boas práticas para capturas de tela cobrem estrutura e textos dos títulos, e quase tudo vale para o Google Play também.

Resumindo

• Tamanho: 1024 × 500 px. Formato: JPEG ou PNG de 24 bits, sem alfa. Obrigatório para publicar.
• Aparece como capa do vídeo, em coleções de apps e anúncios em formato grande e nas fileiras de recomendação de jogos.
• Tudo o que importa vai no centro; as bordas são para o fundo.
• No máximo uma linha curta de texto grande, localizada onde ela muda.
• Nada de molduras de dispositivo, selos de loja, alegações de "#1" ou "Grátis" nem chamadas para ação.
• Combine com o estilo das capturas de tela, não com o texto delas.
• Teste variantes com os experimentos da página de detalhes do app quando a página já tiver tráfego. Se quiser fazer o mesmo com as capturas de tela, veja como fazer teste A/B das capturas de tela nas lojas.