Sistema de enfoque

A diferencia de las interfaces táctiles, la TV se basa en gran medida en diferentes estados principales (predeterminado, enfocado, presionado) para llamar la atención del usuario hacia el elemento enfocado. Esto sirve como punto de partida para la navegación.

Lo más destacado

  • Un sistema de enfoque consta de secciones de elementos enfocables.
  • Los indicadores de enfoque son dispositivos visuales que enfatizan elementos enfocados.
  • La indicación de escala ajusta un elemento por factor x cuando está enfocado o se selecciona.
  • Mientras que el color de fondo es estático, el de la superficie puede cambiar cuando se enfoca.

Enfoque

El enfoque es la definición del estado clave para el diseño de TV. La navegación se limita a las interacciones del pad direccional disponibles en el control remoto. Los usuarios pueden usar las teclas de flecha para moverse, el botón central para seleccionar y la tecla Atrás para regresar. El control remoto permite a los usuarios pasar de una interacción a la vez. El cambio de estado de un elemento se representa mediante indicadores de enfoque para ayudar al usuario en la visualización.

Elementos y grupos enfocables

Los "elementos enfocables" son una parte integral de la interfaz de la TV. Los "elementos enfocables" pueden ser cualquier componente, como botones, tarjetas, elementos de lista o una superficie definida de forma personalizada. En cualquier momento, los usuarios deben poder enfocarse en un solo elemento enfocable.

Los "grupos enfocables", por otro lado, contienen uno o más "elementos enfocables". Puede haber cualquier cantidad de "grupos enfocables" anidados. Los grupos enfocables se usan para agrupar de forma lógica diferentes elementos enfocables a fin de lograr una navegación fácil de usar.

Anatomía del enfoque

Indicadores de enfoque

Los indicadores de enfoque son una visualización distintiva de un elemento enfocado. Cuando se selecciona un elemento, entra en un estado de "presionado" hasta que se suelta el botón del control remoto.

Cada estado de un elemento enfocable se configura mediante el ajuste de las siguientes propiedades:

  • Escala: Cambia el tamaño de un elemento enfocado.
  • Borde: Dibuja un contorno alrededor del elemento
  • Resplandor: Crea una sombra debajo del elemento (por lo general, se usa en las tarjetas).
  • Colores: Cambia el fondo de los elementos y el color del contenido.

Tipos de enfoque

Indicación de báscula

Escala el elemento cuando está enfocado o se selecciona. Los valores de escalamiento predeterminados son 1.025, 1.05 y 1.1x. Usa esta indicación para obtener comentarios claros sobre la navegación. Los valores de escala para diferentes elementos pueden variar en función de su tamaño.

Escala de enfoque

Indicación de brillo

Agrega un resplandor o sombra difuminados alrededor del elemento. La indicación de resplandor tiene los siguientes parámetros:

  1. Nivel de brillo: Sugiere una elevación del elemento, entre 2 dp y 32 dp
  2. Color del resplandor: Se puede especificar según el color de la imagen o de la marca

Resplandor para enfocar

Indicación del esquema

Agrega un contorno alrededor del elemento independientemente del borde. El indicador de esquema usa los siguientes parámetros:

  1. Ancho del contorno: formularios fuera del elemento
  2. Inserción de contorno: espaciado entre el elemento y su contorno.
  3. Color del contorno: Se puede especificar según el color de la imagen o de la marca \

Contorno de enfoque

Indicación de color

Los elementos pueden cambiar de estado al adaptarse a los colores. El indicador de color usa los siguientes parámetros:

  1. Color de fondo: Cambia el color de superficie de un elemento.
  2. Color del contenido: Cambia el color del contenido sobre una superficie.

Color de enfoque

Elevación tonal

Mientras que el color de fondo es estático, el de la superficie puede cambiar. El tono de las superficies a los niveles de elevación de +1 a +5 se ajusta según el color principal. Esto introduce una variación tonal en la línea de base de la superficie.

Las superficies tonales proporcionan muchos beneficios:

  • Crea el efecto de elevación para diferenciar los diversos elementos y texto.
  • Establece contraste para los beneficios de accesibilidad
  • Crea elementos visuales atractivos y suaviza las transiciones entre elementos interactivos

Inhabilitada

En el estado inhabilitado, el color de fondo y la opacidad muestran una importancia más baja para expresar que no se puede hacer clic en el objeto.

casos de uso

Un elemento enfocable tiene los 3 estados principales: predeterminado, enfocado y presionado, con estados adicionales: habilitado, inhabilitado y seleccionado que forman una matriz.

Tarjetas

Predeterminada Enfoque Presionados
Habilitada Detalles de la tarjeta Enfocado en la tarjeta Se presionó la tarjeta

Botones

Predeterminada Enfoque Presionados
Habilitada Botón habilitado predeterminado Botón habilitado enfocado Se presionó el botón habilitado
Inhabilitada Botón inhabilitado de forma predeterminada Botón inhabilitado con enfoque Se presionó el botón inhabilitado

Chips

Predeterminada Enfoque Presionados
Habilitada Chip habilitado predeterminado Chip habilitado enfocado Se presionó el chip habilitado
Habilitados y seleccionados Se seleccionó el chip predeterminado Se seleccionó el chip habilitado y enfocado Se presionó y seleccionó el chip habilitado
Inhabilitada Chip inhabilitado de forma predeterminada Se inhabilitó el chip enfocado Se presionó el chip inhabilitado
Inhabilitadas y seleccionadas Se seleccionó el chip predeterminado y se inhabilitó Se inhabilitó el chip y seleccionado y se seleccionó Se presionó y se seleccionó el chip inhabilitado