Panel lateral de navegación

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Los paneles laterales de navegación son componentes esenciales en cualquier app para TV, ya que permiten a los usuarios acceder a diferentes destinos y funciones. Un panel lateral de navegación es la columna vertebral de la arquitectura de la información de la app y proporciona una forma clara e intuitiva de navegar por ella.

A diferencia del panel lateral de navegación para dispositivos móviles, el panel lateral de navegación de la TV tiene estados expandidos y contraídos visibles para el usuario.

Recursos

Destacados

• Los destinos se ordenan según la importancia para el usuario, con los destinos frecuentes en primer lugar y los destinos relacionados agrupados.
• Se requiere un riel de navegación para los paneles laterales de navegación estándar y modal cuando están contraídos.

Variantes

Existen dos tipos de estilos de panel lateral de navegación:

1. Panel lateral de navegación estándar: Se expande para crear espacio adicional para la navegación y desplazar el contenido de la página.
2. Panel lateral de navegación modal: Aparece como una superposición sobre el contenido de la app con una pantalla dimmed que ayuda a mejorar la legibilidad cuando se expande el panel lateral.

Panel lateral de navegación estándar

Anatomía

1. Sección superior: Muestra el logotipo de la app. Sirve como botón para cambiar de perfil o activar la acción de búsqueda. En el estado reducido, solo el ícono permanece visible en el contenedor superior.
2. Elemento de navegación: Cada elemento del riel de navegación incluye una combinación de un ícono y texto, y solo se muestra el ícono en el estado reducido.
3. Riel de navegación: El riel de navegación es una columna que muestra de 3 a 7 destinos de la app y actúa como menú principal. Cada destino tiene una etiqueta de texto y un ícono opcional, con la opción de agrupar elementos de menú para mejorar la contextualización.
4. Sección inferior: Puede tener de uno a tres botones de acción, que son ideales para páginas como la configuración, la ayuda o el perfil.

Comportamiento

• Expansión del panel lateral de navegación: Cuando se expanden, los paneles laterales de navegación estándar empujan el contenido de la página para dejar espacio para la versión expandida de la navegación.
• Actualizaciones de navegación: Cuando se pasa de un elemento de navegación a otro, la página se actualiza automáticamente al nuevo destino.

Panel lateral de navegación modal

Anatomía

1. Sección superior: Muestra el logotipo de la app. Sirve como botón para cambiar de perfil o activar una acción de búsqueda. En el estado reducido, solo el ícono permanece visible en el contenedor superior.
2. Elemento de navegación: Cada elemento del riel de navegación cuenta con una combinación de un ícono y texto, y solo se ve el ícono en el estado reducido.
3. Riel de navegación: Es una columna que muestra de tres a siete destinos de la app, que funcionan como el menú principal. Cada destino tiene una etiqueta de texto y un ícono opcional, con la opción de agrupar elementos de menú para mejorar la contextualización.
4. Sombra: Para mejorar la legibilidad del texto del elemento de navegación.
5. Sección inferior: Puede tener de uno a tres botones de acción, que son ideales para páginas como la configuración, la ayuda o el perfil.

Comportamiento

• Expansión del panel lateral: Aparece como una superposición sobre el contenido de la app, con una pantalla dimmed que mejora la legibilidad cuando se expande el panel lateral.
• Actualizaciones de navegación: Ocurren cuando el usuario selecciona un elemento de navegación.

Lámina

En el caso del panel lateral de navegación modal, un panel detrás del panel lateral garantiza que el contenido del panel lateral sea legible. Puedes usar un gradiente o una superficie sólida detrás del panel lateral de navegación para crear diferentes variaciones de la IU.

Especificaciones

Uso

Insignias

Las insignias son indicadores visuales que se pueden agregar a los elementos de navegación para proporcionar información adicional. Por ejemplo, se puede usar una insignia para indicar la cantidad de películas nuevas disponibles en una app de transmisión. Usa insignias con moderación y solo cuando sea necesario, ya que pueden hacer que la IU se vea cargada y desordenada. Cuando uses insignias, asegúrate de que sean claras y fáciles de entender, y de que no interfieran con la capacidad del usuario de navegar por la app.

Etiquetas

Las etiquetas del panel lateral de navegación deben ser claras y concisas para que sean más fáciles de leer.

warning

Precaución

Si es imposible evitar el uso de etiquetas largas, trunca la etiqueta con puntos suspensivos.

cancel

Qué no debes hacer

Evita usar etiquetas de texto largas que requieran unión.

cancel

Qué no debes hacer

Evita crear un panel lateral de navegación sin íconos, ya que esto puede dificultar que los usuarios naveguen por la app.

cancel

Qué no debes hacer

Evita mezclar elementos de navegación con íconos y elementos de navegación sin íconos, ya que esto puede hacer que la experiencia de navegación sea confusa para los usuarios.

Los paneles laterales de navegación son elementos fundamentales que representan la jerarquía de tu app y deben usarse para enumerar solo de cinco a seis destinos de navegación principales.

check_circle

Qué debes hacer

Para brindar una mejor experiencia del usuario, limita la cantidad de destinos de navegación principales en el panel lateral de navegación a cinco o seis.

cancel

Qué no debes hacer

Evita agregar demasiados elementos de navegación, ya que esto puede crear un desplazamiento vertical y dificultar la navegación de los usuarios por la app.