Reporte de Investigacion

Instituto Tecnológico Superior de Teposcolula
TECNOLÓGICO NACIONAL DE MÉXICO

INSTITUTO TECNOLÓGICO SUPERIOR DE
TEPOSCOLULA
REPORTE DE INVESTIGACIÓN:
PRINCIPIOS Y OBJETIVOS DE MATERIAL DESIGN, ENTORNO
Y PROPIEDADES DEL MATERIAL, ELEVACIÓN,
PROFUNDIDAD, ILUMINACIÓN Y SOMBRAS, USO DE
ANIMACIÓN Y TRANSICIONES, “DESIGN SPRINT” COMO
METODOLOGÍA DE DISEÑO.
Asignatura: Tópicos Selectos De Programación Móvil.
Docente: Ing. Eloy Sánchez Salmorán
Carrera: Ingeniería en Sistemas Computacionales.
Semestre: 7°.
Grupo: “A”.
Presenta: Número de control:
Liliana Quero 1820164
Oaxaca; Oax. A 06 de Octubre de 2021

Contenido
Av. Tecnológico No. 1 Paraje El Alarcón San Pedro y San Pablo Teposcolula, Oaxaca, C.P. 69500
Tels. 953 537 85 55
e-mail: dir_dteposcolula@tecnm.mx www.tecnm.mx | www.itsteposcolula.edu.mx Página 1
Material Design 3
2.1 Principios y Objetivos de Material Design 3
Lo Material Como Una Metáfora 3
Llamativo e Intencional 3
El Movimiento Otorga Significado 4
2.2 Entorno y propiedades del material 4
Propiedades Físicas 4
Movimientos de Material 5
2.3 Elevación, Profundidad, Iluminación y Sombras 5
Elevación 5
Mundo 3D 6
Luces y Sombras 6
2.4 Uso de Animación y Transiciones 7
Animación de Movimiento auténtico 7
Transiciones 7
2.5 “Design Sprint” Como Metodología de Diseño 8
Fases de Design Sprint 8
2.6 Componentes Interactivos 9
2.6.1 Navegación, tabs, drawer, FAB 9
2.6.2 Diseño Basado en Tarjetas, Listas y Tablas 11
2.6.3 Controles Interactivos y Prototipado 11
2.7 Estilos visuales 12
2.7.1 Paletas de colores, tipografía, iconografía 12
Bibliografía 14
Material Design
Material design es un estándar de diseño propuesto por Google y que ha utilizado en los últimos
años en sus procesos de diseño en todas sus aplicaciones web y móviles. Según Google la
Tels. 953 537 85 55
definición es la siguiente: “Material Design es un lenguaje visual que sintetiza los principios
clásicos del buen diseño con la innovación de la tecnología y la ciencia”.
2.1 Principios y Objetivos de Material Design

El Material Design, al igual que muchos otros estilos de diseño, tiene una serie de objetivos claros
que mencionaremos a continuación:
• Crear un lenguaje visual que combine los principios de un buen diseño y las posibilidades
que traen las nuevas tecnologías.
• Crear un sistema que posibilite una experiencia uniforme en diferentes plataformas y

dispositivos. Para ello se debe tener en cuenta las directrices de diseño para móviles
como pantallas táctiles, control de voz, etc.
De esta manera, el Material Design apunta a ser un estilo de diseño que mejore la experiencia de
usuario en diversos dispositivos y que se encuentre en un cambio constante conforme avanzan
las nuevas tecnologías.
De manera introductoria, Google no sólo presenta los objetivos del Material Design sino también
sus tres principios fundamentales:
Lo Material Como Una Metáfora

