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.
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:
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.
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.
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.
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.
El uso de una foto para ilustrar un concepto debe ser bastante metafórica (no de stock).
Bien
Mal
Alejarse de "stock"
Bien Mal
Un punto focal
Dispón de un punto destacado en el que focalizar la atención.
Cada concepto se debe comunicar de forma memorable.
Bien Mal
Bien
Mal
Bien
Mal
Crea una narrativa
Crea una historia y un sentido de contexto.
Bien Mal
Bien Mal
No sobremanipular
Hay que intentar mantener la integridad de la imagen.
Bien Mal
Bien
Mal
Integración de UI
Resolución
Escala
La escala ayuda a crear niveles visuales de importancia
Protección del texto
Protecciones oscuras con un 20%-40% de opacidad y las claras con 40%-60% en función del contexto. Sin abusar.
Bien Mal
No hay que oscurecer todo el contenido.
Bien
Mal
Puedes usar capas superpuestas de color
Bien
Mal
Avatares y thumbnails
Hero Images
Para enganchar al usuario, proporcionar contexto o reforzar una marca.
Galerías
Introducción a material design (1 de 4)
By Gonzalo Ruiz de Villa
Introducción a material design (1 de 4)
El mismo contenido que en google.com/design pero para poder contarlo en una presentación
- 3,492