Blog

Bold TabBar: una navigazione più presente, pensata per strutturare l'interfaccia

Bold TabBar è pensato per le app che vogliono una navigazione visibile, strutturante e pienamente integrata nella loro identità visiva. Con la sua scheda distinta, il suo elemento selezionato fortemente messo in evidenza e il suo menu "More" come naturale prolungamento della tabBar, questo layout conferisce un vero ruolo visivo alla navigazione.

Tra i tre layout di lancio della nuova generazione di TabBar, Bold TabBar è quello che assume nel modo più chiaro la propria presenza nell'interfaccia.

Qui, la navigazione non cerca di passare inosservata. Inquadra lo schermo, stabilisce una gerarchia visiva netta e partecipa pienamente allo stile dell'app. Questo layout è particolarmente adatto alle app ricche di contenuti o con una forte identità, dove la navigazione deve essere visibile, leggibile e coinvolgente.

Un elemento distinto per mettere in evidenza un accesso chiave

Bold TabBar consente di integrare un elemento distinto, ovvero un accesso separato visivamente dal resto della barra.

Questa logica richiama la recente evoluzione delle tab bar di Apple, in cui alcuni accessi chiave, in particolare Search, possono essere presentati come una scheda visivamente distinta per rimanere immediatamente accessibili e più facilmente identificabili.

In GoodBarber, questo elemento distinto permette di mettere in evidenza una sezione importante, un punto di ingresso prioritario o un accesso particolare senza sovraffollare la lettura della navigazione principale. Visivamente, trova il suo posto nella composizione e rafforza l'idea di una TabBar più espressiva.

Questo è un punto di forza del layout: la navigazione può gerarchizzare i propri accessi in modo molto più chiaro, mantenendo al contempo la coerenza.

Una selezione fortemente messa in evidenza

Il principio di Bold TabBar è semplice: l'elemento selezionato si vede immediatamente.

Questa valorizzazione avviene tramite uno sfondo pieno che evidenzia chiaramente la scheda attiva. L'utente individua in un colpo d'occhio dove si trova, mentre la navigazione guadagna in impatto visivo. Questo trattamento funziona particolarmente bene nelle interfacce che ricercano una gerarchia netta e una presenza grafica più marcata.

Il risultato è molto diretto: la TabBar non si limita ad allineare icone o etichette. Struttura la lettura dello schermo e dà più peso allo stato attivo.

Un menu "More" che prolunga naturalmente la tabBar, su mobile e desktop

Un altro contributo importante del layout: il menu "More". Il menu "More" dà accesso alle sezioni non visibili nella TabBar, preservando al contempo una navigazione chiara ed equilibrata.

Qui non assomiglia a un pannello generico aggiunto accanto alla navigazione. Al contrario, adotta i codici visivi della barra e segue i suoi parametri di design. Forme, stile generale, livello di presenza: il menu "More" rimane nello stesso linguaggio visivo della TabBar.

Su desktop, questa logica acquista ancora più senso. La navigazione diventa verticale e il menu "More" si estende nella sua continuità. L'insieme dà l'impressione di un componente unico, coerente e ben disegnato, piuttosto che di un assemblaggio di elementi separati. Questa continuità si percepisce in modo particolare al momento dell'apertura del menu "More", con un'animazione che accompagna naturalmente la retrazione della tabBar e prolunga il movimento del componente.

Effetti e animazioni

Bold TabBar non si basa solo sulla sua struttura visiva. Si distingue anche per la qualità dei suoi effetti e delle sue animazioni.

Quando l'elemento selezionato utilizza un colore di sfondo, la transizione si arricchisce con un'animazione di selezione molto fluida, che accompagna lo spostamento dello stato attivo e rafforza la leggibilità della navigazione.

A ciò si aggiungono gli effetti aptici, che danno più consistenza alle interazioni e contribuiscono a quell'impressione di componente premium, reattivo e curato.

Un layout pensato per le app che vogliono valorizzare la propria navigazione

Bold TabBar è pensato per le app che vogliono fare della navigazione un elemento forte della propria interfaccia.

App di brand, universi editoriali, progetti lifestyle, app per eventi, alcuni contesti e-commerce o premium: ovunque la navigazione debba partecipare attivamente all'identità del prodotto, questo layout offre una risposta chiara.

Più presente, più strutturante e più espressiva, Bold TabBar permette di stabilire una solida cornice visiva, valorizzare meglio lo stato attivo, integrare con naturalezza una scheda distinta e prolungare la qualità del componente fino al menu "More" e alle animazioni.

Per le app che vogliono una navigazione visibile, coerente e ben disegnata, questa è una base particolarmente solida.

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.