Esta sección proporciona 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 utilizan en Componentes , especificaciones de medios , especificaciones del Centro de notificaciones y especificaciones del Marcador .
Orientación de un vistazo (TL:DR):
- Diseños básicos según categorías de tamaño de pantalla adecuadas
- Utilice una cuadrícula de 8dp para la alineación
- Establezca el ancho de los márgenes al 12 % del espacio de trabajo de la aplicación
- Coloque barras de desplazamiento y ayudas de navegación en los márgenes
- Utilice relleno para un espaciado fijo entre elementos
Conceptos clave de diseño
- Espacio de trabajo de la aplicación: el área de la pantalla disponible para una aplicación después de tener en cuenta el espacio de pantalla ocupado por el fabricante del automóvil y las funciones de la interfaz de usuario del sistema.
- Categorías de tamaño de pantalla: un conjunto de 4 rangos de ancho de pantalla (estándar, ancho, extra ancho y súper ancho) y 3 rangos de altura de pantalla (corto, estándar y alto), donde "pantalla" se refiere al espacio de trabajo de la aplicación en lugar del espacio completo de borde a borde.
- Relleno: un conjunto de valores de espaciado que especifican el espaciado vertical y horizontal fijo entre elementos y componentes en un diseño
- Líneas clave: 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 un componente y un elemento en un diseño.
- Área flexible: una parte de un componente, a veces a la que se le asigna un valor mínimo o máximo, que se puede escalar para adaptarse al tamaño de la pantalla.
Espacio de trabajo de la aplicación
El espacio de trabajo de una aplicación es el área de pantalla disponible después de considerar el espacio ocupado por las funciones del fabricante del vehículo y la interfaz de usuario del sistema. El espacio de trabajo de la aplicación contiene los márgenes izquierdo y derecho, así como el lienzo de la aplicación, que es el área de contenido principal de la aplicación.
Cada margen debe ser igual al 12 % del ancho del espacio de trabajo de la aplicación. Los márgenes suelen contener barras de desplazamiento y funciones de navegación.
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 aplicación .
En las especificaciones de estas directrices, estas categorías se nombran por su 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:
- Espaciado de líneas clave en componentes y elementos
- Escalado de áreas flexibles de componentes
- Cuándo ocultar o mostrar elementos opcionales, como la carátula del álbum en la barra de control minimizada
Categorías de ancho
| Estándar | Ancho | Extra ancho | Súper ancho | |
|---|---|---|---|---|
| Rango de ancho de pantalla | 690 – 929 ppp | 930 – 1279dp | 1280 – 1919dp | ≥ 1920 ppp |
Categorías de altura
| Corto | Estándar | Alto | |
|---|---|---|---|
| Rango de altura de la pantalla | 0 – 609 ppp | 610 – 1199dp | ≥ 1200 ppp |
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 interfaz de usuario en las especificaciones están separados por múltiplos de 8 dp.
Hay dos tipos de espaciado:
Relleno , para espaciado de ancho fijo y altura fija
Líneas clave , para espaciado de ancho variable
Relleno
El relleno establece un espaciado fijo de ancho y alto entre los componentes en un diseño de especificaciones de referencia. También puede determinar un espaciado fijo entre los elementos de un componente, como el espacio entre los números adyacentes en el componente del teclado numérico. Normalmente, cuanto más estrecha sea la relación entre dos elementos, más estrecho será el relleno entre ellos.
Hay 9 valores de relleno, designados como P0 – P8.
Aquí están los valores de relleno y sus tamaños correspondientes:
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4dp | 8dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |
A diferencia de las líneas clave , cuyos valores de espaciado cambian según el ancho de pantalla, los valores de relleno se mantienen constantes. Por ejemplo, P1 siempre es 8 dp. Sin embargo, en algunos casos, la distancia entre un conjunto específico de componentes o elementos puede tener valores de relleno diferentes en los diseños de referencia para distintos tamaños de pantalla. Por ejemplo, el espaciado vertical recomendado entre 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 el relleno entre elementos en una especificación de referencia, las líneas clave especifican la distancia entre un elemento y el margen o borde más cercano de un componente. Su valor cambia según el ancho de la pantalla. Ofrecen una forma práctica de adaptar un diseño a diferentes tamaños de pantalla, manteniendo un espaciado horizontal proporcional entre los elementos.
Hay cinco líneas clave, designadas como KL0 a KL4.
Aquí están los valores de línea clave para cada ancho de pantalla:
| Ancho de pantalla | Estándar | Ancho | Extra ancho | Súper ancho |
|---|---|---|---|---|
| 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 pautas para escalar las aplicaciones a diferentes tamaños de pantalla. Para facilitar un escalado fluido, las especificaciones suelen incluir:
- Un área flexible , que es una parte de un componente que los fabricantes de automóviles deben expandir o contraer para adaptarse a su tamaño de pantalla específico.
- Anchos mínimos y máximos recomendados opcionales para el área flexible, destinados a evitar escalar los componentes a tamaños no deseados
- Líneas clave utilizadas para mantener un espaciado horizontal proporcional de los elementos, que se escalan de manera diferente según la categoría de ancho de pantalla.
- Relleno , para especificar un espaciado fijo entre componentes y elementos
Opcionalmente, algunas especificaciones especifican si ocultar o mostrar 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 especificaciones de referencia recomienda flexibilizar el ancho del componente y ocultar un elemento no esencial en tamaños de pantalla más pequeños.
La especificación para una barra de control minimizada incluye 2 pautas de escala:
- El elemento cuadrado de la izquierda (normalmente utilizado para la carátula del álbum) debe aparecer solo cuando el ancho de la pantalla sea de 930 dp o mayor, y
- La sección de ancho flexible en el medio nunca debe ser más angosta que 440 dp y se puede ampliar para pantallas más anchas siempre que el ancho total del componente no exceda los 1028 dp.
Ejemplo 2: Cuadrículas
Las cuadrículas son un ejemplo de componentes que se pueden colocar y dimensionar en columnas y filas dentro de un diseño.
El número recomendado de columnas (3 en pantallas estrechas, 4 en pantallas anchas) depende del tamaño de la pantalla. El ancho de columna y la altura de fila se pueden ajustar dentro de una categoría de pantalla, siempre que las cuadrículas no sean inferiores a los anchos mínimos recomendados. La animación a continuación muestra cómo ajustar la escala de las cuadrículas a pantallas más anchas y más estrechas siguiendo las recomendaciones de los diseños de referencia.
