Layout

Questa sezione fornisce linee guida per la progettazione dei layout di schermata che possono essere ridimensionate su schermi di varie dimensioni.

I valori di spaziatura interna e linea di tasti definiti qui vengono utilizzati in Componenti, Specifiche dei contenuti multimediali, specifiche del Centro notifiche e specifiche del telefono.

Guida in sintesi (TL:DR):

  • Layout di base su categorie di dimensioni dello schermo appropriate
  • Utilizzare una griglia 8 dp per l'allineamento
  • Impostare le larghezze dei margini sul 12% dello spazio di lavoro dell'app
  • Posiziona le barre di scorrimento e gli strumenti di navigazione a margine
  • Utilizzare una spaziatura interna per mantenere la spaziatura tra gli elementi

Concetti chiave relativi al layout

  • Spazio di lavoro dell'app: l'area dello schermo disponibile per un'app dopo aver preso in considerazione lo spazio occupato dalle funzionalità dell'interfaccia utente di sistema e del produttore dell'auto.
  • Categorie di dimensioni dello schermo: un insieme di quattro intervalli di larghezza dello schermo (standard, ampie, extra larghe e super larghe) e tre intervalli di altezza dello schermo (breve, standard e alto), dove "schermo" si riferisce allo spazio di lavoro dell'app anziché allo spazio da un bordo all'altro
  • Spaziatura interna: un insieme di valori di spaziatura che specifica una spaziatura verticale e orizzontale fissa tra elementi e componenti in un layout.
  • Parole chiave: un insieme di valori di spaziatura per larghezza variabile (determinati da categorie di larghezza) che indicano lo spazio orizzontale tra un margine o un bordo di un componente e un elemento in un layout.
  • Area flessibile:una parte di un componente, a volte assegnata a un valore minimo o massimo, che può essere ridimensionato per adattarsi alle dimensioni dello schermo.

Spazio di lavoro dell'app

Lo spazio di lavoro di un'app è l'area sullo schermo rimanente dopo aver preso in considerazione lo spazio occupato dalle funzionalità del produttore dell'auto e dell'interfaccia utente di sistema. Lo spazio di lavoro dell'app deve contenere margini sinistro e destro e il canvas, che è l'area dei contenuti principale dell'app.

Ogni margine deve essere pari al 12% della larghezza dello spazio di lavoro dell'app. I margini in genere contengono barre di scorrimento e tariffe di navigazione per l'app.

Esempi di spazi di lavoro delle app
Esempi di vari spazi di lavoro delle app

Dimensioni schermo

I layout delle specifiche di riferimento sono associati a un insieme di categorie di dimensioni dello schermo in base alla larghezza e all'altezza dello spazio di lavoro dell'app.

Nelle specifiche di queste linee guida, queste categorie sono chiamate per nome. Ad esempio, "Wide" si riferisce a tutte le larghezze dello schermo nell'intervallo da 930 dp a 1279 dp.

Le categorie di dimensioni dello schermo influiscono sui consigli per:

  • Spaziatura chiave in componenti ed elementi
  • Ridimensionamento delle aree flessibili dei componenti
  • Quando nascondere o visualizzare gli elementi facoltativi, ad esempio la copertina dell'album, sulla barra di controllo ridotta a icona

Categorie di larghezza

Illustrazione punti di interruzione larghezza
Standard Ampia XL Super grandangolare
Intervallo larghezza schermo 690-929 dp 930-1279 dp 1280-1919 dp ≥ 1920dp

Categorie di altezza

Illustrazione punto di interruzione altezza
Short Standard Alte
Intervallo di altezza dello schermo 0-609 dp 610 – 1199dp ≥ 1200dp

Spaziatura

I layout delle specifiche di riferimento sono strutturati su una griglia 8 dp. In pratica, ciò significa che i componenti e gli elementi dell'interfaccia utente nelle specifiche sono separati da multipli di 8 dp.

Esistono due tipi di spaziatura:

  • Spaziatura interna, per spaziatura a larghezza fissa e ad altezza fissa

  • Linee chiave, per la spaziatura a larghezza variabile


Spaziatura interna

La spaziatura interna stabilisce la spaziatura a larghezza fissa e ad altezza fissa tra i componenti in un layout con specifiche di riferimento. Può anche dettare spaziature fisse tra gli elementi di un componente, ad esempio lo spazio tra i numeri target adiacenti sul componente del tastierino. In genere, più la relazione è stretta tra due elementi, più stretta è la spaziatura interna.

Esistono 9 valori di spaziatura interna, designati come P0 - P8.

