Conceptos Importantes Material Design de Google

EL presente documento a modo de precedente contiene los elementos ms relevantes de

esta documentacin con el nimo de construir una herramienta visual que facilite su
aprendizaje.

Objetivos de material
- Crear un lenguaje visual a partir de los principios bsicos del buen diseo y
usabilidad.
- Desarrollar un sistema que permita una experiencia unificada para cualquier
dispositivos.

Metfora del Material

Esto se basa en modelos espaciales que contemplan escenarios de la vida real en este
caso las sombras, superficies, bordes ofrecen pistas visuales sencillas de comprender para
el usuario.

Intrpido, grfico, intencional

Los aspectos tales como escala proporciones y espacio no solo otorgan a la interfaz
esttica, adem de ello ofrecen al usuario una gua importante en relacin a la jerarqua de
las posibles acciones.

El movimiento proporciona significado

El movimiento refuerza la interaccin de forma significativa, permite llevar una continuidad
de la experiencia y fomenta la concentracin del usuario. tambin aclara el panorama
evitando que el usuario se sienta perdido en los mdulos de la aplicacin.

Entorno de trabajo

Mundo en 3D. El entorno de trabajo en un mundo en 3D, es aqu donde viene al caso los
modelos de la realidad fsica, los elementos se pueden disponer en los diferentes ejes
(x,y,z).
Luz y sombra. En este entorno existe el concepto de luz ambiente la cual proyecta una
sombra en los elementos a los cuales afecta generalmente la direccin de dicha luz se
puede modificar dentro de los valores de css. SU PROPSITO ES CREAR PROFUNDIDAD
Y RELEVANCIA EN LOS ELEMENTOS.

Propiedades de los elementos

Fsicas
Sombras
relativa.

Transformacin

Movimiento

de

elevacin Un elemento puede cambiar Un elemento puede ser

de forma.
generado o oculto de forma
espontnea.
El contenido se puede Un elemento crece o se
mostrar en diferente tamao contrae slo a lo largo y a lo Un elemento se puede
y color dentro del elemento. ancho.
desplazar en cualquier eje.
El material es slido los Varios elementos pueden El movimiento del eje z
eventos no pueden pasar el unirse para conformar uno (profundidad) se dispara
elemento.
solo.
generalmente
por
la
interaccin del usuario.
El material no puede Un elemento puede dividirse
atravesar otro.
y conformarse de nuevo.

Objetos en espacio 3D. Ciertos elementos poseen una elevacin de reposo la cual
debe respetarse una vez es alterada.
Relaciones de Objeto. Como el esquema implica una relacin de padres e hijos
esto implica que todas las propiedades (transformacin, movimiento) son heredadas
de los padres a los hijos.

Animacin
En trminos de animaciones de los elementos entran de nuevo aspectos de la
realidad (peso y masa), la fluidez ligereza con la cual se desplaza un mdulo
respecto al marco de la aplicacin.

Las animaciones deben siempre conservar los tiempos entrada y salida adecuados
para guiar la mirada del usuario de forma suave y cmoda.
Entra en juego ms conceptos de fsica los elementos ms pequeos necesitan de
menos fuerza para desplazarse y los ms grandes suponen mayor fuerza as que la
aceleracin de entrada y salida depende de esto.

Interaccin Responsive
El usuario siempre espera que los elementos reaccionen de alguna manera cuando
l los altera, responder a esos estmulos con un cambio de color o una animacin
del elemento genera una percepcin de control.
La aplicacin debe caracterizarse por comunicarse por medio de respuestas
visuales.

Respuesta de materiales
Los elementos debes brindar respuestas visuales al usuario.

Transiciones Significativas
El propsito de estas animaciones especialmente es dirigir de una forma elegante y
amena la atencin a los mdulos ms importantes en trminos de jerarqua,
teniendo en cuenta los objetivos principales de Material Design (experiencia
unificada).
Continuidad Visual.Consideraciones generales.
En el diseo de animaciones, considere lo siguiente:
La atencin del usuario directo. Cmo debe se debe dirigir la atencin del
usuario? Qu elementos y movimientos apoyan esa meta?Cmo debe entrante,
saliente, y comparti elementos que subrayar o restado importancia a travs de la
transicin?
Conecte transiciones visuales. Crear conexiones visuales entre los estados
de transicin a travs del color y los elementos persistentes.
Utilice movimientos con precisin. Considere cmo mover un cierto elemento
aade claridad y alegra a una transicin.

