Patrones interactivos con Material Design
-
Upload
mauricio-angulo -
Category
Design
-
view
390 -
download
3
Transcript of Patrones interactivos con Material Design
![Page 1: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/1.jpg)
Patrones interactivos con Material Design
Mauricio Angulo S.Consultor en Experiencia de Usuario
[email protected]@mauricioangulo
www.tesseractspace.com
![Page 2: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/2.jpg)
Experiencia del Usuario
![Page 3: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/3.jpg)
belleza afinidad+ =1 2 3 4A B
![Page 4: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/4.jpg)
bellezaA
![Page 5: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/5.jpg)
afinidadB
![Page 6: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/6.jpg)
“...métodos estructurados para describir buenas prácticas de diseño en un campo de conocimiento”
- Wikipedia
Patrones:
”...formas para derivar y describir soluciones de diseño”
- Prof. Michael Hughes
![Page 7: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/7.jpg)
http://bit.ly/1CymVsq
http://bit.ly/1E5E3kB
![Page 8: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/8.jpg)
![Page 9: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/9.jpg)
“Un patrón describe un problema que ocurre una y otra vez en nuestro entorno y contiene la solución mínima para ese problema, de manera que esa solución se puede utilizar un millón de veces sin realizarla de la misma manera dos veces.”
- Christopher Alexander
Patrones:
![Page 10: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/10.jpg)
![Page 11: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/11.jpg)
![Page 12: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/12.jpg)
![Page 13: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/13.jpg)
Tipos de patrones:
Interfase y layout:Diseño de UI y editorial
Estructura de la información y dinámicas de navegación:
Índices, tablas de contenido, contenido relacionado, controles de navegación
Contenido:Taxonomía de contenido, estrategia de comunicación.
![Page 14: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/14.jpg)
![Page 15: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/15.jpg)
Patrones de diseño centrados en el usuarioUn proyecto está centrado en el usuario cuando se diseña con la meta específica de satisfacer sus deseos y necesidades de manera valiosa, simple y disfrutable.
![Page 16: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/16.jpg)
iOS
Android
BlackBerry
Windows Phone
Cada plataforma tiene su estilo
![Page 17: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/17.jpg)
iOS 8
Android 5
BlackBerry 10 Windows Phone
![Page 18: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/18.jpg)
Android Windows phoneiOS
![Page 19: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/19.jpg)
Material Design
![Page 20: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/20.jpg)
Android 5.0 (Lollipop) marca un hito en el diseño de apps para la plataforma Android. Google se puso el reto de crear un lenguaje visual que sintetizara los principios clásicos del buen diseño con la innovación y la posibilidad de tecnología y ciencia.
Este es Material Design.
![Page 21: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/21.jpg)
Estos son los principios bajo los que se crearon estas guías de diseño para apps en Android:
El material es la metáfora
La animación proveé significado
Es atrevido, gráfico e intencional
![Page 22: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/22.jpg)
Una metáfora material es la teoría unificada del espacio racionalizado y de un sistema en movimiento. El material está bajado a una realidad táctil, inspirada por el estudio del papel y la tinta, pero abierto a la imaginación y a la magia.
Los fundamentos de la luz, las superficies y el movimiento son la clave para definir cómo es que los objetos se mueven, interactúan y existen en un espacio en relación con ellos mismos. La iluminación realista muestra divisiones y huecos en el espacio y señala las partes móviles.
El material es la metáfora
![Page 23: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/23.jpg)
Los elementos básicos del diseño impreso - tipografía, rejillas, espacio, escala, color y el uso de imágenes - guían los tratamientos visuales. Estos elementos hacen más que satisfacer la vista. Ellos crean jerarquía, significado y foco.
Las elecciones intencionales de color, imágenes que llenan las superficies, textos de gran tamaño y uso deliberado de espacio negativo crean una interfase gráfica con experiencias de usuario inmersivas.
El énfasis de las acciones del usuario hace que la funcionalidad principal se aparente de manera inmediata y provee pistas al usuario.
Es atrevido, gráfico e intencional
![Page 24: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/24.jpg)
La animación respeta y refuerza al usuario como el generador de movimiento. Las acciones principales del usuario son puntos de inflexión que inician movimiento, transformando el diseño completo.
Toda la acción ocurre en un solo ambiente. Los objetos son presentados al usuario sin romper la continuidad de la experiencia incluso si se transforman y reorganizan.
La animación tiene significado y es apropiada, funcionando para enfocar la atención y mantener la continuidad. La retroalimentación es sutil pero clara. Las transiciones son eficientes y coherentes.
La animación proveé significado
![Page 25: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/25.jpg)
Un mundo 3D
El entorno material es un espacio tridimensional, lo que significa que todos los objetos tienen dimensiones en los ejes X, Y, + Z. El eje de las Z es perpendicular y está alineado con el plano de la pantalla, con los valores positivos acercandose al usuario. Cada hoja de material ocupa una sola posición en el eje de las Z y tiene un grosor estándar de 1 punto.
![Page 26: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/26.jpg)
Luz y sombra
Dentro del ambiente de material, luces virtuales iluminan la escena y permiten a los objetos proyectar sombras. Una luz principal crea sombras direccionales, mientras una sombra ambiental crera sombras suaves y consistentes desde todos los ángulos . Todas las sombras en el ambiente de Material se generan con esas dos luces.
![Page 27: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/27.jpg)
Propiedades físicas
Material tiene dimensiones variantes en los ejes de X, Y (medidas en dps) y un grosor uniforme (1dp). Material nunca tiene un grosor de 0.
![Page 28: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/28.jpg)
Propiedades físicas
Material produce sombras.
Las sombras son el resultado natural de la elevación relativa (posición en el eje Z) entre los elementos en el ambiente.
![Page 29: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/29.jpg)
Propiedades físicas
El material puede mostrar contenido, de cualquier color, forma o clase. El contenido no agrega grosor al material.
![Page 30: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/30.jpg)
Propiedades físicas
Todos los objetos de material tienen una elevación de reposo, ya sea un componente pequeño o una hoja que ocupa toda la pantalla. El material se mueve en el eje de las Z cuando el usuario interactúa con él.
![Page 31: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/31.jpg)
Propiedades físicas
La elevación de reposo para un componente debe ser consistente entre apps en la misma plataforma. Sin embargo, el mismo componente puede tener diferentes elevaciones de reposo en la plataforma dependiendo de la profundidad del ambiente (por ejemplo, una TV tiene una profundidad mayor a un móvil).
![Page 32: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/32.jpg)
Imágenes y diseño
Las imágenes deberían usarse como algo más que solo decoración. Son una herramienta poderosa para ayudarte a comunicar y a diferenciar tus productos. Imágenes atrevidas, visuales e intencionales te ayudarán a atrapar a tus usuarios.
![Page 33: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/33.jpg)
Tipografía
![Page 34: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/34.jpg)
Paleta de colores
La paleta de color viene con colores primarios y llena el espectro para crear una paleta usable y completa para Android, Web y iOS. Se sugiere usar los 500 colores como los colores primarios en tus apps y otros colores para crear contraste
![Page 35: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/35.jpg)
http://bit.ly/1F4n5J9
![Page 36: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/36.jpg)
El primer jueves de cada mes a las 19:30 hrs:
- Un tema diferente por mes- Tres expertos por tema- ¡Pizza y...- … cerveza gratis!
Más información en www.uxnights.com
![Page 37: Patrones interactivos con Material Design](https://reader033.fdocumento.com/reader033/viewer/2022042602/55b7a20abb61eb62288b47d1/html5/thumbnails/37.jpg)
¡Gracias!
Mauricio Angulo S.Consultor en Experiencia de Usuario
[email protected]@mauricioangulo
www.tesseractspace.com