Un bouton de matériau est plus qu'un bouton

Comment styliser (et différencier) des boutons en utilisant le thème Material Design

Material Design a récemment publié des guides de forme, des outils et des études de cas mis à jour afin de montrer à quel point il est facile de mettre en forme des composants d'interface utilisateur à l'aide de Material Theming. Pour illustrer davantage les fonctionnalités de création de thèmes du nouveau système de formes, nous avons créé des exemples concrets de boutons de matériau dans divers thèmes, à l'aide de Composants de matériau pour le Web sur Glitch. Glitch permet à quiconque (même à vous) de remixer ces exemples de boutons et de réaliser leur potentiel d'expression en utilisant du code. En résumé, les exemples de boutons suivants permettent de tordre les mêmes boutons proverbiaux dans Material Theming pour obtenir des résultats visuels extrêmement différents. Comme de plus en plus de marques existent exclusivement dans l’espace numérique, les composants thématiques sont désormais aussi importants que les logos dans la relation des utilisateurs avec votre marque.

Chaque bouton de Glitch a été conçu pour refléter une marque ou un produit fictif tel qu'un service de livraison de fleurs ou une application de podcast. Ce guide déconstruira le thème de chaque bouton en termes de marque et de systèmes Matériau Couleur, Type et Forme.

Matériel DIY - Apprenez à remixer vous-même ces boutons dans le fichier .readme du bouton.

Synergee

Application d'orientation de méditation

Synergee est une application d'aide à la méditation qui guide les utilisateurs tout au long de leur parcours de méditation au moyen de la technologie haptique et d'autres moyens non visuels. La marque Synergee a les attributs suivants: vif, humble et sophistiqué.

Couleur

L’utilisation du blues clair et foncé domine la marque Synergee et témoigne de ses attributs clairs et humbles. En reproduisant la sensation de regarder le ciel, les couleurs expriment une certaine familiarité qui se sent agréablement amicale.

$ mdc-theme-primary: # ded7ff;
$ mdc-theme-on-primary: # 003db8;

Type

Synergee exprime son attribut de marque sophistiqué en utilisant K2D, une police de caractères thaïlandaise et latine créée par Cadson Demak. K2D inclut des formes de lettres thaïlandaises traditionnelles qui sont naturellement rondes et «bouclées». C’est cool de voir comment les caractéristiques de conception de l’alphabet latin et de l’abugida thaïlandais ont été transformées en quelque chose d’unique et d’excitant.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-typography-styles-button: (
 taille de la police: 14px,
 poids de la police: 500,
 espacement des lettres: 0.05em,
)

Forme

L’attribut brillant de la marque Synergee indique que le thème doit exprimer un sens de la convivialité et de l’optimisme. Pour exprimer cela, le système de forme de Synergee est fortement arrondi avec de petits composants tels que des boutons complètement arrondis.

$ mdc-forme-petit-composant-rayon: (24px);

Roses rouges

Service de livraison de fleurs

Red Roses est un service de livraison de fleurs qui promeut la positivité par le don et incarne les attributs de la marque suivants: naturel, joyeux et élégant.

Couleur

Le système de couleur utilise des tons de rouge qui reflètent le naturel des roses et permettent de créer facilement un contraste entre différents composants. Les boutons utilisent par défaut la couleur principale de votre thème de matériau.

$ mdc-theme-primary: # b31839;
$ mdc-theme-on-primary: #ffffff;

Type

Le thème Red Roses utilise Cabin, un humanist sans typeface trouvé sur Google Fonts; Les formes de lettres de Cabin combinent des contours arrondis et nets qui reflètent les attributs naturels et élégants de la marque Red Roses. (Cabin s’inspire de Gill Sans, qui s’inspire de «l’alphabet souterrain» de London Underground).

$ mdc-typography-font-family: unquote ("Cabin, sans-serif");
$ mdc-typography-styles-button: (
 taille de la police: 14px,
 poids de la police: 500,
 espacement des lettres: 0.05em,
)

Forme

Le système de formes des roses rouges reflète à la fois ses attributs de marque joyeux et naturels en imitant les pétales de fleurs. Les rayons alternés de ce bouton reflètent la (im) perfection de la flore et du monde naturel; en combinaison avec la couleur, cette forme crée un fort impact visuel.

$ mdc-forme-petit-composant-rayon: (4px 12px 4px 12px);

Terminé!

Application de gestion des tâches

Terminé! est une application de gestion des tâches qui met l'accent sur des expériences rapides et compactes permettant aux utilisateurs d'effectuer leurs tâches sans distraction. Le fait! La marque a les attributs suivants: professionnel, rapide et succinct.

Couleur

Afin de parler des attributs de marque professionnels et simples de Done!, Le thème utilise une palette classique composée de blanc et de bleu relativement neutre. De plus, pour minimiser les distractions et accélérer votre vitesse, les boutons de Done! S’abstiennent d’inclure une ombre.

$ mdc-theme-primary: # 5973bf;
$ mdc-theme-on-primary: #ffffff;

Type

