Diseño

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En esta sección, se proporcionan pautas de diseño para diseños de pantalla que se pueden escalar en una variedad de tamaños de pantalla.

Los valores de relleno y de línea clave definidos aquí se usan en Componentes, Especificaciones de medios, Especificaciones del centro de notificaciones y Especificaciones del marcador.

Resumen de orientación (TL:DR):

  • Diseños base en categorías de tamaño de pantalla apropiadas
  • Usa una cuadrícula de 8 dp para la alineación
  • Establecer anchos de margen al 12% del espacio de trabajo de la app
  • Coloca barras de desplazamiento y ayudas de navegación en los márgenes
  • Usa relleno para el espaciado fijo entre elementos

Conceptos clave sobre el diseño

  • Espacio de trabajo de la app: El área de la pantalla disponible para una app después de considerar el espacio de pantalla que ocupan las funciones de IU del fabricante del sistema y el fabricante del vehículo.
  • Categorías de tamaño de pantalla: Un conjunto de 4 rangos de ancho de pantalla (estándar, ancho, extra amplio y superancho), y 3 rangos de alto de pantalla (corta, estándar y alta), en el que "pantalla" se refiere al espacio de trabajo de la app en lugar de al espacio completo de borde a borde
  • Padding:Es un conjunto de valores de espaciado que especifica un espacio vertical y horizontal fijo entre los elementos y componentes de un diseño.
  • Líneas clave: un conjunto de valores de espaciado de ancho variable, determinado por categorías de ancho, que indican el espacio horizontal entre un margen o un borde de componente y un elemento en un diseño
  • Área flexible: Es una parte de un componente, a veces un valor mínimo o máximo, que se puede ajustar para ajustarse al tamaño de la pantalla.

Espacio de trabajo de la app

El espacio de trabajo de una app es el área de pantalla disponible restante después de considerar el espacio de pantalla que ocupan las funciones de IU del fabricante y del fabricante del vehículo. El espacio de trabajo de la app debe contener los márgenes izquierdo y derecho, y el lienzo de la app, que es el área de contenido principal de la app.

Cada margen debe ser igual al 12% del ancho del espacio de trabajo de la app. Los márgenes suelen contener barras de desplazamiento y opciones de navegación para la app.

Ejemplos del espacio de trabajo de la app
Ejemplos de espacios de trabajo de varias apps

Tamaños de pantalla

Los diseños con especificaciones de referencia se vinculan a un conjunto de categorías de tamaño de pantalla en función del ancho y la altura del espacio de trabajo de la app.

En las especificaciones de estos lineamientos, se hace referencia a estas categorías por su nombre. Por ejemplo, "Ancho" se refiere a todos los anchos de pantalla en el rango de 930 dp a 1,279 dp.

Las categorías de tamaño de pantalla afectan las recomendaciones para lo siguiente:

  • Interlineado en los componentes y elementos
  • Escalamiento de áreas flexibles de componentes
  • Cuándo ocultar o mostrar elementos opcionales, como la portada del álbum en la barra de control minimizada

Categorías de ancho

Ilustración de puntos de interrupción de ancho
Estándar Amplia Extraancho Superancho
Rango de ancho de la pantalla 690 – 929dp 930 – 1,279 dp 1280 – 1919dp ≥ 1920dp

Categorías de altura

Ilustración del punto de interrupción de altura
Corto Estándar Alta
Rango de altura de pantalla 0 a 609 dp 610 – 1,199 dp ≥ 1,200 dp

Espaciado

Los diseños de especificaciones de referencia se estructuran en una cuadrícula de 8 dp. En la práctica, esto significa que los componentes y elementos de la IU de las especificaciones están separados por múltiplos de 8 dp.

Existen dos tipos de espaciado:

  • Padding, para espacios de ancho fijo y altura fija

  • Líneas clave, para espacios de ancho variable


Padding

El relleno establece un espaciado de ancho fijo y altura fija entre los componentes en un diseño de especificación de referencia. También puede determinar el espaciado fijo entre elementos dentro de un componente, como el espacio entre las orientaciones numéricas adyacentes en el componente del teclado. Por lo general, cuanto más cercana sea la relación entre dos elementos, más estrecha será el padding entre ellos.

Hay 9 valores de relleno, designados como P0 a P8.

Estos son los valores de relleno y sus tamaños correspondientes:

