TabBar: arriva una nuova generazione
Scritto da Lesia PIETRI il
Con la nuova TabBar, arricchiamo la navigazione delle tue app con 3 nuovi layout, più opzioni di personalizzazione, animazioni di selezione e un approccio multi-device pensato per ogni schermo.

In un'app mobile, la navigazione non serve soltanto a passare da una sezione all'altra. Struttura l'esperienza, crea riferimenti visivi forti e contribuisce direttamente alla percezione complessiva del prodotto. Con il nuovo componente TabBar, apriamo una nuova tappa nella progettazione della navigazione, con più libertà di design, più flessibilità nella personalizzazione e un adattamento più curato a ciascun dispositivo.
Tre nuovi layout per dare il tono

Questa nuova generazione di TabBar arriva con tre layout disponibili sin dal lancio: Bold TabBar, Minimal TabBar e Clean TabBar.
- Bold TabBar dà più presenza alla navigazione, con una struttura visiva forte e decisa.
- Minimal TabBar propone un approccio più moderno e più compatto.
- Clean TabBar offre un equilibrio elegante, con una resa pulita, versatile e facile da integrare in universi grafici molto diversi.
Con queste tre direzioni, la barra di navigazione diventa una vera leva di stile. Può allinearsi in modo più preciso all'identità dell'app, che si tratti di un progetto editoriale, di un'app di brand, di un servizio, di un universo lifestyle o di un'applicazione e-commerce.
Una TabBar più ricca da personalizzare
Il nuovo componente non si limita ai nuovi layout. Si inserisce nell'evoluzione continua del Design System GoodBarber e amplia le possibilità di personalizzazione della navigazione. Sfondi, forme, ombre, struttura degli elementi, stati selezionati, menu "More", variazioni in base ai dispositivi: ogni dimensione è stata pensata per offrire più precisione nella resa, mantenendo al tempo stesso la coerenza visiva dell'app. Questa nuova TabBar incarna pienamente l'ambizione del nostro Design System: dare più libertà di creazione, senza mai rinunciare alla qualità di esecuzione.
Le animazioni di selezione accompagnano questa evoluzione portando più fluidità alle interazioni, una migliore leggibilità dei cambi di stato e una sensazione di interfaccia ancora più curata.
Su iOS e PWA, la nuova TabBar può anche beneficiare degli effetti Material Blur, che aggiungono profondità e un tocco ancora più premium alla resa visiva.
Una navigazione pensata per ogni schermo

Questa evoluzione riflette anche un approccio multi-device più deciso. Su mobile, la TabBar mantiene la sua posizione naturale in basso allo schermo. Su desktop, diventa verticale per sfruttare meglio lo spazio disponibile e inserirsi negli usi propri delle interfacce su grandi schermi.
Questa scelta prolunga la logica mobile-first di GoodBarber affermando al tempo stesso una vera qualità di adattamento su desktop. Non si tratta semplicemente di mostrare la stessa navigazione ovunque, ma di proporre un'esperienza coerente con ciascun contesto d'uso.
Una nuova tappa per il design delle app su GoodBarber

Con questo nuovo componente, GoodBarber arricchisce ulteriormente le possibilità offerte a chi vuole creare un'app mobile dal design premium, senza uscire dalla semplicità di produzione propria del no-code.
Più espressiva, più personalizzabile, più fluida e meglio pensata per ogni schermo, questa nuova TabBar dà una nuova dimensione alla navigazione nelle app GoodBarber. Un'evoluzione che rafforza sia la qualità percepita delle interfacce sia la libertà creativa offerta a designer, brand, media e a tutti i creatori di app.
Design