Capturas de tela panorâmicas na App Store: como criar um conjunto contínuo

Capturas de tela panorâmicas na App Store são um conjunto desenhado como uma única imagem larga e fatiado em capturas separadas, de modo que um fundo, uma forma ou um dispositivo parece continuar de uma captura para a próxima conforme a pessoa desliza. Elas funcionam quando cada fatia ainda se sustenta sozinha como captura, porque a App Store mostra espaços entre as capturas e muitas vezes exibe uma ou poucas de cada vez. A configuração do arquivo é simples: um canvas com exatamente N capturas de largura, fatiado em larguras exatas em pixels.

Este post mostra como um conjunto contínuo aparece de verdade nos resultados de busca e na página do produto, como desenhar por cima das emendas, como montar e fatiar o arquivo e quando um panorama não compensa.

Como as capturas panorâmicas aparecem na App Store

O mesmo conjunto aparece em três contextos diferentes, e um panorama se comporta de um jeito diferente em cada um.

A orientação da Apple sobre a página do produto diz que de uma a três capturas aparecem nos resultados de busca quando não há prévia do app, dependendo da orientação. Um conjunto em paisagem mostra só uma captura na busca, então um panorama em paisagem nunca é visto como panorama na busca. Falamos do layout do resultado de busca com mais detalhes em o que colocar na sua primeira captura de tela da App Store.

Desenhando por cima da emenda

A emenda é a borda onde uma captura termina e a próxima começa. Na página do produto existe um espaço visível ali, então tudo o que atravessa uma emenda aparece com um pedaço faltando no meio. Desenhe pensando nesse espaço em vez de fingir que ele não existe.

O que pode atravessar uma emenda

• Fundos e áreas de cor, como um degradê que muda de tom ao longo do conjunto ou uma linha do horizonte.
• Formas e linhas simples: uma fita, uma onda, um caminho, um círculo grande. O olho completa o espaço com facilidade.
• Elementos secundários da interface, como um card flutuante ou a linha de um gráfico que leva para a próxima captura.
• Um dispositivo inclinado, mas só se a parte de cada lado ainda parecer intencional. Um celular cortado certinho ao meio quase nunca parece.

O que nunca deve atravessar uma emenda

• Legendas. Uma frase dividida entre duas capturas fica ilegível na tela cheia e nas versões localizadas.
• Rostos, logos e a interface principal que você quer que as pessoas leiam.
• Qualquer coisa que precise ser vista e esteja mais ou menos nos 5% externos de uma fatia. Deixe uma margem de segurança dos dois lados de cada emenda, já que os cantos são arredondados e o espaço esconde a borda.

Faça cada fatia se sustentar sozinha

Um bom teste: exporte o conjunto e olhe cada captura sozinha, em tamanho real. Cada uma deve ter uma legenda, um trecho claro de interface real do app e uma composição que pareça acabada mesmo com os elementos contínuos cortados nas bordas. A diretriz 2.3.3 da Apple continua valendo para cada fatia: as capturas "devem mostrar o app em uso", então uma fatia que é só a continuação de um gráfico de fundo é fraca e ainda corre risco de rejeição. Listamos as outras diretrizes que pegam capturas de tela em por que a Apple rejeita capturas de tela da App Store.

Dê ritmo ao panorama

Conjuntos contínuos funcionam melhor quando a continuidade é discreta e o conteúdo chama atenção. Um padrão que costuma funcionar bem: as capturas 1 a 3 compartilham um elemento de conexão forte (uma única faixa de cor ou um dispositivo ocupando a 1 e a 2), e da captura 4 em diante o mesmo sistema de fundo continua, com conexões mais leves. Assim a faixa na busca parece pensada, e as capturas seguintes continuam fáceis de trocar.

Configuração do arquivo: um canvas largo, fatiado em quadros exatos

1. Escolha o tamanho de exportação e a quantidade

A largura do canvas é a largura da captura multiplicada pelo número de capturas do panorama. A altura é a altura da captura. Os tamanhos em pixels precisam bater exatamente com um tamanho aceito; veja nossa referência de tamanhos de capturas de tela e as especificações de capturas de tela da Apple.

Os conjuntos de iPhone, iPad e Google Play têm proporções diferentes, então cada um precisa do seu próprio panorama. Redimensionar um canvas largo para outra altura desloca todas as emendas.

2. Marque as emendas antes de desenhar

