Como Localizar Capturas de Ecrã da App Store em mais de 30 Idiomas

Porquê localizar capturas de ecrã?

A própria investigação da Apple para programadores conclui que os utilizadores têm uma probabilidade significativamente maior de instalar uma aplicação quando a página da App Store está no seu idioma nativo. O mesmo é documentado na checklist de localização da Google: páginas localizadas convertem mais e classificam-se melhor na pesquisa. Traduzir apenas strings de metadados — título, subtítulo, palavras-chave — sem traduzir as capturas de ecrã é a meia-medida mais comum, e deixa conversão real em cima da mesa porque o ativo principal continua em inglês.

O bloqueio para a maioria das equipas é operacional, não estratégico. Traduzir um conjunto de cinco capturas de ecrã para 30 idiomas manualmente significa 150 ficheiros de design, 150 ciclos de revisão e 150 oportunidades para um erro tipográfico. A solução é tratar as capturas de ecrã como qualquer outra UI localizada: chaves no código, texto num TMS, layout renderizado por um passo de build.

Como deve estruturar as chaves de tradução?

Use a mesma estrutura de chaves das suas traduções dentro da aplicação. Agrupe as chaves por ID da captura de ecrã e depois por papel do elemento:

{
  "screenshots": {
    "01_home": {
      "headline": "Build faster.",
      "subhead": "Ship every store size in one API call.",
      "badge": "New"
    },
    "02_pricing": {
      "headline": "Plans for every team.",
      "cta": "Start free"
    },
    "03_api": {
      "headline": "Built for developers.",
      "subhead": "REST, Fastlane, and GitHub Actions out of the box."
    }
  }
}

Depois o ficheiro alemão correspondente:

{
  "screenshots": {
    "01_home": {
      "headline": "Schneller bauen.",
      "subhead": "Alle Store-Formate mit einem API-Call.",
      "badge": "Neu"
    },
    "02_pricing": {
      "headline": "Pläne für jedes Team.",
      "cta": "Kostenlos starten"
    }
  }
}

As chaves nunca mudam. Apenas os valores mudam. Os tradutores trabalham na coluna de valores no seu TMS sem tocar no template do Screenshots.live.

Que códigos de locale deve usar?

Use BCP-47 de forma consistente. Use apenas o subtag de idioma quando não há variação regional (de, fr, ja) e adicione a região apenas quando as variantes divergem de forma significativa (en-GB vs en-US, pt-BR vs pt-PT, zh-Hans vs zh-Hant). Tanto a Apple como a Google aceitam BCP-47, embora os seus códigos internos difiram ligeiramente — consulte a lista de locales da App Store Connect e os idiomas suportados da Google Play. Mapeie-os uma vez no seu script de CI.

Como distribui renderizações entre locales?

A API recebe um ID de template, um catálogo de tradução e um array de locales. Devolve um PNG renderizado por locale por dispositivo:

curl -X POST https://api.screenshots.live/v1/renders \
  -H "Authorization: Bearer $SCREENSHOTSLIVE_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "tpl_app_release_v3",
    "locales": ["en", "de", "es", "fr", "pt-BR", "it", "nl", "ja", "ko", "zh-Hans", "ar", "he"],
    "devices": ["iphone-6.7", "iphone-6.1", "ipad-12.9", "phone-android"],
    "translations": {
      "en": "@translations/en.json",
      "de": "@translations/de.json",
      "es": "@translations/es.json"
    }
  }'

Nos bastidores, o renderizador paraleliza por locale e por dispositivo. Uma renderização de 12 locales × 4 dispositivos — 48 ficheiros PNG — normalmente termina em menos de 90 segundos. Veja a documentação de renderização da API para a estrutura completa do pedido.

Como lida com idiomas da direita para a esquerda?

Árabe (ar), hebraico (he), persa (fa) e urdu (ur) precisam que todo o layout seja espelhado — alinhamento de texto, posições de imagem, ícones de seta, e até a ordem de grupos de múltiplos elementos. Espelhar apenas parcialmente (apenas inverter o texto mas não o layout) parece errado para leitores nativos e prejudica a credibilidade.

No Screenshots.live, marque o template com direction: "auto" e o renderizador inverte o layout, alinhamento de texto e chevrons decorativos automaticamente ao renderizar locales RTL. Substitua elementos individuais com direction: "ltr" quando algo deve permanecer da esquerda para a direita (um número de telefone, um URL, um bloco de código).

E quanto a substituições de texto por locale?

Alguns idiomas simplesmente não cabem na mesma caixa de legenda. Os substantivos compostos alemães podem ser 40% mais longos do que em inglês; o japonês e o chinês podem ser 50% mais curtos. Permita substituições de texto por locale sem duplicar o template:

{
  "screenshots.01_home.headline": {
    "en": "Build faster.",
    "de": "Schneller bauen.",
    "fi": "Rakenna nopeammin.",
    "ja": "もっと速く。"
  },
  "screenshots.01_home.subhead": {
    "en": "Ship every store size in one API call.",
    "de": "Alle Formate mit einem Aufruf.",
    "ja": "ワンコールで全サイズ対応。"
  }
}

E quanto a tipos de letra e glifos CJK?

Tipos de letra latinos (Inter, SF Pro, Roboto) muitas vezes não têm glifos CJK, cirílicos, devanágari ou árabes — o texto é renderizado como caixas de tofu. Configure fallbacks de tipos de letra por escrita:

• Latino / Cirílico / Grego: Inter, SF Pro, Roboto
• CJK (Japonês / Coreano / Chinês): Noto Sans CJK
• Árabe / Persa / Urdu: Noto Sans Arabic, IBM Plex Sans Arabic
• Devanágari (Hindi): Noto Sans Devanagari
• Tailandês: Noto Sans Thai, Sarabun

A família Noto cobre todas as escritas suportadas pela Apple e Google. Defina-a como uma cadeia de fallback no template — o renderizador escolhe o tipo de letra correto por code point, sem intervenção manual.

Como faz QA de layouts em escala?

A revisão manual de 30 locales não é escalável. Automatize os modos de falha óbvios:

• Overflow de texto: renderize a um quarto da resolução, faça OCR do resultado, compare com a string de origem. Discrepâncias significam que o texto foi cortado.
• Glifos em falta: conte caixas de tofu no PNG renderizado através de um modelo de visão ou de um histograma de pixéis no caractere de substituição Unicode.
• Traduções vazias: falhe o build se algum locale tiver mais de 5% de chaves em falta em comparação com o inglês.
• Limites de comprimento: defina um limite rígido de comprimento por chave. Se a tradução alemã o ultrapassar, falhe o build em vez de deixar o overflow ser publicado.

Como carrega capturas de ecrã por locale?

Tanto a App Store Connect como a Google Play aceitam capturas de ecrã por locale. O Fastlane deliver lê de fastlane/screenshots/<locale>/ e o Fastlane supply lê de fastlane/metadata/android/<locale>/images/phoneScreenshots/. Mapeie a saída do seu renderizador para esses caminhos e o resto é apenas fastlane deliver / fastlane supply --skip_upload_apk.

O que deve fazer a seguir?

Combine isto com o nosso guia de automação CI/CD para que a localização corra em cada lançamento. Use a funcionalidade de suporte multi-plataforma para distribuir para as lojas iOS, Android e web a partir do mesmo catálogo.