erberkk/store-screenshots

Captures d'écran du store

Objectif

Des captures d'écran qui convertissent, fidèles à l'application, et adaptées à chaque emplacement requis par les stores, produites par un script afin de pouvoir être régénérées en quelques minutes lors d'un changement d'interface.

Prérequis

• Une version dont l'interface est finalisée pour cette release.
• Un harnais de capture dans l'application (tests golden/intégration Flutter, XCUITest, tests de capture d'écran Espresso/Compose, ou Fastlane snapshot) capable d'afficher les écrans avec des données de démonstration déterministes.
• Node.js 18+ et Chrome/Chromium pour le rendu (npm i dans scripts/).
• Identifiants API (accounts-and-tax) pour le téléchargement.

Principes

1. Captures réelles, pas de maquettes. Chaque écran de téléphone à l'intérieur d'un cadre est une capture de l'application publiée. Une interface redessinée ou « améliorée » induit en erreur (ligne directrice 2.3) et devient obsolète.
2. Les chiffres doivent correspondre à l'application. Si un cadre affiche « 1 850 pas » ou « 12 min », l'application doit produire exactement cela pour les données de démonstration. Générez les données de démonstration dans le harnais et vérifiez-les dans le même test.
3. Si une capture d'écran montre quelque chose que l'application ne fait pas, corrigez l'un des deux. Soit construisez la fonctionnalité, soit modifiez le cadre. Ne publiez jamais l'écart.
4. Aucune autre plateforme dans les cadres. Pas de barres d'état/navigation Android sur iOS, pas d'interface Apple ou « App Store » sur Play (2.3.10).
5. Conservez le même ordre des cadres dans chaque langue et sur chaque appareil.

Matrice d'appareils

Tableau complet avec tailles logiques et identifiants API : references/device-matrix.md. Résumé (vérifiez sur Spécifications des captures d'écran Apple et Ressources de prévisualisation Play) :

Emplacement	Pixels (portrait)	Requis ?
iPhone large Dynamic Island (6,9")	1320×2868 (aussi 1290×2796, 1260×2736)	Recommandé jeu principal
iPhone Dynamic Island moyen	1206×2622 ou 1179×2556	Au moins une capture d'écran requise
Écran externe iPhone Duo	1398×2034	Requis à partir d'avril 2027 pour les applications construites avec le SDK iOS 27.1 ou ultérieur ; ajoute le badge « optimisé pour iPhone Duo »
Écran interne iPhone Duo	2007×2853	Idem que l'écran externe
iPad 13"	2064×2752 (ou 2048×2732)	Requis uniquement si l'application tourne sur iPad (pas pour les applications iPhone uniquement)
Téléphone Play	e.g. 1080×1920 ou 1080×2160 (côtés 320–3840 px, grand côté ≤ 2× petit côté)	≥ 2 captures d'écran pour publier ; ≥ 4 à ≥ 1080 px recommandé
Tablette Play 7" et 10"	1080–7680 px, 9:16 ou 16:9	Recommandé si l'application prend en charge les tablettes
Image de fonctionnalité Play	1024×500	Requis
Icône Play	512×512, PNG 32 bits	Requis

Apple : jusqu'à 10 par taille ; PNG ou JPEG ; pas de canal alpha ni de transparence. Play : jusqu'à 8 par type d'appareil ; JPEG ou PNG 24 bits (pas d'alpha).

Actifs créatifs de la page produit App Store (nouvel App Store Connect, onglet « En-tête et résultats de recherche ») :

• En-tête : une image large en haut de la page produit, 3840×1646 ou 5244×2950. Optionnel (la soumission passe sans).
• Résultats de recherche : 5244×2950, 3840×2560 ou 1920×1280 ; si vide, les captures d'écran et les aperçus sont utilisés.
• Téléchargez via la page de version ou la Bibliothèque d'actifs (Télécharger des actifs créatifs), puis sélectionnez-la avec Parcourir les actifs. Les actifs téléchargés dans la bibliothèque y restent pour une utilisation ultérieure.
• Note de conception : le store superpose l'icône, le nom et le bouton Obtenir sur une partie de l'en-tête, alors vérifiez le résultat dans l'aperçu de la console.
• Ces emplacements sont verrouillés pendant que la version est en attente de révision. Ajoutez-les avant de soumettre.

Procédure

1. Planifiez l'histoire (APPROBATION du storyboard)

Écrivez un storyboard de 5 à 8 cadres : un titre (≤ 6 mots), une ligne d'accompagnement, une capture chacun. Mise en page « panorama » optionnelle (ce que fait le modèle fourni) : les cadres sont des tranches d'une grande toile, donc les formes se poursuivent à travers les bords des cadres. Quelle que soit la mise en page, toute offre présentée (démarrage gratuit, essai) doit être vraie.

2. Capturez des écrans réels

Capturez chaque écran à la taille logique × ratio de pixels de l'appareil cible, afin que le texte et la disposition soient exactement ce que cet appareil affiche. Exemple Flutter (test widget/golden) :

// iPhone 6,9" : 440 x 956 points logiques @3x = 1320 x 2868 px
tester.view.physicalSize = const Size(1320, 2868);
tester.view.devicePixelRatio = 3.0;
await tester.pumpWidget(App(demo: DemoData.storeShots(locale: 'en')));
await tester.pumpAndSettle();
expect(find.text('1,850 steps'), findsOneWidget);       // le nombre dans le titre est réel
await expectLater(find.byType(App), matchesGoldenFile('captures/en/iphone69/01_home.png'));

• Chargez les polices dans les tests (sinon la police de test affiche des carrés).
• Horloge fixe, données de démonstration fixes, pas de réseau.
• Masquez les bannières de débogage ; définissez la barre d'état sur un état propre (ou recadrez-la et n'en dessinez aucune).
• Capturez chaque langue séparément ; ne placez jamais une interface anglaise à l'intérieur d'un cadre localisé.