Lo material está unido a la realidad. De esta manera, lo material se fusiona con el espacio y el
movimiento, está ligada a la realidad táctil, por ello se puede integrar con la tecnología y al
mismo tiempo abre puertas a la creatividad e imaginación.
Las superficies y bordes de lo material entregan pistas visuales basadas en la realidad. El uso de
atributos familiares ayuda al usuario a entender las posibilidades de cada elemento de la interfaz.
La flexibilidad de lo material crea nuevas oportunidades que reemplazan aquellas impuestas por
el mundo físico, pero al mismo tiempo sigue esas mismas reglas.
Los principios de la luz, superficie y el movimiento son claves para transmitir cómo los objetos
existen e interactúan uno con el otro. Un manejo de luz realista ayuda a dividir espacios e indicar
movimiento.
Llamativo e Intencional
Los elementos visuales deben ser guiados por los conceptos de la teoría del diseño tales como el
uso del color, los espacios en blanco, el sistema de grillas, etc. Todos estos elementos ayudan a
determinar la jerarquía y lectura visual.
Una paleta de colores creada a la medida, imágenes de calidad, tipografía de gran tamaño y un
correcto uso de los espacios en blanco permiten la creación de una interfaz gráfica en donde el
usuario puede disfrutar de la experiencia. Al destacar las acciones que puede tomar el usuario se
habilita una funcionalidad única en donde el usuario tiene a su disposición diversas pistas que le
permiten entender la interfaz de manera inmediata.
Tels. 953 537 85 55
El Movimiento Otorga Significado
Si bien las animaciones tienen la capacidad de captar la atención de los usuarios, es importante
que éstas no interrumpan la experiencia de usuario de ninguna forma. Asimismo, es importante
que exista cohesión entre las animaciones y la propia esencia del sitio web o aplicación.
Para Google, el movimiento refuerza el papel del usuario como el actor principal y el que dirige
dichos movimientos. Las acciones de del usuario tiene el poder de cambiar el diseño y todas ellas
se realizan en un solo entorno. Es así que los elementos e la interfaz son presentados al usuario
sin interferir con la experiencia de usuario, incluso cuando dichos elementos se transforman y
reorganizan.
2.2 Entorno y propiedades del material

Material design es un entorno tridimensional que contiene luz y cuerpos además de haber
proyección de sombras.
 Todos los objetos de material tienen dimensiones X, Y, Z.
 También tienen una única posición del eje Z.
 Las lucen crean sombras direccionales, y la luz de ambiente crea sombras suaves.
Propiedades Físicas
Material tiene dimensiones variables (x, y), medidas en dps, y un grosor uniforme de 1dp.
Material nunca tiene un grosor de 0 dp. Esta es una de las propiedades de material inmutables.
Material Proyecta Sombras. Las sombras son el resultado natural de una elevación relativa
(posición z) entre los elementos material.
El Contenido se Muestra Sobre Material en Cualquier Forma y Color. El contenido no añade
grosor a material.
Material es Sólido. Los eventos de entrada no pueden pasar a través de material.
Material Ocupa Espacio. Varios elementos de material no pueden ocupar el mismo punto en el
espacio simultáneamente.
Material no Puede Pasar a Través de Otro Material. Por ejemplo, una capa de material no puede
pasar a través de otra capa de material cuando se está cambiando la elevación.
Tels. 953 537 85 55
Transformaciones de material. Material puede cambiar de forma.
Movimientos de Material
 Material puede generarse o destruirse espontáneamente en el entorno.
 Material puede moverse a lo largo de cualquier eje.
 El movimiento en el eje z es, de forma general, el resultado de una interacción del usuario
con material.
2.3 Elevación, Profundidad, Iluminación y Sombras

Elevación
La elevación es la posición relativa de un objeto a lo largo del eje z de la vista padre. La elevación
es el valor relativo entre la vista padre y los objetos hijos.
La elevación es medida en las mismas unidades que en los ejes (x, y), normalmente en densidad
independiente de píxeles (dp). Material tiene como estándar 1dp de grosor, todas las elevaciones
son medidas desde la parte superior de una superficie hasta la parte superior de otra superficie.
Elevación en Reposo. Todos los objetos de material tienen una elevación en reposo,
independientemente de que este objeto sea un componente pequeño o una capa que ocupe
toda la pantalla.
Ejemplos de elevaciones en reposo habituales para los componentes.
En el estado estático, la elevación para un objeto no cambia. Es constante en toda la app. Si un

