Donner vie à votre application avec le Material Design

Suivez les principes du Material Design pour créer des applications aussi agréables qu'intéressantes.

Pourquoi ça fonctionne

Material Design réunit les bonnes pratiques en matière de design, les conventions courantes et des interfaces pour vous aider à créer des applications expressives parfaitement adaptées à tous les appareils. Les utilisateurs sont de plus en plus habitués à ce langage visuel et ils y prennent rapidement goût. Grâce aux principes du Material Design, vous pouvez créer des applications qui plairont immédiatement aux utilisateurs tout en offrant une grande facilité d'utilisation. Vous améliorez ainsi le taux d'interaction et la fidélisation des utilisateurs.

Principes du Material Design

  • Utilisez les surfaces et les ombres comme des métaphores. L'interface utilisateur doit se composer de plusieurs surfaces individuelles superposées ou adjacentes. Utilisez des ombres pour faire ressortir les surfaces qui figurent au premier plan. Ainsi, vous dirigez l'attention de l'utilisateur selon la hiérarchie que vous établissez.
  • Les images doivent être à fond perdu. Réduisez au minimum les espaces entre les photos, ainsi que les marges entre celles-ci et les bords de l'écran. Vous offrez ainsi une immersion complète et une interface riche en contenu.
  • N'hésitez pas à utiliser les couleurs pour mettre en avant votre marque et les éléments importants de l'interface. Assurez-vous de choisir des couleurs primaires et accentuées pour offrir une expérience homogène dans toute votre application. Pensez à utiliser l'API Palette pour récupérer les couleurs directement depuis le contenu et proposer ainsi une expérience plus immersive.
  • Utilisez les métriques et lignes de repère pour que l'alignement et le dimensionnement respectent une grille de référence de 8 dp afin d'améliorer la lisibilité et la cohérence visuelle. Pour un positionnement plus précis du texte, utilisez une grille de 4 dp. Si besoin, alignez les éléments comme le corps du texte, les vignettes et les titres de la barre d'application avec les lignes de repère standards.
  • Des mouvements pertinents, y compris des animations et des transitions, doivent être utilisés pour guider les utilisateurs, tout en assurant la transition d'un écran à un autre. Un langage visuel qui utilise des mouvements pertinents augmente considérablement le confort d'utilisation tout en assurant la continuité visuelle.
  • Les interactions réactives, telles que le retour tactile, doivent prendre la forme d'ondulations de surface. Sur les appareils équipés d'une version d'Android antérieure à 5.0, les utilisateurs ne s'attendent pas à de telles ondulations. Par conséquent, conservez le comportement android:selectableItemBackground par défaut. Hormis les ondulations de surface, les surfaces interactives doivent également se soulever au toucher de façon à entrer en contact avec le doigt de l'utilisateur pendant la saisie. En outre, toutes les modifications doivent émaner du point de contact.

