7/18/2019 Comprensión Material Design

http://slidepdf.com/reader/full/comprension-material-design 1/10

Conceptos Importantes Material Design de GoogleEL presente documento a modo de precedente contiene los elementos más relevantes deesta documentación con el ánimo de construir una herramienta visual que facilite suaprendizaje.

Objetivos de material

- Crear un lenguaje visual a partir de los principios básicos del buen diseño usabilidad.

- !esarrollar un sistema que permita una e"periencia unificada para cualquier dispositivos.

Metáfora del MaterialEsto se basa en modelos espaciales que contemplan escenarios de la vida real en estecaso las sombras# superficies# bordes ofrecen pistas visuales sencillas de comprender parael usuario.

Intrépido, gráfico, intencionalLos aspectos tales como escala proporciones espacio no solo otorgan a la interfazest$tica# ademá de ello ofrecen al usuario una gu%a importante en relación a la jerarqu%a delas posibles acciones.

El movimiento proporciona significado

El movimiento refuerza la interacción de forma significativa# permite llevar una continuidadde la e"periencia fomenta la concentración del usuario. tambi$n aclara el panoramaevitando que el usuario se sienta perdido en los módulos de la aplicación.

Entorno de trabajo

7/18/2019 Comprensión Material Design

http://slidepdf.com/reader/full/comprension-material-design 2/10

Mundo en 3D El entorno de trabajo en un mundo en &!# es aqu% donde viene al caso losmodelos de la realidad f%sica# los elementos se pueden disponer en los diferentes ejes'"##z(.

!u" # sombra En este entorno e"iste el concepto de luz ambiente la cual proecta unasombra en los elementos a los cuales afecta generalmente la dirección de dicha luz sepuede modificar dentro de los valores de css. )* +,+)/0 E) C,E1, +,2*3!/!1!4 ,ELE513C/1 E3 L) ELE6E30).

$ropiedades de los elementos

%&sicas 'ransformaci(n Movimiento

)ombras de elevaciónrelativa.

El contenido se puedemostrar en diferente tamaño color dentro del elemento.

El material es sólido loseventos no pueden pasar elelemento.

El material no puedeatravesar otro.

*n elemento puede cambiar de forma.

*n elemento crece o secontrae sólo a lo largo a loancho.

5arios elementos puedenunirse para conformar unosolo.

*n elemento puede dividirse conformarse de nuevo.

*n elemento puede ser generado o oculto de formaespontánea.

*n elemento se puededesplazar en cualquier eje.

El movimiento del eje z'profundidad( se disparageneralmente por lainteracción del usuario.

Objetos en espacio 3D Ciertos elementos poseen una elevación de reposo la cualdebe respetarse una vez es alterada.

)elaciones de Objeto Como el esquema implica una relación de padres e hijosesto implica que todas las propiedades 'transformación# movimiento( son heredadasde los padres a los hijos.

*nimaci(nEn t$rminos de animaciones de los elementos entran de nuevo aspectos de la

realidad 'peso masa(# la fluidez ligereza con la cual se desplaza un módulorespecto al marco de la aplicación.

7/18/2019 Comprensión Material Design

http://slidepdf.com/reader/full/comprension-material-design 3/10

Las animaciones deben siempre conservar los tiempos entrada salida adecuadospara guiar la mirada del usuario de forma suave cómoda.

Entra en juego más conceptos de f%sica los elementos más pequeños necesitan demenos fuerza para desplazarse los más grandes suponen maor fuerza as% que laaceleración de entrada salida depende de esto.

Interacci(n )esponsiveEl usuario siempre espera que los elementos reaccionen de alguna manera cuando$l los altera# responder a esos est%mulos con un cambio de color o una animacióndel elemento genera una percepción de control.

La aplicación debe caracterizarse por comunicarse por medio de respuestasvisuales.

)espuesta de materiales 

Los elementos debes brindar respuestas visuales al usuario.

'ransiciones +ignificativas

El propósito de estas animaciones especialmente es dirigir de una forma elegante amena la atención a los módulos más importantes en t$rminos de jerarqu%a#teniendo en cuenta los objetivos principales de 6aterial !esign 'e"perienciaunificada(.

Continuidad isualConsideraciones generales.

En el diseño de animaciones# considere lo siguiente78 La atención del usuario directo. 9Cómo debe se debe dirigir la atención del

usuario: 9;u$ elementos movimientos apoan esa meta:9Cómo debe entrante#

saliente# compartió elementos que subraar o restado importancia a trav$s de latransición:

8 Conecte transiciones visuales. Crear cone"iones visuales entre los estadosde transición a trav$s del color los elementos persistentes.

8 *tilice movimientos con precisión. Considere cómo mover un cierto elementoañade claridad alegr%a a una transición.

+incroni"aci(n -erár.uica La animación debe apoar la jerarqu%a de los módulosde información. )in embargo# no es una fórmula simple en el que lo más importante quese mueve primero el <ltimo menos importante.

7/18/2019 Comprensión Material Design

