Formatez votre application de sorte qu'elle corresponde à l'environnment. La navigation se faisant principalement via les en-têtes, assurez-vous de leur cohérence et usabilité à travers les interfaces.
Aperçu
L'en-tête est un ensemble de plusieurs couches.
Dans cet exemple, l'en-tête contient toutes les couches possibles.
Comportement
Le comportement de l'en-tête doit être cohérent et harmonieux, même lorsque toutes les couches ne sont pas utilisées.
Global Nav (Requis)
Cliquer sur le bouton en haut à gauche de l'en-tête principale ouvre un panneau, venant du côté gauche de la page. Ce panneau contient les autres modules accessibles par l'utilisateur(trice).
Les utilisateurs peuvent passer le curseur sur les 3 boutons à droite, et un clic les dirigent alors vers la page adéquate.
Seul le bouton de déconnexion se comporte différemment : un pop-up s'affiche, demandant la confirmation de l'utilisateur(trice) sur sa déconnexion de l'application. Cela évite les incidences de déconnexion.
Local Nav (Optionnel)
Le Local Nav indique l'application dans laquelle l'utilisateur(trice) est en train d'utiliser.
À côté, se trouvent les liens aux sections des applications.
Lorsque l'utilisateur(trice) est sur une page, le lien correspondant s'affiche dans la couleur correspondant à la deuxième couleur du thème de l'utilisateur(trice). Les autres liens, lorsque survolés par le curseur, affichent une ligne en bas avec cette couleur.
En-tête de page (Requis)
Le titre et l'icône à gauche peuvent être utilisés pour rafraîchir la page.
Le bouton à droite déclenche l'action indiqué par son nom.
Onglet de page (Optionnel)
Lorsque l'utilisateur(trice) clique sur un onglet, il glisse sur la page corespondant à la section. les onglets peuvent être survolés lorsqu'ils ne sont pas activés.
Navigation globale
Ce menu offre la navigation globale pour toutes les applications Hive.
Pour plus d'informations, voir Finance Active's Design System (en anglais).