Girando il tuo telefono per testare una schermata, e il layout si adatta pulitamente o si rompe. Il testo si rifluisce, i pulsanti saltano, un modulo copre improvvisamente la zona sbagliata, o il tuo lettore 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 dello sviluppatore. Come si rifletta sulla disposizione, quando supportare la rotazione, quando bloccarlo e come gestirlo nelle app web, nelle app native e nei progetti Capacitor senza creare un'esperienza utente fragile.
Elenco dei contenuti
- Capire l'orientamento ritratto
- Ritratto vs Paesaggio Una Comparazione Fondamentale
- Casi d'uso Comuni in Diversi Media
- Gestione dell'Orientamento nel Web
- La gestione dell'orientamento negli app mobili
- Pratiche di miglioramento dell'esperienza utente per l'orientamento dello schermo
Capire l'orientamento orizzontale
Gli utenti notano l'orientamento per primo quando uno schermo si gira. I sviluppatori lo notano quando quella rotazione rompe la loro interfaccia.
L'orientamento orizzontale significa che il frame è più alto di quanto è largo. Quella è l'idea di base. Viene da l'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 riferenza per quella storia più ampia è Wikipedia’s pagina orientamento panoramica.
Per gli sviluppatori, la parte importante è che l'orientamento in 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 è in 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 lo scrolling, la portata del dito, il flusso di lettura, la progettazione dei form e la posizione della navigazione.
Un feed, una visualizzazione di articolo, una schermata di impostazioni o un thread di chat si legge di solito più naturalmente in un riquadro verticale. È una delle ragioni per cui le scelte di orientamento si collegano direttamente alle decisioni sull'esperienza dell'utente degli app di mobile, non solo allo stiling visivo. Regola pratica:Tratta l'orizzontale come un contesto di layout, non solo come una posizione del dispositivo.
Dove i giovani sviluppatori spesso si confondono La confusione più comune è confondere
l'orientamento
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ con risoluzione o rapporto d'aspetto. Sono legati, ma non sono la stessa cosa.
- Orientamento indica quale lato è più lungo.
- Risoluzione indica 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 condividono lo stesso stato di orientamento. È per questo che la logica UI responsiva dovrebbe chiedere, “È l'altezza maggiore della larghezza?” prima di chiedere qualcosa di più specifico.
Ritratto vs Paesaggio: Una Fondamentale Comparazione
Un modo semplice per pensare a questo è attraverso la composizione. Un ritratto pittorico concentra l'attenzione su una persona o su un altro soggetto alto. Una pittura 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 l'altezza supera la larghezza, quindi le lunghezze dei lati sono verticali. Quello è l'inverso dell'orientamento orizzontale. L'articolo del glossario di SLR Lounge spiega quella definizione tecnica e perché la forma si adatta a soggetti alti e strutture verticali.
La differenza in una tabella
| Orientamento | Forma | Miglior adattamento | Effetto tipico |
|---|---|---|---|
| Ritratto | Più alto che largo | Feed, formulari, lettura, soggetti alti | Attira l'attenzione verticalmente |
| Pianura | Più largo che alto | Video, mappe, dashboard, scene ampie | Mostra più contesto orizzontale |
Suona basilare, ma è utile quando si devono fare scelte in una recensione del prodotto.
Cosa cambia per l'utente
Di solito, il ritratto riduce l'attenzione. Riduce il contenuto laterale e incoraggia il flusso da cima a fondo. È per questo che le feed sociali, le pagine degli articoli, i passaggi di onboarding e gli interfacce di chat spesso sembrano più pulite in ritratto.
The orientamento orizzontale fa il contrario. Esposi più larghezza, che aiuta con le viste a schermo diviso, cronologie, gallerie, riproduzione dei media, superfici ricche di dati e viste immersive. Se il tuo layout ha bisogno di una comparazione a lato a lato, questo formato orizzontale ti dà spesso più spazio per respirare.
Di solito il ritratto è sulla concentrazione. Il paesaggio è di solito sul contesto.
Cosa cambia per lo sviluppatore
La più grande falla è trattare il formato più ampio come una versione allungata del ritratto. Non è. L'elenco gerarchico delle informazioni spesso deve cambiare.
Esempio:
- In ritrattoun dashboard può sovrapporre le schede in una colonna singola.
- In un orientamento più ampiolo stesso dashboard potrebbe spostarsi a colonne multiple e rivelare filtri o pannelli laterali.
- In ritrattoun modulo di pagamento può dare priorità a grandi bersagli da toccare e un flusso chiaro.
- In un orientamento più ampioche la stessa schermata può sembrare scomoda se i campi diventano troppo compressi verticalmente.
Gli sviluppatori che lavorano su layout mobili immersivi hanno anche bisogno di pensare alla gestione delle aree di bordo, alle aree sicure e al comportamento a schermo intero. Se si stanno regolando quei dettagli, Capacitor impostazione di display da bordo a bordo fa parte della stessa conversazione perché i cambiamenti di orientamento influiscono sul modo in cui gli utenti percepiscono lo spazio disponibile.
Usi comuni in diversi media
L'orientamento verticale compare in più luoghi rispetto alle schermate dei dispositivi mobili. Ciò conta perché il concetto non è iniziato nel software e non appartiene solo al software.
Fotografia e 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 sull'orientamento verticale quando l'esperienza di lettura dovrebbe procedere da cima a fondo 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 orientamento verticale. Ciò non è perché l'orientamento verticale 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 formato orizzontale. Alcuni contenuti sono meglio presentati in un formato orizzontale. La chiave è trovare l'equilibrio tra la struttura del contenuto e il frame.
Prodotti mobili e flussi di app
In queste circostanze, il formato orizzontale diventa il modello mentale di default per molte squadre.
Pensa ai schermi che gli utenti aprono ripetutamente:
- App di chat: i messaggi si accumulano verticalmente.
- App sociali: i post, i commenti e i video sono consumati in un flusso orizzontale.
- App di retail: i risultati delle ricerche e le liste dei prodotti scorrono verso il basso.
- App bancarie: i saldi, le transazioni e le conferme dei flussi sono solitamente disposti in sezioni verticali.
Quei modelli non sono casuali. Portrait supporta l'uso a una mano, lo scrolling con il pollice e la completamento delle attività lineari.
Molte interfacce utente per dispositivi mobili sembrano intuitive perché l'interfaccia assume un dispositivo eretto 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 camera spesso beneficiano di una maggiore ampiezza. Ma per il flusso di attività quotidiano, il portrait è di solito dove gli utenti iniziano.
Gestione dell'Orientamento sul Web
Un comune bug web 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 lato laterale appare al punto di interruzione sbagliato, o il tastierino copre il pulsante di invio. L'orientamento sul web è davvero tutto sulla condizione. La forma del viewport è cambiata, e la tua 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 dispositivi mobili in seguito, questo layer web ancora conta. Utilizzare Capacitor per trasformare un'app web in un'app mobile non elimina la necessità di una buona gestione dell'orientamento web. Fa che questa base sia ancora più importante.
La piattaforma ti offre due strumenti principali. Lo Screen Orientation API espone il tipo di orientamento e gli eventi di modifica, e il Web App Manifest consente a un'app installata di dichiarare un modo preferito eretto come 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 deve adattarsi
Inizia con CSS. È il modo più economico e affidabile per rispondere quando larghezza e 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 l'incremento progressivo per la forma dello schermo. Inizia con il layout stretto e verticale come impostazione predefinita. Poi aggiungi spazio per l'interfaccia secondaria solo quando il viewport diventa più ampio.
Alcune pratiche risparmiano tempo in seguito:
- Inizia dal tuo modo primario: se le persone utilizzano principalmente l'app in posizione verticale, fai di quella la base del layout.
- Evita le altezze fisse: ruotare un dispositivo può ridurre rapidamente lo spazio verticale utilizzabile, soprattutto quando l'interfaccia utente del browser o un tastierino virtuale è visibile.
- Testa gli stati di interazione reali: i moduli, i capi fissi e le schede in fondo spesso falliscono durante la rotazione, non nelle schermate statiche.
Usa JavaScript quando il comportamento deve reagire
CSS può riordinare le caselle. Non può decidere quando ricostruire un grafico o resettare un gestore di gesti.
Usa JavaScript quando le modifiche di orientamento influiscono sullo stato della UI.
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 canvas, i controlli dei media, le viste dei mappe e le shell 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 lo spazio o la posizione, CSS dovrebbe gestirlo.
Una regola pratica aiuta le squadre junior a evitare una grande complessità. Non usare JavaScript per forzare le decisioni di layout che CSS gestisce già bene.
Imposta un'orientamento preferito per le PWAs
Se la tua PWA è progettata principalmente per l'uso in posizione verticale, dichiara questo nel manifesto.
{
"name": "My App",
"short_name": "MyApp",
"display": "standalone",
"orientation": "portrait"
}Questo è 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 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 romperebbe la task stessa, come un flusso di cattura guidato o una schermata con requisiti di allineamento fisico rigorosi. In casi diversi, adattare l'interfaccia è la scelta ingegneristica migliore perché rispetta sia il dispositivo che l'utente.
Gestione dell'Orientamento nei App Mobili
Le 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 dell'app sono la tua politica di default. Lo schermo code è l'eccezione. Utilizza la politica per un'intenzione generale e utilizza l'eccezione solo dove un dispositivo rotante interferirebbe con il lavoro che l'utente sta cercando di completare.
Controllo della piattaforma nativa
Sì Android, l'orientamento viene spesso impostato in AndroidManifest.xml per un'attività:
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />Questo funziona come un flag di configurazione a livello superiore. È semplice, prevedibile e facile da applicare su tutta l'attività. Il trade-off è lo scopo. Se solo uno schermo ha bisogno di modalità orizzontale, applicare quella regola globalmente è spesso troppo blando.
Sì 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, poi raffinare il comportamento nei controller di visualizzazione specifici quando uno schermo ha requisiti più rigorosi.
That split matters for cross-platform teams. Native config answers, “What should this app generally allow?” Runtime code answers, “What should this screen do right now?”
Controllo programmatico negli app Capacitor
Se costruisci con Capacitor, il controllo dinamico solitamente appartiene a 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 una sequenza di fotocamera può dover consentire la rotazione in base a come il dispositivo è tenuto.
Un plugin mantiene quella logica leggibile e evita il tubo nativo personalizzato. Il Capacitor screen orientation plugin for Capacitor apps ti consente di leggere l'orientamento corrente, applicare una restrizione per un determinato modo come l'orizzontale, e rimuovere quella restrizione quando l'utente torna a uno schermo 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 lo schermo diventa attivo. Rimuovila quando lo schermo non è più attivo. In un'app basata su router, ciò significa spesso legare i cambiamenti di orientamento ai hook di ciclo di vita della pagina piuttosto che disperdere chiamate in componenti casuali.
Scegli attentamente le restrizioni specifiche dello schermo
Usa un modo orizzontale fissato quando la rotazione disturberebbe l'input, l'allineamento o l'attenzione dell'utente.
Esempi comuni includono:
- Schermate di accesso: gli input rimangono stabili mentre l'utente digita.
- Passaggi di pagamento e conferma: layout modifiche ridotte durante compiti ad alta attenzione.
- Kiosk o flussi guidati: l'interfaccia richiede una presentazione coerente.
Lascia che il dispositivo ruoti liberamente quando la larghezza aggiuntiva o un diverso grip aiuta chiaramente il compito.
Esempi tipici includono la riproduzione dei media, le mappe, i giochi, le viste della fotocamera e le schermate di dati densi.
Una regola utile per i team junior è semplice. Se cambiare la direzione del dispositivo altererebbe solo lo spazio, lascia che il sistema di layout si occupi di esso. Se cambiare la direzione del dispositivo cambierebbe come funziona il compito, allora l'orientamento a livello di schermo code potrebbe essere giustificato.
Capgo è menzionato qui per una ragione pratica. Nei progetti Capacitor , il controllo dell'orientamento è una delle caratteristiche della piattaforma che inizia come un piccolo dettaglio dell'interfaccia utente e diventa rapidamente comportamento dell'app. Trattalo come 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.
La gestione dell'orientamento è una decisione di UX in primo luogo e una decisione tecnica in secondo luogo. Il code è di solito chiaro. 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 modo di visualizzazione dove aggiunge valore: Non bloccare la rotazione su schermi che beneficiano di un'area aggiuntiva di larghezza.
- Blocca solo con una ragione chiara: un modulo, un checkout o un flusso sicuro potrebbe giustificarlo. Uno schermo 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.
- Testare entrambe le orientazioni su dispositivi reali: i simulatori mancano di transizioni scomode, sovrapposizione del tastierino e problemi di 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 al testing dell'orientamento perché lo stesso schermo spesso deve sentirsi nativo su diverse dimensioni di dispositivo e convenzioni di piattaforma.
La principale acquisizione è semplice. Se si chiede cosa è un'orientamento a ritratto, la risposta non è solo “verticale.” È una regola di framing, uno stato di layout e un'aspettativa dell'utente. Le buone app trattano così.
Se stai inviando Capacitor app e hai bisogno di un comportamento di orientamento controllato insieme a riparazioni veloci dopo la rilascio, Capgo è sicuramente da considerare. Fornisce aggiornamenti in tempo reale per le app di CapacitorJS e Electron, e mantiene anche plugin per le capacità dell'app come l'orientamento della schermata, che può aiutare quando hai bisogno di bloccare o abilitare specifiche viste senza dover ricostruire tutto il processo di rilascio.