Sincronizacin Jerrquica. La animacin debe apoyar la jerarqua de los mdulos

de informacin. Sin embargo, no es una frmula simple en el que lo ms importante que
se mueve primero y el ltimo menos importante.

Coreografa Consistente. La entrada de los elementos de forma ordenada y coordinada

ayuda al usuario a comprender mejor la aplicacin, esquemas de animacin desordenados
no causan ms que distracciones.

Mejores Prcticas
Evitar trayectorias espaciales lineales , excepto cuando el movimiento est
limitado a un eje o moverse hacia / desde un punto en concierto con otros
elementos.
Hacer que los elementos de la direccin de marcha coherentemente a travs
de la transicin. Evite movimientos conflictivos y rutas superpuestas.

En qu profundidades hacen los elementos se mueven y por qu?

Si todos los elementos mviles trazaron sus caminos en la pantalla, se vera

hermosa y organizado? Crear una imagen clara de dnde buscar?
Reforzar las relaciones espaciales entre los elementos con los movimientos
de entrada y salida consistentes.

Detalles Encantadores
La animacin de iconos otorga detalles de fina coquetera visual ya que al cumplir la funcin
de comunicar el estado de algn acceso de la aplicacin tambin pueden ser usados para
fascinar al usuario.

Ref. de implementacin http://cloudcannon.com/deconstructions/2014/12/05/materialdesign-delightful-details.html

ESTILO
Color
Los colores seleccionados deben lograr un contraste inesperado y vibrante
sustentado en una disposicin de un ambiente de luces y sombras.

Paleta de color. Esta paleta de color comprende los colores primarios y de acento que
pueden ser utilizados para la ilustracin o para desarrollar sus colores de marca. Han sido
diseados para trabajar en armona con los dems.

Aplicacin de color UI. Al seleccionar una paleta de colores limitar la seleccin a tres
colores de la paleta de primarios y uno de la paleta de colores acentos.

Texto oscuro sobre fondos blancos. Existen algunas contemplaciones para el manejo de
color para textos en fondos blancos teniendo en cuenta la relevancia de cada mdulo de
texto.

Color Base (CB): #00000

Texto jerarqua 1: 87% CB
Texto jerarqua 2: 54% CB

Texto inputs

:26% CB

Texto blanco sobre fondos oscuros. En este tipo de situaciones aplican unos valores
porcentuales diferentes.

Color Base (CB): #FFFFFF

Texto jerarqua 1: 100% CB
Texto jerarqua 2: 70% CB
Texto inputs
:30% CB
Color de acento. Utilice el color de acento para su botn de accin primaria y componentes
como interruptores o deslizadores.

Iconos
Iconos de los productos son la expresin visual de los productos de una marca, servicios y
herramientas. Sencillo, audaz y amable, que comunican la idea central y la intencin de un
producto. Si bien cada icono del producto es visualmente distinto, todos los iconos de
productos de una determinada marca deben ser unificadas a travs del concepto y
ejecucin.

Iconos de los productos son un vehculo esencial para la comunicacin de su marca. El uso
de estas directrices como punto de partida, asegrese de que sus colores icono de
productos y otros elementos clave reflejan su identidad de marca.

la grilla de construccin se compone de 24x 24 dp

Formas Keyline
Keyline formas son la base de la parrilla. Mediante el uso de estas formas bsicas como
directrices, puede mantener una proporcin visual consistente a travs de los iconos de
productos relacionados.

Geometra
Normas preestablecidas han sido determinadas para keylines especficos: crculo,
cuadrado, rectngulo, ortogonales y diagonales. Esta pequea paleta de elementos
universales y simples ha sido desarrollado para unificar iconos de productos y sistematizar
su colocacin en la parrilla.

Anatoma
de
icono producto

un

1. Finalizar
2. Material de fondo
3. Primer plano material
4. Color
5. Sombra

Acabado
La capa de acabado es el resultado de lo virtual 45 fuente de luz. Se extiende desde la
esquina superior izquierda hasta el borde exterior del del icono de la silueta. El acabado
est siempre contenida dentro de estos lmites.

Mtricas de gradiente
Tipo: Radial
ngulo: 45
Color: Blanco (#FFFFFF)
Punto medio Ubicacin: 33% Deslizador 1
Opacidad: 10%Ubicacin: 0% Deslizador 2
Opacidad: 0% Ubicacin: 100%

Otros puntos importantes

Puntos de navegacin mltiple
vista lista
vista detalle
vistas hermanas