Lors de la conférence Google I / O en 2014, Google a annoncé Material Design, leur nouveau langage de conception. Ils ont depuis converti une grande partie de leurs applications populaires pour adhérer à cette nouvelle spécification dans le but de fournir une expérience cohérente. Maintenant, ils essaient de vous convaincre de suivre aussi.

Qu'est-ce que la conception matérielle?

Après une visite à la spécification officielle de Material Design, vous aurez immédiatement un sentiment de minimalisme ultra-moderne. Les formes de base et les couleurs plates sont le thème ici. Parcourir la documentation est toute une expérience. Je recommande de jeter un coup d'œil par vous-même, mais je vais le résumer ici.

Objectif

Le but est de créer un langage visuel qui synthétise les principes classiques d'un bon design avec l'innovation et la possibilité de la technologie et de la science. Développer également un système sous-jacent unique qui permet une expérience unifiée sur différentes plates-formes et tailles d'appareils.

Des principes

Conception matérielle repose sur trois principes.

Le matériau est la métaphore

Inspiré par l'étude du papier et de l'encre, le matériau vit dans l'espace 3D et est ancré dans la réalité tactile. Il donne l'illusion de l'espace en utilisant des ombres réalistes. Le matériau papier doit respecter les lois de la physique (c'est-à-dire que deux morceaux de papier ne peuvent pas se traverser), mais peuvent remplacer le monde physique (c'est-à-dire qu'un papier peut grandir ou rétrécir).

Audacieux, graphique, intentionnel

Des choix de couleurs délibérés, des images bord à bord, une typographie à grande échelle et un espace blanc intentionnel créent une interface audacieuse et graphique qui plonge l'utilisateur dans l'expérience. Le bouton d'action flottant, ou FAB, est un excellent exemple de ce principe. Avez-vous remarqué ce petit cercle avec le symbole 'plus' flottant dans votre application Google Inbox? La conception matérielle montre clairement qu'il s'agit d'un bouton important.

Le mouvement donne du sens

Le mouvement est significatif et approprié, servant à attirer l'attention et à maintenir la continuité. La rétroaction est subtile mais claire. Les transitions sont ef fi caces mais cohérentes. L'essentiel ici est de n'animer que lorsque cela a un but et de ne pas en faire trop.

Comment AngularJS s'intègre-t-il dans la conception matérielle?

AngularJS, le 'Superheroic JavaScript MVW Framework' de Google, répond à de nombreux défis rencontrés dans le développement d'applications monopage (SPA). Il fournit le cadre nécessaire pour créer des applications Web modernes qui se connectent aux API et n'ont jamais besoin d'actualiser la page.

définition du design dans l'art

AngularJS: une nouvelle approche

Angular est ce qu'aurait été le HTML s'il avait été conçu pour les applications. Le HTML est un excellent langage déclaratif pour les documents statiques, mais pas vraiment la création d'applications dynamiques.

Créer des applications dynamiques avec HTML a toujours été un exercice pour inciter le navigateur à faire des choses qu'il n'était pas censé faire. Il existe plusieurs approches pour y parvenir.

1. Bibliothèque - une collection de fonctions. (jQuery)
2. Framework - le code remplit dynamiquement les éléments statiques si nécessaire. (Durandal, Ember)

Angulaire adopte une approche différente pour résoudre ce problème. Au lieu de lutter avec le HTML qui lui est donné, il crée de nouvelles constructions HTML. Angular enseigne au navigateur une nouvelle syntaxe HTML via une construction appelée «directives». Angular est livré avec un ensemble de ces directives intégrées, mais vous permet également de créer des directives personnalisées, ce qui vous permet d'écrire vos propres éléments HTML.

Ne serait-il pas intéressant que Google crée un ensemble de directives basées sur les principes de Material Design?

Présentation du matériau angulaire

Google développe activement Angular Material, une implémentation de Material Design dans AngularJS. Angular Material fournit un ensemble de composants d'interface utilisateur réutilisables basés sur le système Material Design. Le matériau angulaire est composé de plusieurs pièces. Il dispose d'une bibliothèque CSS pour la typographie et d'autres éléments, il fournit une approche JavaScript intéressante pour la thématisation et sa mise en page réactive utilise une grille flexible. Mais la caractéristique la plus attrayante de Angular Material est son incroyable collection de directives.

Commencer

J'ai créé un projet open source pour vous aider à démarrer votre prochain projet Angular Material. Le but de ce projet est de donner un exemple de tout ce que Angular Material a à offrir, le tout sous un même toit. La navigation, la pagination, la thématisation et toute la collection de directives sont prêtes à l'emploi, tout ce que vous avez à faire est de nourrir vos données et de les lier au HTML.

Jetez un œil à la démo Ici ou fourchez le code sur GitHub .

Directives

Les directives sont une caractéristique angulaire fondamentale. Angular est livré avec plusieurs directives que vous utilisez tout le temps comme ng-model ou ng-repeat. Ils sont un élément très important d'Angular qui permet au cadre de fonctionner comme il se doit.

Comment utiliser une directive de matériau angulaire

