X

Vistas deslizables

Una navegación eficiente es una de las piedras angulares de una app bien diseñada. Mientras las apps son generalmente construidas siguiendo una jerarquía, hay casos donde una navegación horizontal puede facilitar el acceso entre datos relacionados más rápidamente que con una navegación vertical. Las vistas deslizables permiten al usuario moverse eficientemente desde un elemento hasta otro con un simple gesto y convirtiendo la navegación y el consumo de contenidos en una experiencia más agradable y más fluida.

DESARROLLADOR

Crear Vistas Deslizables con Pestañas

Desplazarse entre Vistas Detalle

Los datos de una app se organizan a menudo con relaciones entre una vista principal y una detalle. El usuario puede ver una lista de elementos relacionados, como imágenes, conversaciones o correos, y entonces al presionar sobre uno de dichos elementos, ver los detalles que contiene abriéndose una pantalla independiente.

Vista principal a la izquierda y vista detalle a la derecha

En un teléfono, desde que la pantalla maestra y detalle se encuentran en pantallas diferentes, es habitual que el usuario tenga que volver atrás o hacia delante entre una lista de elementos y una vista detalle, también conocido como pogo saltarín.

En los casos donde los usuarios quieren ver varias detalles de los elementos sucesivamente, evita el pogo saltarín usando los gestos de deslizamiento para navegar entre las vistas detalle previas o siguientes.

Navegación entre correos consecutivos usando el gesto de deslizamiento. Si una vista tiene un contenido que excede el ancho de la pantalla como un email largo, asegúrate de que los gestos de deslizamiento del usuario desplazarán realizan un desplazamiento horizontal dentro de la vista. Una vez que el final del contenido sea alcanzado, un deslizamiento adicional navegaría a la siguiente vista

Desplazarse dentro de un email largo usando el gesto de deslizamiento antes de navegar al siguiente correo

Deslizarse entre Pestañas

La app Contactos con una navegación mediante gestos de deslizamiento entre las pantallas de los niveles superiores

Si tu app soporta las pestañas con barra de acciones, usa el gesto de navegar entre las diferentes vistas.

Lista de Verificación para las Vistas Deslizables

  • Usa los deslizamientos para navegar rápidamente entre vistas detalle o pestañas.
  • Las transiciones entre vistas las realiza el usuario mediante un gesto de deslizamiento.
  • Si necesitaste usar un botón en el pasado para una navegación previa/próxima, reemplaza el mismo con el gesto de deslizamiento.
  • Considera añadir información contextual en tu vista detalle que informe al usuario acerca de la posición relativa de la lista del actual elemento visible.
  • Para más detalles sobre como construir vistas deslizables, lee la documentación del desarrollador en Implementar una Navegación Lateral.

Puedes ver más información sobre Swipe Views en la página oficial de Google en inglés pulsando aquí.

Los comentarios de Disqus están cargando....