La police de caractères rigide Libre Franklin contraste hardiment et sûrement avec la palette de couleurs conservatrice de Done !. Libre Franklin est une extension de la police de caractères Franklin Gothic, souvent utilisée pour les titres de journaux ou les panneaux d'affichage. Il est facile de voir les qualités professionnelles de Libre Franklin dans le contexte du bouton Done! ’.

$ mdc-typography-font-family: unquote ("Libre Franklin, sans-serif");
$ mdc-typography-styles-button: (
 taille de la police: 14px,
 poids de la police: 500,
 espacement des lettres: 0.02em,
 text-transform: capitaliser,
)

Forme

Le système de formes de Done témoigne de la rapidité et de la brièveté de la marque en évitant d’ajouter le poids visuel de coins incurvés ou angulaires.

$ mdc-shape-small-composant-radius: (0px);

Moodie

Mood Ring App

Moodie est une application d'anneau d'humeur mystérieuse qui détermine votre humeur en collectant des données biométriques. Sa marque possède les attributs de marque suivants: mystérieux, technique et enchanteur.

Couleur

Les attributs mystérieux et techniques de la marque Moodie se caractérisent par l’utilisation du vert «terminal» par la marque, souvent associé à des systèmes informatiques et des graphiques d’époque. Contrairement à la plupart des interfaces courantes, l’utilisation de la couleur par Moodie évoque en grande partie le récit ambigu de la marque et sert de base à la magie changeante de la couleur qui consiste à imiter un anneau d’humeur.

$ mdc-theme-primary: # 009b3b;
$ mdc-theme-on-primary: # 003db8;

Type

IBM Plex Mono exagère l’attribut technique de la marque Moodie de la même manière que son système de couleurs; L’utilisation d’une police monospace fait allusion à la technicité du produit Moodie’s. En combinaison avec un appel à l'action mystérieux et délicieux, IBM Plex Mono agit subtilement, suggérant quelque chose d'extraordinaire.

$ mdc-typography-font-family: unquote ("IBM Plex Mono, sans-serif");
$ mdc-typography-styles-button: (
 taille de la police: 14px,
 poids de police: 600,
 espacement des lettres: 0.05em,
)

Forme

Continuant sur des thèmes d’ambiguïté, Moodie’s shape story met l’accent sur l’espace intermédiaire entre le doux et le rigide, le rond et le net, pour exprimer à nouveau une vision déformée mais ludique de la technologie «mystérieuse» à l’origine du produit.

$ mdc-forme-petit-composant-rayon: (8px);

Waverly

Application de streaming podcast

Waverly est un service de diffusion de podcasts qui se concentre sur la sélection de listes de lecture pour différents types de contenu sur un même sujet, tels que des podcasts, des articles, des vidéos ou de la musique. Waverly incarne les attributs de la marque suivants: industrieux, contemporain et curé.

Couleur

Le thème Matière de Waverly est un thème sombre, ce qui signifie simplement que la majorité de l’interface utilisateur est de couleur sombre avec des accents de couleur claire pour indiquer des éléments pouvant être actionnés, comme ses boutons. Dans le cas industrieux de Waverly, le gris foncé met en évidence un orange vif pour assurer sa hiérarchie dans un environnement lourd.

$ mdc-theme-primary: # FE8A00;
$ mdc-theme-on-primary: # 003db8;

Il est important de noter qu'un «thème» sombre est différent d'un «mode» sombre. Un mode sombre est activé par l'utilisateur en effectuant une action spécifique, tandis qu'un thème sombre est inhérent au thème, en fonction des couleurs de la marque ou d'autres facteurs. .

Type

L’attribut contemporain de la marque Waverly s’exprime à travers Montserrat, une police de caractères créée par Julieta Ulanovsky, résidente du quartier Montserrat à Buenos Aires. Bien que ressemblant à première vue à une police de caractères comme Gotham, avec ses lettres épaisses et ses contours audacieux, Montserrat s'inscrit parfaitement dans le phénomène contemporain appelé «polices de caractères» avec une convivialité sans faille qui a fait son chemin dans l'identité de nombreux produits.

$ mdc-typography-font-family: unquote ("Montserrat, sans-serif");
$ mdc-typography-styles-button: (
 taille de la police: 14px,
 poids de police: 600,
 espacement des lettres: 0.05em,
);Forme

Dans cet exemple particulier, Waverly utilise un bouton de texte Matériau dans lequel il n'y a ni contour ni case pour indiquer une forme. Bien qu’il n’y ait pas de forme visible, lors d’une interaction (survolant un curseur ou tapotant, par exemple), un utilisateur peut voir les limites d’un bouton et sa forme. L’histoire de la forme de Waverly est douce et parle de ses attributs contemporains et industrieux en utilisant la forme de base familière de Material.

$ mdc-shape-small-composant-radius: (4px);

Conception matérielle + Glitch

Material Design veut que quiconque puisse construire de beaux produits plus rapidement. Nos composants open-source vous donnent tout ce dont vous avez besoin pour commencer à construire. Glitch facilite le bricolage directement dans le navigateur, inspirant l'apprentissage par le jeu. Nous encourageons tout le monde à remixer ces exemples pour créer leurs propres boutons et leurs propres thèmes, même s'ils n'ont jamais été codés auparavant.

Remixez et partagez ce que vous faites!
glitch.com/@material