Material Design

マテリアルデザイン / 2014– / Stil / Google UI

Entwurfssystem, das die physische Metapher von Papier und Tinte auf Regeln für Schatten und Überlagerung herunterbricht. Elemente erhalten eine Höhe, der Schatten zeigt die Hierarchie, die Bewegung trägt physische Kausalität. Es wurde zum Muster dafür, dass Interfacegestaltung als System verteilt wird.

Material Design — Google, UI-Komponenten von Material Design — Wikimedia Commons / Public domain — Google, UI-Komponenten von Material Design — Wikimedia Commons / Public domain

Material Design — Google, Komponenten von Material Design 3, 2021 — Wikimedia Commons / CC BY 4.0 · © Google LLC — Google, Komponenten von Material Design 3, 2021 — Wikimedia Commons / CC BY 4.0 · CC BY 4.0 · © Google LLC

Auf einen Blick

Visuelle Merkmale

Hierarchie und Schatten über die Höhe ausgedrückt
Flächen, die sich wie Papierbögen überlagern
Bewegung, die Ursache und Wirkung zeigt
Normierte Einheit für Abstände

Geeignet für

Einheitliches Verhalten über mehrere Plattformen hinweg verteilen
Die Tiefe einer Hierarchie sichtbar vermitteln

Diesen Stil verwenden

Nutze das Kurzbriefing im Projekt oder übergib die strukturierte Spezifikation an ein KI-Werkzeug.

design.md Bild-Prompt JSON API MCP und Maschinenzugriff Verbinden

in ChatGPT öffnen in Claude öffnen in Google AI öffnen

Ausführliche Anleitung und QuellenProduktionsregeln, Referenzwerke, Vergleiche, Forschung und Zitate

Wörterbucheintrag

Typografie: Die Hierarchie aus einer einzigen Schriftfamilie aufbauen und die Stufen über Schriftstärke und Schriftgrad unterscheiden
Komposition: Die Elemente auf ein Raster aus Vielfachen von 8 legen und die Abstände normieren
Material: Den Flächen eine Höhe geben und mit der Dichte des Schattens zeigen, was vorn und was hinten liegt
Zu vermeiden: Schatten nicht als Schmuck hinzufügen. Sobald die Regel der Höhe bricht, lügt die Information über die Hierarchie.
Zum Weiterlesen: The first specification of 2014 / The table matching elevation to shadow / The change into Material You

Wird oft verwechselt mit

Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)vergleichen

Mehr aus Google UI

Weitere Stile aus Google UI, nach gemeinsamen Wirkungen geordnet.

Material You (Material You)Gemeinsame Wirkungen: Play / Technique.

Alle Einträge aus Google UI ansehen

Diesen Eintrag zitieren

Das Wörterbuch ist zum Verlinken gedacht. Nehmen Sie die Form, die dorthin passt, wo Sie schreiben.

Link: https://indexstyle.org/de/styles/material-design
Markdown: [Material Design — IndexStyle](https://indexstyle.org/de/styles/material-design)
HTML: <a href="https://indexstyle.org/de/styles/material-design">Material Design — IndexStyle</a>

Zurück zur Position im Index