Quelle est la différence entre le «style plat» et la «conception matérielle»?
20
Après la sortie de Windows 8, tous ont parlé de "Metro UI" et plus tard de "Flat design". Maintenant, après la sortie d'Android Lollipop, tous parlent de "Material Design". Quelqu'un peut-il expliquer la différence entre la «conception matérielle» et le «style plat»?
La conception matérielle n'est pas liée à la conception plate dans ses principes. La conception matérielle est skeuomorphique en ce qu'elle vise à rendre la conception Web plus réaliste dans la façon dont elle représente les éléments, en utilisant des couches et des animations d'une manière qui a du sens en dehors du navigateur. La conception visuellement plate et la conception matérielle sont similaires pour le moment, mais la conception matérielle peut être appliquée à des conceptions autres que celles de type plat.
Il suit 3 principes
Le matériau est la métaphore
Soyez audacieux, graphique, intentionnel
Donner du sens au mouvement
La superposition dans la conception des matériaux se fait en déplaçant les éléments vers l'avant ou l'arrière le long de l'axe z, vers et depuis l'utilisateur, et en ajoutant des ombres réalistes pour donner plus de sens. L'animation d'éléments, comme une animation affectant la position lorsqu'un élément de liste est supprimé, est destinée à améliorer le flux et la compréhension des utilisateurs tout en rendant l'expérience plus fluide. Ce faisant, il est possible de donner plus de sens à la conception matérielle qu'à la conception plate
Les concepteurs de Google ont créé des modèles en papier pour comprendre les couches et les ombres pour la conception de leurs matériaux.
Il existe d'autres directives de conception couvrant l'espacement, la couleur, la convivialité et plus de détails sur le positionnement et l'animation que vous pouvez consulter sur la page Web de Google sur le sujet .
Un bon moyen d'en savoir plus sur la conception matérielle et comment l'implémenter est d'utiliser les applications que Google a créées à l'aide de la conception matérielle et de lire les détails de la conception , celle-ci est de Brian Lovin sur l'application Inbox.
Les gens peuvent supposer que la conception matérielle est une sorte d'extension du design plat, mais en fait les principes sont différents. La tendance actuelle est de créer un design propre et plat que Google utilise pour l'instant, mais les principes de conception des matériaux dépassent ces limites et peuvent également être appliqués à d'autres méthodes de conception.
Dans ce Material Design, visuellement, utilise beaucoup d'icônes et de styles de design plat, je dirais qu'ils sont certainement liés dans ce sens. La conception matérielle, bien sûr, est plus que l'aspect visuel comme vous le faites remarquer.
DA01
@ DA01 Merci, j'ai essayé de clarifier mon point de vue dans le dernier montage
Zach Saucier
Sur une note connexe, cet article est idéal pour comparer iOS à Material Design et en savoir plus sur chacun.
Zach Saucier
5
Design plat = terme générique qui fait référence à l'esthétique de l'interface utilisateur moderne et tendance des icônes plates et des blocs de couleur en bloc.
Metro Design = nouvelle conception d'interface utilisateur de Microsoft (maintenant appelée langage de conception Microsoft ) pour Windows 8 qui utilise l' esthétique visuelle de conception plate .
Material Design = Google nouveau design d'interface utilisateur pour Android qui utilise l' esthétique visuelle design plat .
(Notez que Metro et Material sont bien plus qu'une simple question de design plat. Ils parlent également de design d'interaction, de flux, de bibliothèques de modèles, etc.)
Merci à Johannes d'avoir noté le changement de nom de l'interface utilisateur de Microsoft.
Je ne pense pas que cela rentre assez dans le détail de ce qu'ils sont réellement . Il semble que ce
Zach Saucier
@ZachSaucier à droite. Le PO demandait principalement la différence. Je dirais que la différence est que l'un est un terme générique pour un style visuel, les deux autres sont des termes spécifiques pour les directives d'interface utilisateur de marque.
DA01
1
@ DA01, je veux juste souligner que l'interface utilisateur de Microsoft n'a pas été nommée Metro depuis 2012. Elle est plutôt appelée source "Microsoft design language" . Je me rends compte que la question des PO l'a également mentionnée sous ce nom, mais c'est incorrect.
Hanna
@Johannes yep, c'est une bonne note.
DA01
Material Design peut être utilisé non seulement avec Android, mais aussi avec la conception Web et la conception d'applications de bureau.
vovahost
3
La conception matérielle n'est pas plate, c'est un tas de couches plates de "matériau" qui sont espacées un peu sur l'axe Z. Cela signifie que ces objets ont des ombres et sont censés provenir de quelque part lorsqu'ils apparaissent à l'écran et partir quelque part lorsqu'ils ne sont plus nécessaires. Ce qui signifie qu'ils ne font pas que disparaître.
Il existe également un tas de directives de conception qui spécifient la couleur, l'espacement et de nombreux autres aspects de votre mise en page.
En voici quelques-unes, mais vous pouvez en trouver beaucoup plus avec quelques recherches sur Google.
Le "design plat" est comme ils vous l'ont expliqué là-haut, et le design "Material Design" n'est pas vraiment "skeuomorphique" mais "Skeuomorphed Flat Design". Le "Material Design" utilise des objets plats et l'aligne sur l'axe Z pour avoir un "3D Flat Design". J'espère que cela a aidé.
En fait, le design plat apparaîtra plus simpliste sur le fond du matériel, en plus, toutes ces animations visent davantage l'interaction de l'utilisateur avec les appareils mobiles plutôt qu'avec le site. De plus, personne n'interdit l'utilisation de ces deux approches dans un même produit, si abordez le travail sur le design de manière plus consciente et philosophique. Quant au skeuomorphisme, il a essayé d'apporter des éléments de l'interface d'une manière plus familière et conviviale: à quoi ressemblerait tel ou tel objet dans le monde réel, mais beaucoup de gens ont des vues différentes des choses environnantes, donc création d'un seul le style d'une telle approche était presque impossible… Quelques informations à ajouter Quelle est la différence: Flat Design vs Material Design
Design plat = terme générique qui fait référence à l'esthétique de l'interface utilisateur moderne et tendance des icônes plates et des blocs de couleur en bloc.
Metro Design = nouvelle conception d'interface utilisateur de Microsoft (maintenant appelée langage de conception Microsoft ) pour Windows 8 qui utilise l' esthétique visuelle de conception plate .
Material Design = Google nouveau design d'interface utilisateur pour Android qui utilise l' esthétique visuelle design plat .
(Notez que Metro et Material sont bien plus qu'une simple question de design plat. Ils parlent également de design d'interaction, de flux, de bibliothèques de modèles, etc.)
Merci à Johannes d'avoir noté le changement de nom de l'interface utilisateur de Microsoft.
la source
La conception matérielle n'est pas plate, c'est un tas de couches plates de "matériau" qui sont espacées un peu sur l'axe Z. Cela signifie que ces objets ont des ombres et sont censés provenir de quelque part lorsqu'ils apparaissent à l'écran et partir quelque part lorsqu'ils ne sont plus nécessaires. Ce qui signifie qu'ils ne font pas que disparaître.
Il existe également un tas de directives de conception qui spécifient la couleur, l'espacement et de nombreux autres aspects de votre mise en page.
En voici quelques-unes, mais vous pouvez en trouver beaucoup plus avec quelques recherches sur Google.
http://www.google.com/design/spec/material-design/introduction.html#
la source
Le "design plat" est comme ils vous l'ont expliqué là-haut, et le design "Material Design" n'est pas vraiment "skeuomorphique" mais "Skeuomorphed Flat Design". Le "Material Design" utilise des objets plats et l'aligne sur l'axe Z pour avoir un "3D Flat Design". J'espère que cela a aidé.
la source
En fait, le design plat apparaîtra plus simpliste sur le fond du matériel, en plus, toutes ces animations visent davantage l'interaction de l'utilisateur avec les appareils mobiles plutôt qu'avec le site. De plus, personne n'interdit l'utilisation de ces deux approches dans un même produit, si abordez le travail sur le design de manière plus consciente et philosophique. Quant au skeuomorphisme, il a essayé d'apporter des éléments de l'interface d'une manière plus familière et conviviale: à quoi ressemblerait tel ou tel objet dans le monde réel, mais beaucoup de gens ont des vues différentes des choses environnantes, donc création d'un seul le style d'une telle approche était presque impossible… Quelques informations à ajouter Quelle est la différence: Flat Design vs Material Design
la source