Eine Materialschaltfläche ist mehr als eine Schaltfläche

Gestalten (und Unterscheiden) von Schaltflächen mithilfe des Material Design-Themas

Material Design hat kürzlich aktualisierte Formanleitungen, Werkzeuge und Fallstudien veröffentlicht, um zu zeigen, wie einfach es ist, UI-Komponenten mit Material-Theming zu gestalten. Um die Theming-Funktionen des neuen Formsystems weiter zu veranschaulichen, haben wir Live-Beispiele für Material-Schaltflächen in verschiedenen Themen mit Material Components for the Web on Glitch erstellt. Mit Glitch kann jeder (auch Sie) diese Schaltflächenbeispiele neu mischen und ihr Ausdruckspotenzial mithilfe von Code ausschöpfen. In den folgenden Schaltflächenbeispielen werden dieselben sprichwörtlichen Drehregler in Material Theming gedreht, um ganz unterschiedliche visuelle Ergebnisse zu erzielen. Da immer mehr Marken ausschließlich im digitalen Raum existieren, sind Themenkomponenten jetzt genauso wichtig wie ein Logo für die Beziehung der Nutzer zu Ihrer Marke.

Jeder Knopf auf Glitch wurde mit einem Thema versehen, das eine fiktive Marke oder ein fiktives Produkt widerspiegelt, z. B. einen Blumenlieferdienst oder eine Podcast-App. In diesem Handbuch werden die Themen der einzelnen Schaltflächen in Bezug auf Marke und Materialfarbe, -typ und -form aufgeschlüsselt.

Material DIY - Erfahren Sie, wie Sie diese Schaltflächen in der Readme-Datei der Schaltfläche selbst neu mischen.

Synergee

Meditationsanleitung App

Synergee ist eine Meditationsanleitungs-App, die Benutzer über haptische Technologie und andere nicht visuelle Mittel durch Meditationsreisen führt. Die Marke von Synergee weist die folgenden Attribute auf: hell, bescheiden und raffiniert.

Farbe

Die Verwendung von hellem und dunklem Blau dominiert Synergees Marke und spricht für seine hellen und bescheidenen Attribute. Durch die Wiederholung des Gefühls, in den Himmel zu schauen, drücken die Farben eine gewisse Vertrautheit aus, die sich angenehm freundlich anfühlt.

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

Art

Synergee drückt sein ausgefeiltes Markenattribut durch die Verwendung von K2D aus, einer thailändischen und lateinischen Schrift, die von Cadson Demak erstellt wurde. K2D enthält traditionelle thailändische Buchstabenformen, die von Natur aus rund und "kurvenreich" sind. Es ist cool zu sehen, wie die Gestaltungsmerkmale des lateinischen Alphabets und des thailändischen Abugida in etwas Einzigartiges und Aufregendes verwandelt wurden.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-typography-styles-button: (
 Schriftgröße: 14px,
 Schriftgröße: 500,
 Buchstabenabstand: 0.05em,
);

Gestalten

Das helle Markenattribut von Synergee gibt vor, dass das Thema ein Gefühl von Freundlichkeit und Optimismus ausdrücken soll. Um dies auszudrücken, ist das Formsystem von Synergee stark abgerundet, wobei kleine Komponenten wie Knöpfe vollständig rund sind.

$ mdc-shape-small-component-radius: (24px);

Rote Rosen

Blumenlieferservice

Red Roses ist ein Blumenlieferdienst, der durch Geben positive Wirkung entfaltet und die folgenden Markenattribute verkörpert: natürlich, fröhlich und elegant.

Farbe

Das Farbsystem verwendet Rottöne, die für die Natürlichkeit von Rosen sprechen, und macht es einfach, einen Kontrast zwischen verschiedenen Komponenten zu schaffen. Schaltflächen verwenden standardmäßig die Primärfarbe Ihres Materialdesigns.

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

Art

