Gadgetshowto
Lors du dernier événement I / O de 2014, Google est revenu avec ses nouvelles surprises. En plus de publier officiellement la nouvelle mise à jour Android avec le nom de code Lollipop, Google a également introduit son nouveau langage de conception., Conception matérielle. C'est un système de conception qui n'est pas seulement destiné aux nouvelles améliorations de l'interface utilisateur de Lollipop, mais également à tous les appareils et environnements..
La conception matérielle a des caractéristiques majeures qui la différencient des autres tendances de conception avec ses propres méthodes uniques. Tout comme son nom, c'était inspiré de vrais matériaux et les a combinés en un seul système de conception pour créer une expérience utilisateur élégante, intuitive, belle et la plus interactive. Dans cet article, nous examinerons ce qu'il y a à l'intérieur de Material Design et vous donnerons un guide rapide sur la façon de l'implémenter. En citant le blog de Google, je vais dire: "This is Material Design".
Une introduction
La conception matérielle est un système de conception unifié, ce qui signifie qu'il a été conçu pour fonctionner avec tous les appareils et plates-formes disponibles aujourd'hui. De la tablette, du smartphone au bureau et d'Android, iOs, Windows aux plates-formes Web. Tous les looks et les sensations du design doivent être les mêmes où qu'ils se trouvent.
Principes principaux
Il existe trois grands principes qui construisent la conception matérielle. Ce sont la partie la plus fondamentale de ce que propose le matériel en général.
- Le matériau est la métaphore. Le développement de Material s'est inspiré de l'étude des éléments tactiles que nous utilisons au quotidien, papier et encre. Cela rend l'objet la lumière, la surface et les mouvements sont meilleurs lorsqu'ils interagissent les uns avec les autres.
- Audacieux, graphique et intentionnel. La typographie, les grilles, l'espace, l'échelle, la couleur et l'utilisation des images utilisées dans la conception basée sur l'impression améliorent le contenu du matériau.
- Le mouvement donne du sens. C'est l'une des choses les plus remarquées. Dans Material, vous devez avoir un mouvement significatif et approprié, des commentaires subtils et clairs et une transition efficace et cohérente.
Les composants
Material Design accorde une attention particulière à chaque détail de ses composants afin qu'ils puissent être utilisés universellement. Ces composants vous aideront à créer une application et un site incroyables. Il y a tellement de composants fournis par Material tels que des boutons, un commutateur, une carte, une entrée de texte, fab (bouton d'action flottant), une boîte de dialogue, un toast, un sous-menu, un onglet et plus encore. Chacun d'eux a sa propre règle et guide sur la façon de les construire afin que vous n'ayez aucun élément sans importance.
Modèles Chose
Outre les composants, Material vous fournit également des modèles de base pour une interface utilisateur supplémentaire. Ces modèles amélioreront l'interface utilisateur que vous avez créée avec les composants de Material. Les modèles comprenant le format de données, le tiroir de navigation, les erreurs, les gestes, la technique de défilement, la recherche, les paramètres, le chargement d'images, le balayage pour actualiser et plus.
Couleurs de conception des matériaux
Les couleurs de Material ont été conçues de manière à ne pas vous mettre mal à l'aise, étrange et plat. S'inspirant de nos environnements quotidiens tels que la signalisation routière, l'architecture contemporaine, le ruban de marquage de chaussée et les terrains de sport, Material Design vous apporte des couleurs inattendues et pleines d'esprit. Il y a tellement de palette de couleurs à choisir, ce qui vous donne plus de commodité lors du développement d'applications ou de sites. Vous pouvez également télécharger les échantillons de couleurs pour une utilisation locale, comme pour votre collection Photoshop.
Icône du matériau
Si vous êtes un développeur Android, vous devez être familiarisé avec certains packs d'icônes gratuits fournis par Google. Ils sont généralement utilisés uniquement pour l'élément principal et la barre d'actions. Alors que pour une autre ressource, nous devons rechercher manuellement d'autres icônes comme le dossier, le fichier, le copier-coller, etc. Dans Material Design, Google a résolu le problème avec des tonnes de packs d'icônes vous pouvez utiliser.
Chacune des icônes a subi une approche de conception qui utilise également l'étude des matériaux tactiles. Ils maintiennent également le principe matériel, qui est cohérent. Vous pouvez télécharger ces icônes sur GitHub, elles sont livrées avec des options pour différentes utilisations comme pour iOs, Web, Android ou svg. Si vous voulez une option plus large pour une personnalisation facile, vous voudrez probablement voir les packs d'icônes Material Design sur FlatIcon. À l'intérieur du pack, vous obtiendrez le vecteur d'icône (SVG & EPS), la version PSD et PNG.
Animation du matériau
Ce sont les caractéristiques du matériau que j'aime le plus. Les animations dans Material sont tellement réelles et intuitives. Chaque animation a des transitions de synchronisation significatives, cohérentes et appropriées. La démo gif présentée ci-dessous n'est qu'une des belles animations matérielles. Pour fournir une interaction attrayante et réactive, l'équipe Google crée également une animation de type ondulation d'eau pour l'effet d'entrée de l'utilisateur. Il est principalement utilisé sur les boutons et les cartes.
Ces fonctionnalités que j'ai expliquées ne sont qu'une petite partie de l'offre de Material Design. Pour en savoir plus sur le monde des matériaux, rendez-vous simplement sur la page de documentation.
Mise en œuvre
Par défaut, Material Design est la nouvelle mise à jour de l'interface utilisateur pour Android Lollipop. Toutes les directives que le matériel a été appliquées à l'intérieur. Puisque Material est destiné à tous les types d'environnements, l'implémenter sur un autre système ne sera pas difficile. Et grâce aux communautés, c'est encore beaucoup plus facile avec certains outils qu'ils ont créés.
Voici plusieurs moyens que vous pouvez obtenir pour obtenir la conception matérielle en dehors d'Android, par exemple sur le Web..
Utilisation de cadres CSS
C'est le moyen le plus simple si vous souhaitez implémenter la conception de matériaux dans une plate-forme Web. Avec les frameworks, il vous suffit de l'initialiser puis d'écrire les éléments dont vous avez besoin. Il existe de nombreux frameworks que vous pouvez utiliser comme Materialise, Material UI ou Polymer pour n'en nommer que quelques-uns. Mon choix personnel revient à Materialise. Il est plus facile à utiliser et à comprendre et dispose d'une excellente documentation avec une belle démo.
Suit les directives
Si vous souhaitez mettre en œuvre du matériel sans l'aide du cadre et que vous préférez jouer avec les codes, vous devez suivre les directives relatives au matériel. Vous y trouverez toutes les choses à faire et à ne pas faire pour atteindre les principes matériels. Vous verrez tout le guide de base pour créer des composants, une mise en page, une animation, des couleurs, des motifs et plus encore. Vous voudrez peut-être voir une liste de contrôle du matériel pour un développement plus facile.
Conclusion
La conception des matériaux est un excellent système de conception et est devenue l'une des tendances les plus attendues de l'année. Dans les prochains mois, nous pourrions le voir partout. Plus d'applications et de sites seront peaufinés avec cette nouvelle mise à jour de conception de Google.
Et avec Material Design, Google a prouvé sa supériorité en tant que l'une des plus grandes entreprises technologiques. Cela fait de Google non seulement un leader dans le domaine des moteurs de recherche et des systèmes d'exploitation mobiles, mais également dans le domaine de la conception. À l'heure actuelle, il n'y a aucune autre entreprise qui développe cette grande chose comme Google l'a fait. Mais l'expérience dit que cela ne durera pas longtemps. Attendons simplement qu'une autre entreprise réponde à la conception matérielle de Google.
