Screenshot panoramici per l'App Store: progettare un set continuo

Gli screenshot panoramici per l'App Store sono un set progettato come un'unica immagine larga e poi tagliato in screenshot separati, così che uno sfondo, una forma o un dispositivo sembrino proseguire da uno screenshot all'altro mentre le persone scorrono. Funzionano quando ogni pezzo regge ancora da solo come screenshot, perché l'App Store mostra uno spazio tra gli screenshot e spesso ne mostra uno o pochi alla volta. Il file è semplice da impostare: un canvas largo esattamente N screenshot, tagliato a larghezze in pixel precise.

In questo post vediamo come appare davvero un set continuo nei risultati di ricerca e sulla pagina prodotto, come progettare attraverso gli stacchi, come costruire e tagliare il file, e quando un panorama non vale la fatica.

Come si vedono gli screenshot panoramici sull'App Store

Lo stesso set compare in tre contesti diversi, e in ognuno un panorama si comporta in modo diverso.

Le indicazioni di Apple sulla pagina prodotto dicono che nei risultati di ricerca compaiono da uno a tre screenshot, a seconda dell'orientamento, quando non c'è un'anteprima dell'app. Un set orizzontale mostra un solo screenshot in ricerca, quindi lì un panorama orizzontale non si vede mai come panorama. Abbiamo parlato più a fondo del layout dei risultati di ricerca in cosa mettere nel primo screenshot dell'App Store.

Progettare attraverso lo stacco

Lo stacco è il bordo dove finisce uno screenshot e inizia il successivo. Sulla pagina prodotto lì c'è uno spazio visibile, quindi tutto ciò che attraversa uno stacco si vede con una striscia mancante nel mezzo. Progetta tenendo conto di quello spazio, invece di fare finta che non ci sia.

Cosa può attraversare uno stacco

• Sfondi e campiture di colore, come un gradiente che cambia tonalità lungo il set o la linea di un orizzonte.
• Forme e linee semplici: un nastro, un'onda, un percorso, un grande cerchio. L'occhio riempie lo spazio senza fatica.
• Elementi secondari dell'interfaccia, come una scheda fluttuante o la linea di un grafico che porta allo screenshot successivo.
• Un dispositivo inclinato, ma solo se la parte su ciascun lato sembra comunque voluta. Un telefono tagliato esattamente a metà raramente ci riesce.

Cosa non dovrebbe mai attraversare uno stacco

• Le didascalie. Una frase spezzata su due screenshot è illeggibile nella vista a schermo intero e nelle versioni localizzate.
• Volti, loghi e l'interfaccia chiave che vuoi far leggere.
• Qualsiasi cosa che debba vedersi nel 5% circa più esterno di un pezzo. Lascia un margine di sicurezza su entrambi i lati di ogni stacco, perché gli angoli sono arrotondati e lo spazio nasconde il bordo.

Fai in modo che ogni pezzo regga da solo

Un buon test: esporta il set e guarda ogni screenshot da solo, a dimensione piena. Ognuno dovrebbe avere una didascalia, un pezzo chiaro di interfaccia reale dell'app e una composizione che sembri finita anche con gli elementi continui tagliati ai bordi. La linea guida 2.3.3 di Apple vale comunque per ogni pezzo: gli screenshot “dovrebbero mostrare l'app in uso”, quindi un pezzo che è solo la prosecuzione di una grafica di sfondo è debole e anche a rischio rifiuto. Elenchiamo le altre linee guida che bloccano gli screenshot in perché Apple rifiuta gli screenshot dell'App Store.

Dosa il panorama