Das Thema Rote Rosen verwendet Cabin, eine humanistische Sans-Schrift, die in Google Fonts verwendet wird. Die Letterforms von Cabin weisen eine Kombination aus runden und scharfen Konturen auf, die für die natürlichen und eleganten Markenattribute von Red Roses sprechen. (Cabin lässt sich von Gill Sans inspirieren, der vom „Underground Alphabet“ von London Underground inspiriert wurde.)

$ mdc-typography-font-family: unquote ("Cabin, sans-serif");
$ mdc-typography-styles-button: (
 Schriftgröße: 14px,
 Schriftgröße: 500,
 Buchstabenabstand: 0.05em,
);

Gestalten

Das Formsystem von Red Roses spricht sowohl für seine fröhlichen als auch für seine natürlichen Markenattribute, indem es Blütenblätter imitiert. Die abwechselnden Radien für diesen Knopf spiegeln die (im) Perfektion der Flora und der natürlichen Welt wider; In Kombination mit Farbe erzeugt diese Form eine starke visuelle Wirkung.

$ mdc-shape-small-component-radius: (4 x 12 x 4 x 12 x);

Getan!

Task-Management-App

Getan! ist eine Aufgabenverwaltungs-App, die schnelle, kompakte Erlebnisse hervorhebt, damit Benutzer ihre Aufgaben ablenkungsfrei erledigen können. Fertig! Marke hat die folgenden Attribute: professionell, schnell und prägnant.

Farbe

Um mit den professionellen und einfachen Markenattributen von Done! Zu sprechen, verwendet das Thema eine konservative Palette aus Weiß und einem ziemlich neutralen Blau. Um die Ablenkung zu minimieren und die Geschwindigkeit zu erhöhen, dürfen die Schaltflächen von Done! Keinen Schatten enthalten.

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

Art

Die starre Schrift Libre Franklin steht im Kontrast zur konservativen Farbpalette von Done! Libre Franklin ist eine Erweiterung der Franklin Gothic-Schrift, die oft für Schlagzeilen oder Werbetafeln verwendet wurde. Es ist leicht, die geschäftsmäßigen Qualitäten von Libre Franklin im Kontext von Done! zu erkennen.

$ mdc-typography-font-family: unquote ("Libre Franklin, serifenlos");
$ mdc-typography-styles-button: (
 Schriftgröße: 14px,
 Schriftgröße: 500,
 Buchstabenabstand: 0.02em,
 Text-Transformation: Kapitalisieren,
);

Gestalten

Das Shape-System von Done spricht für die Schnelligkeit und Prägnanz der Marke, indem es darauf verzichtet, das visuelle Gewicht gebogener oder abgewinkelter Ecken zu addieren.

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

Moodie

Stimmungsring App

Moodie ist eine mysteriöse Stimmungsring-App, die Ihre Stimmung bestimmt, indem sie biometrische Daten sammelt. Die Marke hat die folgenden Markenattribute: geheimnisvoll, technisch und entzückend.

Farbe

Moodies mysteriöse und technische Markenattribute zeichnen sich durch die Verwendung von „Terminal“ -Grün aus, das häufig mit klassischen Computersystemen und Grafiken in Verbindung gebracht wird. Im Gegensatz zu den meisten gängigen Interfaces spricht Moodies Farbgebrauch weitgehend für die zweideutige Erzählung der Marke und dient als Grundlage für die farbverändernde Magie, einen Stimmungsring nachzuahmen.

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

Art

IBM Plex Mono übertreibt das technische Markenattribut von Moodie auf ähnliche Weise wie das Farbsystem. Die Verwendung einer Monospace-Schriftart weist auf die technische Seite des Moodie-Produkts hin. In Kombination mit einem mysteriösen und entzückenden Aufruf zum Handeln agiert IBM Plex Mono subtextuell und deutet auf etwas Außergewöhnliches hin.

