desarrollador android inicio
Desarrollador Android
Google+
YouTube
GitHub
Advertisements

Hay muchos tipos de apps para poder atender necesidades muy diferentes. Por ejemplo:

  • Las apps Calculadora o Cámara son construidas alrededor de una actividad centrada en una única pantalla
  • Las apps como Teléfono cuyo principal propósito es desplazarse entre diferentes actividades sin una navegación más profunda
  • Las apps Gmail o Play Store que combinan un conjunto amplio de vistas de datos con una navegación profunda

La estructura de tu aplicación depende de la cantidad de contenido y tareas (superficiales) que tu quieres que puedan hacer tus usuarios.

Estructura General

Una app típica en Android se compone de un nivel superior y vistas de detalles/edición. Si la jerarquía de navegación es profunda y compleja, conecta las vistas de categorías con el nivel superior y las vistas de detalles.

estructura de una app

Vistas de categorías

Te permiten incidir más profundamente en los datos de tu app. Son las que aparecen en medio de la imagen.

Vistas detalle/edición

Es donde tu usas o creas datos. Son las de abajo del todo en la imagen.

Advertisements

Nivel superior

La disposición (layout) de tu pantalla de inicio requiere una atención especial. Esta es la primera pantalla que las personas verán después de abrir tu app, así que debería ser una experiencia gratificante tanto para los nuevos como los que ya usaban tu app.

Pregúntate a ti mismo: “¿Que es lo que mis usuarios habituales suelen hacer cuando usan mi app?”, y estructura tu pantalla inicial de acuerdo a dicha experiencia.

Presenta el contenido

Muchas apps se enfocan en mostrar el contenido. Evite las pantallas que solo se usan para navegar y en su lugar permite a las personas conocer tu app centrando el contenido en la pantalla inicial. Elige las disposiciones que sean visualmente atractivos y apropiados para los tipos de datos y el tamaño de pantalla

estructura de una app

Play Music permite la navegación entre artistas, álbumes y listas de reproducción a través de muestras de ricos contenidos. También se enriquece con recomendaciones y promociones adaptadas que emergen en función de los intereses del usuario. La función Búsqueda tiene un fácil acceso en la barra de acciones.

Configurar barras de navegación y acción

Todas las pantallas en tu aplicación muestran la barra de acciones para proporcionar una navegación consistente y mostrar acciones importantes.

En el nivel superior, aplica estas consideraciones especiales a la barra de acciones:

  • Usa la barra de acciones para mostrar el icono o nombre de tu aplicación.
  • Si tu nivel superior consiste en múltiples vistas, asegúrate que es fácil para el usuario navegar entre ellas añadiendo controles visuales a tu barra de acciones.
  • Si tu app permite a las personas crear contenido, considera hacer que el contenido sea correctamente accesible desde el nivel superior.
  • Si tu contenido puede ser buscado, incluye la acción Buscar en la barra de acciones para que la gente pueda acortar a través de la jerarquía de navegación.

estructura de una app

Un calendario está relacionado con la productividad, debe ser eficiente, fácil de visualizar con alta densidad de información y que funcione correctamente. La navegación soporta cambiar entre vistas de día, semana, mes y agenda.

Conmutación en el nivel superior con controles de vista

El nivel superior trata de introducir al usuario a áreas de mayor funcionalidad, comunicando las capacidades de tu app. En muchos casos, el nivel superior consistirá en múltiples vistas y tu necesitas asegurarte que el usuario puede navegar entre ellas eficientemente. Android soporta varios controles de vista para esta tarea. Usa el control que mejor se adapte a la navegación de tu app:

Pestañas fijas

Las Pestañas fijas muestran las vistas del nivel superior y al mismo tiempo facilitan tanto su exploración como cambiar entre ellas. Están siempre visibles en la pantalla, y no pueden ser desplazadas fuera de la pantalla como ocurre con las pestañas móviles. Las Pestañas fijas deberían permitir siempre al usuario navegar entre las vistas mediante deslizamientos a la izquierda o derecha en el área de contenido.

Usa pestañas si:
  • Los usuarios de tu app cambian de vista frecuentemente
  • Tienes un número limitado de tres vistas de nivel superior
  • Quieres que el usuario tenga claro las diferentes vista

estructura de una app

Las pestañas fijas por defecto mostradas en Holo Oscuro y Claro

Spinners

Un spinner es un menú que desciende para permitir al usuario cambiar entre las vistas de tu app.

Usa un spinner en la barra de acciones principal si:
  • No quieres perder el espacio vertical por culpa del espacio ocupado de una pestaña
  • El usuario cambiará entre vistas del mismo conjunto de datos (por ejemplo: los eventos del calendario vistos por día, semana o mes) o los conjuntos de datos del mismo tipo (como el contenido para dos cuentas diferentes).

estructura de una app

El spinner de la barra de acciones de la aplicación Calendario

Cajones de navegación

Un cajón de navegación es un menú deslizante que permite al usuario cambiar entre vistas de tu app. Puede contener un gran numero de elementos y se accede a él desde cualquier parte de  tu app. Los cajones de navegación proporcionan pantallas de niveles inferiores. Esto los hace particularmente adecuados para apps complejas.

Usa los cajones de navegación si:
  • No quieres perder el espacio vertical por culpa del espacio ocupado de una pestaña
  • Tienes un gran número de vistas de nivel superior.
  • Quieres proporcionar acceso directo a pantallas de nivel inferior.
  • Quieres proporcionar una rápida navegación hacia vistas las cuales no tienen nada que ver directamente entre ellas.
  • Tienes ramas de navegación particularmente profundas.

