Hay paralelismos entre la organización de objetos en el tanto en el mundo físico como en el espacio de material design. En el mundo físico, los objetos pueden ser apilados o fijados uno respecto a otro, pero no pueden pasar a través de ellos. Los objetos proyectan sombras y reflejan luces.
Esas cualidades son aplicadas a los objetos de material design, y ayudan a crear un modelo espacial que pueda ser consistentemente aplicado a lo largo de todas las apps de forma que sea familiar a los usuarios.
Contenidos
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.
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 en reposo para un tipo de componente tiene que ser coherente en todas las apps dentro de una plataforma. Sin embargo, el mismo tipo de componente puede tener diferentes elevaciones en función de la plataforma en la que se encuentre, dependiendo del espesor del entorno (por ejemplo, la televisión tiene una espesor más grande que un móvil o un ordenador de escritorio).
Elevación receptiva y desplazamientos de elevación dinámicos
Ciertos tipos de componentes tienen una elevación receptiva, es decir, cambian su elevación en respuesta a las entradas del usuario o los eventos del sistema. Los diferentes estados de los componentes (normal, enfocado, presionado, etc) pueden provocar cambios de elevación, los cuales serán correctamente implementados usando desplazamientos de elevación dinámicos.
Los desplazamientos de elevación dinámicos son relativos al estado de reposo del componente, y actúan como la elevación que alcanzará el componente al cambiar entre los estados dados del mismo. También se aseguran de que los cambios de elevación para una acción determinada son coherentes en un tipo de componente. Por ejemplo, para todos los componentes que se eleven al presionar sobre ellos tienen el mismo cambio de elevación, relativa a su posición actual/reposo.
Una vez que el evento de entrada es completado o cancelado, el componente regresará a su elevación de reposo.
Sombras funcionales
Las sombras proporcionan varias señales visuales importantes sobre la organización de los objetos en el espacio. Las sombras son el único elemento que nos indican la cantidad de separación entre las superficies. La elevación de un objeto determina la apariencia visual de su sombra.
En los movimientos, las sombras también proporcionan señales relacionadas con la dirección del movimiento. Es otra herramienta para indicar si la distancia entre dos superficies está aumentando o disminuyendo.
Relaciones entre los objetos
Jerarquía de los Objetos
En función de cómo organices los objetos, o las colecciones de objetos, en una app, se determina cómo se moverán en relación de unos frente a otros. Los objetos pueden moverse de forma independiente o estar limitados por otros de mayor jerarquía.
Todos los objetos son parte de una jerarquía descrita en términos de relaciones padre-hijo. El hijo en cada una de esas relaciones es el elemento que se subordina al elemento padre. Los objetos pueden ser hijos tanto del sistema como de otros objetos.
Especificaciones padre-hijo:
- Cada objeto tiene un padre.
- Cada objeto puede tener un número de hijos.
- Los hijos heredan las propiedades, de sus padres, relacionadas con la transformación, como la posición, la rotación, la escala y la elevación.
- Los hermanos son objetos del mismo nivel en una jerarquía.
Excepciones
Los elementos emparentados con el origen o la raíz, como los elementos principales de la UI, se mueven de forma independiente al resto de objetos. Por ejemplo, el botón flotante (FAB) no se desplaza con el contenido. Otros elementos que se incluyen en estas excepciones son:
- Menús laterales o navigation drawers.
- Action bars o toolbars.
- Diálogos.
Interacciones
El cómo los objetos interactúan entre ellos viene determinado por su ubicación en la jerarquía padre-hijo.
Por ejemplo:
- Los hijos tienen una separación mínima en el eje Z respecto a su padre; los otros objetos no se insertan entre los padre y los hijos.
- En un desplazamiento a través de una colección de tarjetas, las tarjetas son hermanas entre ellas, así que se moverán juntas al mismo tiempo. Son hijas de un objeto de colección de tarjetas el cual controla sus movimientos.
Elevación
La elevación de tus objetos, sus posiciones en el espacio Z, depende de la jerarquía del contenido que tu quieras expresar y si un objeto necesita moverse de forma independiente respecto a otros.
El botón elevado (hijo) se desplaza por la pantalla si el contenido del padre se desplaza.
Las tarjetas (hermanas e hijas de la colección de tarjetas) se desplazan por la pantalla mientras que el botón flotante (su propio padre) se mantiene en la misma posición.
Puedes ver más información sobre Objetos en un espacio 3D en la página oficial de Google en inglés pulsando aquí.