Header et raccourcis

Ecrit par le Vendredi 23 Juin 2017

Header et raccourcis
Le header est la zone qui constitue la partie supérieure de votre app. C'est un endroit stratégique. Le header est à la fois un élément essentiel de l'identité visuelle de l'app et une zone d'accès rapide pour y placer des liens.

Identité visuelle

Header et raccourcis
C'est dans le header que vous affichez le titre de votre app, ou bien votre logo.
Le header est visible sur la home et dans les sections. Dans les pages de détails, il est utilisé pour afficher des boutons de navigation et de partage.

Dans votre header, vous pouvez appliquer des couleurs de fond, des textures, des alignements. Vous pouvez choisir les icones des boutons de navigation et les polices d'affichage des textes. Les options pour configurer le design de cette zone sont nombreuses afin de vous permettre d'intégrer avec élegance votre charte graphique.

Il est possible de personnaliser l'affichage du header en fonction d'une section. Par exemple, pour une application de cuisine, vous pouvez proposer un header spécifique pour la section "Recettes" et un header spécifique pour la section "Evènements". Cette possibilité vous donne une grande flexibilité, toutefois veillez à maintenir une cohérence entre les différentes déclinaisons de header que vous proposez, afin de ne pas dérouter vos utilisateurs.
Header et raccourcis

Raccourcis

Le header dispose de 3 emplacements qui peuvent accueillir des liens. Utilisez ces emplacements pour proposer des actions rapides, facilement accessibles depuis la plupart des pages de l'app.
Il possible d'ajouter jusqu'à 6 raccourcis dans le header. Au delà de 4 raccourcis, le troisième emplacement est automatiquement utilisé pour afficher un menu additionnel.

L'icone, la destination, le titre et les couleurs de chaque raccourcis sont personnalisables.

Sur mobile, le raccourci est uniquement représenté par une icône. Sur tablette, il est possbile d'afficher le titre du raccourci à coté de l'icone. Sur laptop et desktop, le raccourci peut être transformé en bouton, par l'ajout d'une couleur de fond sous l'icone et le titre.

Le fonctionnement du menu additionnel est identique sur mobile et tablette. Il apparait en overlay au bas de l'écran. Sur laptop et desktop, il se déploie vers le bas à partir de l'icone lors du clic.
Header et raccourcis

Le header vous donne une flexibilité supplémentaire pour organiser la navigation dans votre app. Il est complémentaire de la home et du menu



Entrez votre adresse email