objeto cambia su elevación, debería regresar a su elevación en reposo tan pronto como sea
posible.
Tels. 953 537 85 55
La elevación de tus objetos, sus posiciones en el espacio Z, depende de la jerarquía del
contenido que tú quieras expresar y si un objeto necesita moverse de forma independiente
respecto a otros.
Mundo 3D
El entorno material es un espacio en 3D, esto significa que todos los objetos tienen las
dimensiones (X, Y, Z). El eje Z está alineado perpendicularmente al plano de la pantalla, con la
parte positiva dirigiéndose hacia el observador. Cada hoja de material ocupa una posición única a
lo largo del eje Z y tiene un grosor estándar de 1dp.
En la web, el eje Z se utiliza para la organización y no para la perspectiva. El mundo 3D se emula
mediante la manipulación del eje Y.
Luces y Sombras
Dentro del entorno material, las luces virtuales iluminan la escena y permiten a los objetos
proyectar sombras. Una luz principal crea sombras direccionales, mientras que una luz ambiente
crea sombras suaves y consistentes desde todos los ángulos.
Todas las sombras en el entorno material son proyectadas por esos dos focos de luz. Las sombras
son la ausencia de luz resultante de la oclusión de esas fuentes de luz mediante capas de material
en varias posiciones a lo largo del eje Z.
Tels. 953 537 85 55
Sombra proyectada por una luz Sombra proyectada por una luz de Sombra proyectada por ambas luces,
principal. ambiente. principal y de ambiente.
2.4 Uso de Animación y Transiciones
Animación de Movimiento auténtico

Percibir una forma tangible de un objeto nos ayuda a comprender como manipularlos. Observar
un movimiento de un objeto nos dice si es ligero o pesado, flexible o rígido, pequeño o grande. El
movimiento en el mundo de material design no es sólo bonito, construye el significado de las
relaciones espaciales, la funcionalidad y las intenciones del sistema.
Acelera rápidamente y desacelera lentamente los objetos para evitar cambios bruscos en la
velocidad.
Cuando un objeto entra en la escena, asegúrate de que se está moviendo en su pico de
velocidad. Este comportamiento emula el movimiento natural. Una persona que entra en el
campo de visión no empieza andando al borde de la escena, sino antes. De forma similar, cuando
un objeto sale de la escena, mantiene la velocidad del objeto, en lugar de frenarla a medida que
sale de la escena. La atención del usuario se centra en un objeto que entra y sale de la escena
lentamente. En la mayoría de los casos no es tu efecto deseado.
No todos los objetos se mueven igual. Los más ligeros/pequeños pueden acelerar y desacelerar
más rápido porque ellos tienen menos masa y requieren de menos fuerza para conseguirlo. Los
objetos más grandes/pesados necesitan más tiempo para alcanzar el pico de velocidad y para
conseguir llegar al reposo. Piensa en esto aplicándolo en varios elementos de la interfaz de
usuario de tu app y considera como deberían desplazarse.
Transiciones
Algunas veces es difícil para el usuario saber dónde mirar o comprender como un elemento se
desplaza desde el punto A hacia el punto B. Una transición cuidada puede guiar efectivamente la
atención del usuario y el enfoque a través de varios pasos de un proceso o procedimiento,
evitando la confusión cuando la disposición cambia o los elementos son reordenados además de
mejorar, sobre todo, la belleza de la experiencia. El diseño del movimiento debería servir para un
propósito funcional.
Continuidad visual. Las transiciones entre dos estados visuales deberían ser claras, suaves y
fáciles de comprender para evitar que el usuario se confunda. Una transición bien diseñada hace
el trabajo pesado y permite al usuario comprender claramente donde debería enfocarse su
atención. Las transiciones tienen tres categorías de elementos:
• Elementos entrantes – los que se generan o trasladan dentro de la escena, esos
elementos necesitan ser introducidos o restablecidos.
• Elementos salientes – los que ya no son relevantes dentro un nuevo contexto deben ser
eliminados de la escena de un modo apropiado.
Tels. 953 537 85 55
• Elementos compartidos – los que persisten al principio y al final de las transiciones.
Pueden ser elementos sutiles de la escena como un icono, pero llegar a ser elementos
dominantes de la escena como una imagen de una galería que crece hasta encajar en la
pantalla.
2.5 “Design Sprint” Como Metodología de Diseño

