Share
Il n'y a pas si longtemps, Google a lancé Material Design, un nouvel ensemble de directives à l'intention des concepteurs et des développeurs. Material Design introduit une nouvelle perspective sur les interfaces utilisateur, les mouvements et les états d’interaction, et constitue un excellent point de départ pour la création d’un produit..
En substance, vous pouvez résumer la conception de matériaux de Google en deux composants:
Matériel fournit un contexte dans la conception, la surface et le bord d’un "matériau" nous fournissent des indices visuels. Comparons cela à la vraie vie. Nous comprenons les dimensions d'une pièce, car nous voyons des murs. En même temps, l'intérieur nous permet de comprendre le contexte de la pièce. Votre cuisine est très différente de votre salle de bain par exemple.
La même chose est appliquée dans la conception des matériaux. La combinaison de style et de contenu fournit le contexte à l'utilisateur dans un espace numérique, un peu comme les murs et les intérieurs physiques. Un utilisateur comprend mieux l'interface utilisateur, car le matériel conçu fournit un contexte pour l'interface..
Une carte fournit une conception contextuelle et est un élément couramment utilisé dans la conception de matériaux. Une carte fournit un contexte en soi, ainsi qu’en ayant une relation avec d’autres cartes.Le concept de Mouvement dans Material Design a une histoire très similaire. Motion fournit le contexte dans une conception à travers le couler d'une application, surtout en ce qui concerne le continuité d’un produit, un utilisateur a le sentiment d’être ininterrompu. Il n'y a pas d'obstacles, tels que des incohérences dans la conception ou une navigation confuse.
Comment fonctionne le mouvement? Voici un exemple. Il y a un flux d'accueil qui consiste en une liste de cartes. Lorsque vous appuyez sur une seule carte, le matériau de la carte s’agrandit pour devenir toute la largeur et la hauteur de l’écran au lieu des dimensions d’une seule carte..
Remarquez comment cet exemple s'applique à la fois au matériau et au mouvement. Une carte est le matériel. Lorsqu'un utilisateur interagit avec, le mouvement se développe pour afficher plus de contenu. Cela fournit une continuité à l'utilisateur car il montre comment leur entrée affecte l'interface utilisateur.
Explorons un peu plus la matière. En substance, le matériau est la combinaison de vos éléments de conception statiques. Pensez aux formes, aux couleurs, à la typographie et à la variété d’outils que vous utilisez pour créer des dessins. Tout cela ensemble forme un matériau.
La couleur est une excellente affaire pour les concepteurs comme pour les utilisateurs. Cela influe énormément sur l'aspect et la convivialité d'un dessin ainsi que sur les effets psychologiques sur l'utilisateur. La couleur peut rendre une conception digne de confiance, excitante, utilitaire, et bien plus encore. Dans Material Design, nous avons accès à une large palette de couleurs que nous pouvons utiliser comme base pour concevoir un produit..
Il est vivement recommandé de conserver la référence de couleurs suivante sous forme de signet. C'est une référence pratique pour concevoir une palette de couleurs pour une interface utilisateur..
Roboto, la police standard pour Android, a été optimisée pour une utilisation multiplate-forme. Pour les concepteurs qui ne connaissent pas bien la typographie, Material Design fournit des directives qui gèrent la conception de la typographie pour vous..
Le moyen le plus simple pour vous de commencer avec cette grille est de télécharger la feuille d'autocollants suivante. Les directives vous fourniront une structure pour votre typographie lorsque vous commencerez un nouveau dessin..
La conception d'une mise en page dans Material Design utilise certains des principes de base de la conception d'impression, ce que Google indique comme source d'inspiration pour Material Design. L'accent est mis sur la création d'interfaces utilisateur capables de s'adapter à différents types de périphériques. Comme vous le savez, l'évolutivité est devenue cruciale pour concevoir des produits performants sur plusieurs appareils..
Cette illustration visualise le concept de profondeur dans les interfaces utilisateur.L'un des concepts de base est empilement. Lorsque vous concevez une interface utilisateur avec Material Design, vous utilisez les ombres portées, le contraste des couleurs et le positionnement z pour donner à l'utilisateur une impression de profondeur dans l'interface utilisateur. La profondeur crée un contexte pour les utilisateurs. Les éléments flottants au-dessus des piles, tels qu'un bouton, accentuent l'appel à l'action dans une interface utilisateur.
Exemple de trois couches de profondeur: un menu, la barre de navigation supérieure et la zone de contenu.Pour les concepteurs plus avancés, les directives incluent des grilles de base. Les métriques et lignes de clés des consignes de conception de matériel sont très détaillées et vous fournissent des ressources pour expérimenter..
Si vous préférez travailler avec une mise en page prédéfinie, vous pouvez télécharger le modèle de cadres blancs de Google..
Exemple de mise en page conçue. Le mouvement va de pair avec les éléments décrits précédemment dans l'exemple de la carte. Le mouvement est ce qui donne vie au matériel conçu.
Lorsque vous commencez à apprendre les bases du motion design, l'un des premiers principes que vous apprendrez à.
Lorsque vous facilitez une animation, vous essayez de rendre un mouvement plus naturel. Au lieu d'animer le mouvement d'un objet à une vitesse constante, vous augmentez la vitesse au tout début de l'animation et réduisez la vitesse à la fin de l'animation..
Pensez à une voiture en mouvement dans la circulation et à la façon dont une voiture accélère et freine, il s'agit d'un mouvement très naturel. Easing essaie de répliquer pour qu'un utilisateur considère le mouvement d'un objet comme naturel..
Le moyen le plus simple de se familiariser avec l’assouplissement est de voir quelques exemples de conception. Les ressources suivantes constituent un excellent signet:
Cette illustration présente l’assouplissement, présenté dans "Principes pour l’animation dans le design d’interface utilisateur: comprendre l’assouplissement"..Lorsqu'un utilisateur interagit avec un élément de conception, dans la plupart des cas, l'élément doit fournir un retour d'informations. Dans Material Design, l’objectif est de ravir l’utilisateur avec des informations sur le mouvement et de fournir un contexte au matériau avec lequel il interagit. La beauté de responsive motion réside dans le fait que vous reconnaissez l'action de l'utilisateur, ce qui améliore la convivialité de votre produit..
Le plus bel exemple que j'ai vu est l'ondulation tactile, un point fort visuel lorsque l'utilisateur interagit avec un élément particulier..
Un autre exemple est l'ouverture ou l'expansion d'éléments. Lorsque vous appuyez sur un élément en particulier pour le développer, le nouveau matériau se développe à partir du point touché par l'utilisateur. La croissance d'un élément semble naturelle lorsqu'elle provient directement du centre du toucher de l'utilisateur. Pour plus d'exemples d'interactions réactives, visitez le site Web de Google Material Design..
Dernier point mais non le moindre, le transitions entre interfaces est important pour une interaction réactive. C'est la forme de mouvement la plus cruciale pour concevoir une continuité pour l'utilisateur. Pour les écrans entrants et sortants, le point d'origine fournit un contexte. Une interface utilisateur peut se développer et se développer de manière dynamique, ce qui laisse aux concepteurs beaucoup d'espace pour jouer avec de belles transitions. Et le meilleur de tous, ils peuvent leur donner un sens.
Vous trouverez ci-dessous quelques exemples de conception de matériaux créés par d'excellents designers..
Google - Exploration de matériaux par Aurélien Salomon
Alarme Matériel UI par Ehsan Rahimi
Aviasales L (Conception de matériel) par Mark MCeci est une brève introduction à Material Design. Si l’une des réponses ci-dessus a suscité votre intérêt, je vous recommande vivement de lire davantage dans le directives officielles par Google.
Veuillez aborder Material Design avec un esprit créatif. Une grande partie de ce qui est présenté est un rappel de ce qui rend un bon design excellent. Simultanément, ils sont seulement directives, ce qui signifie que pour grandir en tant que designer, vous êtes le bienvenu pour lui donner votre touche personnelle.
Je vous encourage tous à créer un design en gardant à l’esprit ces directives. Cela peut vouloir dire que vous adoptez une approche différente de celle habituelle, ce qui est formidable pour garder vos compétences à la pointe et pour évoluer en tant que designer..
Que pensez-vous de Material Design? Quelles ont été vos expériences jusqu'à présent? S'il vous plaît partagez-le ci-dessous dans les commentaires, je suis très curieux et je suis sûr que beaucoup d'autres le sont aussi.
Accentsconagua