$ mdc-typography-font-family: unquote ("IBM Plex Mono, serifenlos");
$ mdc-typography-styles-button: (
 Schriftgröße: 14px,
 Schriftgröße: 600,
 Buchstabenabstand: 0.05em,
);

Gestalten

Moodies Formgeschichte setzt sich mit Zweideutigkeitsthemen fort und konzentriert sich auf den Zwischenraum von weich und starr, rund und scharf, um erneut eine verzerrte, aber verspielte Sicht auf die „mysteriöse“ Technologie hinter dem Produkt auszudrücken.

$ mdc-shape-small-component-radius: (8px);

Waverly

Podcast-Streaming-App

Waverly ist ein Podcast-Streaming-Dienst, der sich auf die Kuratierung von Wiedergabelisten für verschiedene Arten von Inhalten zu einem bestimmten Thema wie Podcasts, Artikeln, Videos oder Musik konzentriert. Waverly verkörpert die folgenden Markenattribute: fleißig, zeitgemäß und kuratiert.

Farbe

Um das Hauptaugenmerk auf kuratierte Inhalte zu legen, ist Waverlys Material-Theme ein dunkles Thema. Dies bedeutet lediglich, dass der Großteil der Benutzeroberfläche eine dunkle Farbe mit hellen Akzenten aufweist, um auf umsetzbare Elemente wie die Schaltflächen hinzuweisen. Im fleißigen Fall von Waverly hebt Dunkelgrau ein helles Orange hervor, um die Hierarchie in einer kontextlastigen Umgebung sicherzustellen.

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

Es ist wichtig zu beachten, dass sich ein dunkles „Thema“ von einem dunklen „Modus“ unterscheidet. Ein dunkler Modus wird von einem Benutzer durch Ausführen einer bestimmten Aktion aktiviert, während ein dunkles Thema dem Thema basierend auf Markenfarben oder anderen Faktoren innewohnt .

Art

Das zeitgenössische Markenattribut von Waverly wird mit Montserrat ausgedrückt, einer Schrift, die von Julieta Ulanovsky erstellt wurde, die im Stadtteil Montserrat in Buenos Aires wohnt. Während Montserrat nur auf den ersten Blick einer Schriftart wie Gotham ähnelt, mit breiten Buchstabenformen und kühnen Umrissen, fügt es sich nahtlos in das zeitgenössische Phänomen ein, das als „Markenschriftarten“ bekannt ist, mit einer abgerundeten Freundlichkeit, die den Weg in die Identität vieler Produkte gefunden hat.

$ mdc-typography-font-family: unquote ("Montserrat, serifenlos");
$ mdc-typography-styles-button: (
 Schriftgröße: 14px,
 Schriftgröße: 600,
 Buchstabenabstand: 0.05em,
);Gestalten

In diesem speziellen Beispiel verwendet Waverly eine Material-Textschaltfläche, in der es keinen Umriss oder Rahmen gibt, um eine Form anzugeben. Obwohl es keine sichtbare Form gibt, kann ein Benutzer bei einer Interaktion (z. B. durch Bewegen des Mauszeigers oder Tippen) die Begrenzungen einer Schaltfläche und ihre Form sehen. Die Formgeschichte von Waverly wird leise gesprochen und spricht seine modernen und fleißigen Attribute an, indem die bekannte Grundform von Material genutzt wird.

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

Material Design + Glitch

Material Design möchte, dass jeder in der Lage ist, schöne Produkte schneller zu bauen. Unsere Open-Source-Komponenten bieten Ihnen alles, was Sie für den Baubeginn benötigen. Glitch macht es einfach, direkt im Browser zu basteln, und inspiriert zum Lernen durch Spielen. Wir empfehlen jedem und jeder, diese Beispiele neu zu mischen, um ihre eigenen Schaltflächen und Themen zu erstellen, auch wenn sie noch nie zuvor codiert wurden.

Remixe und teile was du machst!
glitch.com/@material