Blog

Minimal TabBar: una navigazione compatta, icon-only e decisamente moderna

Minimal TabBar è pensata per le app che cercano una navigazione più compatta, più moderna e ricentrata sull'essenziale. Con il suo approccio icon-only, il suo look fluttuante, i suoi indicatori di selezione e il suo menu "More" in continuità con la tabBar, questo layout propone una lettura semplice, attuale e particolarmente curata della navigazione.

Tra i tre layout di lancio della nuova generazione di TabBar, Minimal TabBar è quello che spinge più lontano l'idea di semplificazione visiva.

Qui, la navigazione va all'essenziale. La tabBar adotta un approccio icon-only, senza testo, con una composizione più compatta e una resa fluttuante molto contemporanea. L'insieme occupa poco spazio, si legge immediatamente e dona all'interfaccia una presenza più leggera, più netta e più moderna.

Una navigazione icon-only, compatta e fluttuante

Minimal TabBar si fonda su un'idea semplice: ridurre la navigazione ai suoi elementi più essenziali.

Le etichette scompaiono, le icone bastano a strutturare la lettura e la tabBar adotta una forma più raccolta. Questa scelta dona alla navigazione una resa più compatta, ma anche più grafica. La TabBar diventa un elemento diretto, facile da individuare e ben integrato nello schermo, senza sovraccaricare l'interfaccia.

L'altra sua caratteristica forte è il floating look. La tabBar non si inscrive come un blocco massiccio incollato al bordo dello schermo. Sembra posata nell'interfaccia con più leggerezza, il che rafforza immediatamente la modernità della resa.

Uno stato selezionato più sottile, con diversi tipi di indicatori

Minimal TabBar non si limita a proporre uno sfondo sull'item selezionato. Il componente permette anche di giocare con l'indicatore di selezione.

A seconda dei parametri scelti, è possibile utilizzare:

  • uno sfondo per l'item attivo,
  • un indicatore di tipo Dot,
  • o un indicatore di tipo Tiny.

È un punto particolarmente interessante, perché permette di regolare in modo molto fine il modo in cui lo stato attivo si esprime nella navigazione. A seconda del livello di presenza ricercato, la selezione può essere più marcata o, al contrario, più discreta, restando sempre leggibile.

Questa flessibilità corrisponde perfettamente allo spirito del layout: una navigazione compatta, ma mai povera nel suo livello di rifinitura.

Animazioni che si adattano allo stile scelto

Uno degli apporti più interessanti del nuovo componente TabBar è che le animazioni di selezione si adattano ai parametri applicati.

L'animazione accompagna dunque la logica visiva scelta per la tabBar e per lo stato attivo. Se l'item selezionato utilizza uno sfondo, il movimento segue questa scelta. Se la selezione poggia su un indicatore più discreto come Dot o Tiny, la transizione si adatta di conseguenza.

È un vero plus, perché permette di mantenere una coerenza tra il disegno del layout e il suo comportamento. In Minimal TabBar, questa logica rafforza la sensazione di finezza e precisione. Le transizioni restano fluide, ma sempre al servizio dello stile scelto.

A questo si aggiungono gli effetti haptics, che rafforzano la sensazione di precisione e accompagnano la navigazione con ancora più finezza.

Un menu "More" fedele alla logica compatta del layout

Il menu "More" di Minimal TabBar, che dà accesso alle schede nascoste, riprende anch'esso lo spirito del layout.

Conserva un design semplice, compatto e ben proporzionato, in diretta continuità con la tabBar. La sua altezza si adatta al contenuto, in coerenza con l'approccio raccolto ed essenziale portato avanti da questo layout.

Su mobile come su desktop, questa continuità visiva partecipa a una navigazione semplice, padroneggiata e molto ben integrata nell'interfaccia.

Una navigazione compatta, ma molto curata

Minimal TabBar dimostra che una navigazione molto raccolta può anche essere ricca di possibilità.

Con il suo approccio icon-only, il suo floating look, i suoi diversi indicatori di selezione, le sue animazioni adattate e il suo menu "More" compatto, questo layout propone una lettura particolarmente moderna della navigazione mobile.

Per le app che cercano una navigazione più compatta, più grafica e più contemporanea, Minimal TabBar costituisce una base particolarmente efficace.

Continua a leggere

  4 min di lettura

I tuoi eventi, le adesioni e le donazioni HelloAsso ora compaiono nella tua app

In breve. HelloAsso Eventi e HelloAsso Campagne sono due estensioni di GoodBarber, l'app builder no-code, che leggono i moduli pubblici di un'associazione su HelloAsso. HelloAsso Eventi riempie una sezione agenda con i prossimi eventi, con data, luogo e prezzi, e un pulsante per iscriversi nell'app. HelloAsso Campagne riempie una sezione di articoli con adesioni, moduli di donazione e raccolte fondi: le adesioni si aprono nell'app, le donazioni nel browser del telefono. Le colleghi con le credenziali API HelloAsso della tua associazione. Entrambe sono gratuite per le app Content: ogni sezione conta come una delle estensioni incluse nel tuo piano.HelloAsso è il servizio con cui molte associazioni francesi vendono già i biglietti e raccolgono le adesioni. A febbraio 2025 ha superato i due miliardi di euro raccolti per le associazioni dal 2009, metà dei quali nei 18 mesi precedenti, e conta 376.000 associazioni iscritte, secondo Le Journal des Entreprises del 6 marzo 2025. Ecco come funzionano le due estensioni per un club sportivo di quartiere.

  7 min di lettura

Come regolare i bordi nella mia app?

In GoodBarber, ogni cella, widget e campo ha già il suo bordo di 1 px. Dagli un colore, uno spessore di 1, 2 o 4 px, o un solo lato sotto un titolo.