Comment configurer le menu de navigation de votre app ?

Bonjour et bienvenue dans votre backoffice GoodBarber!

Aujourd'hui nous allons parler des modes de navigation!

Ils sont très importants pour plusieurs raisons:

- ils structurent votre boutique

- ils font partie intégrante du design final de votre app

- ils jouent un rôle important dans l'expérience utilisateur de vos clients

Il s'agit de la navigation principale de votre boutique.

Pour le choisir, rendez vous dans le menu Content & Design, Design, Navigation menu.

Choisissez le template que vous voulez appliquer à votre app.

Chaque mode de navigation a ses propres propriétés et pourra mettre en valeur les différentes sections de votre boutique en fonction de vos besoins.

On va choisir le mode TabBar.

Ce mode contient deux grandes parties.

La navigation principale, qui apparaîtra en bas de votre app.

Et une navigation secondaire, qui sera dans un menu à part.

Pour organiser mes sections je n'ai qu'à les faire glisser entre la navigation principale et le menu Autres.

Ma première section est ma Home. Ensuite je vais mettre ma liste de collections qui s'appelle Collection, ma collection Sales, et le profil Utilisateur. Le reste des sections sera dans le menu Autre.

Je vous mets en barre d'infos les vidéos qui parlent des collections et des listes de collections.

Je vais modifier l'icône de ma Home.

Il suffit de cliquer dessus et voilà. Je mets une icône personnalisée, mais vous pouvez piocher dans notre bibliothèque d'icônes. Je vous mets la vidéo sur le changement d'icône en détails dans la barre d'infos.

Je peux aussi mettre en avant une section en modifiant la couleur de l'icône est du fonc. Je le fais pour ma section Sales.

Dans le menu paramètres, vous pouvez modifier le design de votre mode de navigation. Le fond général, l'affichage ou non des titres sous les icônes, la couleur des icônes, des séparateurs, etc.

Ça y est je suis satisfaite du rendu final.

Je vous montre ce que ça donne côté client.

Voila le design TabBar.

Et pour vous montrer un aperçu des autres voici les versions

Swipe

Little Swipe

Grid

et Slate

Voilà vous savez maintenant comment paramétrer le mode de navigation de votre boutique.

A bientôt pour un nouveau tutoriel !