Indietro

Item: l'elemento che disegna ogni scheda della tua app

il 

Ogni scheda della navigazione della tua app poggia su uno stesso elemento: l'Item, che può riunire un'icona, un'etichetta e un indicatore. L'abbiamo progettato per disegnare le nostre TabBar di oggi e di domani. Ora è documentato nel Design System di GoodBarber.

I tuoi contenuti sono curati, i tuoi colori scelti. Resta la barra di navigazione, quella che i tuoi utenti usano per passare da una sezione all'altra e che pesa molto sull'impressione che lascia la tua app. Ognuna delle sue schede poggia su un elemento pensato come un mattoncino: l'Item. Nella nuova generazione di TabBar, è lui a dare carattere a ogni navigazione.

Un'icona, un'etichetta, un indicatore

In un Item, ogni elemento ha il suo ruolo. L'icona rappresenta la sezione, l'etichetta ne mostra il nome e l'indicatore, facoltativo, segnala la scheda attiva. Ognuno si mostra o si nasconde separatamente, il che dà tre composizioni: icona ed etichetta, solo icona, solo etichetta.

È ciò che distingue la Minimal TabBar, tutta icone, dalla Clean TabBar, tutta testo: lo stesso elemento, composto in modo diverso.

17 proprietà per le TabBar di oggi e di domani

Per progettare una TabBar, i nostri designer dispongono di 17 proprietà: 8 per l'Item, 6 per la sua icona e 3 per la sua etichetta. La superficie dell'Item accetta un colore pieno, un gradiente o un effetto sfocato, un bordo, un'ombra, angoli vivi o arrotondati. Il suo layout ne regola la dimensione, l'orientamento, il margine interno, che delimita l'area touch, e la spaziatura che fa respirare i suoi elementi.

Tanta ricchezza non ti chiede di regolare tutto. Ci serve per comporre layout di TabBar completi, allineati ai codici attuali del design delle app: Bold, Minimal e Clean TabBar sono i primi tre. Quando questi codici cambieranno, nuovi layout nasceranno dallo stesso elemento, senza ripartire da zero. Così possiamo proporti TabBar sempre al passo con i tempi.

Nel tuo back office scegli la tua TabBar, poi la accordi alla tua identità: dimensione delle schede, arrotondamento degli angoli, colori, font delle etichette, modo di segnalare la scheda attiva. Le tue icone possono perfino affiancare quelle di sistema.

Stati leggibili, animazioni curate

Un Item ha due stati: predefinito e selezionato. Per distinguere la scheda attiva dispone di quattro mezzi, da soli o combinati: il colore, lo sfondo, il bordo e l'indicatore. Quest'ultimo compare solo sulla scheda selezionata, in tre forme: un punto (Dot), un trattino (Tiny) o una linea (Line).

Ogni forma ha il suo movimento. Il punto e la linea si restringono sulla scheda precedente e crescono sulla nuova, il trattino scivola dall'una all'altra. Quando la selezione passa per lo sfondo, come nella Bold TabBar, è lo sfondo colorato a spostarsi. Transizioni brevi, che rendono leggibile ogni cambiamento senza esagerare.

Lo stesso Item, dal mobile al desktop

L'Item adatta orientamento, margine interno e spaziatura a ogni schermo: mobile, tablet e desktop. In fondo a uno smartphone, l'icona si posiziona sopra l'etichetta. Su desktop, la TabBar diventa una barra laterale e l'Item può passare in orizzontale per trovarvi posto. Configuri la tua navigazione una sola volta: ogni schermo riceve la versione che gli si addice.

L'Item entra nel Design System

Dopo la TabBar, l'Item ha la sua pagina nel Design System di GoodBarber, e arriva in famiglia. Con l'Item Icon, l'Item Label e l'Item Indicator, apre una nuova categoria: gli UI Elements, i mattoncini dei nostri componenti, ognuno dedicato a un solo ruolo.

Per scoprire l'Item nel dettaglio, vai alla sua pagina del Design System. E per vederlo all'opera, scegli la tua TabBar nella sezione Menu del tuo back office.