Diseño

En esta sección, se proporcionan pautas de diseño para diseños de pantalla que se pueden ajustar a un rango de tamaños de pantalla.

Los valores de padding y línea clave que se definen aquí se usan en Componentes, Especificaciones de contenido multimedia, Especificaciones del Centro de notificaciones y Especificaciones del Teléfono.

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

  • Basar los diseños en categorías de tamaño de pantalla adecuadas
  • Usa una cuadrícula de 8 dp para la alineación
  • Establece el ancho de los márgenes en un 12% del espacio de trabajo de la app
  • Colocar barras de desplazamiento y recursos de navegación en los márgenes
  • Usa padding para un espaciado fijo entre elementos

Conceptos clave de diseño

  • Espacio de trabajo de la app: Es el área de la pantalla disponible para una app después de considerar el espacio de pantalla que ocupan el fabricante del vehículo y las funciones de la IU del sistema.
  • Categorías de tamaño de pantalla: Un conjunto de 4 rangos de ancho de pantalla (estándar, ancho, extraancho y superancho) y 3 rangos de altura de pantalla (corto, estándar y alto), donde "pantalla" se refiere al espacio de trabajo de la app en lugar del espacio completo de borde a borde.
  • Padding: Es un conjunto de valores de espaciado que especifican un espaciado vertical y horizontal fijo entre elementos y componentes de un diseño.
  • Líneas clave: Es un conjunto de valores de espaciado de ancho variable, determinados por categorías de ancho, que indican el espacio horizontal entre un margen o borde de componente y un elemento en un diseño.
  • Área flexible: Es una parte de un componente, a veces asignado un valor mínimo o máximo, que se puede ajustar para adaptarse 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 que queda después de considerar el espacio de pantalla que ocupan las funciones del fabricante del vehículo y de la IU del sistema. El espacio de trabajo de la app está diseñado para 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 condiciones de navegación para la app.

Ejemplos de espacios de trabajo de apps
Ejemplos de varios espacios de trabajo de las apps

Tamaños de pantalla

Los diseños de especificaciones de referencia están vinculados a un conjunto de categorías de tamaño de pantalla basadas en el ancho y la altura del espacio de trabajo de la app.

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

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

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

Categorías de ancho

Ilustración de puntos de interrupción de ancho
Standard Masiva Extraancho Superancho
Rango de ancho de pantalla 690-929 dp 930-1279 dp 1,280-1,919 dp ≥1,920 dp

Categorías de altura

Ilustración del punto de interrupción de altura
Short Standard Personas altas
Rango de altura de pantalla De 0 a 609 dp 610-1199 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 los elementos de la IU en las especificaciones están separados por múltiplos de 8 dp.

Existen dos tipos de espaciado:

  • Padding, para espaciado de ancho y altura fijos

  • Líneas clave, para espaciado de ancho variable


Padding

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

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

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

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

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


Líneas clave

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

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

Estos son los valores de las líneas clave para cada ancho de pantalla:

Especificación de referencia de los valores de las líneas clave
Ancho de la pantalla Standard Masiva 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 con especificaciones de referencia proporcionan pautas para escalar apps a diferentes tamaños de pantalla. Para ayudar con el escalamiento fluido, las especificaciones suelen incluir lo siguiente:

  • Un área flexible, que es parte de un componente que los fabricantes de vehículos deben expandir o contraer para adaptarse al tamaño de pantalla específico
  • Anchos mínimos y máximos recomendados para el área flexible, destinados a evitar que los componentes de ajuste tengan tamaños no deseados
  • Líneas clave que se usan para mantener un espaciado horizontal y proporcional de los elementos, que se escalan de manera diferente según la categoría del ancho de la pantalla.
  • Padding, para especificar un espaciado fijo entre componentes y elementos

De manera opcional, algunas especificaciones especifican si se ocultan o se muestran ciertos elementos en función del ancho de la pantalla.

Ejemplo 1: Barra de control minimizada

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

Especificación de la barra de control minimizada
Especificación de la barra de control minimizada

La especificación de una barra de control minimizada incluye 2 pautas de escalamiento:

  1. El elemento cuadrado a la izquierda (generalmente se usa para la portada de álbum) debería aparecer solo cuando el ancho de la pantalla sea de 930 dp o superior.
  2. La sección de ancho flexible del medio nunca debe ser inferior a 440 dp y se puede ampliar para pantallas más anchas, siempre que el ancho total del componente no exceda los 1,028 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 siguiendo las recomendaciones de los diseños de referencia.

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

Ejemplo 2: Cuadrículas

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

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

La cantidad recomendada de columnas (3 en pantallas más angostas, 4 en pantallas más anchas) depende del tamaño de la pantalla. El ancho y la altura de fila de las columnas 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 escalar las cuadrículas a pantallas más anchas y angostas siguiendo las recomendaciones de los diseños de referencia.

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