BT

Google introduit le "Material Design" à Google I/O

| par Abel Avram Suivre 7 Abonnés , traduit par Simon Baslé Suivre 1 Abonnés le 07 juil. 2014. Durée de lecture estimée: 2 minutes |

Google introduit le "Design Matériel" (Material Design), un langage visuel incorporant des principes de design pour les interfaces utilisateur sur une multitude d'appareils du vestimentaire connecté (wearable) aux smartphones, en passant par les tablettes, les ordinateurs de bureau et les télévisions. Le Material Design vise à fournir des mouvements fluides sur les surfaces tactiles, mais les appareils basés sur la souris et le clavier sont aussi pris en compte.

D'après Google, le Material Design est basé sur "une réalité tactile, inspirée par l'étude de l'encre et du papier" permettant aux utilisateurs de "comprendre les affordances" qui se substituent à celles du monde réel mais "sans casser les règles de la physique". De même,

les fondamentaux de la lumière, des surfaces et du mouvement sont clés dans la représentation de comment les objets bougent, interagissent et existent dans l'espace, en relation entre eux. L'éclairage réaliste dévoile les frontières, divise l'espace et indique quelles sont les pièces mobiles.

Le Material Design établit des principes en termes d'Animation, Style, Layout, ainsi que des recommendations pour un large nombre de composants visuels - buttons, cards, grids, dialogs, etc. - et les actions et gestes qui leurs sont liés, et inclut des lignes conductrices sur l'accessibilité.

En termes d'animation, le nouveau design de Google suggère de suivre les mouvements naturels des objets du monde réel, notant que "le mouvement dans le monde du design matériel n'est pas seulement beau, il construit une information sur les relations dans l'espace, les fonctionnalités et intentions du système". Les composants réagissent aux interactions des utilisateurs mais sans être distrayants. Les transitions entre deux états visuels devraient être :

fluides, paraître sans effort, et par-dessus tout apporter de la clarté à l'utilisateur et non de la confusion. Une transition bien conçue réalise le gros du travail et permet à l'utilisateur de clairement comprendre sur quoi leur attention devrait se concentrer.

En ce qui concerne le style, le Material Design propose des couleurs "vives" inspirées par "l'architecture contemporaine, les panneaux routiers, le marquage au sol des trottoirs et des terrains de sport", mettant en avant les ombres et la surbrillance, quelques palettes de couleurs étant présentées ci-dessous :

Pour la typographie, le nouveau design se repose sur une police Roboto affinée introduite dans Ice Cream Sandwich, un peu plus large et arrondie. Les icônes sont simplifiées et réduites à un minimum. Les images devront être immersives, dépendantes du contexte et omniprésentes.

Le guide fournit de nombreux conseils sur l'aspect visuel des composants, l'image suivante montrant un exemple sur les cards :

Google a montré le nouveau design au Google IO 2014, et la prochaine version de l'IHM Android attendue pour l'automne sera basée dessus, puis les autres appareils suivront.

Une vidéo est disponible pour les développeurs intéressés pour basculer leur look d'application de Holo vers Material Design.

Evaluer cet article

Pertinence
Style

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Donnez-nous votre avis

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet
Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Discuter

Se connecter à InfoQ pour interagir sur ce qui vous importe le plus.


Récupérer votre mot de passe

Follow

Suivre vos sujets et éditeurs favoris

Bref aperçu des points saillants de l'industrie et sur le site.

Like

More signal, less noise

Créez votre propre flux en choisissant les sujets que vous souhaitez lire et les éditeurs dont vous désirez suivre les nouvelles.

Notifications

Restez à jour

Paramétrez vos notifications et ne ratez pas le contenu qui vous importe

BT