Share
No hace mucho tiempo, Google presentó Material Design, un nuevo conjunto de directrices para diseñadores y desarrolladores. Material Design presenta una nueva perspectiva sobre las interfaces de usuario, el movimiento y los estados de interacción, y son una excelente base para que construya un producto sobre.
En esencia, puede resumir el Diseño de materiales de Google mediante dos componentes:
Material Proporciona contexto en el diseño, la superficie y el borde de un "material" nos proporcionan señales visuales. Comparemos esto con la vida real. Entendemos las dimensiones de una habitación, porque vemos paredes. Al mismo tiempo, el interior nos proporciona una comprensión del contexto de la habitación. Tu cocina se ve muy diferente a tu baño, por ejemplo..
Lo mismo se aplica en Material Design. La combinación de estilo y contenido proporciona contexto Para el usuario en un espacio digital, al igual que las paredes físicas y los interiores. Un usuario comprende mejor la interfaz de usuario, ya que el material diseñado proporciona un contexto para la interfaz.
Una tarjeta proporciona un diseño contextual y es un elemento comúnmente utilizado en el Diseño de materiales. Una tarjeta proporciona contexto en sí misma, así como al relacionarse con otras tarjetas.El concepto de Movimiento En Material Design tiene una historia muy similar. El movimiento proporciona contexto en un diseño a través de la fluir de una aplicación, especialmente cuando se trata de la continuidad De un producto, un usuario tiene la sensación de ser ininterrumpido. No hay obstáculos, como una inconsistencia en el diseño o una navegación confusa.
¿Cómo funciona exactamente el movimiento? Aquí hay un ejemplo. Hay un feed para el hogar que consiste en una lista de tarjetas. Cuando toca una sola tarjeta, el material de la tarjeta se expande para convertirse en todo el ancho y alto de la pantalla en lugar de las dimensiones de una sola tarjeta..
Observe cómo este ejemplo aplica tanto el material como el movimiento. Una tarjeta es el material. Cuando un usuario interactúa con él, a través del movimiento se expandirá para mostrar más contenido. Esto proporciona continuidad al usuario, ya que muestra cómo su entrada afecta a la interfaz del usuario..
Vamos a explorar el material un poco más. En esencia, el material es la combinación de sus elementos de diseño estático. Piense en las formas, el color, la tipografía y la variedad de herramientas que utiliza para crear diseños. Todo esto junto forma un material..
El color es un gran asunto tanto para los diseñadores como para los usuarios. Tiene una enorme influencia en la apariencia de un diseño, así como los efectos psicológicos en un usuario. El color puede hacer que un diseño sea confiable, emocionante, utilitario y mucho más. En Material Design, tenemos acceso a una gran paleta de colores, que podemos utilizar como base para diseñar un producto..
Recomiendo encarecidamente tener la siguiente referencia de colores guardados como un marcador, es una referencia conveniente para diseñar una paleta de colores para una interfaz de usuario.
Roboto, la fuente estándar para Android, ha sido pulida para mejorarla para su uso en múltiples plataformas. Para los diseñadores que no están muy familiarizados con la tipografía, Material Design proporciona pautas que manejan el diseño de la tipografía para usted..
La forma más fácil para comenzar con esta cuadrícula es descargar la siguiente hoja de pegatinas. Las pautas le proporcionarán una estructura para su tipografía cuando comience un nuevo diseño.
El diseño de un diseño en Material Design utiliza algunos de los principios básicos del diseño de impresión, que Google señala como fuente de inspiración para Material Design. Hay un fuerte énfasis en la construcción de interfaces de usuario que se adapten bien a los diferentes tipos de dispositivos. Como saben, la escalabilidad se ha vuelto crucial para diseñar productos que sean exitosos en múltiples dispositivos.
Esta ilustración visualiza el concepto de profundidad en las interfaces de usuario..Uno de los conceptos centrales es apilado. Cuando diseña una interfaz de usuario con Material Design, utiliza sombras, contraste de color y posicionamiento z para dar al usuario una sensación de profundidad en la interfaz de usuario. La profundidad crea contexto para los usuarios. Los elementos flotantes en la parte superior de las pilas, como un botón, enfatizan la llamada a la acción en una interfaz de usuario.
Ejemplo de tres capas de profundidad: un menú, la barra de navegación superior y el área de contenido.Para los diseñadores más avanzados, las pautas incluyen cuadrículas de referencia. La página de métricas y líneas clave en las pautas de Diseño de Materiales se presenta con gran detalle y le brinda recursos para experimentar.
Si prefiere trabajar con un diseño prefabricado, puede descargar la plantilla de marcos blancos de Google.
Ejemplo de un diseño diseñado. El movimiento va de la mano con el material como se describió anteriormente en el ejemplo de la tarjeta. El movimiento es lo que hace que el material diseñado cobre vida..
Cuando comienzas a aprender los conceptos básicos del diseño de movimiento, uno de los primeros principios que aprenderás es facilitar.
Cuando facilita una animación, intenta hacer un movimiento más natural. En lugar de animar el movimiento de un objeto a una velocidad constante, aumenta la velocidad al comienzo de la animación y reduce la velocidad al final de la animación..
Piense en un automóvil en movimiento en el tráfico y cómo un automóvil acelera y frena, es un movimiento muy natural. La facilitación intenta replicar eso, por lo que un usuario considera el movimiento de un objeto como algo natural..
La forma más fácil de familiarizarse con la relajación es ver algunos ejemplos de diseño. Los siguientes recursos son un gran marcador:
Esta ilustración muestra la flexibilización, como se muestra en "Principios de animación en el diseño de IU: comprensión de la flexibilización".Cuando un usuario interactúa con un elemento de diseño, en la mayoría de los casos, el elemento debe proporcionar retroalimentación. En Diseño de materiales, el objetivo es deleitar al usuario con comentarios sobre el movimiento y proporcionar un contexto para el material con el que el usuario interactúa. La belleza del movimiento de respuesta es que usted reconoce la acción del usuario, lo que mejora la facilidad de uso de su producto..
El ejemplo más hermoso que he visto es la ondulación táctil, un punto culminante visual cuando el usuario interactúa con un elemento en particular.
Otro ejemplo es abrir o expandir elementos. Cuando toca un elemento en particular para expandirlo, el material nuevo se expande desde el punto que el usuario tocó. El crecimiento de un elemento se siente natural cuando crece directamente desde el centro del contacto del usuario. Para más ejemplos de interacción receptiva, visite el sitio web de Material Design de Google..
Por último, pero no menos importante, el transiciones entre interfaces Es importante para la interacción receptiva. Es la forma de movimiento más importante para diseñar la continuidad para el usuario. Para las pantallas entrantes y salientes, el punto de origen proporciona contexto. Una interfaz de usuario puede crecer y expandirse dinámicamente, lo que les da a los diseñadores mucho espacio para jugar con hermosas transiciones. Y lo mejor de todo, pueden hacerlos significativos..
A continuación se muestran algunos ejemplos excelentes de Diseño de materiales creados por excelentes diseñadores..
Google - Exploración de materiales por Aurélien Salomon
Alarm Material UI por Ehsan Rahimi
Aviasales L (Material Design) por Mark MEsta es una breve introducción al diseño de materiales. Si alguno de los puntos anteriores despertó su interés, le recomiendo leer más en el pautas oficiales por Google.
Por favor, acércate a Material Design con una mentalidad creativa. Mucho de lo que se presenta es un recordatorio de lo que hace que el diseño sea genial. Simultáneamente, son solamente pautas, lo que significa que, por el bien de crecer como diseñador, es más que bienvenido para darle su propio toque personal..
Los aliento a todos a crear un diseño con estas pautas en mente. Podría significar que está tomando un enfoque diferente al habitual, lo cual es genial para mantener sus habilidades al límite y crecer como diseñador.
¿Qué opinas del diseño de materiales? ¿Cuáles han sido tus experiencias hasta ahora? Por favor, comparta a continuación en los comentarios, soy muy curioso y estoy seguro de que muchos otros también lo son..
Accentsconagua