Suivez la mise en page (structure) adaptée
L'entête (ou "header" en anglais)
Après la barre système (qui comprend les pictogrammes wifi, batterie, heure, notifications et qui peut avoir un fond transparent ou opaque)…
…vient la barre de l'application, encore appelée barre d'outils. Elle porte souvent un titre et des pictogrammes qui permettent un certain nombre d'actions, notamment celui du menu hamburger et celui de la recherche).
Voici leur disposition et la répartition entre les différents éléments d'UI :
La barre d'outils peut d'ailleurs varier en hauteur :
Le contenu central
Vous placez logiquement au centre de l'écran, le contenu principal, sur lequel vient se greffer des éléments d'UI, comme un bouton flottant par exemple.
Contrairement à l'en-tête et au pied-de page, le contenu central change régulièrement au fil de la navigation dans le produit.
Le pied-de-page (ou "footer" en anglais)
Utilisez la grille de composition
Ci dessous, vous trouverez les deux aides principales que j'utilise pour composer des interfaces utilisateurs, en l'occurence ici pour le mobile :
L'écran de gauche décrit l'espacement horizontal à respecter entre les différentes zones qui vont de la gauche vers la droite.
L'écran de droite décrit le ratio des zones et des images à insérer dans un écran.
Largeur des zones de composition
Barre système : 24dp
Barre d'outils : 56dp
Titre et liste : 72dp
Sous-titre : 48dp
Espace (divider) entre deux zones de contenu : 8dp
C'est inutile dans la mesure où des modèles de composition sont librement disponibles depuis le site du guide Material Design (au format Photoshop et Illustrator) et également accessibles à l'ouverture du logiciel Adobe Experience Design.
Intégrez les composants de base
Vous trouverez ci-dessous, tous les éléments d'UI que vous pouvez intégrer dans un produit conçu en Material Design :
Barre de navigation
Elle permet de rajouter un niveau de navigation au sein d'un produit (en plus de la traditionnelle, déjà présente sur le smartphone).
→ Voir la section "Bottom Navigation" du guide Material Design.
Bottom sheets
Il s'agit d'une feuille qui monte sur le bas de l'écran pour révéler un contenu additionnel, un peu à la manière du clavier tactile.
→ Voir la section "Bottom sheets" du guide du Material Design.
Boutons
Le Material Design possède 3 types de boutons pour des usages différents.
Le bouton "levé"
Le bouton "plat"
→ Voir la section "Buttons" du guide du Material Design.
Le bouton "flottant"
→ Voir la section "Floating Button" du guide du Material Design.
Cartes
C'est un moyen de présenter du contenu composé de différents éléments d'UI.
→ Voir la section "Cards" du guide du Material Design.
Chips
On pourrait traduire "chip" par "copeau" ou "lamelle", ou encore "languette" ; il s'agit de ce que vous pouvez voir dans le champ destinataire de l'image de dessous :
→ Voir la section "Chips" du guide du Material Design.
Data Tables
Tableau avec lignes et colonnes qui propose à l'utilisateur une liste de données qu'il peut manipuler.
→ Voir la section "Data tables" pour plus de détails dans le guide du Material Design.
Boites de dialogue
Elles informent l'utilisateur d'une tâche spécifique à accomplir, et requièrent une prise de décision de sa part ; elles accaparent son attention en se superposant nettement au-dessus du contenu (qui devient plus sombre).
→ Voir la section "Boites de dialogue" du guide du Material Design.
Expansion panels
Il s'agit de panneaux déroulants qui permettent à l'utilisateur d'éditer une information.
→ Voir la section "Expansion panels" du guide du Material Design.
Grids
Elles servent à présenter une suite de contenus similaires de façon optimisée pour la compréhension visuelle.
→ Voir la section "Image list" du guide du Material Design.
Lists
→ Voir la section "Lists" du guide du Material Design.
Menus
Emerge suite à une action de l'utilisateur (clic) et s'utilise pour rajouter des options sans rajouter de bruit visuel. C'est une surface temporaire, qui apparait par dessus le contenu.
→ Voir la section "Menus" dans le guide du Material Design.
Options de sélection
Les cases à cocher
À utiliser lorsque l'utilisateur peut choisir plusieurs options parmi plusieurs propositions.
→ Voir la section "Checkbox" dans le guide du Material Design.
Les "radio buttons"
À utiliser lorsque l'utilisateur doit faire un choix unique parmi plusieurs propositions.
→ Voir la section "Radio buttons" dans le guide du Material Design.
Le "switch"
À utiliser pour permettre à l'utilisateur d'activer ou de désactiver une action, comme l'alarme du réveil par exemple. ⏰
→ Voir la section "Switch" dans le guide du Material Design.
Les "sliders"
À utiliser pour permettre à l'utilisateur de régler le niveau d'une option, comme le volume d'une sonnerie par exemple.
→ Voir la section "Sliders" dans le guide du Material Design.
Tabs (ou onglets)
Cela permet d'explorer un produit en passant d'une section à une autre sans alourdir la navigation.
→ Voir la section "Tabs" dans le guide du Material Design.
Vous retrouverez aussi dans le guide du Material Design, des informations sur :
Les "pickers", pour sélectionner une date dans un calendrier.
Les barres et roues de chargement, pour indiquer que le contenu se charge.
Les "dividers", pour espacer les éléments de contenu.
Les "snackbars", pour confirmer une action.
Les champs de texte (text fields), pour remplir un formulaire.
Les "tooltips" pour aider et guider l'utilisateur.