Design Sprint es la metodología de Google que nos permite prototipar y validar ideas con
usuarios finales de forma rápida. Esta metodología reúne las estrategias de user research y
design thinking más efectivas, y nos propone un método de trabajo con el que rápidamente
podremos lanzar un producto de éxito. Si tienes la idea, solo tienes que aplicar esta metodología
que cuenta con 5 pasos. Una de las claves es el aprovechamiento del tiempo, que a menudo está
estrechamente relacionado con el dinero que tenemos.
Fases de Design Sprint

En un plazo de 3 a 5 días podemos completar el Design Sprint si lo tenemos todo bien preparado
y estudiado. El equipo de trabajo no deberían formarlo más de 7 personas, y la primera fase será
la de comprensión del proyecto. Todos los miembros del equipo deben estar en el mismo punto
de partida para que funcionen el resto de pasos. Cada uno debe aportar su punto de vista y
perspectiva del reto al que nos enfrentamos, lo que sabe del problema que tenemos delante.
Para ello, lógicamente, es básica una buena preparación.
A continuación, pasamos a la fase de bocetar, donde tenemos que centrarnos en la búsqueda de
las soluciones al problema. En este punto podemos hacer una lluvia de ideas individual. De
hecho, es la fase más individual del proceso del Design Sprint; y una vez tengas tus bocetos
tendrás que hacer una puesta en común con el resto de compañeros del equipo. Puedes
presentar el boceto por escrito o con varios diseños dibujados, pero lo importante no es el punto
de vista artístico, sino el pensamiento crítico ante el problema.
La tercera fase será la de la decisión. En un escenario ideal, tendremos diferentes opciones entre
las que elegir, fruto del trabajo de los diferentes miembros del equipo que participa en el Design
Script. No vamos a poder prototipar y probar todas las soluciones, así que basaremos nuestra
elección en decisiones estratégicas. Llegados a este punto podemos empezar a dibujar el
storyboard que será la base del prototipo, empezar con la selección de participantes en la
investigación y preparar las entrevistas.
Llegamos a la cuarta fase, el prototipo. Lo ideal es hacerlo en un solo día, en un plazo de 8 horas,
para lo que hay que cumplir con dos requisitos. El primero, prototipar solo aquello que vas a
testar; el segundo, contar con un equipo de expertos, cada uno con su rol asignado, y poner en
marcha el plan de acción. En las fases anteriores hemos solucionado todas las dudas y problemas,
así que no hay que replantear nada. Trabajaremos sobre el plan, que debe ser suficientemente
bueno para que no tengamos que desviarnos ni un milímetro.
Por último, nos enfrentamos a la fase de validación, para la que utilizaremos clientes reales a los
que entrevistaremos. Es la hora de obtener los resultados, para lo que observaremos cómo
actúan los usuarios con ese prototipo y recibiremos su feedback. Todo el equipo que ha
participado en el Sprint Design debería estar presente en estas sesiones, de modo que puedan
observar qué hay que mejorar para avanzar sobre seguro en los próximos pasos. Pero esos pasos
ya van más allá del Sprint Design.
Tels. 953 537 85 55
2.6 Componentes Interactivos
2.6.1 Navegación, tabs, drawer, FAB

