patrones interactivos con material design
TRANSCRIPT
Patrones interactivos con Material Design
Mauricio Angulo S.Consultor en Experiencia de Usuario
[email protected]@mauricioangulo
www.tesseractspace.com
Experiencia del Usuario
belleza afinidad+ =1 2 3 4A B
bellezaA
afinidadB
“...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
http://bit.ly/1CymVsq
http://bit.ly/1E5E3kB
“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:
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.
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.
iOS
Android
BlackBerry
Windows Phone
Cada plataforma tiene su estilo
iOS 8
Android 5
BlackBerry 10 Windows Phone
Android Windows phoneiOS
Material Design
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.
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
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
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
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
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.
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.
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.
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.
Propiedades físicas
El material puede mostrar contenido, de cualquier color, forma o clase. El contenido no agrega grosor al material.
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.
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).
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.
Tipografía
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
http://bit.ly/1F4n5J9
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
¡Gracias!
Mauricio Angulo S.Consultor en Experiencia de Usuario
[email protected]@mauricioangulo
www.tesseractspace.com