Material Design

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

Sistema de diseño que traduce la metáfora física del papel y la tinta en reglas de sombra y superposición. Los elementos reciben una altura, la sombra indica la jerarquía y el movimiento porta una causalidad física. Se convirtió en el modelo de que el diseño de interfaz se distribuya como sistema.

Material Design — Google, componentes de interfaz de Material Design — Wikimedia Commons / Public domain — Google, componentes de interfaz de Material Design — Wikimedia Commons / Public domain

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

De un vistazo

Rasgos visuales

Jerarquía y sombra expresadas por la altura
Superficies superpuestas como hojas de papel
Movimiento que muestra causa y efecto
Unidad de espaciado normalizada

Usos idóneos

Repartir un comportamiento coherente entre varias plataformas
Comunicar visualmente la profundidad de una jerarquía

Usar este estilo

Lleva el resumen al proyecto o entrega la especificación estructurada a una herramienta de IA.

design.md prompt de imagen API JSON MCP y acceso automático Combinar

abrir en ChatGPT abrir en Claude abrir en Google AI

Guía detallada y fuentesReglas de producción, obras de referencia, comparaciones, investigación y citas

Entrada del diccionario

Tipografía: Construir la jerarquía con una sola familia tipográfica y diferenciar los niveles por grosor y cuerpo
Composición: Colocar los elementos en una retícula de múltiplos de 8 y normalizar los espacios
Material: Dar altura a las superficies y mostrar el orden de profundidad con la densidad de la sombra
Precaución: No añadas la sombra como adorno. En el momento en que se rompe la regla de la altura, la información de jerarquía se vuelve mentira.
Para profundizar: The first specification of 2014 / The table matching elevation to shadow / The change into Material You

Entradas relacionadas

Holo (ホロ)Misma familia: Google UI.Comparar Material Design y Holo
Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)Efectos compartidos: Trust / Play.Comparar Material Design y Flat Design / Vector Minimalism

Se confunde a menudo con

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

Más de Google UI

Continúa con estilos de Google UI, priorizados por sus efectos compartidos.

Material You (Material You)Efectos compartidos: Play / Technique.

Ver todas las entradas de Google UI

Citar esta entrada

El diccionario existe para que se enlace. Toma la forma que encaje donde estés escribiendo.

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

Volver a su posición en el índice