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 l'area 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 ritrattonon 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 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 per primo quando la schermata 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 di una persona e del suo corpo superiore 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 di 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ò influenza la lettura, la raggiungibilità del dito, il flusso di lettura, la progettazione dei moduli e la posizione della navigazione.
A una feed, visualizzazione articolo, schermo impostazioni o thread di chat si legge di solito più naturalmente in un frame verticale. Questo è uno dei motivi per cui le scelte di orientamento si connettono direttamente alle decisioni di esperienza utente dell'app mobile, non solo allo stile visivo. le decisioni di esperienza utente dell'app mobile, non solo allo stile 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 l'orientamento con la risoluzione o context:HTML frammento di testo da una stringa UI Capgo più lunga (chiave padre `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 esattamente. Chiave di messaggio `alternatives_cta_questions` (Domande di chiamata all'azione per le alternative). | Frammento di testo HTML da una stringa UI Capgo più lunga (chiave padre `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 esattamente. Chiave di messaggio `appflow_cta_questions` (Domande di chiamata all'azione per Appflow). | Frammento di testo HTML da una stringa UI Capgo più lunga (chiave padre `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 esattamente. Chiave di messaggio `capwesome_cta_questions` (Domande di chiamata all'azione per Capawesome). | Pagina/area: pagina di servizi di consulenza. Ruolo: sottotitolo o didascalia di sezione. Visto in: pagina consulting.astro. Preservare i termini di prodotto e marchio Capgo esattamente. Chiave di messaggio `consulting_faq_subtitle` (Sottotitolo FAQ per i servizi di consulenza). | Pagina/area: copia di marketing di confronto/migrazione di Appflow. Ruolo: breve etichetta UI o elemento di navigazione. Visto in: pagina ionic-appflow.astro, pagina ionic-enterprise-plugins.astro, pagina soluzioni/ionic-enterprise-plugins.astro. Chiave di messaggio `appflow_plugins_or` (Appflow Plugins o).. Sono correlate, 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
Un modo semplice per pensare a questo è attraverso la composizione. Un ritratto pittorico focalizza l'attenzione su una persona o su un 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 di UI, l'orientamento ritratto è il rettangolo dove l'altezza supera la larghezzaquindi le estremità più lunghe sono verticali. Questo è l'inverso 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 | contexto: Pagina/Area: Capgo Builder / prodotto di costruzione nativa cloud. Ruolo: Etichetta di navigazione breve o elemento UI. Chiave di messaggio `native_build_builder_compare_fit_feature` (Native Build Builder Compare Fit Feature). |
|---|---|---|---|
| Effetto tipico | Ritratto | Più alto che largo | Cattura l'attenzione verticalmente |
| Paesaggio | Più largo che alto | Video, mappe, dashboard, scene ampie | Mostra più contesto orizzontale |
Sembra banale, ma è utile quando devi fare scelte in una recensione del prodotto.
Cosa cambia per l'utente
Il ritratto riduce spesso l'attenzione. Rende meno visibile 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 ti dà spesso più spazio.
Il ritratto è spesso sulla concentrazione. Il paesaggio è spesso sul contesto.
Cosa cambia per lo sviluppatore
L'errore più grande è trattare il formato più largo come una versione allungata del ritratto. Non è. La gerarchia delle informazioni deve cambiare spesso.
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, lo stesso schermo può sembrare scomodo se i campi diventano troppo compressi verticalmente.
I sviluppatori che lavorano su layout mobili immersivi devono anche pensare a gestione di bordo, 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.
Casi d'uso comuni in diversi media
L'orientamento ritratto compare in più luoghi che le schermate 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 poster e alle copertine delle riviste.
La progettazione della stampa si basa anche sull'orientamento 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 orientamento 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 il limite del ritratto anche tu. 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 questi casi, 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 orizzontale.
- 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 di solito 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à.
Un sacco di UI mobile sembra intuitivo perché l'interfaccia assume un dispositivo eretto prima di assumere qualcos'altro.
Ciò 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.
Gestione 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 continua a contare. Utilizzare 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 sistema operativo 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 all'app installata di dichiarare un modo preferito di orientamento verticale come portrait, portrait-primaryo portrait-secondary. MDN documenta quei valori di manifesto nella sua Riferimento all'orientamento del manifesto Web App.
Utilizza 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 verticale stretto come impostazione predefinita. Poi aggiungi spazio per l'UI secondaria solo quando la finestra di visualizzazione diventa più ampia.
Alcune pratiche risparmiano tempo in seguito:
- Parti dal tuo modo principale: Se le persone utilizzano principalmente l'app in posizione verticale, fai che sia la disposizione di base.
- 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 titoli adesivi e le schede in fondo spesso falliscono durante la rotazione, non nelle schermate statiche.
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 tavole 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, CSS dovrebbe gestirlo.
Una regola pratica aiuta i team junior a evitare molta complessità. Non utilizzare JavaScript per forzare le decisioni di disposizione 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 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 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 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.
Controllo della piattaforma nativa
Su Android, l'orientamento viene 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, 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 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 visualizzazione specifici quando una schermata ha requisiti più stretti.
Quel divario è importante per i team cross-platform. La configurazione nativa risponde a “Cosa dovrebbe permettere l'app in generale?” La 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 potrebbe essere più facile da usare in orizzontale. Una schermata di media o una sequenza di fotocamera potrebbe 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 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 diffondere 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: minore numero di cambiamenti di layout durante compiti ad alta attenzione.
- Pantallas di kiosk o workflow guidati: 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 di fotocamera e schermate di dati densi.
A useful rule for junior teams is simple. If changing device direction would only alter spacing, let the layout system handle it. If changing device direction would change how the task works, then screen-level orientation code may be justified.
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 dell'interfaccia utente e diventa rapidamente un comportamento dell'applicazione. Trattalo come un comportamento. Mantieni 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'elaborazione dell'orientamento è una decisione di progettazione UX prima e una decisione tecnica seconda. 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 più ampio modo di visualizzazione dove aggiunge valore: non blocca la rotazione su schermi che beneficiano di un'altezza aggiuntiva.
- Blocca solo con una ragione chiara: un modulo, un pagamento 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 deve spesso sembrare nativa su diverse dimensioni di dispositivo e convenzioni di piattaforma.
La principale conclusione è semplice. Se stai chiedendo cosa è un'orientamento ritratto, la risposta non è solo “verticale.” È una regola di composizione, uno stato di layout e un'aspettativa dell'utente. Le buone app trattano così.
Se stai distribuendo app Capacitor e hai bisogno di un comportamento di orientamento controllato insieme a correzioni rapide dopo la rilascio Capgo è da considerare. 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 può aiutare quando hai bisogno di bloccare o abilitare specifiche viste senza ricostruire tutto il processo di rilascio.
