Contenidos
Todos los componentes se alinean mediante una cuadrícula base cuadrada de 8 dp. Los textos utilizan una cuadrícula base de 4 dp para su alineamiento. La iconografía en las toolbars se alinean en una cuadrícula base de 4 dp. Todo esto se aplica tanto a móviles, como a las tabletas y ordenadores.
Para más información visita componentes.
Puedes ver más información en Tipografía.
La plantilla de los layout de los móviles tiene una amplia variedad de pantallas e información sobre las líneas clave y espaciado a lo largo de los bordes y elementos de la pantalla. Aquí tienes unos ejemplos de las pantallas que se incluyen en la descarga.
Esta pantalla muestra como se alinean los iconos, los avatares y las listas de dos líneas se alinean a la izquierda y como el botón de acción flotante de 56 dp se alinean a la derecha.
Las líneas clave verticales están a 16 dp de los bordes izquierdo y derecho. El contenido asociado con un icono o avatar se alinea a 72 dp desde el borde izquierdo.
Los margenes horizontales son de 16 dp en los móviles.
Esta pantalla muestra como se alinean los iconos, los avatares, las listas de dos líneas, un subtítulo y un botón de acción flotante de 40 dp se alinean a la izquierda y como ciertos iconos se alinean a la derecha.
Las líneas clave verticales están a 16 dp de los bordes izquierdo y derecho. El contenido asociado con un icono o avatar se alinea a 72 dp desde el borde izquierdo.
Los margenes horizontales son de 16 dp en los móviles.
Pantalla que muestra como se alinea unos iconos a la izquierda y otros iconos y el botón flotante de 56 dp a la derecha.
Las líneas clave verticales están a 16 dp de los bordes izquierdo y derecho. El contenido asociado con un icono o avatar se alinea a 72 dp desde el borde izquierdo. Una línea clave extra se añade a 32 dp desde la derecha para permitir alinear el icono del botón flotante y los iconos inferiores.
Los margenes horizontales son de 16 dp en los móviles.
Pantalla que muestra como se alinean iconos y textos en la izquierda además del botón flotante, iconos y textos en la derecha.
Las líneas clave verticales están a 16 dp de los bordes izquierdo y derecho. El contenido asociado con un icono o avatar se alinea a 72 dp desde el borde izquierdo.
Los margenes horizontales son de 16 dp en los móviles.
Pantalla que muestra un menú lateral de navegación y la alineación de iconos, avatares y textos en la izquierda además de la alineación de los iconos de la derecha.
Las líneas clave verticales están a 16 dp de los bordes izquierdo y derecho del menú lateral de navegación.
El contenido asociado con un icono o avatar se alinea a 72 dp desde la izquierda.
La anchura total del menú lateral de navegación es igual a la anchura total de la pantalla menos la altura de la action bar o toolbar, en este caso de 56 dp esta última.
Los margenes horizontales son de 16 dp en los móviles.
Aplica estas líneas a la anchura de pantalla y a las anchuras de los elementos de la UI de los móviles, tablets y ordenadores.
Una línea clave de incremento define, valga la redundancia, incrementos, un ejemplo puede ser la altura de la toolbar, la cual puede usar múltiples incrementos para determinar el tamaño y posición de otros elementos en la app.
Aplica la sobretodo en ordenadores, a menudo en tablets, y raramente en móviles. El número de incrementos variará en función del tamaño de pantalla.
El tamaño mínimo de un objetivo táctil es de 48 dp. Tienes que tener esto siempre en mente cuando estés espaciando los iconos (24 dp) o los avatares (40 dp) en un layout. Los objetivos táctiles no deberían superponerse.
De media, 48 dp se traduce a un tamaño físico de aproximadamente 9 mm (con alguna variación). Este tamaño resulta cómodo a la hora de poder tocarlo y se encuentra dentro del rango de tamaños objetivo recomendados (7-10 mm) para elementos en una pantalla táctil, además asegura que los usuarios serán capaces de forma fiable y precisa de poder tocarlos con sus dedos.
Si diseñas tus elementos para tener al menos 48 dp de altura y anchura, te asegurarás de que:
Puedes ver más información sobre Métricas y líneas clave en la página oficial de Google en inglés pulsando aquí.
