Retour

TabBar : place à une nouvelle génération

le 

Avec la nouvelle TabBar, nous enrichissons la navigation de vos apps avec 3 nouveaux layouts, davantage de personnalisation, des animations de sélection et une approche multi-device pensée pour chaque écran.

Dans une app mobile, la navigation ne sert pas seulement à passer d'une section à l'autre. Elle structure l'expérience, crée des repères visuels forts et contribue directement à la perception globale du produit. Avec le nouveau composant TabBar, nous ouvrons une nouvelle étape dans la conception de la navigation, avec plus de liberté de design, plus de flexibilité dans la personnalisation et une adaptation plus poussée selon les devices.

Trois nouveaux layouts pour donner le ton

Cette nouvelle génération de TabBar s'accompagne de trois layouts disponibles dès le lancement : Bold TabBar, Minimal TabBar et Clean TabBar.

  • Bold TabBar donne plus de présence à la navigation, avec une structure visuelle forte et assumée.
  • Minimal TabBar propose une approche plus moderne et plus compacte.
  • Clean TabBar offre un équilibre élégant, avec un rendu épuré, polyvalent et facile à intégrer dans des univers graphiques variés.

Avec ces trois directions, la barre de navigation devient un véritable levier de style. Elle peut s'aligner plus finement sur l'identité de l'app, qu'il s'agisse d'un projet éditorial, d'une app de marque, d'un service, d'un univers lifestyle ou d'une application e-commerce.

Une TabBar plus riche à personnaliser

Le nouveau composant ne se résume pas à de nouveaux layouts. Il s'inscrit dans l'évolution continue du Design System GoodBarber et enrichit les possibilités offertes pour personnaliser la navigation. Backgrounds, formes, ombres, structure des items, états sélectionnés, menu "More", variations selon les appareils : chaque dimension a été pensée pour offrir plus de précision dans le rendu, tout en conservant la cohérence visuelle de l'app. Cette nouvelle TabBar illustre pleinement l'ambition portée par notre Design System : donner plus de liberté de création, sans jamais perdre en qualité d'exécution.

Les animations de sélection accompagnent cette évolution en apportant plus de fluidité aux interactions, une meilleure lisibilité des changements d'état et une sensation d'interface encore plus soignée.

Sur iOS et PWA, la nouvelle TabBar peut également profiter d'effets Material Blur, qui apportent de la profondeur et une touche encore plus premium au rendu visuel.

Une navigation pensée pour chaque écran

Cette évolution reflète aussi une approche multi-device plus affirmée. Sur mobile, la TabBar conserve sa position naturelle en bas de l'écran. Sur desktop, elle devient verticale afin de mieux exploiter l'espace disponible et de s'inscrire dans les usages propres aux interfaces sur grands écrans.

Ce choix prolonge la logique mobile-first de GoodBarber tout en affirmant une vraie qualité d'adaptation sur desktop. Il ne s'agit pas simplement d'afficher la même navigation partout, mais de proposer une expérience cohérente avec chaque contexte d'usage.

Une nouvelle étape pour le design des apps sur GoodBarber

Avec ce nouveau composant, GoodBarber enrichit encore les possibilités offertes à celles et ceux qui veulent créer une app mobile au design premium, sans sortir de la simplicité de production propre au no-code.

Plus expressive, plus personnalisable, plus fluide et mieux pensée pour chaque écran, cette nouvelle TabBar donne une nouvelle dimension à la navigation dans les apps GoodBarber. Une évolution qui renforce à la fois la qualité perçue des interfaces et la liberté de création offerte aux designers, aux marques, aux médias et à tous les créateurs d'apps.

Conseils pour créer une app