Patrones de Navegación Adaptable

¿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.

wide UI layout with top toggle menu and three by two layout of content blocks

moderate width UI layout with top toggle menu and two by three layout of content blocks

moderate but short UI layout with top toggle menu and size content blocks in a scrolling strip

narrow mobile layout with top toggle menu and smaller content blocks in two by three layout

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.

wide layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower

moderate layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower

moderate but short layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content so much.

narrow screen mobile layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content. It can be dragged up to reveal the menu options.

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.

wide UI layout with vertical navigation menu down the left hand side

moderate layout with vertical navigation down the left hand side and narrower content area

moderate but short layout with vertical navigation down the left hand side and narrower content area

narrow mobile layout with hidden left hand menu, which can be dragged onto the screen using a special button to reveal the menu options.

Archivos adjuntos

Archivo Tamaño Fecha Adjunto por
desktop/wide tablet layout for top toggle menu
wide UI layout with top toggle menu and three by two layout of content blocks
10087 bytes 2013-09-26 02:32:23 chrisdavidmills
tablet layout for top toggle menu
moderate width UI layout with top toggle menu and two by three layout of content blocks
9584 bytes 2013-09-26 02:33:22 chrisdavidmills
wide mobile layout for top toggle menu
moderate but short UI layout with top toggle menu and size content blocks in a scrolling strip
4840 bytes 2013-09-26 02:34:28 chrisdavidmills
narrow layout for top toggle menu
narrow mobile layout with top toggle menu and smaller content blocks in two by three layout
9126 bytes 2013-09-26 02:35:37 chrisdavidmills
desktop/wide tablet layout for expandable bottom menu
wide layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower
4430 bytes 2013-09-26 02:37:17 chrisdavidmills
tablet layout for expandable bottom menu
moderate layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower
2872 bytes 2013-09-26 02:37:58 chrisdavidmills
wide mobile layout for expandable bottom menu
moderate but short layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content so much.
2603 bytes 2013-09-26 02:38:55 chrisdavidmills
narrow layout for expandable bottom menu
narrow screen mobile layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content. It can be dragged up to reveal the menu options.
5837 bytes 2013-09-26 02:41:03 chrisdavidmills
desktop/wide tablet layout for left hidden menu
wide UI layout with vertical navigation menu down the left hand side
14168 bytes 2013-09-26 02:42:07 chrisdavidmills
tablet layout for left hidden menu
moderate layout with vertical navigation down the left hand side and narrower content area
8735 bytes 2013-09-26 02:43:52 chrisdavidmills
wide mobile layout for left hidden menu
moderate but short layout with vertical navigation down the left hand side and narrower content area
4605 bytes 2013-09-26 02:44:43 chrisdavidmills
narrow layout for left hidden menu
narrow mobile layout with hidden left hand menu, which can be dragged onto the screen using a special button to reveal the menu options.
10117 bytes 2013-09-26 02:45:40 chrisdavidmills

Etiquetas y colaboradores del documento

Colaboradores de esta página: francovalledor
Última actualización por: francovalledor,