¿Necesita ayuda para el diseño de navegación de su aplicación? Estos patrones son un gran lugar para comenzar.
Los siguientes patrones de navegación adaptativa presentes varias formas de manejar la navegación en las pantallas grandes y pequeñas.Los menús de navegación superiores y laterales son comunes en pantallas grandes,Pero a menudo no son la forma óptima de presentar información en pantallas pequeñas debido al reducido espacio en pantalla.Por lo tanto, es necesario tener en cuenta la presentación del contenido y la facilidad de la navegación para todos los tamaños de pantalla.
Patrón 1: Menú superior desplegable
En este patrón, como el ancho de la pantalla es reducido, los iconos de navegación superior se reordenan hasta que el espacio sea suficiente.En este punto, algunos elementos se mueven desde la barra de navegación superior a un menú desplegable. En pantallas mas chicas todos los iconos están en un menú desplegable, y el usuario tiene que tocar para desplegar el menú.
Se podría ordenar las prioridades de elementos para asegurar que los elementos más importantes siempre aparezcan en la parte superior.
Ventajas:
- Un botón en la cabecera maximiza el espacio para contenido en pantallas pequeñas.
- Los iconos importantes permanecen visibles en la mayoría de los tamaños de pantalla y tú decides la prioridad de cada uno.
- La legibilidad de los elementos de navegación se mantiene con una separación adecuada, al ocultar automáticamente los iconos que no encajan.
Desventajas:
- Los elementos de navegación podrían ser menos visibles ya que algunos elementos estan ocultos en el menu desplegable.
- Puede ser que los usuarios no reconozcan el botón de menú de navegación en las pantallas mas pequeñas.
- Es necesario un paso más para acceder a los iconos ocultos.
Patrón 2: Menú inferior expandible
Similar al patrón,los elementos de la barra navegación en la parte superior son reordenados para pantallas pequeñas hasta que no hay mas espacio. En este punto los elementos se mueven desde la barra superior a un menú desplegable. Tu puedes elegir que elementos son más importantes y que estos aparezcan en la barra de navegación, los demás quedan ocultos dentro del menú desplegable.
En pantallas mas pequeñas varios elementos permanecen visibles en una barra inferior y el resto permanece oculto. El usuario puede tirar de menú para ver el resto de los elementos. Tú puedes elegir que elementos permanecen visibles siempre.
Ventajas:
- El menú desplegable es mas fácil de encontrar
- Los elementos importantes permanecen visibles y tú decides la prioridad.
- La legibilidad de los elementos se mantiene con una separación adecuada ocultando los elementos que no encajen.
Desventajas:
- Es necesario un paso más para acceder a los elementos de navegación que están ocultos.
- Los elementos son menos encontrables because porque algunos están ocultos.
- Hay menos espacio para contenido en las pantallas más pequeñas.
Patrón 3: Menú izquierdo oculto
El menú de navegación está siempre visible a la izquierda, salvo en pantallas más chicas, donde el menú de navegación está oculto en un botón.En la pantalla más pequeña, cuando el usuario pulsa el botón, el menú de navegación se desliza a la vista y muestra los elementos de navegación.
Ventajas:
- Potencialmente se muestran más elementos en un menú izquierdo que en un menú superior.
- Más elementos están siempre visibles, excepto en los tamañanos pantalla más pequeños.
- Un botón en la cabecera maximiza el espacio para contenido en pantallas pequeñas.
Desventajas:
- Los elementos de navegación son menos encontrables porque algunos elementos se encuentran ocultos en el menú desplegable.
- Los usuarios pueden no notar el menú de navegación en los tamaños de pantalla mas pequeños.
- Un paso más es necesario para acceder a los elementos de navegación que están ocultos.
