Material Design usa herramientas fundamentales que provienen del mundo del diseño impreso, como las cuadrículas de líneas base y conjuntos comunes de cuadrículas estructurales que funcionan a lo largo de las diferentes páginas. Los layout están diseñados para escalar en todas las distintas pantallas con sus respectivos tamaños y facilitará el desarrollo de la interfaz de usuario y para finalizar te permitirá crear apps escalables.
Las líneas guía de un layout también alienta a las apps para conseguir un aspecto coherente gracias al uso de los mismos elementos visuales, cuadrículas estructurales y reglas de espaciado general a lo largo de todas las plataformas y tamaños de pantalla. La consistencia visual y estructural crea un entorno para el usuario que es fácilmente de reconocer en cualquier producto, lo cual proporciona a los usuarios un alto nivel de familiaridad y comodidad.
Antes de ahondar en los detalles de los layout, considera las reglas de como se comporta material y como ha sido elaborado.
Arte de papel
En material design, cada píxel dibujado por una aplicación se basa en una hoja de papel. El papel tiene un color de fondo plano y puede tener diferentes tamaños cubrir una variedad de propósitos. Un layout típico se compone de múltiples hojas de papel.
El sistema puede dibujar píxeles para elementos tales como las barras de estado o del sistema, las cuales no se basan en papel. Esto ayuda a pensar que los elementos del sistema están colocados justo detrás del cristal de la pantalla, sobre una superficie que separa el contenido de la app de la misma.
Organización del papel
Las uniones se crean cuando dos hojas de papel comparten toda la longitud de un borde en común. Las hojas unidas por una unión, generalmente se mueven juntas.
Los escalones se crean cuando dos hojas de papel se superponen. Las hojas que tienen diferente posición en el eje Z normalmente se moverán de forma independiente respecto de las otras.
Toolbars de papel (Barras de herramientas de papel)
Una toolbar es una banda de papel que se usa para mostrar acciones. Las acciones se agrupan una al lado de otra en la toolbar. Las acciones de navegación, como el icono del menú del navigation drawer (menú lateral o cajón de navegación) o la flecha de volver atrás, aparecen a la izquierda, mientras que las acciones contextuales aparecen en la derecha.
Las acciones de la izquierda y de la derecha en una toolbar nunca se cortan por otra hoja de papel. Sin embargo, una toolbar puede limitar su longitud para ser menor que la longitud total de su papel.
Las toolbars forman un escalón frecuentemente sobre otra hoja de papel que muestra el contenido relacionado con las acciones de la toolbar. Esas hojas de papel se desplazan por debajo de la toolbar, y por ende, la toolbar corta el papel en el punto de entrada, previniendo que pase a través del lado contrario.
Una toolbar también puede presentarse inicialmente como una unión con una segunda hoja de papel, pero al desplazarse esta última, la toolbar se eleva para formar un escalón. Esta variante se conoce como cascada.
De forma alternativa, la toolbar puede mantener su unión, pero se ocultará fuera de la pantalla cuando las hojas de papel se muevan y la “empujen”.
Las toolbars tienen una altura estándar de 56 dp para móviles y 64 dp para ordenadores, pero pueden ser más altas. Cuando son más altas, las acciones pueden colocarse tanto arriba como abajo de la toolbar.
Las toolbars pueden cambiar su altura de forma dinámica una vez que se fijen. Cuando se reescalan, se tienen que asentar correctamente.
Acciones flotantes
Una acción flotante es una hoja de papel circular separada de una toolbar.
Una acción flotante representa una acción singular importante. Una acción flotante puede colocarse encima de un escalón si está relacionada con el contenido del papel que crea ese escalón.
Puedes ver más información sobre Principios en la página oficial de Google en inglés pulsando aquí.