Si tu app contiene varios destinos para que los usuarios los recorran, te recomendamos que emplees combinaciones de diseño y navegación que suelen usar otras apps. Debido a que muchos usuarios ya poseen los modelos mentales para estas combinaciones, tu app les resultará más intuitiva.
Combinaciones de diseño y navegación
La barra de navegación y el panel lateral de navegación modal se usan como patrones de navegación principales para las vistas de diseño superiores y los destinos de navegación principales.
La barra de navegación puede contener de tres a cinco destinos de navegación en el mismo nivel de jerarquía. Este componente se traduce en el riel de navegación para pantallas grandes.
Aunque el panel lateral de navegación puede contener más de cinco destinos de navegación, el patrón no es tan ideal como la barra de navegación. Esto se debe a que los usuarios deben alcanzar la barra superior en tamaños compactos.
Las pestañas de Material 3 y la barra de app inferior son patrones de navegación secundarios que puedes usar para complementar la navegación principal o aparecer en vistas secundarias.
Aquí, las pestañas actúan como una capa de navegación secundaria para agrupar contenido relacionado.
Acciones de diseño
Proporciona controles para permitir que los usuarios realicen acciones. Los patrones comunes incluyen acciones de la barra superior, el botón de acción flotante (BAF) y los menús.
Para las acciones de mayor importancia, un BAF proporciona un botón grande y destacado para el usuario. Proporciona solo una acción a la vez en este nivel. Un BAF puede aparecer en varios tamaños y en un formulario expandido, que incluye una etiqueta. Usa Scaffold para fijar un BAF y asegurarte de que siempre esté visible, incluso cuando se desplaza.
Un botón de acción flotante (BAF) que permite a los usuarios agregar plantas a la galería de plantas
Puedes colocar acciones secundarias dentro de la barra superior o, si está agrupada cerca del contenido relacionado, dentro de la página.
Para cualquier acción adicional que no se necesite de inmediato o con frecuencia, agrégala a un menú ampliado.
Navegación adaptable
Usa el diseño correcto para la clase de tamaño de ventana. Evita usar la misma barra de navegación inferior en todos los tamaños.
Qué debes hacer
Qué no debes hacer
Los tamaños medianos pueden usar el riel de navegación o los elementos de navegación horizontales.
Aunque es compacto, un riel de navegación podría ser más ergonómico en una pantalla de portada.
Las portadas más grandes podrían aprovechar cualquiera de las orientaciones de navegación. Considera cómo podría interactuar el usuario con el contenido.