Material Design

UI/UX a través de Material

@juanmapd

GDGTenerife

http://slides.com/juanmapd/deck-1/live

Material Design es...

En que se inspira

Que lo compone

Como se aplica

Recursos
Novedades

 

Piensa en el usuario y lo demás vendrá solo

Introducción

Objetivos de Material

Crear un lenguaje visual que sintetice 

los principios de un buen diseño 

Desarrollar un único sistema que proporcione una experiencia unificada entre plataformas y dispositivos de distintos tamaños

El  material como metáfora

Interacción fundamentada en una experiencia táctil inspirada en el uso del papel y la tinta.


Se fundamenta en la experiencia física: superficies, bordes, espacio, transformaciones, luces, movimiento,...

Énfasis e intención

El énfasis en las acciones del usuario permite que la funcionalidad principal sea inmediatamente percibida y proporciona orientación al usuario.

 

 

El movimiento proporciona información

Las acciones del usuario son los desencadenantes de movimientos y transformaciones.

El movimiento debe ser apropiado y con significado. 

Las transiciones tienen que ser eficientes y coherentes.

 

¿Qué es Material?

El entorno

El entorno material tiene en cuenta el 3D

El papel tiene 1dp de profundidad

 

Las propiedades

Las sombras son la consecuencia natural de la elevación de los papeles

Animación

Movimientos mas reales

Los objetos se mueven en el mundo real cuando se aplican algunas fuerzas, no de forma espontánea.

La velocidad de un objeto varía con la fuerza aplicada.

El movimiento con una rápida aceleración y suave frenado se siente más natural y agradable.

Interacciones responsivas

Aunque el interfaz parezca tangible, está detrás de una capa de cristal. Los efectos visuales y los movimientos son el puente que conecta la interacción con su feedback para dar la sensación de manipulación directa.

Reacción de superficies

Un evento debe proporcionar confirmación visual e instantánea en el punto de contacto

Transiciones significativas

El diseño de los movimientos debe ser atractivo pero también tener un objetivo funcional. La coreografía debe guiar la atención del usuario y focalizarlo en los distintos pasos.

Coreografías consistentes

La coreografía debe tener sentido y estar ordenada. Proporciona puntos de anclaje para el entendimiento y ayuda a comprender como la aplicación crece.

Atención a los detalles

Pueden existir animaciones en todos los componentes de una aplicación y a todas las escalas. Todos los elementos tienen que ir de la mano para construir una experiencia agradable, bella y funcional.

Estilos

Paleta

La paleta de color comienza con colores primarios y rellena el espectro hasta crear una paleta completa y usable para Android, Web e iOS. 

Aplicación del color

Limita la selección de colores a tres tonos de color en el primario y un color de acento en la paleta secundaria.

Temas

Los temas son una forma de aplicar un tono consistente a una app. El estilo especifica la oscuridad de las superficies, las sobras y la opacidad apropiada de los elementos

Iconos

Cada icono se deben poder reducir a su forma mínima.

Los diseños aseguran la claridad y capacidad de lectura incluso en tamaños pequeños.

Como diseñarlos

Teniendo en cuenta su origen físico, el material y una iluminación consistente.

Imágenes

No decoración. Que comuniquen. Relevantes en el contexto. 

Alejarse del "stock"

Evitar en lo posible las fotos de "stock" o su estilo

Tipografía

Roboto, y Noto para otros alfabetos 

Textos

Se claro, preciso y conciso

Sorry!

Activity in MyAppActivity (in the  MyApp app) is not responding

MyApp isn’t responding

Do you want to close it?

Amigable pero respetuoso

Mensajes en positivo

Invita, no ordenes

 

Layout

Layout

Principios del layout

Utiliza herramientas fundamentales que provienen del diseño de impresión como las cuadrículas y líneas guía. 

El layout se diseña para poder escalar a través de distintos tamaños de pantallas.

Unidades y medidas

Pixel density (dpi)
Density-independent pixels (dp)

Scaleable pixels (sp) - dp fonts

Grids

Todos los componentes se alinean en una cuadrícula base de cuadrados de 8 dp. Las tipografías se alinean en una cuadrícula de 4 dp, al igual que las iconografías. Esto aplica a móvil, tabletas y desktop.

Estructura

Estructura

Articula la estructura alrededor de la pregunta. ¿Qué es lo que el usuario típico querrá hacer en la app habitualmente?

 

Dale prioridad al contenido, evita pantallas de navegación, haz el contenido el actor principal de la pantalla de inicio.

 

Si la app tiene mucho contenido o funcionalidad, dirige la atención del usuario al aspecto más importante del producto, promociona la acción principal con una acción flotante.

 

 

Regiones UI

Mobil, tablet y desktop

Bars

Tool bars, app bars, system bars

Side nav

Las barras laterales izquierdas deben usarse principalmente para navegación o identidad. La barras derechas tendrán un nivel de profundidad mayor sobre el contenido.

UI adaptativa

