Los diseños son plantillas estructurales que proporcionan un framework para mantener la coherencia visual en tu aplicación. Cuando se definen cuadrículas visuales, espaciado y secciones, los diseños establecen una estructura cohesiva y organizada para la presentación de información y elementos de la IU.
Lo más destacado
- A diferencia de la Web o los dispositivos móviles, las TVs tienen una relación de aspecto de pantalla fija de 16:9.
- Optimiza los diseños a lo largo de los ejes horizontales y verticales para facilitar el uso y el control.
Principios
Lineamientos que te ayudarán a tomar decisiones de diseño a la hora de diseñar diseños para TV.
Cómo diseñar para pantallas grandes
Desde la popularización de la HDTV, las TV rectangulares con una relación de aspecto de 16:9 se han convertido en la norma. Históricamente, las televisiones se fabricaban en forma cuadrada conocida como relación de aspecto de 4:3 o de 1.33 a 1.
Diseñar en la plataforma de Android
Cuando diseñes, usa dp para mostrar elementos de manera uniforme en pantallas con diferentes densidades, como en cualquier otro dispositivo que ejecute Android. Siempre diseña con una resolución MDPI de 960 px * 540 px.
A MDPI 1 px = 1 dp.
Los recursos deben orientarse a 1080p. De esta manera, el sistema Android puede reducir la escala de los elementos de diseño a 720p, si es necesario.
Garantizar la visibilidad y la seguridad del sobrebarrido
Asegúrate de que los elementos importantes sean siempre visibles para los usuarios. Para ello, coloca los elementos con un margen del 5% de 48 dp en los lados izquierdo y el derecho, y de 27 dp en las partes inferior y superior de un diseño. Esto garantiza que los elementos de pantalla del diseño estén dentro del sobrebarrido.
Llenar la pantalla completa
No ajustes ni recortes elementos de la pantalla de fondo para que queden en el área segura de sobrebarrido. En su lugar, permite la visualización parcial de elementos fuera de pantalla. Esto garantiza que todas las pantallas muestren correctamente los elementos del fondo y fuera de pantalla.
Optimiza con ejes
Piensa en cómo las personas usan el control remoto con la TV. Asegúrate de que la interfaz de la TV sea fácil de usar con el control remoto. Diseña cada dirección (hacia arriba, hacia abajo, hacia la izquierda, hacia la derecha) para tener un propósito y un patrón de navegación claros que ayuden a los usuarios a comprender cómo moverse por grandes grupos de opciones.
Diseño
El tamaño de las pantallas de TV varía según el dispositivo. Como una TV moderna tiene una relación de aspecto de 16:9, te recomendamos que diseñes tu app con un tamaño de pantalla de 960 px x 540 px. Esto garantiza que se pueda cambiar el tamaño de todos los elementos de forma proporcional para pantallas HD o 4K.
Márgenes de sobrebarrido
Los márgenes de sobrebarrido son los espacios entre el contenido y los bordes izquierdo y derecho de la pantalla.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
Estos márgenes protegen los elementos principales de posibles problemas de sobrebarrido. Para proteger el contenido y la información, usa un diseño de margen del 5% (58 dp en los lados y 28 dp en los bordes inferior y superior).
Columnas y medianiles
El contenido se coloca en áreas de la pantalla que tienen columnas y medianiles. El sistema de cuadrícula tiene 12 columnas. Los medianiles son los espacios entre las columnas que ayudan a dividir el contenido.
Usa 12 columnas de 52 dp de ancho con 20 dp de espacio entre ellas. Debe haber 58 dp de espacio en ambos lados y 4 dp de espaciado vertical entre líneas.
Patrones de diseño
Hay tres patrones de diseño disponibles según el propósito y el dispositivo de visualización que desees: diseño de pila horizontal, diseño de pila vertical y diseño de cuadrícula.
Diseño de la pila horizontal
Un diseño de pila horizontal organiza los componentes horizontalmente. Pueden variar en tamaño, proporción o formato. Este diseño se usa a menudo para agrupar contenido y componentes.
Diseño de pila vertical
Un diseño de pila vertical organiza los componentes de manera vertical, lo que permite un tamaño, una relación y un formato flexibles. Por lo general, se usa para agrupar varios tipos de texto, componentes interactivos y patrones de diseño.
GridLayout
Una cuadrícula es una colección de columnas y filas que se cruzan, y un diseño de cuadrícula muestra contenido en esta cuadrícula. Organiza el contenido de manera lógica, lo que facilita a los usuarios la navegación y la navegación.
Para evitar la superposición, es importante tener en cuenta el padding entre los elementos y el aumento de tamaño de los estados enfocados. Por ejemplo, cuando un componente enfocado (como una tarjeta) está destacado. Si usas nuestro diseño de cuadrícula sugerido (12 columnas en 52 dp, con medianiles en 20 dp), consulta Tarjetas para obtener vistas previas y diseños de componentes recomendados.
Estructuras de diseño
Estas son algunas estructuras de diseño que te ayudarán a tomar mejores decisiones a la hora de diseñar diseños de TV. Dividir las pantallas de TV horizontalmente puede ayudar a separar diferentes tipos de componentes, comunicar la jerarquía de la información y la lógica de navegación. Un panel puede contener varias columnas de unidades. Cada panel puede alojar diferentes patrones de diseño, como el diseño de pila y el diseño de cuadrícula.
Diseño de panel único
Un diseño de panel único puede ayudar a atraer la atención al contenido principal. Úsalo con experiencia enfocada en el contenido y páginas de información clave.
Diseño de dos paneles
Un diseño de 2 paneles funciona mejor cuando la página muestra contenido jerárquico. Se usa mucho en experiencias enfocadas en tareas.
Sobrecarga cognitiva
El contenido complicado y poco claro puede generar confusión, molestias y una caída en la participación. Haz que tu diseño sea escaneable, despejado y presente solo la información esencial.
Evita usar demasiados paneles para agrupar el contenido. Esto crea una carga cognitiva y jerarquía innecesarias para los usuarios.
Qué debes hacer
Qué no debes hacer
Jerarquía y navegación exprés
Los paneles separan y organizan el contenido visualmente. Ayudan a guiar a los usuarios y pueden crear una interfaz más intuitiva que mejore la experiencia.
Qué debes hacer
Qué no debes hacer
Plantillas de diseño
Las plantillas de diseño promueven el orden, la coherencia y la familiaridad. El diseño crea una experiencia de IU cómoda que comunique claramente dónde está el usuario y adónde puede ir.
Explorar
La plantilla del navegador muestra “clústeres” o filas de contenido multimedia en una pila vertical. Los usuarios navegan hacia arriba y hacia abajo para navegar por las filas y hacia la derecha y la izquierda para explorar el contenido de una fila específica.
Superposición izquierda
La plantilla de navegación izquierda muestra un panel superpuesto en el lado izquierdo de la pantalla. Por lo general, muestra la navegación o los elementos sobre los que puedes actuar relevantes para el contenido en segundo plano.
Superposición de la derecha
La plantilla superpuesta derecha muestra un panel superpuesto en el lado derecho de la pantalla. Por lo general, muestra elementos sobre los que puedes actuar independientemente del contenido en segundo plano.
Superposición central
En la plantilla de superposición central se muestra un elemento modal que se superpone sobre una vista existente. Se usa para comunicar información urgente o incitar a una decisión.
Superposición inferior
La plantilla de superposición inferior se usa comúnmente para las hojas inferiores. Las hojas inferiores son superficies que incluyen contenido complementario anclado a la parte inferior de la pantalla. Te permiten crear miniflujos sin perder el contexto de la página actual.
Acciones
La plantilla de acción muestra el título y el subtítulo a la izquierda, y las opciones o acciones a la derecha. Por lo general, se les pide a los usuarios que elijan una opción o realicen una acción con esta plantilla.
Detalles del contenido
La plantilla de detalles de contenido muestra contenido en un diseño apilado horizontal. Por lo general, el contenido incluye título, metadatos, descripción breve, acciones rápidas y clústeres de información relacionada.
Compilación
La plantilla de compilación muestra los detalles de un elemento en el lado izquierdo de la pantalla, como un podcast, con sus elementos (por ejemplo, sus episodios) en el panel derecho.
GRid
La plantilla de cuadrícula muestra colecciones de contenido en una cuadrícula organizada. Muestra contenido con una lógica de navegación remota clara y una experiencia de navegación óptima.
Alerta
La plantilla de alerta muestra un mensaje en pantalla completa. Por lo general, se requiere una acción para desbloquear la alerta y volver a la pantalla anterior.
Columnas de tarjetas
Diseño de 1 tarjeta
Ancho de la tarjeta: 844 dp
Diseño de 2 tarjetas
Ancho de la tarjeta: 412 dp
diseño de 3 tarjetas
Ancho de la tarjeta: 268 dp
Diseño de 4 tarjetas
Ancho de la tarjeta: 196 dp
diseño de 5 tarjetas
Ancho de la tarjeta: 124 dp
