Los diseños son plantillas estructurales que proporcionan un framework para mantener la coherencia visual en toda la aplicación. Al definir cuadrículas visuales, espaciado, y secciones, los diseños establecen una estructura cohesiva y organizada para el presentación de información y elementos de la interfaz de usuario.
Destacados
- 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 en los ejes horizontales y verticales para facilitar su uso y control.
Principios
Lineamientos que te ayudarán a tomar decisiones sobre el diseño de diseños para TV.
Cómo diseñar para pantallas grandes
Desde la popularización de la HDTV, los televisores rectangulares con una relación de aspecto de 16:9 se han convertido en la norma. Históricamente, los televisores se fabricaban con una forma cuadrada conocida como relación de aspecto de 4:3 o 1.33:1.
Cómo 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 con tecnología Android. Siempre diseñar con una resolución MDPI de 960 px * 540 px.
Con MDPI, 1 px = 1 dp.
Los recursos deben tener una resolución de 1080p. Esto permite que el sistema Android reduzca la escala de los elementos de diseño a 720p si es necesario.
Garantiza la visibilidad y la seguridad de sobrebarrido
Asegúrate de que los elementos importantes siempre sean visibles para los usuarios. Para ello, posiciona los elementos con un margen del 5% de 48 dp en el lado 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.
Completar la pantalla completa
No ajustes ni recortes elementos de la pantalla de fondo al área segura de sobrebarrido. En su lugar, permite la visualización parcial de los elementos fuera de pantalla. Esto garantiza que todas las pantallas muestren correctamente los elementos en segundo plano y fuera de pantalla.
Optimizar con ejes
Piensa en cómo usan el control remoto con su TV. Asegúrate de que la interfaz de la TV sea fácil de usar con el control remoto. Diseña cada dirección (arriba, abajo, izquierda, derecha) para tener un propósito y patrón de navegación claros que ayuden a los usuarios a comprender cómo desplazarse por grupos grandes de opciones.
Diseño
Los tamaños de las pantallas de TV varían de un dispositivo a otro. Como una TV moderna tiene una con una relación de aspecto de 16:9, se recomienda Tamaño de pantalla de 960 px x 540 px Esto garantiza que todos los elementos se puedan ajustada 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 en los bordes izquierdo y derecho de la pantalla.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
Estos márgenes de borde 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 espacio vertical. el espaciado entre las líneas.
Patrones de diseño
Hay tres patrones de diseño disponibles en función del propósito y dispositivo de visualización: diseño de pila horizontal, diseño de pila vertical, y Grid Layout.
Diseño de la pila horizontal
Un diseño de pila horizontal organiza los componentes de forma horizontal. Pueden variar en tamaño, proporción o formato. Este diseño suele ser que se usan para agrupar contenido y componentes.
Diseño de la pila vertical
Un diseño de pila vertical organiza los componentes de manera vertical, lo que permite un tamaño, una proporción y un formato flexibles. Por lo general, usarse para agrupar varios tipos de texto, componentes interactivos y tus patrones de diseño.
GridLayout
Una cuadrícula es un conjunto de columnas y filas que se cruzan, y una cuadrícula El diseño muestra contenido en esta cuadrícula. Organiza el contenido de forma lógica lo que facilita a los usuarios navegar y navegar.
Para evitar la superposición, debes tener en cuenta el relleno entre y el aumento de tamaño de los estados enfocados. Por ejemplo, cuando se enfoca componente (como una tarjeta) esté destacado. Si usas nuestras sugerencias Grid Layout (12 columnas en 52 dp, con medianiles en 20 dp); consulta Tarjetas para y las vistas previas y los diseños de componentes recomendados.
Estructuras de diseño
Aquí hay algunas estructuras de diseño que te ayudarán a mejorar a la hora de diseñar diseños de TV. Si divides las pantallas de TV horizontalmente, puede ayudar a separar diferentes tipos de componentes, comunicar 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 Stack Layout y Grid Layout.
Diseño de panel único
Un diseño de panel único puede ayudar a dirigir la atención hacia el contenido principal. Úsalo con experiencia enfocada en el contenido y páginas de información crítica.
Diseño de dos paneles
Un diseño de 2 paneles funciona mejor cuando la página muestra contenido jerárquico. Se usa ampliamente en experiencias orientadas a tareas.
Sobrecarga cognitiva
El contenido complicado y poco claro puede generar confusión, molestia y un descenso de la demanda. y compromiso de los usuarios. Haz que tu diseño sea fácil de leer, despejado y presente solo información esencial.
Evita usar demasiados paneles para agrupar el contenido. Esto crea una carga cognitiva y jerarquía innecesarias a los usuarios.
Qué debes hacer
Qué no debes hacer
Expresa jerarquía y navegación
Los paneles separan y organizan visualmente el contenido. Ayudan a guiar a los usuarios, y pueden crear una interfaz más intuitiva para mejorar 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 se encuentra el usuario y a dónde puede ir.
Explorar
La plantilla del navegador muestra “clústeres” de contenido multimedia o filas en una pila vertical. Los usuarios navegan hacia arriba y hacia abajo para explorar las filas y navegan 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 navegación o elementos sobre los que puedes actuar relevantes para el contenido en segundo plano.
Superposición derecha
La plantilla de superposición derecha muestra un panel de superposición en el lado derecho de la pantalla. Por lo general, muestra elementos sobre los que puedes realizar acciones de manera independiente del contenido en segundo plano.
Superposición central
La plantilla de superposición central muestra un elemento modal que se superpone sobre una vista existente. Se usa para comunicar información urgente o impulsar 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, con opciones o acciones a la derecha. Por lo general, se pide a los usuarios que realicen 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 grupos de información relacionada.
Compilación
La plantilla de compilación muestra detalles de un elemento en el lado izquierdo de la pantalla, como un podcast, con sus elementos, como sus episodios, en el panel derecho.
Cuadrícula
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
