• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale
  • Passer au pied de page

Lotin Corp. Academy

Formations infographie, web, marketing digital et décoration intérieure à Douala

  • Formations
    • Design graphique
    • Design web
    • Design d’intérieur
    • Développement web
    • Marketing digital
  • Cours en ligne
  • Ateliers
    • Workshop graphic design
  • Blog
  • Pré-inscription

Design web, Interaction Design Foundation, UX Design

Google Material Design – Le langage de design d’Android

Par Henri Lotin le 30 juillet 2018

Cet extrait est traduit et recopié de Interaction Design Foundation. La diffusion est faite avec la permission du distributeur ou de l’auteur.

Google’s Material Design – Android Design Language

Material Design (à l’origine sous le nom de code « Quantum Paper ») a été développé par Google et est un langage de design utilisé pour les appareils Android. L’idée, selon Matias Duarte, vice-président du design pour Google, est de fournir un langage de design qui imite la sensation du stylo et du papier. Le Material Design offre à l’utilisateur des bords et des surfaces physiques sur lesquels travailler – avec des coutures et des ombres qui donnent un contexte aux parties d’un design digital qui peuvent être touchées.

Daniel Sacks, rédacteur principal pour Fast Company Magazine, dit :

Le design concerne environ 3 dimensions et les 5 sens.

Le Material Design assure 3 dimensions dans le design digital.

Author/Copyright holder: graphberry. Copyright terms and licence: CC BY-SA 3.0.

Le Material Design ajoute une profondeur supplémentaire à la conception sans changer la fonctionnalité de base des créations.

À propos du Material Design

Le Material Design a été annoncé par Google lors de la conférence Google I/O 2014, le 25 juin 2014. Il est destiné à être utilisé avec toutes les versions d’Android après la version 2.1 et conjointement avec la bibliothèque v7 appcomcat et les versions ultérieures. Google lui-même est en train de s’assurer que tous ses produits fournissent une expérience cohérente avec Material Design comme base fondamentale de cette expérience.

Les développeurs tiers peuvent incorporer la fonctionnalité de Material Design de Google dans leur propre travail en utilisant des interfaces de programmation d’applications (API) disponibles gratuitement. Pour les navigateurs qui ne peuvent pas prendre en charge Material Design dans son format natif, il existe également une collection d’interfaces utilisateur sous l’étiquette « Polymer » qui imite Material Design pour ces navigateurs.

Il existe plusieurs composants de Material Design pour l’intégration avec les applications Android, notamment :

Le thème material – ceci offre un nouveau style d’affichage pour les applications Android. Il a des systèmes widgets natifs qui permettent au développeur de transformer rapidement et facilement la palette de couleurs. Il y a aussi un tas d’animations par défaut pour le retour tactile et d’autres transitions de style d’activité.

La prise en charge de liste et de carte – il y a deux widgets qui supportent la liste de Material Design et les formats de carte qui incluent tous les styles et animations. Le widget liste est RecyclerView et le widget carte est CardView.

Le Material Design a également ajouté un changement à la façon dont les ombres sont affichées et elles ont maintenant (en plus des anciens composants x et y) un composant z qui montre l’élévation de la vue et affecte :

  • Les valeurs élevées de z conduisent à de grandes ombres et de faibles valeurs z aux petites
  • Les valeurs élevées de z déterminent également que le composant apparaîtra au-dessus des autres vues du mélange

Les animations sont prises en charge via des API qui permettent au développeur de créer des animations personnalisées pour le retour tactile dans l’interface utilisateur, ainsi que des changements dans les états d’affichage et les transitions d’activité. Celles-ci :

  • Autorisent l’application à répondre aux événements tactiles en affichant des animations de retours tactiles
  • Vous permettent de masquer et de révéler des vues à l’aide d’animations de révélations circulaires
  • Vous permettent l’utilisation de mouvement incurvé pour rendre les animations plus naturelles à l’utilisateur
  • Vous permettent de développer des animations de transition d’activité personnalisées
  • Vous permettent d’animer les changements dans une ou plusieurs vues en utilisant le « changement d’état d’affichage »
  • Vous permettent d’afficher une liste complète des animations dans les listes d’états modifiables entre les changements d’état d’affichage
  • Les animations de retour tactiles sont également proposées dans plusieurs vues standard (par exemple pour les boutons). Elles peuvent être facilement personnalisées puis placées dans vos propres vues personnalisées.

