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, que proporciona una forma intuitiva y clara de navegar por la app.
A diferencia del panel lateral de navegación para dispositivos móviles, este panel lateral de navegación de TV tiene estados expandidos y contraídos visibles para el usuario.
Recursos
| Tipo | Vínculo | Estado |
|---|---|---|
| Diseño | Fuente del diseño (Figma) | Disponible |
| Implementación |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
Disponible |
Lo más destacado
- Los destinos se ordenan según la importancia del usuario; primero, se agrupan los destinos frecuentes y los relacionados.
- Cuando se contraen los paneles laterales de navegación estándar y modal, se requiere un riel de navegación.
Variantes
Existen dos tipos de estilos de panel lateral de navegación:
- Panel lateral de navegación estándar: Se expande para crear espacio adicional para la navegación, lo que desplaza el contenido de la página a un lado.
- Panel lateral de navegación modal: Aparece como una superposición sobre el contenido de la app con una lámina que ayuda a mejorar la legibilidad cuando se expande el panel lateral.
Panel lateral de navegación estándar
Anatomía
- Sección principal: Muestra el logotipo de la app. Sirve como un botón para cambiar de perfil o activar una acción de búsqueda. En el estado contraído, solo el ícono permanece visible en el contenedor superior.
- Elemento de navegación: Cada elemento del riel de navegación presenta una combinación de un ícono y texto, y solo el ícono está visible en el estado contraído.
- Riel de navegación: El riel de navegación es una columna que muestra de 3 a 7 destinos de la app, que actúa como el menú principal. Cada destino tiene una etiqueta de texto y un ícono opcional, con la opción de agrupar los elementos de menú para mejorar la contextualidad.
- 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, se envía el contenido de la página y deja espacio para la versión expandida de la navegación.
- Actualizaciones de Navigation: Cuando se pasa de un elemento de navegación a otro, la página se actualiza automáticamente con el destino nuevo.
Panel lateral de navegación modal
Anatomía
- Sección principal: Muestra el logotipo de la app. Sirve como un botón para cambiar de perfil o activar una acción de búsqueda. En el estado contraído, solo el ícono permanece visible en el contenedor superior.
- Elemento de navegación: Cada elemento del riel de navegación presenta una combinación de un ícono y texto, y solo el ícono está visible en el estado contraído.
- Riel de navegación: 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 los elementos de menú para mejorar la contextualidad.
- Lámina: Se usa para mejorar la legibilidad del texto del elemento de navegación.
- 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 lámina que mejora la legibilidad cuando se expande el panel lateral.
- Actualizaciones de Navigation: Se producen cuando el usuario selecciona un elemento de navegación.
Lámina
En el caso del panel lateral de navegación modal, una lámina detrás del panel lateral garantiza la lectura del contenido del panel lateral. Puedes usar un gradiente o una superficie sólida detrás del panel lateral de navegación para crear diferentes variaciones de la IU.
Lámina de gradientes
Lámina sólida
Especificaciones
Uso
Indicador activo
El indicador activo es una indicación visual que destaca el destino del panel lateral de navegación que se muestra. Por lo general, el indicador está representado por una forma de fondo que es visualmente distinta de los otros elementos del panel lateral. El indicador activo ayuda a los usuarios a comprender dónde se encuentran en la aplicación y qué destino están navegando. Asegúrate de que el indicador activo se vea claramente y sea más fácil de distinguir de los otros elementos del panel lateral de navegación.
Divisores (opcional)
Los divisores se pueden usar para separar grupos de destinos dentro del panel lateral de navegación para una mejor organización. Sin embargo, es importante usarlos con moderación, ya que demasiados divisores pueden crear ruido visual y agregar una sobrecarga cognitiva innecesaria para los usuarios.
Insignias
Las insignias son indicadores visuales que se pueden agregar a los elementos de navegación para proporcionar información adicional. Por ejemplo, se podría usar una insignia para indicar la cantidad de películas nuevas disponibles en una app de streaming. Usa las insignias con moderación y solo cuando sea necesario, ya que pueden hacer que la IU parezca ocupada y desordenada. Cuando uses insignias, asegúrate de que sean claras y fáciles de entender, y de que no interfieran en la capacidad del usuario para navegar por la app.
Insignia expandida
Se contrajo la insignia
Etiquetas
Las etiquetas del panel lateral de navegación deben ser claras y concisas para que sean más fáciles de leer.
Precaución
Qué no debes hacer
Qué no debes hacer
Qué no debes hacer
Los paneles laterales de navegación son elementos fundamentales que representan la jerarquía de tu app y deben usarse para enumerar de cinco a seis destinos de navegación principales.
Qué debes hacer
