Les en-têtes du Design System

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.

Header_FR.png

 

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)

GlobalNav_FR.png

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)

LocalNav_FR.png

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)

PageHeader_FR.png

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)

PageTab_FR.png

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.

GlobalNavigation_FR.png 

 

Pour plus d'informations, voir Finance Active's Design System (en anglais).

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0