X

Progreso y Actividad

Las barras de progreso y los indicadores de actividad avisan al usuario de que algo está ocurriendo y que tomará un momento.

Material Design

Progreso y Actividad

Barras de progreso

Las barras de progreso son para situaciones donde el porcentaje completado se puede determinar. Dan al usuario una pista de cuanto tardará la operación aproximadamente.

Una barra de progreso debería siempre llenarse desde el 0% hasta el 100%, y volver a mostrar un valor inferior. Si son varias operaciones las que ocurren al mismo tiempo, utiliza la barra de progreso para representar el retraso de toda la operación en conjunto, así cuando la barra alcance el 100%, no debería volver atrás al 0%.

Barra de progreso en Holo Oscuro y Holo Claro

Indicadores de Actividad

Los indicadores de actividad son para operaciones con un tiempo indeterminado. Pueden pedir a los usuarios que esperen un momento hasta que se terminen, sin conseguir datos específicos de que está ocurriendo detrás de la escena.

Hay dos estilos disponibles: una barra y un círculo. Cada uno de estos estilos ofrece una variedad de tamaños, ambos tanto el tema Holo Claro como en el Holo Oscuro. Elige el más apropiado para el contexto de tu app. Por ejemplo, para actividades con un tamaño grande, el circulo será excelente si el área de contenido se encuentra en blanco, pero no queda bien en una caja de dialogo pequeña. Cada operación debería ser representada únicamente mediante un solo indicador de actividad.

  1. Barra de actividad
    • En este ejemplo, una barra de actividad (en Holo Oscuro) aparece cuando un usuario pide que se descargue una app. Hay un tiempo desconocido cuando la descarga todavía no se ha iniciado. Al empezar la descarga, esta barra de actividad se transforma en una barra de progreso.

  1. Círculo de actividad
    • En este ejemplo, un círculo de actividad (en Holo Claro) se utiliza en la aplicación Gmail cuando un mensaje se está cargando ya que no es posible determinar cuanto tomará que se descarguen todos los elementos del mismo.
    • Cuando Muestres un círculo de actividad, no incluyas texto que comunique lo que está haciendo la app. El círculo rotando proporciona suficiente retroalimentación sobre lo que está ocurriendo para que el usuario lo comprenda.

Indicadores personalizados

La barra de progreso estándar y los indicadores de actividad funcionan bien para la mayoría de las situaciones y deberían ser utilizados si es posible para proporcionar una experiencia coherente a lo largo de todas las apps del sistema operativo Android. Sin embargo, en algunas situaciones puede ser necesario tener una mayor personalización.

Unos ejemplos:

En todas las apps de Google Play (Music, Books, Movies, Magazines), hemos querido que el estado actual de la descarga para cada elemento sean visibles al mismo tiempo en el nivel superior de la pantalla. Esos estados son:

  • Sin descargar
  • Descargado temporalmente (automáticamente cacheada por la app)
  • Descargado permanentemente en el dispositivo del usuario en el que se ha solicitado.

También necesitamos indicar el progreso de uno de los estados de descarga frente a otros, ya que las descargas no son instantáneas.

Esto presentó un desafío, ya que las apps de Google Play utilizan una variedad de layouts diferentes, y algunos de ellos casi no tienen espacio libre, y no se quería perder información en la pantalla o sobre-saturar con demasiada información al usuario.

Así que diseñamos un indicador personalizado que podría mostrar toda la información necesaria en un espacio muy pequeño, con la flexibilidad de poder aparecer en la parte superior del contenido si era necesario.

El color indica si se ha descargado (azul) o no (gris). La apariencia del pin indica si la descarga es permanente (blanco y vertical) o temporal (gris y diagonal). Y cuando el estado de un progreso está cambiando, el progreso se indica mediante un gráfico que se va rellenando o vaciando alrededor del pin.

En las apps de Google Play con diferentes layouts, el indicador aparece en cada elemento. Este comunica tanto el estado de la descarga como el progreso, en una visualización bastante compacta que puede ser incorporada en cualquier diseño de pantalla.

Si te encuentras en una situación en que los indicadores estándar no cumplen tus necesidades (debido a falta de espacio, o estados complejos), diseña el tuyo propio. Intenta añadir elementos que formen parte de Android para hacer dichos indicadores más familiares a los usuarios. En este ejemplo, hemos utilizado una forma circular, además de utilizar el color azul, un estilo plano y simple, ya que todo ello son características del sistema Android.

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

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