Was macht Material Design?
Digitale Oberflächen verhalten sich wie Papierblätter mit Dicke und Schatten, sodass Tiefe und Bewegung die Hierarchie der Benutzeroberfläche erklären.
Ein System aus flachen, farbigen Oberflächen, die auf definierten Höhen liegen und Schlagschatten von einem top-links gerichteten Hauptlicht werfen, mit kräftigen Farben, einem 8dp-Raster und zielgerichteter Bewegung. Google kündigte es auf der I/O im Juni 2014 an.
Zeitraum: 2014–heute · Ära: Touchscreen · Bereich: Grafik- & UI-Design · Auch genannt: Material, Google Material, Material 2
Wann diese Fertigkeit laden
Lade sie, wenn der Benutzer nach Folgendem fragt: "material design", "material ui", "google material", "elevation", "floating action button", "fab", "android style", "ripple effect", "app bar", "paper and ink", "md2".
Geeignet für: Android-Anwendungen, Admin-Dashboards, Web-Apps mit vielen Komponenten, Designsysteme, Produktivitätstools.
Verwende sie nicht, wenn:
- Die Marke eine eigene, unverwechselbare Stimme benötigt, da das Standard-Erscheinungsbild erkennbar Google ist.
- Die Seite redaktionellen Charakter hat und nur wenige interaktive Komponenten besitzt.
- Das Design eine reine 2D-Optik ohne jeglichen Schatten erfordert.
Systemdirektiven
Bei der Erstellung von UI- oder Grafiklayouts im Material Design MUSST du:
- Jede Oberfläche als Papierblatt mit 1dp Dicke behandeln, das sich nie biegt, nie seine Größe durch Dehnung ändert und niemals eine andere Oberfläche durchdringt.
- Hierarchie durch Elevation in dp ausdrücken: 0 für die Seite, 1 für Karten, 4 für die App-Leiste, 6 für einen schwebenden Button in Ruheposition, 8 für ein Menü, 16 für eine Navigationsleiste und 24 für einen Dialog.
- Jedes Layout auf einem 8dp-Raster aufbauen, mit 4dp für kleine Schrift- und Symbolausrichtung und 48dp Touch-Zielen.
- Kräftige Farben aus einem Primär- und einem Akzentton verwenden, mit der Statusleiste im 700er-Ton der Primärfarbe und der App-Leiste im 500er-Ton.
- Große Schrift mit einer definierten Skala von 12, 14, 16, 20, 34, 45 und 56sp in Roboto verwenden.
- Jede Berührung mit einer Antwort versehen: einem kreisförmigen Ripple, der sich innerhalb von 300ms vom Berührungspunkt aus ausbreitet.
- Elemente auf gekrümmten Pfaden mit einer Beschleunigung bewegen, die schnell startet und langsam endet, und jede Bewegung erklären lassen, woher ein Element kam.
Leitplanken
Jede der folgenden Zeilen verstößt gegen den Stil. Überprüfe deine Ausgabe anhand der Liste, bevor du sie zurückgibst.
- NIEMALS: Verläufe und Texturen auf Oberflächen.
- NIEMALS: Schatten ohne konsistentes Elevationsniveau oder mit unterschiedlichen Lichtrichtungen.
- NIEMALS: Oberflächen, die sich auf derselben Elevation überlappen.
- NIEMALS: Touch-Ziele unter 48dp.
- NIEMALS: Farbiger Text auf farbigem Hintergrund unter 4,5:1.
- NIEMALS: Sofortige Zustandsänderungen ohne Bewegungs- oder Ripple-Feedback.
- NIEMALS: Mehr als ein Floating Action Button auf einem Bildschirm.
Vektorprofil
| Achse | Punktzahl | 1 bedeutet | 5 bedeutet |
|---|---|---|---|
| Ornamentierung | ■■□□□ 2/5 | puristisch minimalistisch | maximalistisch |
| Dimensionalität | ■■■□□ 3/5 | streng 2D | vollständig 3D / räumlich |
| Rasterstrenge | ■■■■□ 4/5 | chaotisch / organisch | strenges mathematisches Raster |
| Skeuomorpher Realismus | ■■□□□ 2/5 | abstrakt digital | fotorealistisches Material |
| Typografische Ausdruckskraft | ■■□□□ 2/5 | neutral / unsichtbar | experimentell / illustrativ |
Halte diese Punktzahlen ein. Wenn eine Anfrage eine Achse um 2 Punkte oder mehr verschiebt, hast du den Stil verlassen: gehe zu „Abstammungs-Fallbacks".
Raum- & Rasterlogik
- Rastermechanik: Ein 8dp-Basisraster, 4dp für Symbole und Schrift, ein 4-Spalten-Telefonraster mit 16dp-Abständen, ein 8-Spalten-Tabletraster mit 24dp-Abständen und ein 12-Spalten-Desktopraster; die App-Leiste ist 56dp auf dem Telefon und 64dp auf dem Desktop.
- Weißraum-Verhältnis: 25–40% der Oberfläche bleiben leer; die Abstandsskala ist 4, 8, 16, 24, 32, 48, 56dp, mit 16dp Karteninnenabstand.
- Ausrichtungsregeln: Inhalt wird bei Listen mit Avataren an einer 72dp-Kenntlinie vom linken Rand und sonst an einer 16dp-Kenntlinie ausgerichtet; der Floating Action Button sitzt 16dp vom rechten und unteren Rand entfernt.
- Behältergeometrie: Karten und Buttons verwenden einen Eckradius von 2dp; Floating Action Buttons sind 56dp-Kreise und Mini-Buttons 40dp; Dialoge sind mindestens 280dp breit.
Typografie
- Klassifikationen: neo-groteske serifenlose Schrift · humanistische serifenlose Schrift
- Laufweite: Anzeigegrößen von 34sp und größer nehmen 0em bis -0,01em; Textkörper nimmt +0,01em; Buttons werden in Großbuchstaben mit +0,09em gesetzt.
- Zeilenabstand: Überschriften 1,2; Textkörper 1,4 bis 1,5 bei 14sp über einer 20dp-Zeile; Listentext 24dp für 16sp.
- Hierarchieregeln:
- Verwende die Skala 12, 14, 16, 20, 34, 45 und 56sp und keine Größen zwischen diesen Werten.
- Verwende mittelschwer (500) für Titel und Buttons, normal (400) für Textkörper und leicht (300) für Anzeigegrößen von 45sp und darüber.
- Setze Text auf einer Oberfläche mit 87% Schwarz für primären, 54% Schwarz für sekundären und 38% Schwarz für deaktivierten Text.
- Setze Button-Beschriftungen in Großbuchstaben bei 14sp und Schriftstärke 500.
Schriftkombinationen
| Anzeige | Textkörper | Hinweis |
|---|---|---|
| Roboto | Roboto | Die Systemschriftart von Material 1 und 2, verwendet in einer einzigen Familie von Strichstärke 300 bis 900. |
| Roboto Condensed | Roboto | Eine kondensierte Anzeigeschrift für dichte Kopfzeilen mit der Standardschriftart. |
| Noto Sans | Noto Sans | Die Fallback-Familie für nicht-lateinische Schriften in denselben Strichstärken und Metriken. |
Farbe & Beleuchtung
- Palettenstruktur: Ein Primärton mit seinen 500er- und 700er-Farbtönen, ein Akzentton aus dem Bereich A200 bis A400 und neutrale Grautöne; der Primärton bedeckt die App-Leiste und 10 bis 20% der Oberfläche.
- Kontrastregeln: Textkörper hält mindestens 4,5:1 und großer Text mindestens 3:1; weißer Text auf Indigo 500 erreicht 7,5:1 und auf Pink A200 3,4:1, was nur für 18sp-Text ausreicht.
- Oberflächenbehandlung: Deckende, flache Füllungen aus Vollfarbe ohne Verlauf und ohne Textur; Scrims verwenden Schwarz bei 32% Deckkraft hinter Dialogen.
- Licht und Schatten: Ein Hauptlicht von oben und ein weiches Umgebungslicht; jeder Schatten hat einen Halbschatten, einen Kernschatten und eine Umgebungslichtschicht, und seine Unschärfe und Verschiebung nehmen mit der Elevation zu.
Palette
| Name | Hex | Rolle |
|---|---|---|
| Oberfläche | #FFFFFF | Karten- und Blattoberfläche |
| Hintergrund | #FAFAFA | Seitenhintergrund |
| Indigo 500 | #3F51B5 | Primärfarbe und App-Leiste |
| Indigo 700 | #303F9F | Statusleiste |
| Pink A200 | #FF4081 | Akzentfarbe und Floating Action Button |
| Grau 900 | #212121 | Text bei 87% Deckkraft |
Materialität & Textur
- Oberflächensimulation: Digitales Papier: ein flaches Blatt mit 1dp Dicke, das einen Schatten wirft, aber keine Körnung, keine Abschrägung und keine Textur hat.
- Randregeln: Oberflächen haben keine Umrandung; Trennlinien sind 1px Schwarz bei 12% Deckkraft, 72dp oder 16dp vom Rand eingerückt; Textfelder erhalten eine 1px dicke untere Linie, die bei Fokus auf 2px anwächst.
- Unschärfe und Elevation: Elevationsschatten sind 0 1px 3px bei 20% plus 0 1px 1px bei 14% für 1dp, 0 4px 5px bei 14% und 0 1px 10px bei 12% für 4dp und 0 9px 12px bei 14% für 12dp; das System hat 25 Stufen von 0 bis 24dp.
Ornamentierung & Ikonografie
- Ikonografie: Systemsymbole von 24dp auf einer 20dp-Lebensfläche mit einer Strichstärke von 2dp, quadratischen Enden mit 2dp abgerundeten Ecken, Vollfüllung und einer Farbe bei 54% Schwarz.
- Illustration: Flache Vektorformen in der Palette und randlose Fotografie unter einem 20 bis 40% Scrim; keine Kontur und keine Perspektive.
- Dekorative Elemente: Floating Action Button · Ripple · Elevationsschatten · Farbblock-App-Leiste · randloses Hero-Bild · Karte
Bewegung & Interaktivität
- Auf dem Bildschirm geboren: ja
- Übergangsphysik: Oberflächen bewegen sich entlang der Z-Achse und der Bildschirmebene auf gekrümmten Pfaden; Elemente beschleunigen schnell und verlangsamen sanft, und ein gemeinsames Element reist von seinem Ursprung zu seinem Ziel.
- Easing: cubic-bezier(0.4, 0, 0.2, 1)
- Dauer (ms): 300
- Hover und Aktiv: Hover fügt eine 4% schwarze Überlagerung hinzu; Drücken zeigt einen Ripple von 12% Schwarz, der sich innerhalb von 300ms vom Berührungspunkt aus ausbreitet; ein erhöhter Button hebt sich beim Drücken von 2dp auf 8dp an.
Code- & Token-Vorlage
Setze data-style="material-design" auf das Wurzelelement und füge die Tokens ein. Die Datei tokens.css enthält dieselben Tokens und eine Reihe von Referenzregeln.
[data-style="material-design"] {
--color-bg: #FAFAFA;
--color-surface: #FFFFFF;
--color-text: rgba(0, 0, 0, 0.87);
--color-muted: rgba(0, 0, 0, 0.54);
--color-primary: #3F51B5;
--color-accent: #FF4081;
--color-border: rgba(0, 0, 0, 0.12);
--font-sans: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--font-display: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--border-radius: 2px;
--border-width: 1px;
--shadow-elevation: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
--backdrop-filter: none;
--space-unit: 8px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--duration: 300ms;
--color-primary-dark: #303F9F;
--shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
--shadow-24dp: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
--touch-target: 48px;
--color-on-bg: #212121;
--color-on-surface: #212121;
--color-on-primary: #FAFAFA;
--color-on-accent: #212121;
--color-muted-on-bg: #737373;
--color-muted-on-surface: #757575;
--color-link: #3F51B5;
--color-link-on-surface: #3F51B5;
--display-weight: 300;
--subhead-weight: 500;
--body-weight: 400;
--strong-weight: 500;
--label-weight: 500;
--display-tracking: 0em;
--display-leading: 1.15;
--display-case: none;
--body-leading: 1.5;
--body-size: 16px;
--icon-stroke: 2;
}
Tailwind-Muster:
| Element | Klassen |
|---|---|
| Seite | min-h-screen bg-[#FAFAFA] font-sans text-black/[0.87] antialiased |
| App-Leiste | flex h-14 md:h-16 items-center bg-[#3F51B5] px-4 text-xl font-medium text-white shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)] |
| Karte | rounded-sm bg-white p-4 shadow-[0_1px_3px_0_rgba(0,0,0,0.2),0_1px_1px_0_rgba(0,0,0,0.14),0_2px_1px_-1px_rgba(0,0,0,0.12)] |
| Button | h-9 min-w-[64px] rounded-sm bg-[#3F51B5] px-4 text-sm font-medium uppercase tracking-[0.09em] text-white shadow-md transition-shadow duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-lg active:shadow-xl |
| FAB | h-14 w-14 rounded-full bg-[#FF4081] text-white shadow-[0_3px_5px_-1px_rgba(0,0,0,0.2),0_6px_10px_0_rgba(0,0,0,0.14),0_1px_18px_0_rgba(0,0,0,0.12)] |
Visuelles Paket
Die Bilder und Symbole dieses Stils sind Dateien. Verwende sie so, wie sie sind, oder lies sie als Spezifikation und zeichne eigene im gleichen Stil.
| Datei | Inhalt |
|---|---|
pack/hero.svg | Hero-Platte, 800 mal 600. Ein abstraktes Bild in der visuellen Sprache des Stils. |
pack/pattern.svg | Musterkachel, 80 mal 80. Sie wiederholt sich in beide Richtungen. |
pack/icons.svg | Icon-Sprite: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders. |
- Symbole: Vollflächig, Strichstärke 2 auf einem 24px-Feld, stumpfe Enden, runde Verbindungen, Behälter: keiner. Verwendung:
<svg class="icon"><use href="pack/icons.svg#home"/></svg>. Ein Symbol übernimmtcurrentColor. - Symbolfamilie: Das Sprite ist aus Material Symbols (Baseline, gefüllt) von Google geschnitten, Lizenz Apache 2.0. Grund: Das gefüllte Systemset des Stils selbst, auf seinem 24dp-Raster. Es ist ein Open-Source-Platzhalter für eine Demo. Für ein Produkt verwende die Icon-Bibliothek der Marke und wähle die Familie nach den folgenden Regeln aus.
- Anzeigetyp: Strichstärke 300, Laufweite 0em, Zeilenabstand 1.15, Schreibweise: keine.
- Strichstärken: Anzeige 300, Unterüberschrift 500, Textkörper 400, Fett im Text 500, Beschriftungen und Buttons 500. Der Stil verwendet 3 Strichstärken (300, 400, 500) und keine anderen. Die Anzeige ist 100 leichter als der Textkörper, sodass die Größe die Hierarchie trägt. Der Akzent ist die Strichstärke: Ein schwereres Wort ist der Akzent, sodass die Abstufungen zwischen den Strichstärken klar sind.
- Textkörpertyp: 16px, Zeilenabstand 1.5.
- Seite: Hero gesplittet, linksbündig, normale Dichte, Akzentneigung 0°.
- Textfarbe:
--color-textist nur für das Hauptlesefeld. Verwende auf jedem Feld seinen Token:--color-on-bg,--color-on-surface,--color-on-primary,--color-on-accent.
So wählst du ein Symbolpaket aus
Ein Symbolpaket ist eine Schriftart für Bilder. Wähle es mit derselben Sorgfalt wie die Textschriftart. Diese Regeln gelten sowohl für ein Open-Source-Set als auch für eine lizenzierte Bibliothek.
- Der Strich entspricht dem Grundstrich. Setze ein Symbol neben den Textkörper in Textgröße. Die Linie des Symbols und der Grundstrich eines Buchstabens haben dasselbe Gewicht.
- Enden und Ecken folgen dem Radius-Token. Stumpfe Enden und Gehrungsverbindungen passen zu einem Radius von Null. Runde Enden und runde Verbindungen passen zu einem weichen Radius.
- Der Füllmodus folgt der Technologie der Epoche. Druckepochen schneiden Vollformen. Bildschirmepochen mit Tiefe füllen und schattieren die Form. Aktuelle Produktschnittstellen zeichnen eine Umrisslinie.
- Die Metaphern sind nicht jünger als der Stil. Jedes Bild ist ein Objekt, das die Epoche kannte. Ein Symbol mit einer späteren Metapher bricht den Zeitraum.
- Eine Familie, ein Raster. Alle Symbole stammen aus einer Familie und einer Variante, gezeichnet auf einem Feld. Mische keine Familien auf einer Oberfläche.
- Die Familie deckt das Produkt ab. Liste jedes Konzept auf, das das Produkt benötigt, bevor du dich festlegst. Eine Familie, die für eines davon kein Symbol hat, ist die falsche Familie.
- Die Farbe ist ein Token. Ein Symbol übernimmt currentColor. Ein zweiter Ton stammt von einem Token, nicht von der Datei.
- Die Lizenz erlaubt die Nutzung. Lies die Lizenz des Sets. Gib die Quellenangabe, wenn die Lizenz dies verlangt. Ein Produkt mit einer Marke verwendet seine lizenzierte Bibliothek und wendet dieselben Regeln zur Auswahl der Familie an.
Abstammungs-Fallbacks
Wenn der Benutzer nach einer Variation fragt, improvisiere nicht. Bewege dich in Richtung des hier genannten Nachbarn und lade seine Fertigkeit.
- Wenn der Benutzer nach flacher fragt: bewege dich in Richtung
flat-design(Flat Design). Entferne alle Elevationsschatten, trenne Oberflächen nur durch Farbe und behalte die Farbpalette und das 8dp-Raster bei. - Wenn der Benutzer nach taktiler fragt: bewege dich in Richtung
skeuomorphism(Skeuomorphismus). Füge einen 5 bis 10% Verlauf, eine 1px innere Hervorhebung und eine Oberflächentextur bei 5% Deckkraft hinzu; behalte die Elevation und das Layout bei. - Wenn der Benutzer nach Material 3 (Material You) fragt: bewege dich in Richtung des evoluierten Nachfolgers; lade die entsprechende Fertigkeit, sofern verfügbar, oder implementiere dynamischere Farbtöne, größere Ränder und weichere Radien.
…