¿Cuál es la diferencia entre "estilo plano" y "diseño de material"?
20
Después de que salió Windows 8, todos hablaron sobre "Metro UI" y más tarde sobre el "diseño plano". Ahora, después de que salió Android Lollipop, todos hablan sobre "Diseño de materiales". ¿Alguien puede explicar la diferencia entre "Diseño de materiales" y "Estilo plano"?
El diseño del material no está relacionado con el diseño plano en sus principios. El diseño de materiales es esceptomorfo en el sentido de que es un intento de hacer que el diseño web sea más realista en la forma en que retrata elementos, utilizando capas y animaciones de una manera que tenga sentido fuera del navegador. El diseño visualmente plano y el diseño de material son similares en este momento, pero el diseño de material se puede aplicar a diseños que no sean planos.
Sigue 3 principios
El material es la metáfora.
Sea audaz, gráfico, intencional
Proporcionar significado con movimiento
La creación de capas en el diseño de materiales se realiza 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 de animación, como tener una posición que afecta la animació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 representar más significado a través del diseño de materiales que en el diseño plano
Los diseñadores de Google hicieron modelos de papel para descubrir capas y sombras para su diseño de material.
Existen 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 asumir que el diseño de materiales es una especie de extensión del diseño plano, pero de hecho los principios son diferentes. La tendencia actual es hacer un diseño limpio y plano que Google use 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.
En ese diseño de materiales, visualmente, utiliza muchos iconos y estilos de diseño planos, diría que ciertamente están relacionados en ese sentido. Sin embargo, Material Design es, por supuesto, más que el aspecto visual que usted señala.
DA01
@ DA01 Gracias, intenté aclarar mi punto en la edición más reciente
Zach Saucier, el
En una nota relacionada, este artículo es excelente para comparar iOS con Material Design y aprender más sobre cada uno.
Zach Saucier
5
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 en bloque 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 de diseño plano .
Diseño de material = nuevo diseño de interfaz de usuario de Google para Android que utiliza la estética visual de diseño plano .
(Tenga en cuenta que tanto Metro como Material son mucho más que solo una estética de 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 para la interfaz de usuario de Microsoft.
No creo que esto vaya suficientemente en los detalles de lo que realmente son . Parece ser más de lo que se usan
Zach Saucier
@ZachSaucier a la derecha. El OP preguntaba principalmente por la diferencia. Yo diría que la diferencia es que uno es un término genérico para un estilo visual, los otros dos son términos específicos para las pautas de IU de marca.
DA01
1
@ DA01, solo quiero señalar que la interfaz de usuario de Microsoft no se ha denominado Metro desde 2012. En su lugar, se denomina fuente de "lenguaje de diseño de Microsoft" . Me doy cuenta de que la pregunta de OP también lo mencionó con este nombre, pero eso es incorrecto.
Hanna
@Johannes sí, esa es una buena nota.
DA01
Material Design se puede usar no solo con Android sino también con diseño web y diseño de aplicaciones de escritorio.
vovahost
3
El diseño del material no es plano, es un montón de capas planas de "material" que están espaciadas un poco en el eje Z. Esto significa que estos objetos tienen sombras y se supone que provienen de algún lugar cuando aparecen en la pantalla y se van a otro lugar cuando ya no se necesitan. Lo que significa que no solo se desvanecen dentro y fuera.
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 puede encontrar mucho más con algunas búsquedas en Google.
El "diseño plano" es como te explicaron allí arriba, y el diseño de "diseño de materiales" no es realmente "esceptomorfo" sino "diseño plano esquelético". El "diseño de material" usa elementos planos y lo alinea en el eje Z para tener un "diseño plano 3D". Espero que haya ayudado.
En realidad, el diseño plano parecerá más simplista en el fondo del material, además, todas estas animaciones están dirigidas más a la interacción del usuario con dispositivos móviles, en lugar de con el sitio. Además, nadie prohíbe el uso de estos dos enfoques en un solo producto, si aborda el trabajo sobre el diseño de manera más consciente y filosófica. En cuanto al esceptomorfismo, 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 sobre las cosas circundantes, por lo que la creación de un solo el estilo de este enfoque era casi imposible ... Alguna información para agregar Cuál es la diferencia: Diseño plano versus Diseño de material
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 en bloque 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 de diseño plano .
Diseño de material = nuevo diseño de interfaz de usuario de Google para Android que utiliza la estética visual de diseño plano .
(Tenga en cuenta que tanto Metro como Material son mucho más que solo una estética de 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 para la interfaz de usuario de Microsoft.
fuente
El diseño del material no es plano, es un montón de capas planas de "material" que están espaciadas un poco en el eje Z. Esto significa que estos objetos tienen sombras y se supone que provienen de algún lugar cuando aparecen en la pantalla y se van a otro lugar cuando ya no se necesitan. Lo que significa que no solo se desvanecen dentro y fuera.
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 puede encontrar mucho más con algunas búsquedas en Google.
http://www.google.com/design/spec/material-design/introduction.html#
fuente
El "diseño plano" es como te explicaron allí arriba, y el diseño de "diseño de materiales" no es realmente "esceptomorfo" sino "diseño plano esquelético". El "diseño de material" usa elementos planos y lo alinea en el eje Z para tener un "diseño plano 3D". Espero que haya ayudado.
fuente
En realidad, el diseño plano parecerá más simplista en el fondo del material, además, todas estas animaciones están dirigidas más a la interacción del usuario con dispositivos móviles, en lugar de con el sitio. Además, nadie prohíbe el uso de estos dos enfoques en un solo producto, si aborda el trabajo sobre el diseño de manera más consciente y filosófica. En cuanto al esceptomorfismo, 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 sobre las cosas circundantes, por lo que la creación de un solo el estilo de este enfoque era casi imposible ... Alguna información para agregar Cuál es la diferencia: Diseño plano versus Diseño de material
fuente