3. Composez les cadres

Modèle : templates/panorama.html, moteur de rendu : scripts/render.mjs.

cd scripts && npm i
node render.mjs ../templates/frames.example.json out/

Le moteur de rendu dispose tous les cadres sur une seule toile (largeur = cadres × largeur du cadre), charge les captures, attend les polices, et capture chaque tranche de cadre à la taille de pixel exacte, pour chaque appareil dans la configuration. Il rend également l'image de fonctionnalité 1024×500.

4. Vérifiez

node check-images.mjs out/

Échoue en cas de : dimensions incorrectes pour l'appareil du dossier, présence d'un canal alpha (type de couleur PNG 4/6 ou chunk tRNS), plus de 10 (Apple) / 8 (Play) fichiers, lacunes dans la numérotation. Ensuite, regardez chaque image à 100 % de zoom : texte coupé, interface d'autres plateformes, chaînes de substitution, chiffres obsolètes.

5. Téléchargez via les API (APPROBATION avant de remplacer les jeux en direct)

• App Store Connect — scripts/upload-asc.mjs : trouvez le appStoreVersion modifiable → ses appStoreVersionLocalizations → appScreenshotSets par screenshotDisplayType → supprimez les anciennes captures d'écran → réservez (POST /v1/appScreenshots avec fileName, fileSize) → téléchargez les parties depuis uploadOperations → validez (PATCH avec uploaded: true et le MD5 sourceFileChecksum) → définissez l'ordre sur la relation appScreenshots du jeu. Documentation : Téléchargement d'actifs.
• Google Play — scripts/upload-play.mjs : edits.insert → edits.images.deleteall par langue et type d'image → edits.images.upload dans l'ordre (phoneScreenshots, sevenInchScreenshots, tenInchScreenshots, featureGraphic) → edits.commit. Documentation : edits.images.upload.

Les deux scripts sont en test à blanc par défaut ; définissez DRY_RUN=0 pour écrire.

6. Relisez

Listez les actifs téléchargés par langue et appareil (les deux API) et comparez le nombre et l'ordre avec le dossier local. Apple traite les téléchargements de manière asynchrone ; attendez que chaque actif signale un état de livraison COMPLETE.

Points de décision nécessitant une approbation humaine

Storyboard et titres, direction visuelle finale, remplacement d'un jeu de captures d'écran en direct, validation de la modification Play.

Vérification

• check-images.mjs passe ; chaque emplacement Apple requis a au moins une image ; Play a des captures d'écran de téléphone et l'image de fonctionnalité.
• L'ordre de relecture correspond ; aucun état d'actif en échec.
• Chaque nombre et fonctionnalité dans les cadres a été vérifié par rapport à la version.

Pièges courants

• Téléchargement uniquement du 6,9" et oubli de l'emplacement Dynamic Island moyen requis.
• PNG exportés avec un canal alpha (courant avec les outils de conception et les navigateurs sans tête avec arrière-plans transparents — définissez toujours un arrière-plan opaque pour le corps).
• Utilisation de l'image 6,9" 1320×2868 sur Play : son rapport hauteur/largeur dépasse la limite 2:1 de Play ; rendez une taille spécifique à Play.
• Captures d'écran iPad pour une application iPhone uniquement (pas nécessaire) — ou les manquer lorsque l'application tourne sur iPad.
• Un cadre montrant une ligne de paramètres ou un résultat que l'application n'a pas.
• Titre traduit mais la capture est encore en anglais.