El usuario debe ser capaz de entender y utilizar cualquier aplicación inmediatamente sin
necesidad de un manual o tutorial. El tipo de navegación que se utilice en las aplicaciones es
esencial para que esta sea intuitiva y predecible.
En Android, encontramos algunos widgets que permiten definir el tipo de navegabilidad de una
aplicación. Material Design detalla los estilos y comportamientos para estos widgets, los cuales
serán analizados con más detalle a continuación.
Back Button. Permite al usuario regresar a la pantalla anterior, de la misma forma que una ruta
de navegación en una página web. Este botón generalmente está ubicado en la parte superior
izquierda del Appbar.
Wireframe del BackButton

AppBar. El Appbar es una barra de herramientas que se ubica en la parte superior de la
aplicación. Proporciona una estructura visual y elementos conocidos por los usuarios para
navegar entre las actividades o fragmentos y proporciona acceso a las principales acciones de la
aplicación.
Material Design provee guías para establecer comportamientos del Appbar en relación al
contenido de la aplicación. El comportamiento estándar del Appbar tiene dos opciones de
scrolling, las cuales se definen a continuación:
1. El Appbar se mantiene fijacuando el usuario desliza el contenido de la lista hacia abajo.
2. El Appbar va desapareciendo de la pantalla cuando el usuario desliza el contenido de la

lista hacia arriba.
Tels. 953 537 85 55
Wireframe del comportamiento estándar del AppBar
El comportamiento de Appbar con tabs(pestañas) proporciona navegación para diferentes

secciones de contenido, permitiendo pasar de una página a otra cuando se presiona un tab.
Bottom Navigation. El comportamiento del Appbarcon espacio flexible e imagen normalmente
no se utiliza para establecer la navegabilidad en una aplicación móvil. Se utiliza para mostrar
información más detallada de un ítem que pertenece a una lista de información.
Este comportamiento tiene tres vistas:
1. El Bottom Navigation se mantiene fijo cuando el usuario desliza el contenido de la lista

hacia abajo.
2. El Bottom Navigation va desapareciendo de la pantalla cuando el usuario desliza el

contenido de la lista hacia arriba.
Wireframe del Bottom Navigation
Navigation Drawer. Navigation Drawer es un menú lateral que sale del lado izquierdo o del lado
derecho de la aplicación cuando se desliza el dedo por la pantalla en los bordes o hacemos clic en
un botón superior que normalmente tiene un ícono con tres líneas horizontales en el App Bar.
Una de las ventajas de este tipo de navegación es que permite tener una cantidad indefinida de
opciones. Este menú es muy popular para crear aplicaciones móviles no nativas, como las
aplicaciones híbridas o aplicaciones web para dispositivos móviles. Material Design establece
algunos comportamientos para un Navigation Drawer, entre los que tenemos Navigation Drawer
con Altura Completa, Navigation Drawer debajo del AppBar y Navigation Drawer variante
mínima, como se muestra a continuación:
Tels. 953 537 85 55
Wireframe de los comportamientos del Navigation Drawer
1. El Navigation Drawer permanece oculto.
2. Cuando el usuario hace clic en el botón que tiene el ícono con tres líneas horizontales,
sale un menú del lado izquierdo mostrando las opciones de la aplicación.
2.6.2 Diseño Basado en Tarjetas, Listas y Tablas

