BW

Material Design
Diseo de materiales
Manual basado en Google Design

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Introduccin
Contenido

Objetivos Principios

Desafiamos a nosotros mismos para crear un lenguaje visual para nuestros usuarios
que sintetiza los principios clsicos de buen diseo con la innovacin y la posibilidad de la
tecnologa y la ciencia. Este es el diseo de materiales. Esta especificacin es un
documento vivo que se actualizar a medida que seguimos para desarrollar los principios
y detalles de diseo de materiales.

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Introduccin
Contenido

Objetivos Principios
Crear un lenguaje visual que
sintetiza los principios clsicos de
un buen diseo con la innovacin
y la posibilidad de la tecnologa y
la ciencia.

Desarrollar un sistema subyacente

que
permite
una
experiencia
unificada a travs de plataformas y
tamaos
de
los
dispositivos.Preceptos mviles son
fundamentales, pero el tacto, la
voz, el ratn y el teclado son los
mtodos de entrada de clase
primera.

Anterior

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Introduccin
Contenido

Objetivos Principios

El material es la metfora
Una metfora material es la teora unificadora de un
espacio racionalizado y un sistema de movimiento.El
material est basado en la realidad tctil, inspirada en el
estudio de papel y tinta, pero tecnolgicamente avanzado y
abierto a la imaginacin y la magia.
Superficies y bordes del material proporcionan pistas visuales
que se basan en la realidad.El uso de atributos tctiles
familiares
ayuda
a
los
usuarios
a
comprender
rpidamente.Sin embargo, la flexibilidad del material crea
nuevas affordances (Relacin entre un objeto y un entorno)
que sustituyen a los que en el mundo fsico, sin romper las
reglas de la fsica.
Los fundamentos de la luz, de la superficie, y el movimiento
son clave para el transporte de cmo los objetos se mueven,
interactan, y existen en el espacio y en relacin el uno al
otro. Iluminacin realista muestra costuras, divide el espacio,
e indica las partes en movimiento.

Anterior

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Introduccin
Contenido

Objetivos Principios

Intrpido, grfico, intencional

Los elementos fundamentales de diseo basado en la
impresin - la tipografa, las redes, el espacio, la escala, el
color y el uso de imgenes - gua de tratamientos visuales.
Estos elementos hacen mucho ms que agradar a la vista.
Crean jerarqua, el significado y el enfoque.Opciones de color
deliberados, imgenes de borde a borde, tipografa de gran
escala, y el espacio en blanco intencionalmente crean una
interfaz audaz y grfica que sumergir al usuario en la
experiencia.
El nfasis en las acciones del usuario hace que
funcionalidad
principal
inmediatamente
evidente
proporciona puntos de referencia para el usuario.

Anterior

la
y

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Introduccin
Contenido

Objetivos Principios

El movimiento proporciona
significado
Movimiento respeta y refuerza el usuario como el motor
primario.Acciones de los usuarios primarios son puntos de
inflexin que inician el movimiento, la transformacin de todo
el diseo.
Toda accin tiene lugar en un nico entorno.Los objetos se
presentan al usuario sin romper la continuidad de la
experiencia, incluso a medida que se transforman y se
reorganizan.
El movimiento es significativa y apropiada, que sirve para
centrar la atencin y mantener la continuidad.La
retroalimentacin es sutil pero clara.Las transiciones son
eficiente pero coherente.

Anterior

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Ambiente
Mundo 3D Luz y sombra

Mundo 3D
El entorno material es un espacio 3D, lo que
significa que todos los objetos tienen x, y, z y
dimensiones.El
eje
z
est
alineada
perpendicularmente al plano de la pantalla, con el
eje z positivo se extiende hacia el espectador.Cada
lmina de material ocupa una sola posicin a lo
largo del eje z y tiene un espesor 1DP estndar,
equivalente aun pxel de espesoren las pantallas
con una densidad de pxeles de 160.
En la web, el eje z se utiliza para todas las
ocasiones y no para la perspectiva.El mundo 3D se
emula mediante la manipulacin del eje y.

Anterior

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Ambiente
Mundo 3D Luz y sombra

Luz y sombra
Dentro del entorno material, luces virtuales iluminan la escena.Luces clave crean sombras
direccionales, mientras que la luz ambiente crea sombras suaves desde todos los ngulos.
Sombras en el entorno material sean emitidos por estas dos fuentes de luz.En el desarrollo
de Android, las sombras se producen cuando las fuentes de luz son bloqueados por lminas
de material en diferentes posiciones a lo largo del eje z.En la web, las sombras se
representan mediante la manipulacin del eje y solamente.El siguiente ejemplo muestra la
tarjeta con una altura de 6DP.
Sombra Creada por luz clave