estructura de una app

Cajón de navegación de la app Keep

No mezclar y combinar

Después de elegir la mejor navegación de nivel superior de tu app, no mezcles y combines pautas. Por ejemplo, si tu decides usar las pestañas para el desplazamiento entre el nivel superior, no añadas un cajón, incluso si tus ramas de navegación son profundas. En este caso, el cajón de navegación simplemente duplicaría la información de las pestaña, confundiendo al usuario.

Categorías

Generalmente, el propósito de una aplicación con cierta profundidad de datos, es la navegación a través de categorías organizadas por niveles de detalles, donde los datos pueden ser vistos y gestionados. Minimiza el esfuerzo de navegación que pueden percibir al usar tu app evitando crear niveles muy profundos dentro de tu app.

A pesar de que el número de pasos de una navegación vertical desde el nivel superior hasta las vistas detalle son generalmente dictados por el contenido de la estructura de tu app, hay varias formas que puedes utilizar para reducir la percepción de una navegación pesada.

Usa las pestañas para combinar la selección de categoría y la visualización de datos

Esto puede ser útil si las categorías son familiares o el número de categorías es pequeño. Tiene la ventaja de eliminar un nivel de jerarquía y mantener los datos en el centro de atención del usuario. La navegación lateral entre categorías con una cierta cantidad de datos será más rápida que en una navegación explicita.

Si las categorías son familiares, predecibles o tienen una estrecha relación, usa pestañas desplazables (donde no todos los elementos están en la vista simultáneamente). Mantén el número de pestañas desplazables en un nivel manejable para minimizar el esfuerzo al navegar. Una regla de oro: no más de 5-7 pestañas.

estructura de una app

La app Play Store usa pestañas para mostrar simultáneamente las categorías y el contenido. Para navegar entre las categorías, los usuarios pueden deslizar a la izquierda o derecha sobre el contenido.

Si las categorías en las pestañas no están relacionadas, utiliza pestañas fijas, así todas las categorías estarán a la vista al mismo tiempo.

estructura de una app

Las personas usan pestañas fijas para cambiar entre áreas funcionales que son diferentes o no están estrechamente relacionadas.

Para más información, visita la guía de diseño Pestañas.

Permite acortar el camino a través de las jerarquías

La ventaja de los accesos directos es permitir a las personas que alcancen sus objetivos más rápidamente. Para permitir el acceso a acciones o información del nivel superior de un elemento desde vistas de lista o cuadrícula, muestra las acciones  directamente sobre los elementos de las vistas de lista usando menús desplegables o dividiendo los elementos de la lista. Esto permite a los usuarios llamar acciones u obtener información sin tener que navegar a través de la jerarquía donde se encuentra el elemento en concreto.

estructura de una app

Play Music permite a los usuarios actuar sobre un elemento (una canción) desde cualquier categoría (álbum, lista de reproducción, etc), eliminando la necesidad de navegar hasta la ubicación de la canción en la categoría de las canciones para poder usar alguna de las opciones permitidas.

Actuar sobre múltiples elementos.

A pesar de que categorías sirven para guiar a la gente entre el contenido, ten en cuenta que hay otras buenas razones para permitir actuar sobre conjuntos de datos.

Por ejemplo, si tu permites a la gente eliminar un elemento un una vista, tu deberías permitir también la posibilidad de eliminar varios elementos al mismo tiempo en dicha categoría. Analiza que acciones pueden aplicarse a dicho conjunto de elementos, entonces usando la opción multi-selección permites al usuario realizar las acciones a múltiples elementos en dicha categoría.

Para más información, mira la guía de diseño Selección.

Detalles

Las vistas detalle permiten al usuario ver y actuar con tus datos. La disposición de la vista detalle depende del tipo de datos que son mostrados además de diferir bastante entre las apps.

Disposición (Layout)

Considerar la actividad de las personas repercutirá en la vista detalle y en como se organizará disposición del mismo en consecuencia.

estructura de una app

El propósito de la vista detalle de la app Contactos es mostrar las opciones de comunicación posibles. La vista de lista permite eficientemente escanear y acceder rápidamente a los números de teléfono, el email, las direcciones y el resto de información de cada elemento. Se dividen los elementos de Teléfono para combinar llamadas y mensajes dentro de una misma línea.

Resumen

  • Encuentra la manera de mostrar el contenido útil en tu pantalla inicial.
  • Usa barras de acción para proporcionar una navegación consistente.
  • Utiliza una navegación horizontal y accesos directos sobre tus jerarquías más superficiales.
  • Usa la opción multi-selección para permitir al usuario actuar sobre conjuntos de datos.
  • Permite una rápida navegación entre los detalles de los elementos mediante las vistas deslizable o desplazamiento entre vistas.

Crear una navegación eficiente entre las vistas detalle

Si tus usuarios quieren buscar dentro de una secuencia de múltiples elementos, permite que puedan navegar entre elementos dentro de una vista detalle. Usar las vistas deslizables u otras técnicas, como controles de las miniaturas de las vistas.

estructura de una app

Gmail usa las vistas deslizables para navegar desde una vista detalle hasta otra.

 

estructura de una app

Además de soportar los gestos de deslizamiento para mover de izquierda a derecha a través de las páginas, Magazines proporciona un control en las miniaturas de las vistas que permite a los usuarios saltar rápidamente a páginas especificas.

Para más información, mira la guía de diseño Vistas Deslizables.

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

Advertisements

Entrada anterior Gestos Entrada siguiente Navegación

Entradas relacionadas

Menú