Angular Material étend cette bibliothèque de directives avec un ensemble de magnifiques directives inspirées de Material Design. Les directives de matériau angulaire sont des balises HTML qui commencent par «md»; abréviation de Material Design. Ils ne pourraient pas être beaucoup plus faciles à utiliser. Par exemple, regardons le bon vieux bouton.

Un bouton HTML standard peut ressembler à ceci.

Click Me

Un bouton de matériau angulaire ressemble à ceci.

Click Me

Et c'est tout ce qu'il faut pour créer un bouton Matériau. À présent, il existe plusieurs autres options disponibles pour cette directive, comme la thématiser et la rehausser de la surface pour impliquer son importance.

Click Me

Prestations de service

Les services sont également au cœur de la fonctionnalité angulaire. Ils sont utilisés pour partager du code dans l'application. Un service de base commun comme $ http est utilisé et réutilisé pour les appels de données dans les applications angulaires.

Les services angulaires sont:

1. Lazily instancié - Angular instancie un service uniquement lorsqu'un composant d'application en dépend.
2. Singletons - Chaque composant dépendant d'un service obtient une référence à l'instance unique générée par la fabrique de services.

Comment utiliser un service de matériau angulaire

Angular Material est livré avec certains services qui fournissent des fonctionnalités supplémentaires à l'application. Ils contribuent également à la performance de certaines des directives. Un bon exemple de service est le «toast».

Un toast est une petite notification qui glisse du haut de l'écran et disparaît après quelques secondes. L'utilisation de ce service est simple.

En JavaScript,

$mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

Cet exemple montre un simple toast qui apparaît en bas à gauche de l'écran et se retire après 3 secondes.

Certains services peuvent être personnalisés avec des modèles personnalisés. Dans ce cas, le service $ mdToast peut utiliser un modèle HTML personnalisé à l'aide de la directive md-toast.

Thème

La conception matérielle est un langage visuel où les thèmes transmettent un sens à travers la couleur, les tons et le contraste. Ces thèmes sont exprimés à travers les composants de l'application entière pour fournir une sensation plus unifiée.

Selon les directives de Material Design, vous devez «limiter votre sélection de couleurs en choisissant trois teintes de couleur dans la palette principale et une couleur d'accentuation dans la palette secondaire». Angular Material simplifie le suivi de cette directive en utilisant JavaScript pour configurer le thème. Mais d'abord, qu'est-ce qu'une palette et une teinte?

• Teinte: une teinte est une seule couleur dans une palette.
• Palette: Une palette est une collection de teintes.

Par exemple, une palette serait «verte» et une teinte serait une nuance particulière de vert. Le matériau angulaire est livré avec toutes les palettes valides de la spécification Material Design. Vous pouvez en savoir plus sur les palettes de couleurs valides Ici .

Configurer le thème

Thématiser votre projet est un jeu d'enfant. Dans le fichier app.js, définissez les palettes et les teintes souhaitées à l'aide du service Theming Provider.

angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette(‘cyan’, { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

Utilisation du thème

Pour appliquer le thème aux composants, définissez la classe de l'élément sur la palette et la teinte souhaitées.

Click me Click me Click me or maybe me Careful

Disposition

Flexbox est le dernier et le meilleur ajout à la conception réactive et le matériau angulaire est livré avec. Si vous êtes familier avec le système de grille Bootstrap, vous devriez être en mesure de comprendre rapidement. En fait, Bootstrap passe à Flexbox dans sa prochaine version. Il a la disposition familière de lignes et de colonnes à laquelle vous êtes habitué, mais avec bien plus encore. Apprenez à utiliser Flexbox avec ce tutoriel ou étudiez le documentation officielle .

Top 9 des meilleures directives de matériaux angulaires

Il y a trop de directives de matériau angulaire pour toutes les énumérer, je voudrais donc partager avec vous mes favoris.

9. Progression linéaire

Souvent, dans les SPA, les pages ont besoin de temps pour charger les données du serveur. Si l'application affiche une page vierge pendant ce temps, les utilisateurs peuvent penser que l'application est cassée et partira. Informez les utilisateurs que les données se chargent avec le Directive linéaire de progression . Les utilisateurs sauront attendre lorsqu'ils verront une barre de progression animée indiquant que quelque chose se passe. Vous pouvez également utiliser la directive Progress Circular pour un indicateur rond.

8. Sélecteur de dates

La Sélecteur de date directive fait du choix d'une date une expérience propre et simple pour l'utilisateur et un véritable one-liner à écrire. Utilisez simplement md-datepicker et, éventuellement, limitez la plage avec md-min-date et md-max-date et c'est tout.

7. Saisie semi-automatique

Saisie automatique offre une expérience utilisateur agréable en aidant l'utilisateur à choisir une option. C'est ce qui fait du moteur de recherche de Google le meilleur. La directive Autocomplete ajoute cette fonctionnalité à votre application en complétant les mots d'un utilisateur au fur et à mesure de leur saisie. Mais la meilleure partie de cette directive est la personnalisation. En remplissant votre saisie semi-automatique avec md-item-template, vous pouvez donner plus de sens aux suggestions. Par exemple, si un utilisateur recherchait des noms dans une entreprise, la saisie semi-automatique pouvait afficher les noms correspondants avec leur image et leur rôle dans l'entreprise, offrant une expérience utilisateur plus robuste.

6. Feuille inférieure

La Feuille inférieure est un petit menu qui glisse du bas de votre écran, couvrant le contenu et mettant l'accent. Initialement destinée à être utilisée uniquement pour les appareils mobiles, la feuille du bas gagne en popularité sur les écrans plus grands. Pour l'utiliser, créez un modèle avec md-bottom-sheet contenant respectivement une md-grid ou une md-list pour une disposition de grille ou une disposition de liste. Appelez-le ensuite avec le service Bottom Sheet, $ mdBottomSheet.show ().

5. Entrée

Les formulaires de saisie sont ennuyeux et le sont depuis le début d'Internet. Mais ils ne doivent pas l'être! Donne ton contributions un peu de flair avec la directive Input. Enveloppez votre balise d'entrée avec md-input-container et regardez-la prendre vie. Regardez comme votre espace réservé s'anime dans une étiquette flottante. Validez facilement votre saisie avec des changements de couleur et des messages d'avertissement instantanés mais subtils. La directive d'entrée prend un élément qui devrait être ennuyeux et offre une agréable surprise.

4. Toast

L'expérience utilisateur la plus agaçante est de ne pas savoir ce que fait l'application. Nous atténuons cette aggravation avec des grille-pain ou de petites notifications discrètes. Autrefois, lorsque nous envoyions une requête au serveur, nous attendions sur cette page que la réponse revienne avant de pouvoir passer à autre chose. La durée d'attention des utilisateurs a considérablement diminué depuis lors. Dans les SPA d’aujourd’hui, nous cliquons sur un bouton et nous nous attendons à avancer immédiatement, en traitant la réponse du serveur le cas échéant. La Pain grillé directive en fait un morceau de gâteau. Un grille-pain est appelé en utilisant simplement le service Toast, $ mdToast.show (), et en définissant le texte, la durée et le coin dans lequel apparaître. Créez votre propre grille-pain personnalisé avec md-toast.

3. Liste de grille

Vos listes manquent-elles de piquant? Listes de grille sont une alternative aux vues de liste standard. Une liste de grille est la meilleure pour présenter des images et est optimisée pour la compréhension visuelle. Il fonctionne en posant des carreaux de différentes tailles sur une grille, donnant une sensation dispersée et éclectique. La taille et la disposition des carreaux répondent alors à la taille de l'écran. Cette directive ne manquera pas de donner à votre application un aspect excitant et amusant.

2. Cadre blanc

Le concept d'espace est au cœur du Material Design et de sa métaphore papier. Deux feuilles de papier dans la même position z (ou profondeur), forment une couture et doivent se déplacer ensemble. Deux feuilles de papier qui se chevauchent, avec des positions z différentes, forment une étape. Ils se déplacent indépendamment les uns des autres. Pour suivre la conception, nous devons pouvoir déplacer les éléments le long de l'axe z. Le matériau angulaire offre un moyen simple de le faire. En utilisant le Cadre blanc directive, définissez la classe sur md-whiteframe-z {x}, où x est les unités de profondeur depuis l'arrière-plan. Plus le nombre est élevé, plus l'ombre projetée par le papier est grande.

Page 1

Créer un menu de navigation latéral n'a jamais été aussi simple. La directive Sidenav place un menu de navigation à gauche ou à droite de l'écran. En gardant à l'esprit le mobile, il entre et sort comme prévu, ou par programmation d'un simple clic. Un ajout intéressant est la fonction d'ouverture de verrouillage. La navigation latérale peut être réglée pour se verrouiller lorsque l'écran atteint une certaine taille. En définissant le paramètre md-is-lock-open = '$ mdMedia (' gt-sm ')', le menu sera caché sur le téléphone mais verrouillé ouvert sur la tablette et plus.

Conclusion

Google convertit ses applications les plus populaires en Material Design. Maintenant, ils dirigent le développement de Angular Material, une implémentation de Material Design écrite en AngularJS. La conception matérielle utilise une métaphore du papier, des intentions audacieuses et un mouvement significatif. AngularJS organise applications d'une seule page . Angular Material applique les principes de Material Design aux applications AngularJS.

La conception matérielle est là et le matériau angulaire est un moyen fantastique d'appliquer les spécifications de conception matérielle à vos applications d'une seule page. Si vous souhaitez créer votre propre application de matériau angulaire, ne perdez pas votre temps à partir de zéro. Commencez plutôt par une application entièrement fonctionnelle avec des démos des directives, des thèmes déjà configurés et une navigation et un routage prêts à l'emploi. Jetez un œil à la démo Ici ou fourchez le code sur GitHub . Bien sûr, vous pouvez également tout apprendre sur le matériau angulaire en visitant le documentation officielle .

Que pensez-vous de mes choix pour les meilleures directives de matériau angulaire? Les ai-je bien compris? Quels sont tes favoris?

En relation: Tutoriel Angular 6: Nouvelles fonctionnalités avec une nouvelle puissance