Formas

Las formas ayudan a enfatizar la importancia de algunos elementos de la pantalla en relación con otros.

Orientación de un vistazo (TL;DR):

  • Utilice esquinas más redondeadas (radio de esquina más alto) para acciones y componentes principales
  • Utilice esquinas más cuadradas y menos redondeadas (radio de esquina más bajo) para elementos de bajo énfasis

Valores del radio de las esquinas

Android for Cars proporciona un conjunto de valores de radio de esquina destinados a enfatizar la importancia de varios elementos de la pantalla en relación con otros.

Valores del radio de las esquinas
R0 R1 R2 R3 R4
0dp 4dp 8dp 16dp Lleno

Usando el redondeo para enfatizar

Las formas redondeadas y cuadradas en Android Automotive crean una jerarquía visual que dirige la atención del usuario a los elementos con mayor énfasis. Estos elementos tienen esquinas más redondeadas y un radio mayor. Los elementos con menor énfasis tienen esquinas menos redondeadas y un radio menor.

Ejemplos de los cuatro niveles de radio de esquina
Ejemplos de cuatro niveles de radio de esquina, desde el más bajo (0dp = cuadrado) hasta el más alto (circular)

0dp — Línea base

Use esquinas cuadradas (0dp) para los elementos de línea base que no necesiten un énfasis adicional. Las estructuras de diseño básicas, como barras de herramientas o listas, deben usar esquinas cuadradas (0dp). Las imágenes también deben tener esquinas cuadradas (0dp), a menos que estén enmascaradas por un contenedor redondeado (como una tarjeta) o seleccionadas.

Ejemplo de esquina cuadrada
Las portadas de los álbumes en la cuadrícula de la derecha no necesitan ningún énfasis adicional en relación con las demás o con los otros elementos mostrados, por lo que tienen esquinas 0dp (detalle mostrado a la izquierda).

8dp — Énfasis bajo

8dp es el radio de esquina predeterminado para formas redondeadas. Úselo para indicar elementos interactivos de bajo énfasis, como tarjetas y contenedores.

Ejemplo de énfasis bajo de 8dp
La tarjeta de notificación que se muestra aquí usa el radio de esquina predeterminado de 8dp (que se muestra a la izquierda), lo que le da menos énfasis que los botones de acción en la tarjeta (como se muestra a la derecha), que son más importantes.

16dp — Énfasis medio

Utilice un radio de esquina de 16dp para componentes con énfasis medio, incluidos elementos interactivos y componentes expandibles.

Ejemplo de esquina mediana de 16 dp
Aquí, se utiliza un radio de esquina de 16dp para proporcionar un énfasis medio para una hoja inferior, que temporalmente es más importante que el contenido actual en la pantalla.

Circular — Alto énfasis

Las formas circulares tienen un mayor impacto visual que las formas predominantemente rectilíneas. Deben reservarse para componentes de alto impacto, como bloques de fabricación (FAB), chips y widgets.

Ejemplo de esquina completamente redondeada con gran énfasis
Aquí se utilizan esquinas completamente redondeadas y formas circulares para dar el máximo énfasis al FAB en la parte inferior izquierda, los botones de acción en la parte superior derecha y el FAB en la parte inferior izquierda.