HeaderPanel
Utilisation
Présentation
L'en-tête s'étend sur toute la largeur de la fenêtre et correspond à l'élément le plus haut de la fenêtre du navigateur. Il reste affiché tout au long de l'expérience produit, ce qui garantit la cohérence de la navigation. En tant que composant composite flexible, l'en-tête peut inclure différents éléments en fonction du cas d'utilisation. Actuellement, comme point de départ, nous utilisons le modèle d'en-tête pour garantir l'alignement et la cohérence entre les produits.
Quand l'utiliser
L'en-tête global est un élément obligatoire dans chaque application, ce qui permet de garantir une navigation cohérente et une expérience utilisateur unifiée entre les produits.
Structure
L'en-tête comprend généralement les éléments suivants :
- Nom du produit/Logo : représente la marque ou l'application.
- Barre de recherche : permet aux utilisateurs de trouver rapidement du contenu.
- Actions globales : peuvent inclure de l'aide, des notifications, des paramètres et un profil utilisateur.
Tous les éléments ne sont pas obligatoires. N'incluez que ce qui est nécessaire pour votre cas d'utilisation spécifique. L'en-tête est un composant ouvert et flexible qui peut accueillir divers éléments en fonction de cas d'utilisation spécifiques. Les équipes peuvent le personnaliser en ajoutant différents composants, outils et fonctionnalités selon les besoins, tout en conservant une expérience rationalisée.
Meilleures pratiques
- L'en-tête global doit toujours inclure un nom de produit. Le nom du produit, tant dans l'en-tête que dans le volet de navigation, doit être identique et comporter une majuscule initiale.
- Le logo « G » de Guidewire fonctionne comme un bouton. En cliquant dessus, les utilisateurs seront redirigés vers la page d'accueil.
Réactivité
- L'en-tête global est optimisé pour les écrans standard des ordinateurs de bureau et des tablettes.
- Sur les tablettes, le logo G de Guidewire et le nom du produit sont centrés et la chaîne de texte contextuelle est masquée. Les utilisateurs doivent cliquer sur l'icône des paramètres pour afficher les informations contextuelles dans un panneau.