Adicione guias em cada múltiplo da largura da captura (1290, 2580, 3870, 5160 no primeiro exemplo) e uma margem de segurança de cada lado. No Figma, a versão mais simples é uma fileira de frames no tamanho de exportação, encostados uns nos outros sem espaço, com a arte contínua em um grupo que passa por cima deles; cada frame recorta a sua parte. Nosso post sobre como fazer capturas de tela da App Store no Figma explica frames e configurações de exportação.

3. Fatie em larguras exatas

Se você desenhar em um canvas largo em vez de frames separados, fatie em blocos com o tamanho exato da captura. Com o ImageMagick:

magick panorama.png -crop 1290x2796 +repage +adjoin shot-%02d.png

Isso gera shot-00.png, shot-01.png e assim por diante, cada um com exatamente 1290 × 2796. Se a largura do canvas não for um múltiplo exato, o último bloco sai mais estreito e o App Store Connect rejeita no upload, então confira o tamanho do canvas antes. Achate as imagens geradas (sem transparência) antes de enviar; a Apple não aceita imagens com canal alfa.

4. Visualize com os espaços

Antes de publicar, coloque os arquivos exportados lado a lado com um espaço entre eles e cantos arredondados, mais ou menos no tamanho de um resultado de busca. Assim você vê o panorama do jeito que as pessoas vão ver de verdade, o que muitas vezes surpreende em comparação com o canvas sem emendas em que você desenhou.

Erros comuns em capturas panorâmicas

• Desenhar só no canvas sem emendas. O conjunto fica ótimo como uma imagem só na ferramenta de design e quebrado na loja, porque os espaços nunca foram visualizados.
• Um dispositivo cortado ao meio. Meio celular na captura 2 e a outra metade na captura 3 parecem dois erros de recorte quando qualquer uma delas é aberta sozinha.
• Legendas que dependem uma da outra. "Planeje sua semana" seguido de "...e cumpra o plano" só funciona se as duas forem vistas juntas, e na tela cheia elas não são.
• Fundo demais, app de menos. O gráfico contínuo ocupa tanto espaço que a interface encolhe até virar uma miniatura dentro de outra miniatura.
• Esquecer os outros conjuntos. O panorama do iPhone fica pronto, e os conjuntos de iPad e Google Play viram recortes apressados dele, com as emendas nos lugares errados.
• Fatias com alguns pixels de diferença. Um canvas de 6448 px em vez de 6450 px deixa a última fatia no tamanho errado, e o App Store Connect rejeita no upload.

Quando não fazer um conjunto panorâmico

Um design contínuo não é automaticamente melhor. Pule essa ideia, ou limite o panorama às três primeiras capturas, quando:

• Você pretende testar ou reordenar as capturas com frequência. Mover a captura 3 para a posição 1 em um teste de Otimização da página de produto quebra o panorama. Capturas independentes são muito mais fáceis de testar.
• Você usa páginas de produto personalizadas. Cada página de produto personalizada costuma usar uma ordem ou um subconjunto diferente de capturas, o que um panorama único não comporta sem ser redesenhado.
• Você localiza para muitos idiomas. O tamanho das legendas muda de idioma para idioma, e cada elemento contínuo precisa ser conferido em cada localidade.
• Seu conjunto é em paisagem. Só uma captura em paisagem aparece na busca, então o efeito só é visível na página do produto.
• Sua primeira captura precisa trabalhar muito sozinha. Se o panorama deixa a captura 1 mais fraca (interface menor, um dispositivo cortado, uma legenda empurrada para o lado), é a primeira impressão que paga pelo efeito.
• Você abre com uma prévia do app. O vídeo fica na primeira posição, então a faixa na busca começa pela prévia e não pelo painel que você desenhou.

Resumindo

• Trate as capturas 1 a 3 como o painel que as pessoas veem na busca; o resto é bônus
• Deixe só fundos, formas e elementos secundários atravessarem as emendas
• Mantenha legendas, rostos e a interface principal dentro de cada fatia, com margem de segurança
• Confira cada fatia sozinha em tamanho real: legenda, interface real, composição acabada
• Largura do canvas = largura da captura × quantidade, com canvas separados por dispositivo e por loja
• Fatie em larguras exatas em pixels, achate e visualize com os espaços antes de enviar

Para o processo completo, da história ao upload, veja como fazer capturas de tela para a App Store.