Material Design

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

Système de conception qui ramène la métaphore physique du papier et de l'encre à des règles d'ombre et de superposition. Les éléments reçoivent une hauteur, l'ombre dit la hiérarchie, le mouvement porte une causalité physique. Il est devenu le modèle d'une conception d'interface distribuée comme système.

Material Design — Google, composants d'interface Material Design — Wikimedia Commons / Public domain — Google, composants d'interface Material Design — Wikimedia Commons / Public domain

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

En un coup d’œil

Signes visuels

Hiérarchie et ombre exprimées par la hauteur
Surfaces superposées comme des feuilles de papier
Mouvement montrant la cause et l'effet
Unité d'espacement normalisée

Usages idéaux

Diffuser un comportement cohérent sur plusieurs plateformes
Faire comprendre visuellement la profondeur d'une hiérarchie

Utiliser ce style

Appliquez le brief concis au projet ou transmettez la spécification structurée à un outil d’IA.

design.md prompt d’image API JSON MCP et accès machine Composer

ouvrir dans ChatGPT ouvrir dans Claude ouvrir dans Google AI

Guide détaillé et sourcesRègles de production, œuvres de référence, comparaisons, recherche et citations

Entrée du dictionnaire

Typographie: Construire la hiérarchie avec une seule famille de caractères et différencier les niveaux par la graisse et le corps
Composition: Poser les éléments sur une grille de multiples de 8 et normaliser les blancs
Matière: Donner une hauteur aux surfaces et indiquer l'avant et l'arrière par la densité de l'ombre
Précaution: N'ajoutez pas l'ombre comme un ornement. Dès que la règle d'élévation se rompt, l'information de hiérarchie devient un mensonge.
Pour approfondir: The first specification of 2014 / The table matching elevation to shadow / The change into Material You

Entrées liées

Holo (ホロ)Même famille : Google UI.Comparer Material Design et Holo
Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)Effets partagés : Trust / Play.Comparer Material Design et Flat Design / Vector Minimalism

Souvent confondu avec

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

Plus de Google UI

Poursuivez avec des styles de Google UI, classés par effets communs.

Material You (Material You)Effets partagés : Play / Technique.

Voir toutes les entrées Google UI

Citer cette entrée

Le dictionnaire est fait pour être lié. Prenez la forme qui convient là où vous écrivez.

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

Revenir à sa position dans l’index