Introducción a

material design

by Google

@gruizdevilla

¿De qué va esto?

Son las guías de diseño sugeridas por Google.

El lema que inspira esto es:

"Céntrate en el usuario y el resto vendrá solo."

La versión original de este material está en:

http://www.google.com/design/

Objetivos

Crear un lenguaje visual que sintetice

los principios de un buen diseño

con la innovación y capacidades

de la tecnología y la ciencia.

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

Los principios móviles son fundamentales, pero tocar, la voz, el ratón y el teclado son todos métodos de entrada de primer nivel.

Principios de Material Design

El material es la metáfora

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

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

Enfático, gráfico e intencional

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

Los elementos fundacionales crean jerarquía, significado y foco. Las decisiones de color, imaginería, tipografía y los espacios crean un interfaz gráfico inmersivo y enfático.

El movimiento proporciona información

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

Los objetos se presentan sin romper la continuidad de la experiencia, tanto al moverse como transformarse.

El movimiento debe ser apropiado y con significado. Ayuda a focalizar la atención y mantener la continuidad.

El feedback se tiene que proporcionar de forma sutil y clara.

Las transiciones tienen que ser eficientes y coherentes.

Un mundo 3D

El entorno material tiene en cuenta el 3D, con lo que tenemos que considerar el eje Z perpendicular a la superficie

El papel tiene 1dp de profundidad

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

El contenido no añade grosor al papel

Movimientos auténticos

Al percibir la naturaleza tangible de un objeto ayuda a entender como manipularlo. El movimiento de un objeto transmite esta naturaleza: es ligero o pesado, flexible o rígido, grande o pequeño.

El movimiento no es solo algo bonito, proporciona información de relaciones espaciales, funcionalidad e intencionalidad del sistema.

Masa y peso

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, no de forma instantánea.

Movimiento natural

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

Bien Mal

Entrando y saliendo

Una persona que entra a una habitación, entra andando, no empieza a andar en el marco de la puerta (suponiendo que estuviese abierta ;)

Bien Mal

F' = m*a

No todos los objetos se mueven igual. Los objetos más pequeños o ligeras aceleran y se frenan más rápido porque tienen menos masa. Tenlo en cuenta para determinar como aplica a los distintos elementos de la interfaz.

Interacciones responsivas

Tocar, la voz, ratón y teclado son métodos de entrada de primer nivel.

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.

Ejemplos

Reacción de superficies

Un evento debe proporcionar confirmación visual e instantánea en el punto de contacto. Una metáfora será la de la tinta, que es la superficie dinámica que cubre cada hoja de papel.

Hay tener en cuenta el tipo de ataque y duración del evento, amplitud de la voz, la presión del toque.

Buena práctica

Tener en cuenta el punto de entrada.

Respuesta de una superficie

Un material también reaccionar elevándose, tranformándose o moviéndose.

Punto de origen

Bien Mal

Levantar al tocar

indicando un estado activo

Acción radial

Las acciones tienen un epicentro: el punto donde se toca, el micrófono, etc.

Las acciones tienen que estar relacionadas con dicho epicentro, propagándose hacia afuera. Lo más cercano reacciona antes que lo más lejano.

Transiciones significativas

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

Hay que evitar la confusión al cambiar el layout o reordenar elementos.

Ejemplos

Continuidad visual

Las transiciones entre estados deben ser suaves y proporcionar claridad y ayudar a enfocar la atención.

Elementos entrantes
Elementos salientes
Elementos compartidos: elementos que persisten
entre estados durante una transición.

Consideraciones

¿Donde dirigir la atención del usuario? ¿Que elementos y movimientos refuerzan ese objetivo?

Las transiciones pueden crear conexiones visuales entre estados mediante colores y elementos que persisten.

Movimientos con prudencia: ¿cómo puede mover un elemento agregar claridad y elegancia a una transición?

Ejemplos

Bien Mal

Jerarquía temporal

El orden y la sincronización de los movimientos ayuda a la comprensión, creando un camino que la vista puede seguir.

Bien Mal

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.

Buenas prácticas

Evita caminos lineales, excepto cuando el movimiento
esté restringido a un eje de alguna manera.
La dirección de los movimientos de los elementos
deben tener cohesión, evitando conflictos y superposiciones.
Movimiento en profundidad(z): ¿qué se mueve
debajo de qué y por qué?
Si pintas los caminos que trazan los distintos
elementos, ¿se ven con sentido y organizados?
Refuerza las relaciones espaciales entre elementos
con movimientos consistentes de entrada y salida.

