Comment choisir le mode de navigation de votre app ?

Bonjour et bienvenue dans votre back office GoodBarber!

Aujourd'hui nous allons parler des Modes de navigation!

Ils font partie intégrante du design final de votre app et sont la pour structurer votre app !

Ils jouent un role capital dans l'expérience de vos utilisateurs.

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

Pour ce tutoriel nous allons utiliser notre app de local business: Freyja Spa.

Pour le choisir rendez vous dans le menu My app, Design, Navigation menu.

Choisissez le template que vous voulez appliquer à votre app.

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

On va choisir le mode Slate.

J'arrive dans la page d'organisation de mon mode de navigation.

Le mode Slate est divisé en trois parties.

La première partie est le Header.

Vous pouvez y ajouter votre logo, un raccourci vers le profil utilisateur si vous avez activé l'add-on Authentification, des raccourcis et/ou des séparateurs.

Moi je vais simplement ajouter le logo de mon app.

Ensuite on passe à la navigation principale.

On retrouve ici toutes les sections qu'on a sélectionnées pour la navigation principale dans le menu My app > Content > Sections.

J'ai envie de mettre en avant le lien vers les services proposés par le spa pour qu'il soit très accessible pour les utilisateurs.

Je cique sur le lient OUR SERVICES et j'active l'option "Feature this link".

Je modifie la couleur et voilà. Mon lien est mis en avant!

Il me reste à créer mon footer.

Comme pour le header on peut ajouter des liens.

Je vais ajouter un lien vers le profil utilisateur.

Vers la section Settings.

Et enfin vers la page Facebook du spa.

On passe maintenant dans le menu paramètres, vous pouvez y modifier le design de votre mode de navigation. L'affichage du logo qu'on a mis en place tout à l'heure, la couleur et l'effet de l'arrière plan.

Les couleurs et la police utilisée.

L'affichage du footer et sa position.

Enfin on règle les options du menu.

Son affichage: toujours fermé, ou ouvert au lancement de l'app.

Et la couleur du bouton de fermeture.

Ca y est je suis satisaite du rendu final.

Je vous montre ce que ca donne coté client.

Voila le design Slate.

Et pour vous montrer un apercu des autres voici les versions

Swipe

Little Swipe

TabBar

et

Grid

Vous pouvez aussi créer votre menu de zéro ou tout simplement désactiver le menu et utiliser seulement la Home page comme moyen de navigation.

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

A bientot pour un nouveau tutoriel !