Palette di colori per gli screenshot App Store
La maggior parte delle palette degli screenshot App Store fallisce allo stesso modo: sembrano bellissime su un monitor da 27 pollici e diventano un blob informe alla dimensione con cui l'App Store le mostra realmente. Il carosello si renderizza a piena risoluzione nella pagina del prodotto, ma a larghezza thumbnail nei risultati di ricerca e nelle sezioni "Simili a questo". Se la tua palette funziona solo a una di queste dimensioni, perdi conversioni all'altra.
I tre contesti di visualizzazione
Considerali come tre vincoli di design separati. Una palette vincente in uno può perdere in un altro.
- Dimensione intera (1290 × 2796 su iPhone). Il rendering nella pagina del prodotto. Dove gli utenti arrivano dopo aver toccato. Le transizioni sfumate sottili, il testo più fine e i colori stratificati complessi si leggono bene qui. La maggior parte dei designer testa solo questa dimensione.
- Thumbnail di ricerca (~300 × 650). I primi tre pannelli del carosello mostrati insieme alle icone delle app concorrenti nella ricerca App Store. I dettagli fini scompaiono. I blocchi di colore ad alto contrasto si leggono; i gradienti sottili si appiattiscono.
- Contesto adiacente. Il tuo screenshot non appare mai da solo nella ricerca. Le altre sette app attorno a te hanno le loro palette. Se tutti nella tua categoria usano toni caldi e anche tu usi toni caldi, il tuo screenshot si perde nel mucchio.
La regola dei cinque colori
Cinque colori è il limite indicativo. Un colore di sfondo dominante (o un gradiente tra due), un colore primario per il testo, un accento per l'enfasi, più i colori che compaiono dallo screenshot reale della tua app. Aggiungere un sesto colore di solito significa eliminarne uno altrove, non aggiungerne uno sopra.
Il motivo non è estetico: le thumbnail comprimono le informazioni visive in modo aggressivo, e una palette con troppi colori diventa una macchia indistinta. Quattro o cinque colori è la fascia in cui ogni colore rimane distinto a 200 px.
Contrasto: il WCAG AA non è opzionale
Il testo delle didascalie sullo sfondo del pannello dovrebbe rispettare il WCAG AA (4.5:1 per il corpo del testo, 3:1 per testo grande 24pt+). Non perché Apple lo controlli — non lo fa — ma perché a dimensione thumbnail qualsiasi cosa al di sotto dell'AA diventa letteralmente illeggibile. Usa uno strumento di controllo del contrasto sul colore finale della didascalia rispetto al colore finale dello sfondo prima di esportare.
Errore comune: testo grigio scuro su un gradiente grigio scuro leggermente più chiaro. Sembra sofisticato in Figma. Scompare completamente a larghezza thumbnail.
La convenzione di categoria come punto di partenza, non come regola
Guarda le prime 20 app nella tua categoria App Store. Annota i colori dominanti delle loro palette. Quella è la convenzione di categoria: la palette che gli utenti associano a "app credibile in questa categoria". Puoi seguirla (rischio minore, differenziazione minore) o ignorarla deliberatamente (rischio maggiore, differenziazione maggiore se funziona).
Rompere la convenzione funziona quando hai un motivo specifico. La categoria di Notion (produttività) puntava ai pastelli vivaci nel 2022; Notion è andato verso un quasi-monocromo con calore sottile e ha trasmesso più serietà. La categoria di Headspace (benessere mentale) era affollata di pastelli morbidi; il gradiente arancione intenso di Headspace si distingueva senza risultare aggressivo. La sequenza sicura è: prima adattati, poi rompi: adatta per il primo lancio, rompi solo dopo aver dati di installazione con cui confrontarti.
L'audit "adiacente nella ricerca"
Prima di pubblicare, fai questo: cerca sull'App Store due o tre keyword su cui la tua app è posizionata (o vuole posizionarsi). Guarda la striscia di screenshot sotto l'app in evidenza per quelle keyword. La tua palette si distinguerà dalle app intorno a te o si fonderà con esse?
Questo è un audit di trenta secondi e la maggior parte dei team lo salta. Una palette che sembrava unica da sola può essere lo stesso gradiente blu-viola di cinque concorrenti sopra e sotto di te nella ricerca. La soluzione è di solito un singolo cambio di colore d'accento.
Scuro, chiaro o nessuno dei due
Scegli una posizione netta: sfondi prevalentemente scuri, prevalentemente chiari, o una famiglia di gradienti coerente tra i pannelli. Mescolare pannelli scuri e chiari nello stesso carosello è l'errore più comune: sembra un design senza un responsabile.
Vedi dark mode vs light mode per capire quando ciascuno vince per categoria. Il TL;DR: il dark vince in giochi, musica, foto/video, AI; il light vince in produttività, istruzione, benessere; per tutto il resto è un'incognita e decide il brand.
Colori e localizzazione
I colori hanno significati diversi nelle varie lingue e culture. Il rosso è positivo nei mercati di lingua cinese (prosperità), più negativo in gran parte dell'Europa. Il bianco è funebre in gran parte dell'Asia orientale. Il verde acceso è "vai" in certi contesti e "invidia" in altri. Per la maggior parte delle app questi slittamenti sono troppo sottili per superare la coerenza del brand: scegli una palette e pubblicala globalmente. Preoccupati di palette per locale solo se il tuo brand è uno per cui il simbolismo del colore è una componente significativa del posizionamento (lusso, benessere, finanza) e hai dati su cui agire.
Cosa fare questa settimana
- Controlla i tuoi screenshot attuali a 200 px di larghezza. Tutto ciò che non si legge a quella dimensione va rivisto.
- Verifica il contrasto WCAG AA per ogni didascalia rispetto allo sfondo del suo pannello.
- Cerca le tue tre keyword principali e cattura il contesto circostante. La tua palette si distingue?
- Se stai pubblicando un nuovo design, limita la palette a cinque colori massimo. Aggiungerne un sesto significa toglierne uno.