Si gira il telefono per testare uno schermo e il layout si adatta pulitamente o si disfa. Il testo si rifluisce, i pulsanti saltano, un modulo copre improvvisamente la zona sbagliata o il lettore di video si comporta esattamente come previsto. Quel piccolo momento è dove orientamento ritratto smette di essere un termine di design e diventa una decisione di prodotto.
Se stai costruendo per dispositivi mobili, hai bisogno di una risposta chiara a cosa è un'orientamento ritratto. Non solo la definizione di classe, ma la versione del developer. Come si riflette sulla disposizione, quando supportare la rotazione, quando bloccarlo e come gestirlo nelle app web, native e Capacitor progetti senza creare un'esperienza utente fragile.
Indice
- Capire l'Orientamento Ritratto
- Ritratto vs Paesaggio Una Comparazione Fondamentale
- Utilizzo Comune in Diversi Media
- Gestione dell'orientamento sul Web
- Gestione dell'orientamento nelle app mobili
- Pratiche di UX per l'orientamento della schermata
Capire l'orientamento orizzontale
Gli utenti notano l'orientamento per primo quando la schermata si gira. I sviluppatori lo notano quando quella rotazione rompe la loro interfaccia.
L'orientamento orizzontale significa che il riquadro è più alto di quanto è largo. Quella è l'idea centrale. Proviene dall'arte visiva, dove i ritratti del volto e del corpo superiore di una persona erano solitamente incorniciati verticalmente. Quel stesso concetto si è trasferito nella progettazione di pagine, nella fotografia e nelle interfacce digitali. Una buona fonte di riferimento per quella storia più ampia è la panoramica dell'orientamento di Wikipedia.
Per gli sviluppatori, la parte importante è che l'orientamento orizzontale non è legato a una dimensione di schermo, a un dispositivo o a un formato di file. È una regola sulle forme. Se l'altezza è maggiore della larghezza, si è nell'orientamento orizzontale.
Perché conta nel lavoro dei prodotti
L'orizzontale è diventato un default pratico per i dispositivi mobili perché l'uso in posizione verticale corrisponde a come le persone tengono naturalmente i telefoni. Ciò influenza la lettura, la raggiungibilità del dito, il flusso di lettura, la progettazione dei moduli e la posizione della navigazione.
Una finestra di feed, una vista articolo, una schermata di impostazioni o un thread di chat si legge di solito più naturalmente in un frame verticale. Questo è uno dei motivi per cui le scelte di orientamento si collegano direttamente alle decisioni di esperienza utente degli app per dispositivi mobili , non solo allo stiling visivo.Regola pratica:
Considera il ritratto come un contesto di layout, non solo la posizione del dispositivo. Dove i giovani sviluppatori si confondono spesso
La confusione più comune è confondere
orientamento con risoluzione o rapporto d'aspetto __CAPGO_KEEP_0__. Sono correlate, ma non sono la stessa cosa.
- Orientamento significa quale lato è più lungo.
- Risoluzione significa quanti pixel esistono in ogni dimensione.
- Rapporto d'aspetto descrive la relazione tra larghezza e altezza.
Un tablet in orizzontale e un telefono in orizzontale possono avere dimensioni molto diverse, ma ancora condividono lo stesso stato di orientamento. È per questo che la logica UI rispondente dovrebbe chiedere, “È l'altezza maggiore della larghezza?” prima di chiedere qualcosa di più specifico.
Ritratto vs Paesaggio Una Comparazione Fondamentale
Una semplice maniera per pensare a questo è attraverso la composizione. Un ritratto pittorico focalizza l'attenzione su una persona o un altro soggetto alto. Un dipinto orizzontale cattura la larghezza, il contesto e lo spazio circostante. La UI funziona nello stesso modo.
Nell'immagine e nella progettazione UI, l'orientamento ritratto è il rettangolo dove superano l'altezza la larghezzaquindi le estremità più lunghe sono verticali. Questo è l'inverso dell'orientamento orizzontale. L'ingresso di SLR Lounge nel glossario descrive quella definizione tecnica e perché la forma si adatta a soggetti alti e strutture verticali.
La differenza in una sola tavola
| Orientamento | Forma | Adatto meglio | Effetto tipico |
|---|---|---|---|
| Ritratto | Piu alto che largo | Alimentazione, form, lettura, soggetti alti | Cattura l'attenzione verticalmente |
| Paesaggio | Più largo che alto | Video, mappe, dashboard, scene ampie | Mostra più contesto orizzontale |
Sembra una cosa basilare, ma è utile quando si devono fare scelte in una recensione del prodotto.
Cosa cambia per l'utente
Il ritratto riduce spesso l'attenzione. Riduce il contenuto laterale e incoraggia il flusso da cima a fondo. È per questo che le cronache social, le pagine degli articoli, i passaggi di onboarding e gli interfacce di chat spesso sembrano più pulite in ritratto.
L'orientamento orizzontale fa l'opposto. Esposi più larghezza, che aiuta con le viste a schermo diviso, le cronologie, le gallerie, la riproduzione dei media, le superfici ricche di dati e le viste immersive. Se il tuo layout ha bisogno di confronto a due colonne, questo formato orizzontale spesso offre più spazio per respirare.
Il ritratto è spesso sulla concentrazione. Il paesaggio è spesso sul contesto.
Cosa cambia per lo sviluppatore
L'errore più grande è trattare la forma più larga come una versione allungata del ritratto. Non è. L'elenco gerarchico delle informazioni spesso deve cambiare.
Esempio:
- In modalità orizzontale, un dashboard può sovrapporre le schede in una colonna singola.
- In una maggiore orientamento, lo stesso dashboard potrebbe spostarsi in colonne multiple e rivelare filtri o pannelli laterali.
- In modalità orizzontale, un form di pagamento può dare priorità a grandi target di tocco e a un flusso chiaro.
- In una maggiore orientamento, lo stesso schermo può sembrare scomodo se i campi diventano troppo compressi verticalmente.
I sviluppatori che lavorano su layout mobili immersivi devono anche pensare all'elaborazione di bordi, aree sicure e comportamento a schermo intero. Se stai regolando quei dettagli Capacitor configurazione di display senza bordi fa parte della stessa conversazione perché i cambiamenti di orientamento influiscono sulla percezione degli utenti dello spazio disponibile.
Usi comuni in diversi media
L'orientamento ritratto compare in più luoghi rispetto a schermi mobili. Ciò conta perché il concetto non è iniziato nel software, e non appartiene solo al software.
La fotografia e la stampa
Un ritratto professionale è l'esempio ovvio. La cornice verticale si adatta meglio al viso e al corpo di una persona rispetto a una cornice ampia. La stessa logica si applica alle foto di moda, alle copertine dei libri, ai manifesti e alle copertine delle riviste.
La progettazione della stampa si basa anche su ritratto quando l'esperienza di lettura dovrebbe muoversi da sinistra a destra in una colonna stretta. Quella forma aiuta l'occhio a viaggiare naturalmente lungo la pagina.
Documenti e comunicazione quotidiana
La maggior parte dei rapporti, dei curriculum, delle lettere e dei documenti interni sono progettati in ritratto. Ciò non è perché il ritratto sia sempre meglio. È perché una pagina verticale funziona bene per le sequenze di paragrafi, intestazioni, elenchi e firme.
Se hai mai esportato un PDF e notato che una tabella ampia diventa improvvisamente illeggibile, hai visto il limite del ritratto. Alcuni contenuti sono meglio presentati in un formato orizzontale. La chiave è adattare la cornice alla struttura del contenuto.
Prodotti mobili e flussi di app
In queste circostanze, il ritratto diventa il modello mentale di default per molti team.
Pensa alle schermate che gli utenti aprono ripetutamente:
- Applicazioni di messaggistica: i messaggi si accumulano verticalmente.
- Applicazioni sociali: i post, i commenti e i video sono consumati in un flusso orizzontale.
- Applicazioni di vendita: i risultati delle ricerche e le liste dei prodotti scorrono verso il basso.
- Applicazioni bancarie: i saldi, le transazioni e le conferme dei flussi sono di solito disposti in sezioni verticali.
Quei modelli non sono casuali. Portrait supporta l'uso con una mano, lo scorrimento con il pollice e la completamento delle attività lineari.
Un sacco di UI mobile sembra intuitivo perché l'interfaccia assume un dispositivo orizzontale prima di assumere qualsiasi altra cosa.
Ciò non significa che ogni schermo debba rimanere in portrait. I visualizzatori di media, le mappe, i grandi grafici e i flussi di lavoro basati sulla fotocamera spesso beneficiano di una cornice più ampia. Ma per il flusso di attività quotidiano, il portrait è di solito dove gli utenti iniziano.
Gestione dell'orientamento nel Web
A un bug web comune sembra piccolo all'inizio. La tua app si legge chiaramente in un viewport eretto, poi l'utente gira il dispositivo e il grafico si riversa, il sidebar appare al punto di interruzione sbagliato, o il tastierino copre il pulsante di invio. L'orientamento web è davvero tutto sulla condizione. La forma del viewport è cambiata, e il tuo UI deve rispondere in modo prevedibile.
Per i sviluppatori, ciò significa separare due compiti. CSS gestisce i cambiamenti di layout. JavaScript gestisce i cambiamenti di comportamento. Se si pacchetta lo stesso progetto per il mobile in seguito, questo layer web ancora conta. Utilizzare Capacitor per trasformare un'app web in un'app mobile non elimina la necessità di un buon gestione dell'orientamento web. Fa che questa base sia ancora più importante.
Il piattaforma ti dà due strumenti principali. Lo Screen Orientation API espone il tipo di orientamento e gli eventi di modifica, e il Web App Manifest consente all'app installata di dichiarare un modo preferito eretto come ad esempio portrait, portrait-primary, o portrait-secondary. MDN documenta quei valori di manifesto nella sua Riferimento all'orientamento del manifesto Web App.
Usa CSS quando il layout dovrebbe adattarsi
Inizia con CSS. È il modo più economico e affidabile per rispondere quando la larghezza e l'altezza scambiano ruoli.
/* Default portrait-friendly layout */
.page {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.sidebar {
display: none;
}
@media (orientation: landscape) {
.page {
grid-template-columns: 280px 1fr;
}
.sidebar {
display: block;
}
}Funziona come un miglioramento progressivo per la forma dello schermo. Inizia con il layout eretto stretto come default. Poi aggiungi spazio per l'UI secondario solo quando il viewport diventa più ampio.
Alcune pratiche risparmiano tempo in seguito:
- Parti dal tuo modo primario: se le persone utilizzano principalmente l'app in posizione verticale, fai che sia la base del layout.
- Evita le altezze fisse: ruotare un dispositivo può ridurre velocemente lo spazio verticale utilizzabile, soprattutto quando è visibile l'interfaccia del browser o un tastierino virtuale.
- Testa gli stati di interazione reali: i moduli, i capi fissi e le schede in fondo spesso falliscono durante la rotazione, non nei screenshot statici.
Utilizza JavaScript quando il comportamento deve rispondere:
il CSS può riordinare le caselle. Non può decidere quando ricostruire un grafico o resettare un gestore di gesti.
Utilizza JavaScript quando le modifiche di orientamento influiscono sull'interfaccia utente con stato.
function logOrientation() {
const type = screen.orientation?.type;
console.log('Current orientation:', type);
}
logOrientation();
screen.orientation?.addEventListener('change', () => {
logOrientation();
const isPortrait = window.innerHeight > window.innerWidth;
if (isPortrait) {
document.body.classList.remove('wide-mode');
} else {
document.body.classList.add('wide-mode');
}
});Quel pattern è utile per le finestre di disegno, i controlli dei media, le viste della mappa e le conchiglie di navigazione personalizzate. Il modello mentale è semplice. Se la rotazione cambia la presentazione dei dati o la logica di interazione, JavaScript dovrebbe rispondere. Se la rotazione cambia solo la disposizione o la posizione, il CSS dovrebbe gestirlo.
Una regola pratica aiuta le squadre junior a evitare molta complessità. Non utilizzare JavaScript per forzare le decisioni di layout che il CSS gestisce già bene.
Imposta un'orientamento preferito per le PWAs
Se il tuo PWA è progettato principalmente per l'uso in posizione verticale, dichiara questo nel manifesto.
{
"name": "My App",
"short_name": "MyApp",
"display": "standalone",
"orientation": "portrait"
}Questa è una preferenza, non un sostituto per il design responsivo. Aiuta il browser a capire come l'app installata dovrebbe aprire e comportarsi nei contesti supportati.
Puoi anche richiedere un blocco di orientamento in tempo di esecuzione quando il browser lo consente:
async function lockPortrait() {
try {
await screen.orientation.lock('portrait');
console.log('Orientation locked');
} catch (err) {
console.log('Lock failed:', err);
}
}Usa questo con cura. Una buona regola è bloccare solo quando la rotazione danneggerebbe la task stessa, come ad esempio un flusso di cattura guidata o una schermata con requisiti di allineamento fisico rigorosi. In casi diversi, adattare l'interfaccia è la scelta migliore perché rispetta sia il dispositivo che l'utente.
Gestione dell'Orientamento negli App Mobili
Gli app mobili possono fare di più di una scheda del browser. Possono dichiarare una direzione di schermo predefinita a livello di app, quindi cambiare il comportamento per una singola schermata quando la task lo richiede. Quell'extra controllo è utile, ma crea anche un errore comune. Le squadre limitano la rotazione troppo ampiamente, e un'app semplice inizia a sentire rigida.
Un buon modello mentale aiuta qui. Le impostazioni a livello di app sono la tua politica predefinita. Lo code a livello di schermata è l'eccezione. Utilizza la politica per l'intento ampio, e utilizza l'eccezione solo dove un dispositivo rotante interferirebbe con il lavoro che l'utente sta cercando di completare.
Controllo della piattaforma nativa
Su Android, l'orientamento è spesso impostato in AndroidManifest.xml per un'attività:
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />Funziona come un flag di configurazione a livello superiore. È semplice, predittibile e facile da applicare su tutta l'attività. Il trade-off è lo scope. Se solo una schermata richiede la modalità orizzontale, applicare quella regola globalmente è spesso troppo brutale.
Su iOS, le orientazioni supportate vengono impostate in Xcode attraverso le impostazioni del target e i metadati dell'app. Puoi definire cosa l'app supporta in generale, quindi raffinare il comportamento nei controller di vista specifici quando una schermata ha requisiti più stringenti.
Quella suddivisione è importante per i team cross-platform. La configurazione nativa risponde a “Cosa dovrebbe permettere l'app in generale?” Il runtime code risponde a “Cosa dovrebbe fare la schermata in questo momento?”
Il controllo programmatico negli app Capacitor
Se costruisci con Capacitor, il controllo dinamico è spesso più adatto in code, vicino alla rotta o alla vista che ne ha bisogno. Una schermata di accesso può essere più facile da usare in orizzontale. Una schermata di media o un flusso di fotocamera può richiedere di consentire la rotazione in base a come il dispositivo è tenuto.
Un plugin mantiene quella logica leggibile e evita la canalizzazione nativa personalizzata. Il Capacitor plugin di orientamento della schermata per gli app Capacitor ti consente di leggere l'orientamento corrente, applicare una restrizione per un determinato modo come ad esempio l'orizzontale, e rimuovere quella restrizione quando l'utente torna a una schermata flessibile.
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
async function lockLoginScreen() {
await ScreenOrientation.lock({ orientation: 'portrait' });
}
async function unlockForMedia() {
await ScreenOrientation.unlock();
}
async function checkCurrentOrientation() {
const result = await ScreenOrientation.orientation();
console.log(result);
}Il pattern è chiaro. Applica la restrizione quando la schermata diventa attiva. Rimuovila quando la schermata non è più attiva. In un'app basata su router, spesso significa legare i cambiamenti di orientamento ai hook di ciclo di vita della pagina piuttosto che diffondere chiamate in componenti random.
Scegli restrizioni specifiche per lo schermo con cura
Usa un modo orizzontale fisso quando la rotazione disturberebbe l'input, l'allineamento o l'attenzione dell'utente.
Esempi comuni includono:
- Schermi di autenticazione: gli input rimangono stabili mentre l'utente digita.
- Passaggi di pagamento e conferma: minore numero di cambiamenti di layout durante compiti ad alta attenzione.
- Flussi di lavoro guidati o kiosk: l'interfaccia ha bisogno di una presentazione coerente.
Lascia che lo schermo si giri liberamente quando l'ampiezza aggiuntiva o una presa diversa aiuta chiaramente il compito.
Esempi tipici includono riproduzione di media, mappe, giochi, visualizzazioni della fotocamera e schermi con dati densi.
Una regola utile per i team junior è semplice. Se cambiare la direzione dello schermo altererebbe solo lo spazio, lascia che il sistema di layout si occupi di esso. Se cambiare la direzione dello schermo cambierebbe come funziona il compito, allora l'orientamento dello schermo code può essere giustificato.
Capgo viene menzionato qui per una ragione pratica. Nei progetti Capacitor , il controllo dell'orientamento è una delle funzionalità della piattaforma che inizia come un dettaglio di interfaccia utente e diventa rapidamente un comportamento dell'applicazione. Trattalo come un comportamento. Mantieni la configurazione predefinita flessibile, applica restrizioni con parsimonia e rimuovile non appena la schermata non ne ha più bisogno.
Pratiche di progettazione UX per l'orientamento della schermata
Il controllo dell'orientamento è una decisione di progettazione UX in primo luogo e una decisione tecnica in secondo luogo. Il code è solitamente facile da capire. La parte difficile è scegliere un comportamento che si sente naturale.
Un breve elenco di controllo aiuta:
- Progettare per il contesto dominante: se la maggior parte degli utenti inizia in verticale, rendi il ritratto la versione più forte dell'interfaccia.
- Supporta un più ampio modalità di visualizzazione dove aggiunge valore: non bloccare la rotazione sulle schermate che beneficiano di un'ampiezza aggiuntiva.
- Blocca solo con una ragione chiara: un modulo, un flusso di checkout o un flusso sicuro potrebbe giustificarlo. Una schermata di contenuto di solito non lo farà.
- Preservare lo stato durante la rotazione: gli utenti non dovrebbero perdere l'input, la posizione di scorrimento o le schede selezionate.
- Testa entrambe le orientazioni su dispositivi reali: i simulator non riescono a replicare le transizioni imbarazzanti, l'overlap del tastierino e le questioni relative all'area sicura.
Per decisioni di layout più ampie, la guida per l'interfaccia utente e l'esperienza utente cross-platform per le app Capacitor si adatta bene alla verifica dell'orientamento perché la stessa schermata spesso deve sembrare nativa su diversi dispositivi e convenzioni di piattaforma.
Il principale punto di partenza è semplice. Se si chiede cosa sia un'orientamento in verticale, la risposta non è solo “verticale”. È una regola di framing, uno stato di layout e un'aspettativa dell'utente. Le buone app trattano così.
Se si stanno rilasciando app Capacitor e si hanno bisogno di un comportamento di orientamento controllato insieme a fix veloci post-rilascio, Capgo Scritto da