Especificación de referencia de valores de relleno
P0 P1 P2 P3 P4 P5 P6 P7 P8
4 dp 8 dp 12dp 16dp 24dp 32dp 48dp 64dp 96dp

A diferencia de las líneas clave, que cambian los valores de espaciado según las categorías de ancho de pantalla, los valores de padding permanecen constantes. Por ejemplo, P1 es siempre de 8 dp. Sin embargo, en algunos casos, la distancia entre un conjunto particular de componentes o elementos puede tener valores de relleno diferentes en los diseños de referencia y especificación para diferentes tamaños de pantalla. Por ejemplo, el espacio vertical recomendado entre los elementos de cuadrícula es P4 para pantallas cortas y P5 para pantallas estándar y altas.


Líneas clave

En lugar de indicar el relleno entre los elementos de una especificación de referencia, las líneas clave especifican a qué distancia está un elemento del margen o borde más cercano de un componente. Las líneas clave cambian el valor en función del ancho de la pantalla. Ofrecen una manera conveniente de escalar un diseño a diferentes tamaños de pantalla y, al mismo tiempo, mantienen el espaciado horizontal proporcional de los elementos.

Hay 5 líneas clave, designadas de KL0 a KL4.

A continuación, se muestran los valores de líneas clave para el ancho de cada pantalla:

Especificación de referencia de valores de líneas clave
Ancho de la pantalla Estándar Amplia Extraancho Superancho
KL0 16dp 24dp 24dp 32dp
KL1 24dp 32dp 32dp 48dp
KL2 96dp 112dp 112dp 112dp
KL3 112dp 128dp 128dp 152dp
KL4 148dp 168dp 168dp 168dp

Estrategias de escalamiento

Los diseños de especificaciones de referencia proporcionan lineamientos para escalar apps a diferentes tamaños de pantalla. Para facilitar el escalamiento, las especificaciones suelen incluir lo siguiente:

  • Un área flexible, que es parte de un componente que los fabricantes de automóviles deberían expandir o contraer para ajustarse al tamaño de pantalla específico
  • Anchos mínimos y máximos recomendados para el área flexible, a fin de evitar el escalamiento de componentes a tamaños no deseados
  • Líneas clave que se utilizan para mantener el espaciado proporcional y horizontal de los elementos, que se ajustan de manera diferente según la categoría del ancho de la pantalla
  • Padding, para especificar el espacio fijo entre los componentes y los elementos

De manera opcional, algunas especificaciones especifican si se ocultan o muestran ciertos elementos según el ancho de la pantalla.

Ejemplo 1: Barra de control minimizada

La barra de control minimizada es un ejemplo de un componente para el cual el diseño de referencia-especificación recomienda flexionar el ancho del componente y ocultar un elemento no esencial en tamaños de pantalla más pequeños.

Especificación mínima de la barra de control
Especificación mínima de la barra de control

La especificación de una barra de control minimizada incluye dos lineamientos de escalamiento:

  1. El elemento cuadrado a la izquierda (que generalmente se usa para la carátula del álbum) debe aparecer solo cuando el ancho de la pantalla sea de 930 dp o superior.
  2. La sección de ancho flexible en el medio nunca debe ser más angosta de 440 dp y se puede escalar verticalmente para pantallas más anchas, siempre y cuando todo el ancho del componente no supere los 1028 dp.
En la siguiente animación, se muestra cómo la barra de control minimizada se puede ajustar a pantallas más anchas y angostas mediante las recomendaciones de los diseños de referencia.

Animación minimizada de la barra de control
Animación de la barra de control minimizada

Ejemplo 2: cuadrículas

Las cuadrículas son un ejemplo de los componentes que se pueden colocar y ajustar en columnas y filas dentro de un diseño.

Especificaciones de la red adaptable
Especificaciones adaptables de la cuadrícula

La cantidad recomendada de columnas (3 en pantallas más angostas y 4 en pantallas más anchas) depende del tamaño de la pantalla. El ancho de las columnas y su altura se pueden ajustar dentro de una categoría de pantalla, siempre y cuando las cuadrículas nunca sean inferiores a los anchos mínimos recomendados. En la siguiente animación, se muestra cómo se pueden ajustar las cuadrículas a pantallas más anchas y angostas mediante las recomendaciones de los diseños de referencia.

Animación adaptable de la cuadrícula
Animación adaptable de la cuadrícula