Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Las formas ayudan a enfatizar la importancia de algunos elementos de la pantalla en comparación con otros.
Orientación de un vistazo (resumen):
Usa esquinas más redondeadas (radio de esquina más alto) para acciones y componentes principales
Usa esquinas más cuadradas y menos redondeadas (radio de esquina inferior) para elementos de bajo énfasis
Valores del radio de esquina
Android para vehículos proporciona un conjunto de valores de radio de esquinas destinados a enfatizar la importancia de varios elementos de pantalla en relación con otros.
R0
R1
R2
R3
R4
0dp
4 dp
8 dp
16dp
Completo
Cómo usar el redondeo para enfatizar
Las formas redondeadas y cuadradas de Android Automotive crean una jerarquía visual que atrae la atención del usuario hacia los elementos con mayor énfasis. Los elementos de énfasis más alto tienen esquinas más redondeadas, con un radio de esquina más grande. Los elementos de énfasis bajo tienen esquinas menos redondeadas, con un radio de esquina más pequeño.
Ejemplos de cuatro niveles de radio de esquinas, desde el más bajo (0 dp = cuadrado) hasta el más alto (circular)
0 dp: modelo de referencia
Usa esquinas de 0 dp (cuadradas) para los elementos del modelo de referencia que no necesitan énfasis adicional. Las estructuras de diseño básicas, como las barras de herramientas o las listas, deben usar esquinas de 0 dp. Las imágenes también deben tener esquinas de 0 dp, a menos que estén enmascaradas por un contenedor redondeado (como una tarjeta) o estén en un estado seleccionado.
Las portadas de los álbumes de la cuadrícula de la derecha no necesitan énfasis adicional entre sí ni con los demás elementos que se muestran, por lo que tienen esquinas de 0 dp (detalles a la izquierda).
8 dp: Énfasis bajo
8 dp es el radio de esquina predeterminado para las formas redondeadas. Usa esta forma para indicar elementos interactivos de bajo énfasis, como tarjetas y contenedores.
La tarjeta de notificación que se muestra aquí usa el radio de esquina predeterminado de 8 dp (que se muestra a la izquierda), lo que le da menos énfasis que los botones de acción de la tarjeta (como se muestra a la derecha), que son más importantes.
16 dp: énfasis medio
Usa un radio de esquina de 16 dp para los componentes con énfasis medio, incluidos los elementos interactivos y los expandibles.
En este caso, se usa un radio de esquina de 16 dp para proporcionar énfasis medio a una hoja inferior, lo que, por el momento, es más importante que el contenido actual en pantalla.
Circular: Énfasis alto
Las formas circulares tienen un mayor impacto visual en el caso de las formas mayormente rectilíneas. Deben reservarse para los componentes de alto énfasis, como BAF, chips y widgets.
Aquí se usan esquinas completamente redondeadas y formas circulares para dar el máximo énfasis al BAF en la parte inferior izquierda, a los botones de acción en la parte superior derecha y al BAF en la parte inferior izquierda.
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2024-07-23 (UTC)"],[[["Use rounded corners with higher radius (e.g., 16dp, circular) for primary actions and important components like FABs and chips to draw user attention."],["Use less rounded or square corners (e.g., 0dp, 8dp) for lower-emphasis elements such as toolbars, lists, or background cards."],["Android Automotive provides a range of corner radius values (0dp, 4dp, 8dp, 16dp, Full) to create visual hierarchy and guide user focus."],["8dp is the default corner radius for rounded shapes and is suitable for low-emphasis interactive elements like cards and containers."],["Images typically use 0dp corners unless they need to be highlighted or are within a rounded container."]]],[]]
