Ti giri il telefono per testare una schermata 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 tuo lettore video si comporta esattamente come previsto. Quel piccolo momento è dove orientamento ritratto non è più 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 influisce la disposizione, quando supportare la rotazione, quando bloccarlo e come gestirlo nelle app web, native e Capacitor senza creare un'esperienza utente fragile.
Tavola dei contenuti
- Capire l'orientamento ritratto
- Ritratto vs Paesaggio Una Comparazione Fondamentale
- Usi comuni in diversi media
- Gestione dell'orientamento nel Web
- Gestione dell'orientamento negli app mobili
- Pratiche di progettazione UX per l'orientamento della schermata
Capire l'orientamento ritratto
Gli utenti notano l'orientamento della schermata quando essa si gira. I sviluppatori lo notano quando quella rotazione rompe la loro interfaccia.
L'orientamento ritratto significa che il frame è più alto di quanto è largoQuesto è l'idea di base. Deriva dall'arte visiva, dove i ritratti del volto e del corpo superiore di una persona erano solitamente incorniciati verticalmente. Lo stesso concetto si è esteso alla progettazione di pagine, alla fotografia e alle interfacce digitali. Una buona riferenza per quella storia più ampia è la pagina di Wikipedia sull'orientamento delle pagine.
Per i costruttori, la parte importante è che l'orientamento ritratto non è legato a una dimensione dello schermo, a un dispositivo o a un formato di file. È una regola sulla forma. Se l'altezza è maggiore della larghezza, si è nell'orientamento ritratto.
Perché è importante nel lavoro di prodotto
L'orientamento ritratto è diventato un default pratico per i dispositivi mobili perché l'uso in posizione verticale corrisponde a come le persone tengono naturalmente i telefoni. Ciò influisce sulla scorrevolezza, sulla portata del dito, sul flusso di lettura, sulla progettazione dei form e sulla posizione della navigazione.
A un feed, una vista articolo, una schermata impostazioni o un thread di chat si legge di solito più naturalmente in un riquadro verticale. Questo è uno dei motivi per cui le scelte di orientamento si connettono direttamente alle decisioni di esperienza utente degli applicazioni mobili, non solo allo stiling visivo. Gli scelte di orientamento si connettono direttamente alle decisioni di esperienza utente degli applicazioni mobili, non solo allo stiling visivo.Regola pratica:
Tratta il ritratto come un contesto di layout, non solo come una posizione del dispositivo. Dove i giovani sviluppatori spesso si confondono
La confusione più comune è confondere
orientamento con risoluzione o contexto: frammento di testo HTML da una stringa UI Capgo più lunga (chiave genitore `alternatives_cta_questions`). Pagina/area: pagina di confronto delle alternative di aggiornamento live di Capacitor. Ruolo: Lungo paragrafo di marketing o legale. Visto in: pagina alternatives.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `alternatives_cta_questions` (Domande di CTA per le alternative). | Frammento di testo HTML da una stringa UI Capgo più lunga (chiave genitore `appflow_cta_questions`). Pagina/area: copia di marketing di confronto/migrazione di Appflow. Ruolo: Lungo paragrafo di marketing o legale. Visto in: pagina ionic-appflow.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `appflow_cta_questions` (Domande di CTA per Appflow). | Frammento di testo HTML da una stringa UI Capgo più lunga (chiave genitore `capwesome_cta_questions`). Pagina/area: pagina di confronto di Capawesome. Ruolo: Lungo paragrafo di marketing o legale. Visto in: pagina capwesome.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `capwesome_cta_questions` (Domande di CTA per Capwesome). | Pagina/area: copia di marketing di confronto/migrazione di Appflow. Ruolo: Etichetta UI breve o elemento di navigazione. Visto in: pagina ionic-appflow.astro, pagina ionic-enterprise-plugins.astro, pagina solutions/ionic-enterprise-plugins.astro. Chiave del messaggio `appflow_plugins_or` (Appflow Plugins O). rapporto di aspettoEssi sono correlati, ma non sono la stessa cosa.
- Orientamento significa quale lato è più lungo.
- Risoluzione significa quanti pixel esistono in ogni dimensione.
- Rapporto di 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 di UI responsiva dovrebbe chiedere, 'È l'altezza maggiore della larghezza?' prima di chiedere qualcosa di più specifico.
Ritratto vs Paesaggio Una Fondamentale Comparazione
Una semplice maniera per pensare a questo è attraverso la composizione. Un ritratto pittorico focalizza l'attenzione su una persona o su un altro soggetto alto. Un dipinto orizzontale cattura la larghezza, il contesto e lo spazio circostante. La UI funziona allo stesso modo.
In imaging e nella progettazione di UI, l'orientamento ritratto è il rettangolo dove l'altezza supera la larghezzaquindi le estremità più lunghe sono verticali. È il contrario dell'orientamento orizzontale. voci di SLR Lounge descrive quella definizione tecnica e perché la forma si adatta a soggetti alti e strutture verticali.
La differenza in una tabella
| Orientamento | Forma | Adatto meglio | context: Pagina/Area: Capgo Builder / prodotto di costruzione nativa cloud. Ruolo: Etichetta UI breve o elemento di navigazione. Chiave del messaggio `native_build_builder_compare_fit_feature` (Native Build Builder Compare Fit Feature). |
|---|---|---|---|
| Effetto tipico | Ritratto | Più alto che largo | Attira l'attenzione verticalmente |
| Landscape | Più largo che alto | Video, mappe, dashboard, scene ampie | Mostra più contesto orizzontale |
Sembra banale, 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 alto a basso. È 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 richiede una comparazione a due colonne, questo formato orizzontale spesso ti dà più spazio.
Ritratto è di solito sulla concentrazione. L'orizzontale è di solito sul contesto.
Cosa cambia per lo sviluppatore
L'errore più grande è trattare il formato più largo come una versione allungata del ritratto. Non è. L'elenco gerarchico delle informazioni spesso deve cambiare.
Esempio:
- In orientamento ritratto, un dashboard può sovrapporre le schede in una colonna singola.
- In un orientamento più ampio, lo stesso dashboard potrebbe spostarsi in colonne multiple e rivelare filtri o pannelli laterali.
- In orientamento ritratto, un modulo di pagamento può dare priorità a grandi target di tocco e a un flusso chiaro.
- In un orientamento più ampio, la stessa schermata può sembrare scomoda se i campi diventano troppo compressi verticalmente.
Isvolatori che lavorano su layout mobili immersivi devono anche pensare all'elaborazione degli angoli, alle aree sicure e al comportamento a schermo intero. Se stai regolando quei dettagli Capacitor impostazione di display senza bordi fa parte della stessa conversazione perché i cambiamenti di orientamento influiscono sulla percezione dello spazio disponibile.
Usi comuni in diversi media
La orientazione del ritratto compare in più luoghi che le schermate dei dispositivi mobili. Ciò conta perché il concetto non è nato nel software e non appartiene solo al software.
La fotografia e la stampa
Un ritratto professionale è l'esempio più 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 poster e alle copertine delle riviste.
La progettazione della stampa si basa anche sulla ritratto 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 ritratto. Ciò non è perché il ritratto sia sempre meglio. È perché una pagina verticale funziona bene per la lettura di sequenze di paragrafi, intestazioni, elenchi e firme.
Se hai mai esportato un PDF e notato che una tabella ampia diventa improvvisamente illeggibile, hai visto i limiti 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 applicazione
Sotto queste circostanze, il ritratto diventa il modello mentale di default per molti team.
Pensa ai schermate 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 verticale.
- App di vendita: 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. Il ritratto supporta l'uso con una mano, lo scorrimento con il pollice e la completamento lineare delle attività.
Molte interfacce mobili sembrano intuitive perché l'interfaccia assume un dispositivo eretto prima di assumere qualsiasi altra cosa.
Questo non significa che ogni schermo debba rimanere in ritratto. 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 ritratto è di solito dove gli utenti iniziano.
Manipolazione dell'Orientamento sul Web
A un bug web comune sembra piccolo all'inizio. La tua app si legge chiaramente in una finestra di visualizzazione verticale, poi l'utente gira il dispositivo e il grafico si riversa, il riquadro laterale appare al punto di interruzione sbagliato, o il tastierino copre il pulsante di invio. L'orientamento sul web è davvero tutto questione di stato. La forma della finestra di visualizzazione è 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 dispositivi mobili in seguito, questo layer web ancora conta. Usando Capacitor per trasformare un'app web in un'app mobile non elimina la necessità di un buon trattamento dell'orientamento web. Rende quella base più importante.
Il motore fornisce 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 di orientamento verticale come portrait, portrait-primaryo portrait-secondaryLa documentazione MDN descrive 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 un miglioramento progressivo per la forma dello schermo. Inizia con il layout stretto e verticale come impostazione predefinita. Poi aggiungi spazio per l'UI secondaria solo quando la finestra di visualizzazione diventa più ampia.
Un paio di pratiche risparmiano tempo in seguito:
- Parti dal tuo modo primario: Se le persone utilizzano principalmente l'app in posizione verticale, fai che il layout base sia quello.
- Evita le altezze fisse: Rotare 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:
CSS può riordinare le caselle. Non può decidere quando ricostruire un grafico o resettare un gestore di gesti.
Utilizza JavaScript quando la rotazione cambia lo stato dell'interfaccia utente.
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 telecamere, 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, CSS dovrebbe gestirlo.
Una regola pratica aiuta i team junior a evitare molta complessità. Non utilizzare JavaScript per forzare le decisioni di layout che 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"
}Si tratta di una preferenza, non un sostituto per il design responsivo. Aiuta il browser a capire come l'app installata dovrebbe aprirsi e comportarsi nei contesti supportati.
Puoi anche richiedere un blocco di orientamento in tempo reale 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 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 Applicativi Mobili
Gli applicativi 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 comune errore. 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 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
Sul Android, l'orientamento viene spesso impostato in AndroidManifest.xml per un'attività:
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />Questo funziona come una flag di configurazione a livello di configurazione. È semplice, prevedibile 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 blando.
Su iOS, le orientazioni supportate sono 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 visualizzazione specifici quando una schermata ha requisiti più stretti.
Quel divario è importante per i team cross-platform. La configurazione nativa risponde, “Cosa dovrebbe permettere l'app in generale?” La runtime code risponde, “Cosa dovrebbe fare la schermata in questo momento?”
Controllo programmatico negli app Capacitor
Se costruisci con Capacitor, il controllo dinamico è spesso gestito 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 una sequenza 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 una modalità specifica come 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, ciò significa spesso legare i cambiamenti di orientamento ai hook di ciclo di vita della pagina piuttosto che disperdere chiamate in componenti random.
Seleziona le restrizioni specifiche per lo schermo con cura
Utilizza un modo orizzontale fissato quando la rotazione disturberebbe l'input, l'allineamento o l'attenzione dell'utente.
Esempi comuni includono:
- Pantallas di autenticazione: gli input rimangono stabili mentre l'utente digita.
- Pasaggi di pagamento e conferma: minimi cambiamenti di layout durante compiti ad alta attenzione.
- Percorsi di guida o kiosk: l'interfaccia richiede una presentazione coerente.
Lascia che lo schermo si giri liberamente quando l'ampiezza aggiuntiva o un diverso grip aiuta chiaramente il compito.
Esempi tipici includono riproduzione di media, mappe, giochi, visualizzazioni della fotocamera e schermate di dati densi.
Una regola utile per i team junior è semplice. Se cambiare la direzione dello schermo alterasse solo lo spazio, lascia che il sistema di layout si occupi di esso. Se cambiare la direzione dello schermo cambiasse come funziona il compito, allora l'orientamento dello schermo a livello di code potrebbe 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 piccolo dettaglio di interfaccia utente e diventa rapidamente un comportamento dell'applicazione. Trattalo come un comportamento. Conserva la impostazione predefinita flessibile, applica restrizioni con parsimonia e rimuovile non appena lo schermo non ne ha più bisogno.
Pratiche di progettazione UX per l'orientamento dello schermo
L'orientamento dello schermo è una decisione di UX in primo luogo e una decisione tecnica in secondo luogo. Il code è di solito 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.
- Sostieni un ampio modo di visualizzazione che aggiunge valore: non bloccare la rotazione su schermi che beneficiano di un'ampiezza aggiuntiva.
- Blocca solo con una ragione chiara: una form, un checkout o un flusso sicuro potrebbe giustificarlo. Uno schermo di contenuto di solito non lo farà.
- Preserva lo stato durante la rotazione: gli utenti non dovrebbero perdere l'input, la posizione di scorrimento o le schede selezionate.
- Testate 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 linee guida per l'interfaccia utente e l'esperienza utente cross-platform per le app Capacitor si adattano bene alla verifica dell'orientamento perché la stessa schermata spesso deve sembrare nativa 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 si stanno inviando app Capacitor e si hanno bisogno di un comportamento di orientamento controllato insieme a fix di post-rilascio veloci Capgo è degno di una visita. Fornisce aggiornamenti in tempo reale per le app CapacitorJS e Electron, e mantiene anche plugin per le capacità di app come l'orientamento della schermata, che possono aiutare quando si ha bisogno di bloccare o abilitare specifiche viste senza ricostruire tutto il processo di rilascio.
