eCommerce
Sistemi di abbonamento
Chatbot
Corsi online
Prenotazione online
Guida turistica
Eventi
Creatori di contenuti
Consegna locale e Ritiro in negozio
Giornale
Radio
Scuole e università
Fede
Organizzazioni
Ristorante
Alimentari
Costruisci l'app su misura
Comunicazione con i dipendenti
APP BUILDER SENZA CODICE
TECNOLOGIA
PERCHÉ GOODBARBER?
Design
RISORSE DEL PRODOTTO
TEMI
RIVENDITORI DI APP
SCOPRIItem: l'elemento che disegna ogni scheda della tua app
In un'app GoodBarber, ogni scheda della barra di navigazione 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 designer di GoodBarber 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.
Come l'Item segnala la scheda attiva
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 in breve
- 3 elementi: un'icona, un'etichetta, un indicatore (facoltativo).
- 3 composizioni: icona ed etichetta, solo icona, solo etichetta.
- 17 proprietà di progettazione: 8 per l'Item, 6 per la sua icona, 3 per la sua etichetta.
- 2 stati: predefinito e selezionato.
- 4 modi di segnalare la scheda attiva: il colore, lo sfondo, il bordo, l'indicatore.
- 3 indicatori, ognuno con la sua animazione: Dot, Tiny, Line.
- 3 schermi: mobile, tablet, desktop.
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. Non hai ancora un'app GoodBarber? Crea la tua.