Breakpoints

 480, 600, 840, 960, 1280, 1440, y 1600dp

Grid

 12 columnas

Patrones

revelar, transformar, dividir, expandir

Componentes

Componentes

Componentes

Bottom sheets

Buttons

Buttons: Floating

Cards

Chips

Data tables

Dialogs

Dividers

Grid lists

Lists

Lists: Controls 

Menus 

Pickers

Progress & activity

Selection controls

Sliders

Snackbars & toasts

Subheaders

Tabs

Text fields

Toolbars

Tooltips 

Patrones

Estados Vacios

Cuando el contenido no puede ser mostrado o no hay resultados. Míralos como oportunidades. No son errores. Si se puede evitarlos mostrando contenido alternativo.

Errores

Cuando la aplicación falla el completar la tarea esperada.

Ayudar al usuario a corregir los errores de entrada.

Permitir intentarlo de nuevo.

Gestos

Los gestos se dividen en Touch Mechanics (lo que hacen tus dedos en la pantalla) y Touch Activities (los resultados específicos en cada contesto a los gestos en la interfaz). Un gesto puede tener muchos resultados distintos en función del contexto, y una actividad se puede conseguir con distintos gestos.

Actividades

Resultado de los gestos en el interfaz:

 

Tap: tocar.
Cancelar: tocar.
Arrastrar: arrastrar.
Seleccionar datos: toque largo o doble toque
Multiselección: arrastrar con dos dedos, presión larga y arrastrar
Coger y mover: toque largo con dos dedos y arrastrar...

Zoom in: toque doble, toque doble y arrastrar (abajo), pinch open
Zoom out: toque doble en zoom máximo, toque doble y arrastrar (arriba), pinch close, tocar con dos dedos, doble toque con dos dedos
Expandir: pinch open
Colapsar: pinch close
Rotar: rotar

Carga de imágenes

En lugar de apoyarse solo en cambios de opacidad, las ilustraciones y fotos se pueden cargar y transicionar en tres fases. Los niveles se ajustan para un bajo contraste, saturación y exposición, evolucionando hacia saturación completa una vez que la opacidad está al 100%.

Cajón de navegación

El cajón de navegación se desliza desde la izquierda . Es un patrón común en las aplicaciones actuales.

Navegación

Un nivel Tabs, dos niveles Tabs + Cajón lateral

Transiciones de navegación

de padre a hijo

de hermano a hermano

Técnicas de scrolling

App bar scroll "of the screen" 

Contenido flexible

Swipe to refresh

Swipe para refrescar es un gesto disponible en listas que permite cargar nuevo contenido

Usabilidad

Accesibilidad

Un producto es accesible cuando todas las personas independientemente de su capacidad lo entienden y lo utilizan con éxito . Los productos deben aspirar a ser accesible a la mayor audiencia posible .

Imagine utilizar su producto de la siguiente manera :

Sin sonido
Sin colores
Con el modo de alto contraste habilitado
Con la pantalla ampliada
Con un lector de pantalla (sin pantalla visible )
Con sólo el control de voz
Con una combinación de los anteriores

Bidireccionalidad

Una aplicación bien diseñada debe ser fácilmente traducible a idiomas que se escriben y leen de derecha a izquierda (RTL ), y con contenido mixto en (LTR) idiomas bidireccionales.

Los idiomas RTL no solo afectan a la dirección del texto, también al UI y los iconos.

Recursos

www.google.com/design/

http://www.materialup.com/

Showcase de ejemplos

 

http://ypereirareis.github.io/material-design-resources/

Listado de recursos

 

http://superdevresources.com/material-design-web-ui-frameworks/

Listado de frameworks con implementaciones de Material

 

https://ui8.net/product/free-material-ui-kit
GUI Kit (CS6) Hay muchos como este

Novedades

Material Design Lite

MDL permite aplicar el look Material Design a sitios webs. Sin usar frameworks JS y optimizado para dispositivos. 

 

getmdl.io

Trae de serie templates para: Blogs, Dashboards, Landings 

Se trata de una implementación complementaria del Paper Elements desarrollado por Polymer, que permite que los desarrolladores puedan utilizar partes encapsuladas individualmente sin usar Polymer.

Polymer 1.0

Polymer es un framework de desarrollo web basado en Web Components.

Dentro del catálogo de componentes se encuentra Paper elements un conjunto de elementos visuales que implementan Material Design.

 

https://elements.polymer-project.org/browse?package=paper-elements

Material Design Awards 2015

Adaptive Layouts: Pocket
Crafted Simplicity: Weather Timeline
Delightful Animation: Tumblr

Elegant Typography: NY Times - Latest News
Immersive Imagery: B&H Photo Video Pro Audio
Seamless Browsing: Pocket Casts

¡Gracias!

@juanmapd

UI/UX a través de Material - TLP 2015

By Juan Manuel Pérez Díaz

UI/UX a través de Material - TLP 2015

Charla dentro de TLP Innova 2015

  • 2,388