¿Cuál es la diferencia entre "estilo plano" y "diseño de materiales"?

El diseño de materiales no está relacionado con el diseño plano en sus principios. El diseño de materiales es skeuomorphic en el sentido de que es un intento de hacer que el diseño web sea más realista en la forma en que representa los elementos, usando capas y animaciones de una manera que tiene sentido fuera del navegador. El diseño visualmente plano y el diseño de materiales son similares en este momento, pero el diseño de materiales se puede aplicar a diseños que no sean planos.

Sigue 3 principios

1. El material es la metáfora.
2. Sea audaz, gráfico, intencional
3. Proporcionar significado con movimiento.

Las capas en el diseño de materiales se realizan moviendo elementos hacia adelante o hacia atrás a lo largo del eje z, hacia y desde el usuario, y agregando sombras realistas para transmitir más significado. Los elementos animados, como tener una animación que afecte la posición cuando se elimina un elemento de la lista, están destinados a mejorar el flujo y la comprensión del usuario al tiempo que hacen que la experiencia sea más fluida. Al hacerlo, se puede retratar más significado a través del diseño de materiales que en el diseño plano.

_{Los diseñadores de Google crearon modelos de papel para descifrar capas y sombras para su diseño de materiales.}

Hay otras pautas de diseño que cubren el espaciado, el color, la usabilidad y más detalles sobre el posicionamiento y la animación que puede consultar en la página web de Google sobre el tema .

Una buena manera de aprender más sobre el diseño de materiales y cómo implementarlo es usar las aplicaciones que Google ha creado usando el diseño de materiales y leer sobre los detalles del diseño , este es de Brian Lovin en la aplicación Inbox.

La gente puede suponer que el diseño de materiales es una especie de extensión del diseño plano, pero en realidad los principios son diferentes. La tendencia actual es hacer un diseño limpio y plano que Google usa por ahora, pero los principios del diseño de materiales se extienden más allá de esos límites y también se pueden aplicar a otros métodos de diseño.

Diseño plano = un término genérico que se refiere a la estética moderna y moderna de la interfaz de usuario de iconos planos y bloques de color.

Metro Design = el nuevo diseño de interfaz de usuario de Microsoft (ahora llamado lenguaje de diseño de Microsoft ) para Windows 8 que utiliza la estética visual del diseño plano .

Diseño de materiales = nuevo diseño de interfaz de usuario de Google para Android que utiliza la estética visual del diseño plano .

(Tenga en cuenta que tanto Metro como Material son mucho más que la estética del diseño plano. También hablan sobre diseño de interacción, flujos, bibliotecas de patrones, etc.)

Gracias a Johannes por notar el cambio de nombre de la interfaz de usuario de Microsoft.

El diseño de materiales no es plano, es un montón de capas planas de "material" que están un poco espaciadas en el eje Z. Esto significa que estos objetos tienen sombras y se supone que vienen de algún lugar cuando aparecen en la pantalla y se van a algún lugar cuando ya no se necesitan. Lo que significa que no solo aparecen y desaparecen.

También hay un montón de pautas de diseño que especifican el color, el espaciado y muchos otros aspectos de su diseño.

Estos son algunos de ellos, pero puedes encontrar muchos más con unas pocas búsquedas en Google.

http://www.google.com/design/spec/material-design/introduction.html#

"Flat design" es como te explicaron allá arriba, y el diseño de "Material Design" no es realmente "skeuomorphic" sino "Skeuomorphed Flat Design". El "diseño de materiales" usa cosas planas y las alinea en el eje Z para tener un "diseño plano 3D". Espero haber ayudado.

En realidad, el diseño plano parecerá más simple en el fondo del material, además, todas estas animaciones están dirigidas más a la interacción del usuario con los dispositivos móviles que con el sitio. Además, nadie prohíbe el uso de estos dos enfoques en un solo producto, si aborda el trabajo en el diseño de manera más consciente y filosófica. En cuanto al skeuomorphism, trató de traer elementos de la interfaz de una manera más familiar y fácil de usar: cómo se vería este o aquel objeto en el mundo real, pero muchas personas tienen diferentes puntos de vista de las cosas circundantes, por lo que la creación de un único el estilo de tal enfoque era casi imposible... Algo de información para agregar ¿Cuál es la diferencia: Diseño plano vs Diseño de materiales?