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.
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