I set continui funzionano meglio quando la continuità è discreta e il contenuto si fa sentire. Uno schema che di solito si legge bene: gli screenshot da 1 a 3 condividono un elemento di collegamento forte (un'unica pennellata di colore o un solo dispositivo a cavallo tra 1 e 2), e dal 4 in poi si mantiene lo stesso sistema di sfondo con collegamenti più leggeri. Così la striscia in ricerca sembra voluta e gli screenshot successivi restano facili da sostituire.

Impostare il file: un canvas largo, tagliato in riquadri precisi

1. Scegli la dimensione di export e il numero di screenshot

La larghezza del canvas è la larghezza dello screenshot moltiplicata per il numero di screenshot del panorama. L'altezza è quella dello screenshot. Le dimensioni in pixel devono corrispondere esattamente a una dimensione accettata; guarda il nostro riferimento sulle dimensioni degli screenshot e le specifiche degli screenshot di Apple.

I set per iPhone, iPad e Google Play hanno proporzioni diverse, quindi ognuno ha bisogno del suo panorama. Se scali un canvas largo a un'altra altezza, sposti tutti gli stacchi.

2. Segna gli stacchi prima di progettare

Aggiungi delle guide a ogni multiplo della larghezza dello screenshot (1290, 2580, 3870, 5160 per il primo esempio) e un margine di sicurezza su ogni lato. In Figma la versione più semplice è una fila di frame alla dimensione di export, accostati bordo a bordo senza spazio, con la grafica continua in un gruppo che li attraversa tutti; ogni frame ritaglia la sua parte. Il nostro post su come creare screenshot per l'App Store in Figma spiega frame e impostazioni di export.

3. Taglia a larghezze precise

Se progetti su un unico canvas largo invece che su frame separati, taglialo in riquadri della dimensione esatta dello screenshot. Con ImageMagick:

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

Il risultato sono shot-00.png, shot-01.png e così via, ognuno esattamente da 1290 × 2796. Se la larghezza del canvas non è un multiplo esatto, l'ultimo riquadro esce più stretto e App Store Connect lo rifiuterà al caricamento, quindi controlla prima la dimensione del canvas. Appiattisci i file (niente trasparenza) prima di caricarli: Apple non accetta immagini con canale alfa.

4. Fai un'anteprima con gli spazi

Prima di pubblicare, metti i file esportati uno accanto all'altro con uno spazio tra loro e gli angoli arrotondati, più o meno alla dimensione di un risultato di ricerca. Così vedi il panorama come lo vedranno davvero le persone, e spesso è una sorpresa rispetto al canvas senza interruzioni su cui l'hai progettato.

Errori comuni con i set panoramici

• Progettare solo sul canvas continuo. Il set sembra perfetto come immagine unica nello strumento di design e rotto nello store, perché gli spazi non sono mai stati visti in anteprima.
• Un dispositivo spezzato a metà. Mezzo telefono nello screenshot 2 e mezzo nel 3 sembrano due errori di ritaglio quando li apri da soli.
• Didascalie che dipendono l'una dall'altra. “Pianifica la tua settimana” seguito da “...e rispetta il piano” funziona solo se le vedi insieme, cosa che nella vista a schermo intero non succede.
• Troppo sfondo, troppa poca app. La grafica continua si prende così tanto spazio che l'interfaccia si riduce a una miniatura dentro una miniatura.
• Dimenticarsi degli altri set. Il panorama per iPhone è finito, mentre i set per iPad e Google Play sono ritagli frettolosi con gli stacchi nei punti sbagliati.
• Pezzi sbagliati di qualche pixel. Un canvas da 6448 px invece di 6450 px lascia l'ultimo pezzo della dimensione sbagliata, e App Store Connect lo rifiuta al caricamento.

Quando non fare un set panoramico

Un design continuo non è automaticamente migliore. Lascialo perdere, o limitalo ai primi tre screenshot, quando:

• Pensi di testare o riordinare spesso gli screenshot. Spostare lo screenshot 3 in prima posizione per un test di Ottimizzazione della pagina prodotto rompe il panorama. Gli screenshot indipendenti sono molto più facili da testare.
• Usi le pagine prodotto personalizzate. Ogni pagina prodotto personalizzata spesso usa un ordine o un sottoinsieme diverso di screenshot, e un unico panorama non si adatta senza riprogettarlo.
• Localizzi in molte lingue. La lunghezza delle didascalie cambia da lingua a lingua, e ogni elemento continuo va controllato in ogni lingua.
• Il tuo set è orizzontale. In ricerca compare un solo screenshot orizzontale, quindi l'effetto si vede solo sulla pagina prodotto.
• Il tuo primo screenshot deve fare molto lavoro da solo. Se il panorama indebolisce lo screenshot 1 (interfaccia più piccola, un dispositivo tagliato, una didascalia spinta di lato), è la prima impressione a pagare il prezzo dell'effetto.
• Apri con un'anteprima dell'app. Il video prende la prima posizione, quindi la striscia in ricerca inizia con l'anteprima invece che con il pannello che hai progettato.

In breve

• Tratta gli screenshot da 1 a 3 come il pannello che le persone vedono in ricerca; tutto il resto è un extra
• Fai attraversare gli stacchi solo a sfondi, forme ed elementi secondari
• Tieni didascalie, volti e interfaccia chiave dentro ogni pezzo, con un margine di sicurezza
• Controlla ogni pezzo da solo a dimensione piena: didascalia, interfaccia reale, composizione finita
• Larghezza del canvas = larghezza dello screenshot × numero di screenshot, con canvas separati per ogni dispositivo e store
• Taglia a larghezze in pixel precise, appiattisci e fai un'anteprima con gli spazi prima di caricare

Per tutto il processo, dalla storia al caricamento, leggi come creare screenshot per l'App Store.