Ejemplos

Bien Mal

Atención a los detalles

El usuario disfrutará de la app cuando las animaciones se usen de formas más allá de las obvias. Por ej, transformaciones naturales entre iconos que ayudan a informar al usuario de cambios y sorprenden agradablemente por la atención al detalle.

Color

Material está inspirado por enérgicas y coloridas afirmaciones yuxtapuestas sobre entornos apagados, influenciado por la arquitectura contemporánea, las señales de tráfico y de deporte.

Enfatiza sombras enérgicas y elementos destacados.

Usa colores inesperados y vibrantes.

La paleta de color

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

Los colores primarios están en el rango 500.

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. El color de acento puede tener más opciones de respaldo.

Alfa para texto gris, iconos y divisores

Para transmitir la jerarquía de la información utiliza distintos alfas. El estandar sobre fondo blanco es 87% (#000000).

El texto secundario debería tener un alfa de 54% (#000000). Pistas para usuarios, como los labels o campos de textos todavía menos 26% (#000000). Otros elementos como iconos y divisores también se benefician de los alfas, asegurando que funcionan sobre fondos de distinto color.

Usa el color de forma audaz en grandes elementos de la interfaz. Distintos elementos deberán usar distintas partes del tema de colores. Toolbar y bloques grandes usarán el primario 500, el principal. Las barras de estado deberían usar el más oscuro 700 del color principal.

Color de acento

El color de acento debe usarse para las acciones
primarias de los botones así como interruptores
y barras de desplazamiento.

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 de tinta. Para promover la consistencia entre apps, proporcionan dos temas:

Descargar temas 1.3MB(.ai)

Tipografías

Escalas tipográficas
y estilos básicos

Usar muchos tamaños y estilos a la vez rompen cualquier layout. La escala tipográfica es un conjunto limitado de tamaños que funcionan bien juntas, junto con la cuadrícula. Los tipos básicos están basadas en la escala tipográfica de 12, 14, 16, 20, y 34.

Estos tamaños y estilos balancean la densidad de contenido y el confort de lectura en condiciones normal de usuario. Los tipos se especifican en SP (píxeles escalables o dp) para permitir tipos más grandes de accesibilidad.

En todos los factores de forma, los titulos de la App Bar deben usar el estilo Title.

En algunos escenarios, la fuente más grande Subhead debe usarse en lugar de la más pequeña Body.

Algunos ejemplos son cuando la presentación se presenta en pequeños snippets o cuando los títulos van emparejados con líneas de texto de tipo Body.

Ejemplos usando Subhead style

Ejemplos usando Body style

Ejemplos usando Button Style

Colores básicos y contraste

Demasiado contraste puede hacer el texto difícil de leer, en especial contra fondos oscuros.

El contraste mínimo debería ser de 4.5:1 y el preferido para lectura confortable debería ser 7:1.

Estas combinaciones tienen en consideración a usuarios con respuesta atípica a los colores.

Fuentes grandes y dinámicas

Las fuentes grandes pueden ser
más interesantes y ayudar al usuario
a entender más rápido el contenido.

Las fuentes dinámicas permiten
fuentes grandes cuando el tamaño es desconocido.

Evita usar fuentes pequeñas
sólo por poder contemplar el peor escenario
y trunca como último recurso.

Iconos

Cada icono se debe reducir a su forma mínima, con cada idea editada a su esencia.

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

Principios de diseño

Las formas deben ser enérgicas y geométricas. Se debe reforzar la simetría y consistencia en la forma que compone el icono a la vez que permanece simple y agudo.

Cuadrícula, proporción y tamaño

Bordes redondeados

Consistencia

Bien Mal

Iconos en contexto y aplicación

Los iconos se sitúan en una caja de 24dp determinada por la cuadrícula.

Imaginería

La imaginería da un toque mágico pero nunca excesivo. El estilo tiene que ser optimista y honest. Se potencia el material, la textura, uso inesperado de color y la apreciación de contexto. Se persigue un objetivo y la belleza del UI.

Apreciación de contexto

Las imágenes tienen que ser dinámicas, tener constancia del contexto y ser relevantes en el contexto.

Ser inmersivo

Se puede oscurecer o aludir a heros o thumbnails con color y contenido superpuesto.

Mejores prácticas

Usar múltiples medios

Ilustración y fotografía pueden convivir. La fotografía implica una especificidad, útil para entidades o historias concretas. La ilustración para conceptos o metáforas.