Les affichables sont également modifiés et il existe trois principaux changements proposés aux développeurs :

  • Les affichables vectoriels peuvent désormais être mis à l’échelle sans aucune perte de définition et sont recommandés pour les icônes intégrées à une seule couleur
  • Les teintes affichables peuvent être utilisées pour définir des images bitmap en tant que masques alpha, puis être teintées pendant l’exécution avec d’autres couleurs
  • Les extraits de couleur vous permettent d’extraire rapidement et automatiquement toutes les couleurs proéminentes d’une image bitmap existante
Author/Copyright holder: Chiswick Chap. Copyright terms and licence: CC BY-SA 3.0

Les ombres changent la façon dont nous percevons les objets à l’écran et dans la vraie vie aussi.

Bien sûr, ce sont les principaux changements apportés au Material Design par rapport au développement Android précédent, une liste complète des changements et des principes proposés sur le site Web de Google fournit un guide complet au nouveau développeur ou au développeur sur le retour sur les bonnes pratiques du Material Design.

Il existe également une implémentation JavaScript de Material Design, appelée Angular Material, basée sur les bonnes pratiques de Google et sur la spécification Material Design.

Ce qu’il faut retenir

Material Design est une approche clé de la plateforme Android pour l’interface utilisateur et l’UX. Conçu et développé par Google, il est destiné à faciliter une expérience utilisateur cohérente sur la plateforme afin que les applications ne favorisent pas la confusion de l’utilisateur. Les principes de design impliqués sont destinés à refléter la nécessité d’une expérience tactile de haute qualité et à offrir une sensation de style « stylo et papier » à l’interface utilisateur. Les propres offres de Google reflèteront Material Design dans toute leur gamme et la majorité de leurs produits (tels que Gmail, YouTube, etc.) le font déjà.

Google Chrome bénéficie également du Material Design. Tous les produits Google sont maintenant développés avec Material Design à l’esprit.

Les designers travaillant dans une capacité de design mobile vont devoir se familiariser avec Material Design tout comme les développeurs.

Références

Les directives complètes du Material Design de Google peuvent être trouvées ici – https://design.google.com/resources/?gclid=CjwKEAiAzuK0BRCW4tiLpJT-8TISJADV8cw9DUZr41fBNpyzzzOC7Wj6V183wS4sUIm5LCaeMIpKyxoCVSjw_wcB

L’implémentation JavaScript du contenu peut être trouvée ici – https://material.angularjs.org/latest/

close

Ne ratez aucun article. Abonnez-vous. 👌🏾

Vérifiez votre boîte de réception ou vos indésirables afin de confirmer votre abonnement.

Articles similaires

Classé sous :Design web, Interaction Design Foundation, UX Design Balisé avec :design d'expérience utilisateur, design d'interface utilisateur, design UI, design ux, Google, Material Design

Vous voulez apprendre à créer des sites web ? Cela ne vous prendra que 03 mois !

Interactions du lecteur

Laisser un commentaire Annuler la réponse.

Barre latérale principale

Nos articles récents

  • Reconnaissance et rappel de mémoire dans les UI
  • Prévenir les erreurs de l’utilisateur : les glissades
  • La cohérence et les normes : la maintenir et les respecter
  • Contrôle et liberté de l’utilisateur
  • Correspondance entre le système et le monde réel

Footer

Lotin Corp. Academy

La transmission de notre savoir est l'une de nos principales motivations. Nos formations allant de 03 à 04 mois facilitent l'acquisition rapide de compétences.

RC/DLA/2008/A/900
Contribuable nº P038300436355E
Cpte UBA 01016000489-63

Zone étudiants/formateurs online

[lms_login]

Adresse et contacts

403, Rue Drouot, Akwa
BP 4468 Douala
academy[at]lotincorp.biz
+237 673 07 94 08
Lundi à Samedi : 09h00 à 19h00

Liens utiles

  • Pré-inscription
  • Cours en ligne
  • Bibliothèque
  • Design graphique
  • Design web
  • Design d’intérieur
  • Développement web
  • Marketing digital
  • Ateliers
    • Workshop graphic design
  • WordPress 101
  • Blog
  • A propos

Copyright © 2008–2022. Lotin Corp.· All Rights Reserved.