Material-Design-Expo.pdf

7/25/2019 Material-Design-Expo.pdf

1/16

Material DesignTaller de desarrollo de aplicaciones para Tablets

Faride Hernndez Prez

G

o

o

g

l

e

Erick Osorio Snchez

Omar Hernndez Hernndez

Brenda Snchez Lpez

Dulce Nayeli Islas lvarez

Nlida Yulini Barrera Bautista


2/16

Surface R

eaction

Es un evento de entrada, el sistema proporciona unaconfirmacin visual instantnea en el punto de contacto:debajo de la yema del dedo para el tacto, en el micrfonopara la voz, o en el campo apropiado para una prensateclado.


3/16

Surface Reaction


4/16

Picker

Es una "marca" que se puede utilizar para seleccionar una de un conjunto prede

de valores.

Date pickers:Se utiliza para seleccionar una fecha

mvil.


5/16

Picker

Proporcionan una forma sencilla de seleccionar un nico valor de un conjunto

predeterminado.

Time pickers:

Se ajusta a la configuracin de tiempo un usuario, es decir, el formato de 12 h

horas.

Google


6/16

Picker


7/16

Mens

Men Principal

Los ms habituales, aparecen en la zona inferior de la pantalla alpulsar el botnmen del telfono.


8/16

Mens

Submen

Son mens secundarios que se pueden mostrar aopcin de un men principal.


9/16

Mens

Men contextual

tiles en muchas ocasiones, aparecen al realizar una pulsacin larga sobelemento de la pantalla


10/16

ontroles de Seleccin

CheckboxLas casillas de verificacin permiten al usuario seleccionar mltiples opciones conjunto.

Google


11/16


LightOn: Swatch 500, Opacity 100%Off: #000000, Opacity 54%Disabled: #000000, Opacity 26%

DarkOn: Swatch 500, Opacity 100%Off: #FFFFFF, Opacity 70%Disabled: #FFFFFF, Opacity 30%

Google


12/16


Radio ButtonLos botones de opcin permiten al usuario seleccionar una opcin de un conjunto.


13/16


LightOn: Swatch 500, Opacity 100%Off: #000000, Opacity 54%Disabled: #000000, Opacity 26%

DarkOn: Swatch 500, Opacity 100%Off: #FFFFFF, Opacity 70%Disabled: #FFFFFF, Opacity 30%

Google


14/16


SwitchEncendido / apagado interruptores que alternan el estado de una opcin, con unaconfiguracin individual.


15/16


Light

Thumb On: Swatch 500, Opacity 100%Track On: Swatch 500, Opacity 50%Thumb Off: Grey 50, #FAFAFA, Opacity 100%Track Off: #000000, Opacity 26%Thumb Disabled: Grey 400, #BDBDBD, OpacitTrack Disabled: #000000, Opacity 12%

Dark

Thumb On: Swatch 200, Opacity 100%Track On: Swatch 200, Opacity 50%Thumb Off: Grey 400, #BDBDBD, Opacity 10Track Off: #FFFFFF, Opacity 30%Thumb Disabled: Grey 800, #424242, OpacitTrack Disabled: #FFFFFF, Opacity 10%


16/16

Gracias por suAtencin

Google

Material-Design-Expo.pdf

Documents

Transcript of Material-Design-Expo.pdf