http://slidepdf.com/reader/full/comprension-material-design 4/10

Coreograf&a Consistente La entrada de los elementos de forma ordenada coordinadaauda al usuario a comprender mejor la aplicación# esquemas de animación desordenadosno causan más que distracciones.

Mejores $rácticas

8 Evitar traectorias espaciales lineales # e"cepto cuando el movimiento estálimitado a un eje o moverse hacia = desde un punto en concierto con otroselementos.

8 >acer que los elementos de la dirección de marcha coherentemente a trav$sde la transición. Evite movimientos conflictivos rutas superpuestas.

8 9En qu$ profundidades hacen los elementos se mueven por qu$:

8 )i todos los elementos móviles trazaron sus caminos en la pantalla# se ver%ahermosa organizado: 9Crear una imagen clara de dónde buscar:

8 ,eforzar las relaciones espaciales entre los elementos con los movimientosde entrada salida consistentes.

7/18/2019 Comprensión Material Design

http://slidepdf.com/reader/full/comprension-material-design 5/10

Detalles Encantadores

La animación de iconos otorga detalles de fina coqueter%a visual a que al cumplir la función

de comunicar el estado de alg<n acceso de la aplicación tambi$n pueden ser usados parafascinar al usuario.

,ef. de implementación /ttp011cloudcannoncom1deconstructions1245142161material7

design7delig/tful7details/tml 

E+'I!O

Color Los colores seleccionados deben lograr un contraste inesperado vibrante

sustentado en una disposición de un ambiente de luces sombras.

7/18/2019 Comprensión Material Design

http://slidepdf.com/reader/full/comprension-material-design 6/10

$aleta de color Esta paleta de color comprende los colores primarios de acento quepueden ser utilizados para la ilustración o para desarrollar sus colores de marca. >an sidodiseñados para trabajar en armon%a con los demás.

*plicaci(n de color 8I  1l seleccionar una paleta de colores limitar la selección a trescolores de la paleta de primarios uno de la paleta de colores acentos.

'e9to oscuro sobre fondos blancos E"isten algunas contemplaciones para el manejo decolor para te"tos en fondos blancos teniendo en cuenta la relevancia de cada módulo dete"to.

Color :ase ;C:<0 =

0e"to jerarqu%a ?7 @AB C

0e"to jerarqu%a D7 FB C

7/18/2019 Comprensión Material Design

http://slidepdf.com/reader/full/comprension-material-design 7/10

0e"to inputs 7DGB C

'e9to blanco sobre fondos oscuros  En este tipo de situaciones aplican unos valoresporcentuales diferentes.

Color :ase ;C:<0 =%%%%%%

0e"to jerarqu%a ?7 ?HHB C0e"to jerarqu%a D7 AHB C0e"to inputs 7&HB C

Color de acento *tilice el color de acento para su botón de acción primaria componentescomo interruptores o deslizadores.

Iconos/conos de los productos son la e"presión visual de los productos de una marca# servicios herramientas. )encillo# audaz amable# que comunican la idea central la intención de unproducto. )i bien cada icono del producto es visualmente distinto# todos los iconos deproductos de una determinada marca deben ser unificadas a través del concepto #

ejecuci(n

7/18/2019 Comprensión Material Design

http://slidepdf.com/reader/full/comprension-material-design 8/10

/conos de los productos son un veh%culo esencial para la comunicación de su marca. El usode estas directrices como punto de partida# aseg<rese de que sus colores icono deproductos otros elementos clave reflejan su identidad de marca.

la grilla de construcción se compone de DF" DF dp

Formas KeylineIeline formas son la base de la parrilla. 6ediante el uso de estas formas básicas comodirectrices# puede mantener una proporción visual consistente a trav$s de los iconos deproductos relacionados.

Geometría3ormas preestablecidas han sido determinadas para Jelines espec%ficos7 c%rculo#cuadrado# rectángulo# ortogonales diagonales. Esta pequeña paleta de elementos

universales simples ha sido desarrollado para unificar iconos de productos sistematizar su colocación en la parrilla.

7/18/2019 Comprensión Material Design

http://slidepdf.com/reader/full/comprension-material-design 9/10

*natom&a de un

icono producto

?. 2inalizarD. 6aterial de fondo

&. +rimer plano materialF. Color. )ombra

AcabadoLa capa de acabado es el resultado de lo virtual FK fuente de luz. )e e"tiende desde laesquina superior izquierda hasta el borde e"terior del del icono de la silueta. El acabado

está siempre contenida dentro de estos l%mites.

7/18/2019 Comprensión Material Design

http://slidepdf.com/reader/full/comprension-material-design 10/10

6$tricas de gradiente0ipo7 ,adial ngulo7 FK

Color7 lanco 'M222222(+unto medio *bicación7 &&B !eslizador ?pacidad7 ?HB*bicación7 HB !eslizador Dpacidad7 HB *bicación7 ?HHB

Otros puntos importantes

$untos de navegaci(n m>ltiple

vista lista

vista detalle

vistas /ermanas