Una lista muestra un conjunto de datos homogéneos que deben ser fáciles de leer. Los datos
pueden ser textos o imágenes o una combinación de ambas. Material Design sugiere algunos
modelos y métricas para implementar listas de contenido.
Estos modelos pueden ser utilizados en cualquier contexto, sin olvidar que son diseños sugeridos,
por lo que como desarrolladores podemos implementar estas listas en cualquier aplicación o
modificar la apariencia de las mismas.
2.6.3 Controles Interactivos y Prototipado
Text Field. Los Text Fields permiten a los usuarios ingresar y seleccionar texto. Sirven para validar
las entradas, ayudar a los usuarios a corregir errores, autocompletar palabras y brindar
sugerencias.
SnackBar. Este widget provee de mensajes breves de una operación a través de una hoja que
aparece en la parte inferior de la pantalla. Contiene una sola línea de texto directamente
relacionada con la operación que se realiza.
Floating Action Button. Floating Action Button (FAB) es un botón redondo que se eleva por
encima del contenido de la aplicación. Viene en tamaño predeterminado y mini. FAB ajusta su
posición en respuesta de otros elementos de la interfaz de usuario. Se utiliza para mostrar la
acción principal de una aplicación o mostrar acciones relacionadas.
Material Design define algunos comportamientos para este widget; se puede transformar en una
simple hoja de material o en un menú, entre otros. A continuación, se muestra cómo un FAB se
puede utilizar como un menú de acciones de la aplicación:
Tels. 953 537 85 55
Wireframe de Floating Action Button
2.7 Estilos visuales

2.7.1 Paletas de colores, tipografía, iconografía
Paleta de Colores. Esta paleta de color comprende los colores primarios y de acento que pueden
ser utilizados para las ilustraciones o para el desarrollo de los colores de tu marca. Han sido
diseñados para trabajar armoniosamente entre ellos.
La paleta de colores empieza con los colores primarios y llena el espectro para crear una útil y
completa paleta para Android, la Web e iOS. Google sugiere usar los colores 500 como los colores
primarios en tu app y los otros colores como colores de acento.
Limita tus colores a tres matices de la paleta principal y uno de acento de la paleta secundaria. El
color de acento puede o no necesitar opciones de reserva.
Tipografía. Se pueden utilizar dos tipos de tipografía:

 Roboto y Noto. Desde el lanzamiento de Ice Cream Sandwich, Roboto es la tipografía
estándar en Android. Con Froyo, el estándar que se empezó a utilizar en Android y es el
que se utiliza para todos los lenguajes no soportados por Roboto. Noto es también la
fuente estándar para todos los lenguajes de Chrome OS.
Para dar soporte a todos los lenguajes del mundo, Google recomienda utilizar Roboto
para Latin, Greek y Cyrillic, mientras que se debe utilizar Noto para los demás.
Roboto ha sido diseñada y refinada para funcionar correctamente a lo largo de todas las
plataformas soportadas. Es ligeramente más ancha y redondeada, dando una mayor
claridad y haciendo de ella una fuente más optimista que el resto.
 Estilos Estándar. Las guías de diseño tipográficas se basan en tres categorías de los
lenguajes.
• Inglés y los que son como el inglés: latín (excepto vietnamita), griego, cirílico, hebreo,
armenio y georgiano.
Tels. 953 537 85 55
• Altura: Los lenguajes que requieren una línea extra de altura para acomodarse a los
glifos más grandes. Se incluyen los lenguajes del sur y sureste asiático, medio y oeste.
como el árabe, el hindú, telugu, tailandés y vietnamita.
• Densidad: Los lenguajes que requieren de una línea extra de altura para acomodarse a
los glifos más grandes, pero tienen métricas diferentes de altura. Se incluyen el chino,
japonés y coreano.
Demasiados tipos de pantalla y estilos al mismo tiempo pueden destrozar cualquier layout. Una
escala tipografía tiene un conjunto límite de tipos de tamaño diferentes que funcionan bien en
cualquier cuadrícula de layouts. El conjunto básico de estilos está basado en una escala
tipográfica de 12, 14, 16, 20 y 34.
Inglés o similares: Esos tamaños y estilos son elegidos para equilibrar la densidad de contenido y
la comodidad de lectura bajo ciertas condiciones habituales de uso. Los diferentes tipos de
tamaño se especifican con sp (scaleable pixels) para habilitar modos de mayor tamaño gracias a
la accesibilidad.
Iconografía. Son dos los utilizados.

 Iconos del producto. Los iconos de producto son la expresión visual de la marca de los