Combinacin de ambas
tcnicas

Sombra creada por

iluminacin ambiental

Anterior

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Propiedades Materiales
Propiedades fsicas

Material de transformacin

Movimiento Material

Propiedades fsicas
El material tienevariables x y dimensiones de Y(medida en dp) y unespesor
uniforme(1DP).

Correcto

Alto y ancho puede variar

Anterior

Incorrecto

El material siempre es de 1
DP de espesor

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Propiedades Materiales
Propiedades fsicas

Material de transformacin

Movimiento Material

Material arroja sombras.

Sombras resultan naturalmente de la elevacin relativa (z-posicin) entre los elementos
materiales.

Correcto

Sombras representan la
elevacin relativa entre
elementos materiales.

Anterior

Incorrecto

Las sombras nunca son

aproximados por material
colorante.

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Propiedades Materiales
Propiedades fsicas

Material de transformacin

Movimiento Material

El contenido puede comportarse de forma independiente del material, pero est limitado
dentro de los lmites del material.

Anterior

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Propiedades Materiales
Propiedades fsicas

Material de transformacin

Movimiento Material

El material es slido.
Los eventos de entrada no pueden pasar a travs del material.

Correcto

Anterior

Incorrecto

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Propiedades Materiales
Propiedades fsicas

Material de transformacin

Movimiento Material

Elementos materiales mltiples no pueden ocupar el mismo punto en el espacio de forma

simultnea.

Correcto

Uso de elevacin para separar elementos

materiales es un mtodo de prevencin
de mltiples elementos materiales de
ocupar el mismo punto en el espacio de
forma simultnea.

Anterior

Incorrecto

Elementos materiales mltiples no pueden

ocupar el mismo punto en el espacio de
forma simultnea.

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Propiedades Materiales
Propiedades fsicas

Material de transformacin

Movimiento Material

El material no puede pasar a travs de otro material.

Por ejemplo, una lmina de material no puede pasar a travs de otra hoja de material al
cambiar la elevacin.

Incorrecto

El material no puede pasar a travs de otro material.

Anterior

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Propiedades Materiales
Propiedades fsicas

Material de transformacin

Movimiento Material

El material puede cambiar de

forma.

El material crece y se reduce a lo

largo de su plano

El material nunca se pliega o

dobla

Anterior

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Propiedades Materiales
Propiedades fsicas

Material de transformacin

Movimiento Material

Hojas de material pueden unirse

para convertirse en una sola hoja
de material.
Al dividir, el material puede
sanar.Por ejemplo, si se quita una
porcin de material de una lmina
de material, la hoja de material se
convertir en una hoja entera de
nuevo.

Anterior

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Propiedades Materiales
Propiedades fsicas

Material de transformacin

Movimiento Material

Movimiento de
material
El material puede ser generado
de forma espontnea o
destruida en cualquier lugar en
el medio ambiente.

El material puede ser espontnea generada o

destruido.

El material puede moverse a lo largo de varios ejes.

Movimiento en el eje Z es
tpicamente un resultado de la
interaccin del usuario con el
material.

Anterior

Siguiente

Creado
Creado y
y Diseado
Diseado por
por Willian
Willian Monoga
Monoga

Elevacin y sombras
Elevacin Android

oscuridad

Relaciones de objeto

Los objetos en el diseo de materiales poseen cualidades similares a los objetos en el mundo
fsico.En el mundo fsico, los objetos se pueden apilar o adheridas entre s, pero no pueden
pasar a travs de unos a otros.Objetos proyectan sombras y reflejan la luz.
Estas cualidades forman un modelo espacial que es familiar para los usuarios y puede ser
aplicado consistentemente a travs de aplicaciones.Que sustenta este modelo espacial son
los conceptos de la elevacin y la sombra.
Elevacin (Android)
La elevacin es la profundidad relativa, o la distancia, entre dos
superficies a lo largo del eje z.
Presupuesto:
La elevacin se mide en las mismas unidades que los ejes X e Y,
normalmente en pxeles independientes de la densidad (DP).Debido
a que los elementos materiales tienen profundidad (todo el material
es 1DP de espesor), la elevacin se mide en distancia desde la parte
superior de una superficie a la parte superior de la otra.
La elevacin de un objeto secundario es relativa a la elevacin del
objeto padre.
Las imgenes y los valores que se muestran son para aplicaciones
de Android.

Anterior

Siguiente