“2020, Año de Leona Vicario, Benemérita Madre de la Patria”
TECNOLÓGICO NACIONAL DE MÉXICO
INSTITUTO TECNOLÓGICO SUPERIOR DE TEPOSCOLULA
INVESTIGACIÓN
MATERIAL DESIGN
ASIGNATURA:
CONMUTACIÓN Y ENRUTAMIENTO DE REDES
PROFESOR:
ING. ELOY SANCHEZ
ABRAHAM CRUZ GALLARDO
NO. DE CONTROL:
2020004
GRUPO:
S7A
FECHA:
22/11/2020
Contenido
Material Design ...............................................................................................................................4
2.1 Principios y Objetivos de Material Design .......................................................................4
Lo Material Como Una Metáfora ...................................................................................5
Llamativo e Intencional ..................................................................................................5
El Movimiento Otorga Significado .................................................................................6
2.2 Entorno y propiedades del material ..................................................................................6
Propiedades Físicas .........................................................................................................7
Movimientos de Material ................................................................................................8
2.3 Elevación, Profundidad, Iluminación y Sombras .............................................................8
Elevación.........................................................................................................................8
Mundo 3D .....................................................................................................................10
Luces y Sombras ...........................................................................................................11
2.4 Uso de Animación y Transiciones ..................................................................................11
Animación de Movimiento auténtico............................................................................11
Transiciones ..................................................................................................................12
2.5 “Design Sprint” Como Metodología de Diseño..............................................................13
Fases de Design Sprint ..................................................................................................13
2.6 Componentes Interactivos...............................................................................................15
2.6.1 Navegación, tabs, drawer, FAB ...........................................................................15
2.6.2 Diseño Basado en Tarjetas, Listas y Tablas.........................................................18
2.6.3 Controles Interactivos y Prototipado ...................................................................19
2.7 Estilos visuales ................................................................................................................20
2.7.1 Paletas de colores, tipografía, iconografía ...........................................................20
Bibliografía ...................................................................................................................................23
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 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.
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.
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.
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.
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.
• 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.
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.
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:
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:
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.
• 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.
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.
[Link]