Ecco i valori di spaziatura interna e le dimensioni corrispondenti:

Specifica di riferimento per i valori di spaziatura interna
P0 P1 P2 P3 P4 P5 P6 P7 P8
4dp 8 DP 12dp 16dp 24dp 32dp 48dp 64dp 96dp

A differenza delle linee guida che modificano i valori di spaziatura in base alle categorie di larghezza dello schermo, i valori di spaziatura interna rimangono costanti. Ad esempio, P1 è sempre 8 dp. In alcuni casi, tuttavia, la distanza tra un determinato insieme di componenti o elementi potrebbe avere valori di spaziatura interna diversi nei layout delle specifiche di riferimento per le diverse dimensioni dello schermo. Ad esempio, la spaziatura verticale consigliata tra gli elementi della griglia è P4 per gli schermi brevi e P5 per gli schermi standard e alti.


Keyline

Invece di indicare la spaziatura interna tra gli elementi in una specifica di riferimento, le linee chiave specificano la distanza di un elemento dal margine o dal bordo più vicino di un componente. I valori chiave cambiano in base alla larghezza dello schermo. Offrono un modo pratico per ridimensionare un layout in base alle diverse dimensioni dello schermo mantenendo la spaziatura orizzontale proporzionale agli elementi.

Ci sono 5 linee chiave, indicate da KL0 a KL4.

Ecco i valori chiave per ogni larghezza schermo:

Specifiche di riferimento per i valori chiave
Larghezza dello schermo Standard Ampia XL Super grandangolare
KL0 16dp 24dp 24dp 32dp
KL1 24dp 32dp 32dp 48dp
KL2 96dp 112dp 112dp 112dp
KL3 112dp 128dp 128dp 152dp
KL4 148dp 168dp 168dp 168dp

Strategie di scalabilità

I layout delle specifiche di riferimento forniscono linee guida per scalare le app su schermi di dimensioni diverse. Per facilitare la scalabilità, in genere le specifiche includono:

  • Un'area flessibile, che fa parte di un componente che le case automobilistiche devono espandersi o contrarre per adattarsi alle dimensioni specifiche dello schermo
  • Larghezza minima e massima consigliata per l'area flessibile, destinata a evitare che i componenti vengano ridimensionati a dimensioni indesiderate
  • Principali righe utilizzate per mantenere la spaziatura orizzontale proporzionale degli elementi, che viene ridimensionata in modo diverso in base alla categoria della larghezza dello schermo
  • Imbottitura, per specificare la spaziatura fissa tra componenti ed elementi.

In via facoltativa, alcune specifiche consentono di specificare se nascondere o mostrare determinati elementi in base alla larghezza dello schermo.

Esempio 1: barra di controllo ridotta a icona

La barra di controllo ridotta al minimo è un esempio di componente per il quale il layout delle specifiche di riferimento consiglia di piegare la larghezza del componente e di nascondere un elemento non essenziale negli schermi di dimensioni più piccole.

Specifiche della barra di controllo ridotta a icona
Specifiche per la barra di controllo ridotta al minimo

Le specifiche per una barra di controllo ridotta a icona includono 2 linee guida per la scalabilità:

  1. L'elemento quadrato a sinistra (utilizzato generalmente per la copertina dell'album) dovrebbe essere visualizzato solo quando la larghezza dello schermo è pari o superiore a 930 dp.
  2. La sezione flessibile di larghezza centrale non deve mai essere inferiore a 440 dp e può essere ingrandita per schermi più ampi purché l'intera larghezza dei componenti non superi i 1028 dp.
L'animazione seguente mostra come può essere ridimensionata la barra di controllo ridotta a schermi più larghi e più stretti seguendo i consigli nei layout di riferimento.

Animazione della barra di controllo ridotta a icona
Animazione della barra di controllo ridotta al minimo

Esempio 2: griglie

Gli elementi Grid sono un esempio di componenti che possono essere posizionati e ridimensionati in colonne e righe all'interno di un layout.

Specifiche adattive griglia
Specifiche adattive della griglia

Il numero consigliato di colonne (3 per gli schermi più piccoli, 4 per gli schermi più larghi) dipende dalle dimensioni dello schermo. La larghezza delle colonne e l'altezza delle righe possono essere regolate all'interno di una categoria di schermata, purché le griglie non siano mai inferiori alla larghezza minima consigliata. L'animazione seguente mostra come ridimensionare le griglie su schermi più larghi e stretti seguendo i consigli nei layout di riferimento.

Animazione adattiva griglia
Animazione adattiva della griglia