productos, servicios y herramientas. Simples, atrevidos y amigables, se comunican con
la idea principal del producto. Mientras que cada icono de producto es visualmente
distintivo, todos los iconos de producto para una marca en cuestión deberían ser
unificados a través de un concepto y ejecución.
Los iconos de producto son una parte esencial para transmitir tu marca. Usando estas
guías como punto de partida, asegúrate de que colores utilizar para tu icono de productos
y de otros elementos clave que reflejarán la identidad de tu marca.
 Iconos del sistema. Un icono del sistema, o icono de la interfaz, simboliza un comando,
archivo, dispositivo o directorio. Los iconos del sistema son utilizados para representar
acciones habituales como la papelera, imprimir o guardar.
El diseño de los iconos del sistema es simple, moderno, amigable y algunas veces extravagantes.
Cada icono se reduce a su forma mínima, es decir, la idea es mantener solo la esencia. El diseño
asegura la legibilidad y claridad incluso en pantallas pequeñas.
Tels. 953 537 85 55
Conclusión
En conclusión, el material design intenta aproximarse a la realidad, ya que la percepción de
algo virtual y táctil es catalogado como difícil por la mayoría de usuarios.
Bibliografía
 Alcívar Aray, C. A., Plaza Vargas, A. M., Michelle, V. C., & Michael Mario, M. P. (2018). Un
manual práctico para desarrollar aplicaciones en Android alineadas a las guías de
Material Design.
 https://desarrollador-android.com/material-design/material-design-diseno/
 https://material.io/design
 https://slideplayer.es/slide/15905804/
Tels. 953 537 85 55

Reporte de Investigacion

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Reporte de Investigacion

Cargado por

Copyright:

Formatos disponibles

Instituto Tecnológico Superior de Teposcolula

TECNOLÓGICO NACIONAL DE MÉXICO

Asignatura: Tópicos Selectos De Programación Móvil.

Docente: Ing. Eloy Sánchez Salmorán

Carrera: Ingeniería en Sistemas Computacionales.

Presenta: Número de control:

Liliana Quero 1820164

Oaxaca; Oax. A 06 de Octubre de 2021

2.1 Principios y Objetivos de Material Design

• Crear un sistema que posibilite una experiencia uniforme en diferentes plataformas y

Lo Material Como Una Metáfora

2.2 Entorno y propiedades del material

2.3 Elevación, Profundidad, Iluminación y Sombras

Ejemplos de elevaciones en reposo habituales para los componentes.

En el estado estático, la elevación para un objeto no cambia. Es constante en toda la app. Si un

2.4 Uso de Animación y Transiciones

Animación de Movimiento auténtico

2.5 “Design Sprint” Como Metodología de Diseño

Fases de Design Sprint

2.6.1 Navegación, tabs, drawer, FAB

Wireframe del BackButton

2. El Appbar va desapareciendo de la pantalla cuando el usuario desliza el contenido de la

El comportamiento de Appbar con tabs(pestañas) proporciona navegación para diferentes

Este comportamiento tiene tres vistas:

1. El Bottom Navigation se mantiene fijo cuando el usuario desliza el contenido de la lista

2. El Bottom Navigation va desapareciendo de la pantalla cuando el usuario desliza el

Wireframe del Bottom Navigation

1. El Navigation Drawer permanece oculto.

2.6.2 Diseño Basado en Tarjetas, Listas y Tablas

2.6.3 Controles Interactivos y Prototipado

2.7 Estilos visuales

Tipografía. Se pueden utilizar dos tipos de tipografía:

Iconografía. Son dos los utilizados.

También podría gustarte