Barra delle applicazioni e intestazione

Il componente barra e intestazione dell'app è una barra dedicata nella parte superiore dell'area di disegno dell'app che può essere personalizzata per visualizzare importanti funzioni correlate all'app, come il branding, la navigazione di primo livello e l'accesso ai controlli dell'app.

Utilizza layout coerenti per la barra delle applicazioni e l'intestazione per posizionare i controlli chiave, come la ricerca in-app, in una posizione standard nell'intera interfaccia utente.

Anatomia

La barra delle applicazioni e l'intestazione possono includere una varietà di elementi. Possono essere configurate in uno dei seguenti modi:

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

Entrambe queste versioni possono includere anche controlli delle app, come la ricerca in-app e le impostazioni.

Specifiche – Barra delle applicazioni

Barra delle applicazioni con navigazione principale allineata al centro

Barra delle applicazioni con navigazione principale – allineata a sinistra

Barra delle applicazioni con navigazione principale – ridotta (cassetto anziché schede)

Specifiche – Intestazione dell'app

Intestazione dell'app con titolo centrato

Intestazione dell'app con controllo dell'app singolo

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 testo in eccesso

Intestazione dell'app con barra delle schede autonoma

Personalizzazione

Puoi esprimere il tuo brand modificando l'aspetto visivo della barra delle applicazioni e dell'intestazione. Le modifiche potrebbero includere:

• Icone personalizzate
• Caratteri personalizzati
• Impostazione dell'aspetto dei pulsanti attivi, inattivi e disabilitati
• Impostazione delle dimensioni e del posizionamento dei pulsanti

Esempi