Composants système de l'interface utilisateur

  • Sous Android 5.0 ou version ultérieure, la barre d'état système doit être d'une couleur complémentaire avec la couleur principale de l'application ou du contenu de l'écran. Dans le cas d'images à fond perdu, la barre d'état peut être transparente. Pour une API de niveau 23 ou supérieur, il est possible de définir la barre d'état système sur une couleur claire (les icônes s'assombrissent).
  • La barre d'application et les barres d'outils doivent être informatives et représenter la marque à l'aide de couleurs, d'une typographie et du logo du produit (évitez d'utiliser l'icône du lanceur d'applications). Sur les écrans qui présentent de nombreuses images, la barre d'application peut être transparente pour offrir une interface utilisateur plus immersive. En effet, les images doivent occuper tout l'écran et peuvent même s'afficher derrière la barre d'application ou la barre d'état. Si la barre d'application est transparente, veillez à protéger le texte des icônes à l'aide de scrims. Pensez également à utiliser les techniques de défilement qui enrichissent l'expérience visuelle de l'utilisateur.
  • Les onglets doivent suivre les principes d'interaction et de style de Material Design. Ils doivent pouvoir glisser horizontalement et ne comporter aucun séparateur vertical. Mettez en évidence les onglets sélectionnés à l'aide d'une ou deux couleurs de premier plan différentes et/ou d'une bande étroite de couleur accentuée, située sous le texte (ou l'icône) de l'onglet. Les onglets et la barre d'application appartiennent à des surfaces de même niveau, sauf en cas de différence hiérarchique évidente.
  • Le panneau de navigation ne doit contenir que les éléments de navigation principaux et doit respecter les consignes de conception visuelle. Il doit s'afficher par-dessus la barre d'application et du contenu de l'écran, mais derrière la barre d'état système. Pour une meilleure accessibilité des fonctions, assurez-vous que le panneau s'ouvre à la première exécution de l'application.
  • Pensez à utiliser un système de navigation en bas de l'écran si votre application comporte de 3 à 5 rubriques principales qui nécessitent un accès direct. Le modèle alternatif de navigation par le bas est recommandé, car son impact visuel est plus fort et il permet d'utiliser des libellés plus longs. Assurez-vous que la barre de navigation inférieure est accessible sur la plupart des écrans, mais évitez d'afficher tous les niveaux de navigation et masquez-la lorsque l'utilisateur fait défiler l'écran.

Éléments et modèles de l'interface utilisateur

  • Pour éviter que l'application n'ait l'air démodée, mettez-la à jour avec l'un des thèmes Material Design les plus récents. La mise à jour du thème du système est l'un des moyens les plus rapides d'améliorer la qualité visuelle de l'application. Veillez à mettre à jour les thèmes Gingerbread et Holo pour offrir une interface et une expérience utilisateur homogènes. Mettez à jour le thème d'éléments de l'interface utilisateur selon les normes du Material Design, notamment les contrôles de sélection, les outils de sélection, les boîtes de dialogue, les menus et les champs de texte.
  • Les boutons sont les éléments interactifs les plus utilisés dans une application. C'est en les adaptant aux principes de design visuel les plus récents que vous pourrez apporter les changements les plus efficaces à votre application. Si vous utilisez des boutons personnalisés, évitez les angles excessivement arrondis, les dégradés trop prononcés ou les surfaces brillantes qui donnent à l'application un air démodé. Utilisez des boutons en relief pour les actions importantes devant être signalées de manière visuelle ou dans les mises en page comportant beaucoup de texte, où un bouton plat ne se verrait pas. Pour les actions simples qu'il n'est pas nécessaire de signaler, on utilise le plus souvent des boutons plats. Pour mettre en évidence l'action la plus importante d'un écran, utilisez le bouton d'action flottant, qui se distingue visuellement, car il flotte au-dessus de tous les autres éléments de l'interface.
  • Utilisez des tuiles et des listes lorsque l'utilisateur est amené à comparer directement certains éléments. L'affichage sous forme de liste convient aux contenus chargés en texte que l'utilisateur parcoure rapidement. Utilisez des tuiles lorsque le contenu est avant tout visuel. N'oubliez pas d'utiliser le widget RecyclerView lors de la création de vos listes et tuiles afin de consolider vos options de mise en page.
  • Les cartes s'utilisent en cas de contenu mixte, lorsque l'utilisateur explore le contenu, mais ne compare pas directement des images ni des chaînes de texte. Elles sont également utiles lorsque plusieurs actions sont proposées sur une même surface. Elles font en effet ressortir les éléments et mettent en valeur leur aspect visuel, mais leur utilisation excessive surcharge inutilement l'interface. Assurez-vous d'utiliser le widget CardView lorsque vous créez le contenu de la carte.
  • La recherche au sein de l'application doit être proposée via une fonctionnalité de recherche intégrée dans la barre d'application. Si la recherche de contenu représente la fonctionnalité principale de l'application, envisagez l'utilisation d'un widget de recherche fixe dans la barre d'application.
  • N'utilisez des séparateurs que pour séparer les principales rubriques de contenu ou lorsqu'il est important de distinguer différentes zones de texte. Évitez de placer des séparateurs entre chaque élément d'une liste, car cela surcharge l'interface sans réellement améliorer la lisibilité. Nous vous recommandons plutôt de délimiter le contenu à l'aide d'espaces vides ou de distinctions typographiques.
  • Lors de la conception d'états vides, n'oubliez pas d'expliquer à l'utilisateur leur raison d'être et ajoutez une incitation à l'action pour y remédier.

Nouveautés Android 7.0

  • Les notifications intègrent les nouveautés suivantes : zones de contenu, interactions, commandes utilisateur et petites zones de saisie de texte.

Exemples