Contenidos
Cuadrículas base
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.
Líneas clave y espaciado
Móviles
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.
Líneas clave verticales y márgenes horizontales
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.
Líneas clave verticales y márgenes horizontales
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.
Tablets
Ordenador
Líneas clave de incremento
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.
Tamaño del objetivo táctil
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:
- Tus elementos nunca serán más pequeños que el tamaño mínimo recomendado de 7 mm independientemente de la pantalla en la que se muestren.
- Consigues un buen equilibrio entre los elementos de la UI y el resto de contenido en pantalla.
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í.