Mockup di dispositivo
Cos'è un mockup di dispositivo, come inserire screenshot nelle cornici dei dispositivi e dove lo usano i team.
Un mockup di dispositivo è un'immagine che mostra uno screenshot all'interno di una cornice di dispositivo disegnata o fotografata, come un telefono, un tablet, un laptop o una finestra del browser. La cornice indica agli spettatori dove gira l'interfaccia.
Ogni template di mockup ha un'area dello schermo con dimensione e rapporto di aspetto fissi. Lo screenshot deve corrispondere a quell'area, altrimenti viene allungato, ritagliato o circondato da spazio vuoto. I template basati su fotografie applicano anche la prospettiva, quindi lo screenshot viene deformato per adattarsi allo schermo inclinato.
Un mockup è un'immagine di presentazione. È diverso dall'emulazione del dispositivo, che cambia il modo in cui la pagina stessa viene visualizzata.
Perché i mockup di dispositivo sono importanti
Uno screenshot di telefono senza cornice su una pagina web può sembrare un rettangolo alto e casuale. La cornice comunica subito dimensione e contesto dello schermo. Dà inoltre un aspetto coerente a screenshot diversi in una landing page o in una presentazione.
Cornici di dispositivo comuni
- Telefoni in orientamento verticale, con o senza l'area del notch o della Dynamic Island.
- Tablet in orientamento verticale o orizzontale.
- Laptop con lo schermo inclinato.
- Finestre del browser con una semplice barra degli indirizzi, usate per gli screenshot delle web app.
Come creare mockup di dispositivo
- Cattura lo schermo con il rapporto di aspetto della cornice.
- Apri un template di mockup in uno strumento di design o in un generatore di mockup.
- Inserisci lo screenshot nell'area dello schermo e controlla gli angoli e il notch.
- Esporta alla dimensione richiesta dalla destinazione.
In Temposhot, il selettore Custom Area ha preset per telefoni come iPhone 17 Pro (402×874), iPhone 17 Pro Max (440×956), Galaxy S25 (360×780) e Pixel 9 (360×808). Per le pagine web, Website Capture ha la dimensione di dispositivo Mobile 390×844.
Errori comuni
- Usare uno screenshot con un rapporto diverso, così la cornice taglia il contenuto.
- Ingrandire una cattura piccola per riempire una cornice grande, che sfoca il testo.
- Inserire un mockup dove lo store si aspetta uno screenshot semplice. Verifica i requisiti attuali dello store.
- Usare cornici di dispositivo obsolete che non corrispondono più all'hardware attuale.
Ripeti gli stessi screenshot più volte?
Cattura ogni schermata in formato telefono in un'unica esecuzione con automazione degli screenshot su Mac.
Domande frequenti
Gli store delle app accettano i mockup?
Le regole variano da store a store e cambiano nel tempo. Leggi le linee guida attuali dello store per gli screenshot prima di inviare l'app.
Quale risoluzione deve avere lo screenshot?
Almeno la dimensione in pixel dell'area dello schermo della cornice. Una cattura Retina di solito fornisce pixel sufficienti.
Fonti
Risorse correlate
- Sorgenti di cattura: preset di Custom Area.
- Social Image Composer: inserisce uno screenshot su uno sfondo con margini.
- Aspect Ratio Calculator: fa corrispondere il rapporto dello schermo della cornice.
Ripeti sempre gli stessi screenshot?
Temposhot cattura a intervalli di tempo una schermata, una finestra o un'area e esporta il set come PDF, immagini, ZIP o MP4. Gli strumenti gratuiti online gestiscono le singole immagini.
Risorse correlate
Termini correlati
- Rapporto di aspettoCosa significa il rapporto di aspetto per immagini e screenshot, i rapporti più comuni ed errori da evitare.
- Dimensioni delle immagini per i social mediaDimensioni consigliate delle immagini per Instagram, X, LinkedIn e Facebook e come ridimensionare per una visualizzazione ottimale su ogni piattaforma.
- Template di screenshotCos'è un template di screenshot, come le impostazioni di cattura riutilizzabili fanno risparmiare tempo ed errori comuni.
- Sovrapposizione di immaginiUn overlay è qualsiasi elemento posto sopra un'immagine: testo, frecce, un logo o una cornice di dispositivo. Tipi principali, funzionamento della trasparenza ed errori comuni.
- Rimozione dello sfondo delle immaginiCome funziona la rimozione dello sfondo delle immagini, dove si usa e la differenza tra rimozione con IA e rimozione manuale.
- Screenshot responsiveCosa sono gli screenshot responsive, le dimensioni del viewport più usate ed errori da evitare quando si cattura su più dispositivi.
- Flusso di lavoro con gli screenshotCos'è un flusso di lavoro con gli screenshot e come costruire un processo ripetibile dalla cattura alla consegna.