\n Commen\u00e7ons!\n<\/p>\n
\n Principes fondamentaux de la conception de mat\u00e9riaux\n<\/p>\n
\n M\u00e9taphore mat\u00e9rielle :
\n<\/h5>\n
\n La conception mat\u00e9rielle met l’accent sur la cr\u00e9ation d’\u00e9l\u00e9ments, d’animations et de transitions aussi r\u00e9els qu’ils apparaissent dans la vie r\u00e9elle. Apr\u00e8s une \u00e9tude intensive du papier et de l’encre, l’\u00e9quipe de Google a d\u00e9cid\u00e9 d’utiliser une m\u00e9taphore mat\u00e9rielle comme principe unifi\u00e9 d’un espace rationalis\u00e9 et d’un syst\u00e8me de mouvement. En un mot, nous pouvons dire que la conception mat\u00e9rielle n’est rien d’autre qu’une combinaison de divers concepts classiques de conception et de propri\u00e9t\u00e9s physiques de base.\n<\/p>\n
\n Surfaces tangibles :
\n<\/h5>\n
\n Dans la conception mat\u00e9rielle, les surfaces et les bords du mat\u00e9riau \u00e9tablissent une structure physique pour donner aux utilisateurs des rep\u00e8res visuels pour les aider \u00e0 comprendre rapidement ce qu’ils peuvent toucher et d\u00e9placer. Utilisant les principes de la conception d’impression, la conception mat\u00e9rielle garde le contenu important sous les yeux de l’utilisateur, tout en ignorant les autres contenus moins utiles. L’utilisation d’attributs familiers, intuitifs et naturels permet au cerveau de l’utilisateur de travailler moins et de comprendre rapidement les affordances.\n<\/p>\n
\n Affordances dimensionnelles :
\n<\/h5>\n
\n S’il y a une pile de papiers sur votre bureau, ils gagnent en dimension tout en prot\u00e9geant leurs ombres. De m\u00eame, dans la conception de mat\u00e9riaux, lorsque vous appliquez cette propri\u00e9t\u00e9 \u00e0 l’interface utilisateur, vous aurez une hi\u00e9rarchie et des ombres afin d’attirer l’attention de l’utilisateur sur l’objet le plus important avec lequel il doit interagir. Utilisant les bases de la lumi\u00e8re, de la surface et du mouvement, la conception mat\u00e9rielle transmet la mani\u00e8re dont un objet interagira avec les utilisateurs. De plus, un \u00e9clairage r\u00e9aliste permet aux utilisateurs d’obtenir la vue la plus r\u00e9aliste de l’interface que vous avez con\u00e7ue.\n<\/p>\n
\n Une conception adaptative :
\n<\/h5>\n
\n La conception mat\u00e9rielle utilise un syst\u00e8me de conception sous-jacent unique afin d’organiser l’espace et les interactions. Le concept d’une conception adaptative apporte une coh\u00e9rence entre diff\u00e9rents appareils, ce qui signifie qu’une conception unifi\u00e9e cr\u00e9e des vues sp\u00e9cialis\u00e9es pour diff\u00e9rents types d’appareils. Chaque vue est adapt\u00e9e de mani\u00e8re unique \u00e0 l’interaction et \u00e0 la taille adapt\u00e9es \u00e0 un appareil particulier. En revanche, aucune modification n’est apport\u00e9e \u00e0 la hi\u00e9rarchie, \u00e0 l’iconographie, aux couleurs et aux relations spatiales.\n<\/p>\n
\n Contenu gras et intentionnel :
\n<\/h5>\n
\n Une autre chose que vous remarquerez \u00e0 propos de ce nouveau langage visuel est son design audacieux avec une palette de couleurs vives. S’inspirant du ruban de marquage des chauss\u00e9es, de l’architecture contemporaine, des panneaux de signalisation et des terrains de sport, Google a introduit des couleurs fantastiques et vibrantes auxquelles vous ne vous attendiez pas. De plus, ils ont consid\u00e9rablement affin\u00e9 la police Roboto<\/a>, la rendant l\u00e9g\u00e8rement plus large et plus ronde afin de rendre la lecture plus agr\u00e9able. De plus, les espaces blancs d\u00e9lib\u00e9r\u00e9s et les images bord \u00e0 bord cr\u00e9ent de la clart\u00e9 et de l’immersion.\n<\/p>\n \n La conception mat\u00e9rielle met beaucoup l’accent sur le fait de rendre l’interaction entre les utilisateurs et les surfaces plus num\u00e9rique, magique et r\u00e9active. Dans ce style de conception, lorsque quelqu’un interagit avec l’interface utilisateur, l’ensemble de la conception est transform\u00e9 de mani\u00e8re surprenante. L’expression graphique avec la couleur, la surface et l’iconographie donne aux utilisateurs une id\u00e9e claire de ce qu’un objet peut faire, tandis que l’interaction r\u00e9active encourage l’utilisateur \u00e0 explorer en profondeur l’interface : si je touche cela, que se passera-t-il ? Et que se passe-t-il ensuite ?\n<\/p>\n \n Lorsqu’une personne touche la surface de l’eau et fait des vaguelettes, l’\u00e9nergie d\u00e9riv\u00e9e de ses actions pour modifier l’interface lui donne une exp\u00e9rience r\u00e9elle et tangible. De la m\u00eame mani\u00e8re, la conception mat\u00e9rielle permet aux utilisateurs de toucher l’interface utilisateur comme ils le font dans leur vie r\u00e9elle. Pour cela, Google sugg\u00e8re aux concepteurs de prendre en compte une dimension suppl\u00e9mentaire de l’interaction, qui est le \u00ab\u00a0retour de mouvement\u00a0\u00bb, afin que l’utilisateur puisse avoir l’impression d’\u00eatre entendu par la surface lors des d\u00e9filements, des glissements, des diapositives et des tapotements.\n<\/p>\n \n Dans le monde r\u00e9el, chaque action a un mouvement, un d\u00e9but et une fin. Par exemple, lorsque vous ouvrez un carton dans la vraie vie, vous appuyez quelque part dessus et vous montrez ce qu’il y a dedans. De m\u00eame, toutes les actions de l’utilisateur dans la conception de mat\u00e9riaux se d\u00e9roulent dans un environnement unifi\u00e9. Chaque objet est pr\u00e9sent\u00e9 \u00e0 l’utilisateur avec une animation rapide, fluide et continue qui est chor\u00e9graphi\u00e9e sur une sc\u00e8ne partag\u00e9e. Alors que tous les atouts de la conception mat\u00e9rielle \u00e9voluent en rythme, l’\u00e9cran appara\u00eet plus captivant et interactif que jamais.\n<\/p>\n \n Comme nous le savons tous, pour Google, l’exp\u00e9rience utilisateur est plus importante que toute autre chose. La m\u00eame r\u00e8gle s’applique au dernier principe de conception mat\u00e9rielle. Ce principe stipule que le mouvement doit \u00eatre appropri\u00e9, significatif et soigneusement chor\u00e9graphi\u00e9, et ne doit pas \u00eatre utilis\u00e9 uniquement pour impressionner les utilisateurs. Le mouvement dans la conception mat\u00e9rielle ne doit pas seulement \u00eatre beau, mais aussi donner du sens \u00e0 la fonctionnalit\u00e9 et aux relations spatiales tout en maintenant la beaut\u00e9 et la simplicit\u00e9 d’une exp\u00e9rience utilisateur transparente.\n<\/p>\n \n Pas encore familier avec Polymer<\/a>? Bien! Polymer est une excellente bo\u00eete \u00e0 outils d’interface utilisateur qui vous permet d’apporter la conception de mat\u00e9riaux sur le Web. Avec la collection d’\u00e9l\u00e9ments en papier<\/a> de Polymer, vous aurez acc\u00e8s \u00e0 toutes les capacit\u00e9s de conception de mat\u00e9riaux et pourrez apporter de la tangibilit\u00e9, des graphismes audacieux et des transitions et animations fluides \u00e0 vos applications sur le Web. Vous pouvez voir les mod\u00e8les de conception de polym\u00e8res et de mat\u00e9riaux en action avec Topeka<\/a>, une application de quiz amusante.\n<\/p>\n \n Maintenant, je vais explorer les \u00e9l\u00e9ments papier de Polymer et vous montrer comment vous pouvez utiliser ce nouveau paradigme de conception dans vos projets Web.\n<\/p>\n \n Le guide de d\u00e9marrage<\/a> de Polymer est fourni avec un bref tutoriel et un projet de d\u00e9marrage pour vous aider \u00e0 vous familiariser avec les concepts cl\u00e9s de Polymer. Tout d’abord, vous devez t\u00e9l\u00e9charger le projet de d\u00e9marrage<\/a> qui contient toutes les d\u00e9pendances et biblioth\u00e8ques n\u00e9cessaires pour travailler avec Polymer. Une fois que vous avez t\u00e9l\u00e9charg\u00e9 le projet de d\u00e9marrage, d\u00e9compressez-le quelque part sur votre disque local.\n<\/p>\n \n Avant de commencer, vous aurez besoin d’un serveur HTTP rapide en cours d’ex\u00e9cution. Si Python est d\u00e9j\u00e0 install\u00e9, ex\u00e9cutez l’une des commandes suivantes au niveau sup\u00e9rieur de l’exemple de projet.\n<\/p>\n \n Python 2.x :\n<\/p>\n \n Python 3.x :\n<\/p>\n \n Maintenant, chargez la version finale du projet pour tester le serveur Web. Par exemple, si le serveur local \u00e9coute sur le port 8000 :\n<\/p>\n \n http:\/\/localhost:8000\/fini\/<\/a>\n<\/p>\n \n Apr\u00e8s cela, vous devez installer les \u00e9l\u00e9ments en papier en utilisant l’une des trois m\u00e9thodes suivantes :\n<\/p>\n \n Zip<\/strong>: T\u00e9l\u00e9chargez<\/a> le fichier Zip et d\u00e9compressez-le \u00e0 la racine de votre projet.\n <\/p>\n<\/li>\n \n Bower<\/strong> : ex\u00e9cutez cette commande ci-dessus \u00e0 partir de la racine du projet :\n <\/p>\n \n Pour plus d’informations, consultez l’installation avec Bower<\/a>.\n <\/p>\n<\/li>\n \n Github<\/strong> : ex\u00e9cutez cette commande ci-dessus \u00e0 partir de la racine du projet :\n <\/p>\n \n Une fois que vous avez les \u00e9l\u00e9ments papier \u00e0 la racine de votre projet, importez le composant en incluant le code suivant dans votre fichier HTML :\n<\/p>\n\n \n \n \n En raison de leur nature d\u00e9clarative, les \u00e9l\u00e9ments papier sont aussi faciles \u00e0 utiliser que les composants d’autres frameworks frontaux. Ci-dessous, j’ai montr\u00e9 la mise en \u0153uvre de certains \u00e9l\u00e9ments d’interface utilisateur les plus couramment utilis\u00e9s dans la conception de mat\u00e9riaux.\n<\/p>\n \n Pour cr\u00e9er un bouton de menu simple qui ouvre un menu d\u00e9roulant lorsque vous cliquez dessus, vous devez utiliser le code suivant :\n<\/p>\n \n \n \n De plus, le bouton d’action flottant peut \u00eatre redimensionn\u00e9 plus petit en appliquant la classe mini.\n<\/p>\n \n Vous pouvez cr\u00e9er des onglets \u00e0 l’aide du code suivant :\n<\/p>\n \n Il s’agit d’un champ de texte sur une ou plusieurs lignes dans lequel les utilisateurs peuvent saisir les valeurs requises. Cet \u00e9l\u00e9ment papier peut \u00e9ventuellement comporter une \u00e9tiquette.\n<\/p>\n\n Mettre l’accent sur les actions :
\n<\/h5>\n\n Modification initi\u00e9e par l’utilisateur :
\n<\/h5>\n\n Chor\u00e9graphie d’animation :
\n<\/h5>\n\n Mouvement significatif :
\n<\/h5>\n\n Impl\u00e9mentation de Material Design pour le Web avec Polymer
\n<\/h3>\n\n Commencer:
\n<\/h5>\npython -m SimpleHTTPServer<\/code><\/pre>\npython -m http.server<\/code><\/pre>\n\n Installez les \u00e9l\u00e9ments papier :
\n<\/h5>\n\n
bower install Polymer\/paper-elements<\/code><\/pre>\ngit clone https:\/\/github.com\/Polymer\/paper-elements.git components\/paper-elements<\/code><\/pre>\n<\/li>\n<\/ul>\n\n
Utilisation des composants de l'interface utilisateur Material\u00a0:<\/code>
\n<\/h5>\nComme <a href=\"http:\/\/foundation.zurb.com\/\">Foundation<\/a> et <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>, la collection d'\u00e9l\u00e9ments papier de Polymer regorge de bo\u00eetes de dialogue, d'onglets et de contr\u00f4les de formulaire. Vous trouverez ci-dessous la liste des composants d'interface utilisateur standard contenus dans les \u00e9l\u00e9ments papier\u00a0:<\/code>\n<\/p>\n\n
bouton-papier<\/code>\n <\/li>\ncase \u00e0 cocher papier<\/code>\n <\/li>\npapier-dialogue-transition<\/code>\n <\/li>\npapier-dialogue<\/code>\n <\/li>\nmenu d\u00e9roulant papier<\/code>\n <\/li>\nfabrication de papier<\/code>\n <\/li>\nfocalisable sur papier<\/code>\n <\/li>\npapier-ic\u00f4ne-bouton<\/code>\n <\/li>\nentr\u00e9e papier<\/code>\n <\/li>\narticle en papier<\/code>\n <\/li>\nbouton de menu papier<\/code>\n <\/li>\npapier-progr\u00e8s<\/code>\n <\/li>\npapier-radio-bouton<\/code>\n <\/li>\ngroupe-radio-papier<\/code>\n <\/li>\nondulation du papier<\/code>\n <\/li>\npapier-ombre<\/code>\n <\/li>\ncurseur de papier<\/code>\n <\/li>\nfileur de papier<\/code>\n <\/li>\nonglet papier<\/code>\n <\/li>\nonglets papier<\/code>\n <\/li>\npain grill\u00e9<\/code>\n <\/li>\nbouton \u00e0 bascule papier<\/code>\n <\/li>\n<\/ul>\nLes ic\u00f4nes sont un autre \u00e9l\u00e9ment crucial de la conception mat\u00e9rielle. L'\u00e9l\u00e9ment Polymer fournit un certain nombre d'ic\u00f4nes que vous pouvez utiliser. Vous pouvez installer <a href=\"https:\/\/www.polymer-project.org\/components\/core-icons\/demo.html\">des ic\u00f4nes de base<\/a> de la m\u00eame mani\u00e8re que vous avez install\u00e9 des \u00e9l\u00e9ments papier.<\/code>\n<\/p>\n\n bouton menu papier :
\n<\/h5>\n\n<\/code><\/pre>\nWeb Design<\/code>\n<\/div>\n\n<\/pre>\n
WordPress<\/code>\n<\/div>\n\n<\/pre>\n
JavaScript<\/code>\n<\/div>\n\n<\/pre>\n
HTML5<\/code>\n<\/div>\n\n<\/pre>\n
Responsive<\/code>\n<\/div>\n\n<\/pre>\n
L'aper\u00e7u du bouton de menu ressemblera \u00e0 ceci\u00a0:<\/code>\n<\/p>\n<a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384400ef322e.webp\" data-rel=\"lightbox\"><img class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384400ef322e.webp\" alt=\"\" \/><\/a><\/code><\/p>\n\n
fabrique de papier\u00a0:<\/code>
\n<\/h5>\nIl s'agit d'un bouton d'action flottant utilis\u00e9 pour les actions promues. Pour cr\u00e9er un bouton d'action flottant, vous devez utiliser le code ci-dessous\u00a0:<\/code>\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-63844012501f5.webp\")
<\/a><\/p>\n\n onglets papier :
\n<\/h5>\n\n ITEM ONE\n ITEM TWO\n ITEM THREE\n<\/code><\/pre>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-638440158a793.webp\")
<\/a><\/p>\n\n entr\u00e9e papier :
\n<\/h5>\n\n<\/code><\/pre>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-638440184876c.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384401bedf34.webp\")
<\/a><\/p>\n