Barra delle app e intestazione

La barra e il componente di intestazione dell'app sono una barra dedicata nella parte superiore della tela dell'app che può essere personalizzata per visualizzare importanti funzioni correlate all'app, come branding, navigazione di primo livello e accesso ai controlli dell'app.

Utilizza coerentemente la barra delle app e i layout delle intestazioni per posizionare controlli fondamentali, come la ricerca in-app, in una posizione standard all'interno dell'interfaccia utente.


Anatomia

L'intestazione della barra dell'app può includere una varietà di elementi. Può essere configurato in uno dei seguenti modi:

  • Intestazione app: se configurato come intestazione dell'app, il componente contiene spazio per il testo facoltativo, con un utilizzo minimo di icone e pulsanti. In genere include un titolo dello schermo e una freccia indietro.
  • Barra dell'app: se configurata come barra dell'app, può includere icone, schede e pulsanti. Gli elementi tipici includono un'icona dell'app e opzioni di navigazione.

Ognuna di queste versioni può includere anche controlli delle app, ad esempio impostazioni e ricerca in-app.

Barra dell'app e anatomia delle intestazioni
Due versioni di intestazione dell'app (in alto e al centro) e una versione di una barra dell'app (in basso), con i seguenti elementi:
1. Freccia indietro
2. Titolo schermata
3. Pulsante
4. Controlli dell'app
5. Icona dell'app
6. Navigazione principale (schede)

Specifiche – Barra dell'app

Barra dell'app con navigazione principale allineata al centro

Barra dell'app con navigazione principale allineata a sinistra

Barra dell'app con la navigazione principale - compressa (cassetto anziché schede)


Specifiche – Intestazione app

Intestazione dell'app con titolo centrato

Intestazione app con controllo singola app

Intestazione dell'app con più controlli dell'app

Intestazione dell'app con un singolo pulsante

Intestazione dell'app con più pulsanti

Intestazione dell'app con overflow del testo

Intestazione dell'app con barra delle schede autonoma


Personalizzazione

Gli OEM possono riflettere il loro brand modificando l'aspetto visivo della barra delle app e dell'intestazione. Le modifiche possono includere:

  • Icone personalizzate
  • Caratteri personalizzati
  • Impostazione dell'aspetto dei pulsanti attivi, non attivi e disattivati
  • Impostazione di dimensioni e posizionamenti dei pulsanti

Il sistema di progettazione fornisce indicazioni per la personalizzazione dei componenti tramite layout, colori, tipografia e dimensioni.


Esempi

Intestazione app nell'accesso
Intestazione app nella riproduzione
Barra dell'app
Barra dell'app quando scorri i contenuti