Google Material Design – Le langage de design d’Android

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.

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

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/