Guida · Design

Rapporti d'aspetto e safe area.

TL;DR. Gli screenshot iPhone moderni hanno un rapporto d'aspetto di circa 9:19,5. L'App Store arrotonda gli angoli con un raggio di circa 18 px alla risoluzione di upload. Tieni il testo critico ad almeno 80 px dalla cima e 60 px dai bordi. Le didascalie si leggono meglio nel terzo superiore del pannello.

Rapporti d'aspetto iPhone

I rapporti d'aspetto reali per le classi iPhone moderne:

6.9" (16 Pro Max): 1320 × 2868 = 2,173 (≈ 19,5:9)
6.7" (15 Pro Max, 15 Plus, 14 Plus, 13 Pro Max, 12 Pro Max): 1290 × 2796 = 2,167
6.1" (16, 15, 14, 13, 12, 11): 1170 × 2532 = 2,164
5.5" (8 Plus, 7 Plus, 6s Plus): 1242 × 2208 = 1,778 (16:9)

La classe 5.5" è l'eccezione — i dispositivi più vecchi usavano il 16:9. Se stai progettando per entrambi, ancora il contenuto critico alla striscia verticale centrale così resta visibile in entrambi i rapporti.

Safe area

L'App Store renderizza gli screenshot con angoli arrotondati (che corrispondono alla cornice del dispositivo) e può sovrapporre metadati dell'app in alcune posizioni del carosello. In pratica:

80 px superiori possono essere tagliati dagli overlay della status bar o dal raggio degli angoli.
60 px dal bordo su ogni lato è il margine di sicurezza realistico.
100 px inferiori a volte vengono coperti dall'affordance «scorri per altro» sui telefoni più piccoli.

Le didascalie e le call to action devono trovarsi tra 80 e 600 px dalla cima del design — visibili a dimensione miniatura, non tagliate a dimensione piena.

Dove cade per prima l'attenzione

Gli studi di eye-tracking sui caroselli App Store (coerenti tra le analisi di più aziende ASO, 2024-2026) collocano l'attenzione più forte nel quadrante in alto a sinistra di ogni pannello. Il testo critico della didascalia si legge meglio quando occupa il quarto superiore del pannello e usa un colore ad alto contrasto rispetto allo sfondo. I rendering dei dispositivi funzionano meglio se leggermente inclinati (8-15° attorno all'asse Y) piuttosto che frontali.

Overlay pratico della safe area

Se stai progettando in Figma o Photoshop, aggiungi queste guide alla tua tavola da lavoro (usando il 6.9" come base, scala proporzionalmente per le altre classi):

Margine superiore: 80 px
Margine inferiore: 100 px
Margini laterali: 60 px ciascuno
Zona didascalia: 80-600 px dalla cima
Zona dispositivo: 600-2400 px dalla cima

Progetta con le safe zone →