¡El Black Friday ya está aquí! Crea una aplicación y disfruta de un 50% de descuento ahora.
Las apps de GoodBarber están listas para el iPhone Duo. Ver cómo
Blog

¿Cómo animar la guía interactiva de mi app?

En GoodBarber, la guía interactiva, o walkthrough, presenta tu app en el primer lanzamiento, en cinco pantallas como máximo que solo se ven una vez. Tu app tiene apenas unos segundos para presentarse, y la guía se configura en unos minutos en el back office, con los colores y las fuentes de tu app. Cada paso muestra una imagen o, si quieres, una animación Lottie.

  7 min de lectura

Aquí tienes lo que una guía interactiva aporta a tu app, los dos layouts entre los que elegir y cómo animar un paso.

Qué es una guía interactiva y cuándo aparece

La guía interactiva es tu app presentándose. En el back office de GoodBarber, la encuentras en Mi App › Guía interactiva. Aparece en el teléfono, una sola vez, la primera vez que se abre la app después de instalarla. Llega antes de las solicitudes de permisos, notificaciones o ubicación, para que lo primero que se vea sea tu app.

Tiene hasta cinco pasos, cada uno con un medio, un título y una descripción, todos opcionales. Alrededor, los mismos elementos de un paso a otro, el título de la página o tu logo, el botón Omitir, el pager y el botón Siguiente, que se convierte en Empezar en el último paso. Se avanza tocando el botón o deslizando la pantalla.

El fondo, las fuentes, el color del botón y del pager son los de tu app, es nuestro principio "Set once, consistent everywhere". No tienes nada que volver a dibujar. La guía interactiva es el primer paso del onboarding, cuyas buenas prácticas hemos detallado.

Polaroid o Immersive, dos layouts para los pasos de la guía

El back office de GoodBarber ofrece dos layouts para los pasos. En Polaroid, el medio aparece encima del título, en sus proporciones originales, nunca ampliado, y una imagen de 1200 × 1200 píxeles basta. En Immersive, el medio ocupa toda la pantalla, como un fondo, y el texto se coloca encima. Prevé 1536 × 2048 píxeles y elige un Efecto en las imágenes, Ninguno, Opacidad o Gradient, para que el texto siga siendo legible sobre la foto. En los dos layouts, la alineación de contenido ofrece seis posiciones, a la izquierda o al centro, arriba, en medio o abajo.

Una regla sencilla para elegir. Una foto que transmite un ambiente pide Immersive, es lo que hizo la escuela de música Eastside Music Workshop con sus fotos de clases. Un dibujo o una animación que explica pide Polaroid, con un fondo propio, es la elección de Unit 7, el taller de serigrafía, cuyos tres pasos están dibujados.

Animar un paso, con una animación Lottie en lugar de la imagen

Una imagen dice lo que hace tu app. Una animación lo muestra. En el primer paso de Unit 7, una franja del calendario se llena de verde y se estampa la palabra BOOKED, y entiendes que se reserva desde el teléfono antes incluso de leer la frase. En el segundo, una racleta atraviesa el marco y el contador pasa de 23 a 24 impresiones. En el tercero, un tambor de Riso señalado como vacío vuelve a estar disponible, con AVAILABLE como pegatina. Tres gestos de tres segundos, en bucle. Es nuestro principio "Polish you can feel", el movimiento que hace sentir una app bien hecha.

Estas animaciones son archivos Lottie, un formato de animación vectorial, ligero, que la app reproduce directamente. Las encuentras en la biblioteca LottieFiles, como explica nuestra ayuda, o las mandas dibujar con los colores de tu app, como las de Unit 7. En GoodBarber, una animación se configura tan fácilmente como una imagen. En el paso, elige LottieFiles en lugar de Imagen, añade el archivo y luego ajusta la Velocidad de reproducción, de x0.5 a x3, y la Reproducción en bucle. En todos los casos, la animación vuelve a empezar cada vez que aparece su paso. En Polaroid, ocupa el ancho de la pantalla y conserva sus proporciones. En Immersive, llena la pantalla como una foto.

La animación sigue siendo una opción. Un paso funciona muy bien con una imagen fija, y las dos se combinan en una misma guía.

Configura la guía interactiva en GoodBarber

La guía interactiva es una extensión de GoodBarber. Instálala desde Extensiones Store › Todas las extensiones, en la ficha Guía interactiva, con el botón Instalar. Cuesta 5 € al mes en las ofertas Standard y Premium, y está incluida en la oferta Pro. Aparece entonces el menú Mi App › Guía interactiva, con la vista previa de tu app al lado.

  1. Elige el layout, Immersive o Polaroid, en la parte superior del panel.
  2. Añade tus pasos, cinco como máximo. Haz clic en Agregar un paso y luego en Imagen o LottieFiles. Para una animación, la pestaña Archivo recibe tu archivo Lottie JSON, y la pestaña URL, el enlace de asset de una animación de LottieFiles. Ajusta luego la velocidad y el bucle, y escribe el Título y la Descripción. La vista previa, al lado, se abre en el primer paso, y su botón Siguiente hace pasar los demás.
  3. Configura los Ajustes generales, comunes a todos los pasos. El Color de fondo, la Alineación de contenido, el Título de la página o un logo en su lugar, la fuente y el color del título y de la descripción del paso, el Botón de saltar y el Botón "Siguiente", el color del Pager y, en Immersive, el Efecto en las imágenes. Todo se guarda sin botón que pulsar, y la vista previa lo refleja.

En el vídeo, la Alineación de contenido pasa abajo a la izquierda, y todos los pasos la siguen. Para que un solo paso tenga sus propios ajustes, un fondo propio, otra alineación, otro color de título o de botón, pasa por el JSON de tu app. La extensión gratuita Edición avanzada lo abre con un clic en { EDICIÓN }, como para la sombra, los bordes o la forma. El editor se abre en walkthrough. Despliega steps y luego el paso que vas a modificar, y añade las claves del panel que quieras cambiar. Por ejemplo, para que solo el primer paso coloque su texto abajo a la izquierda, haz clic en "+ Añadir", escribe contentAlign en el campo newKey y el valor bottom_left, y luego "Añadir". Por último, haz clic en "Guardar". Los demás pasos conservan la Alineación de contenido del panel.

Antes, después: el mismo paso, en imagen y luego en animación

Para ver lo que cambia una animación, aquí tienes dos veces el mismo paso, el de la tirada en Unit 7. A la izquierda, la imagen fija. El dibujo está cuidado, pero quieto. Resulta un poco abstracto y no se entiende enseguida lo que muestra. A la derecha, la misma ilustración animada. La racleta atraviesa la pantalla de serigrafía, la tinta aparece a su paso, el contador pasa de 23 a 24, y se reconoce al instante una tirada en marcha. Nada más ha cambiado, ni el texto, ni los colores, ni el botón.

Aquí, el movimiento hace que el paso se lea bien. Pero incluso cuando el dibujo ya es claro, la animación da más vida a la guía y muestra que tu app está cuidada.

Mi guía interactiva favorita es animada

Lo que prefiero es una guía interactiva animada. Para presentar una app en pocas pantallas, no conozco nada más elocuente que el movimiento. La de Unit 7, un taller de serigrafía compartido, es un buen ejemplo. Está en Polaroid, sobre un fondo Charcoal #282727, con el logo del taller en lugar del título. Los títulos están en Archivo Black 28, las descripciones en Archivo 17, en un gris Concrete #A7A7A7. El botón, con esquinas rectas, y el pager toman el verde del taller, Unit Green #B9FF00. Las tres animaciones Lottie se dibujaron para la app, en sus colores, y cada una muestra en tres segundos un gesto de los miembros, reservar, imprimir, avisar. En veinte segundos, se entiende para qué sirve la app, y la pantalla de inicio toma el relevo.

La guía interactiva en resumen

  • En una app GoodBarber, la guía interactiva, o walkthrough, aparece una sola vez, en el primer lanzamiento en el teléfono, y tiene hasta cinco pasos.
  • Cada paso lleva un medio, un título y una descripción, todos opcionales. Alrededor, el título de la página o tu logo, el botón Omitir, el pager y el botón Siguiente, que se convierte en Empezar en el último paso.
  • Dos layouts, Polaroid, el medio encima del título, e Immersive, el medio a pantalla completa con un efecto para que el texto sea legible.
  • Una animación Lottie se coloca como una imagen, con una velocidad de x0.5 a x3 y reproducción en bucle. Vuelve a empezar cada vez que aparece su paso.
  • Todo se configura en Mi App › Guía interactiva, y cada paso puede tener sus propios ajustes en el JSON, con la extensión gratuita Edición avanzada.

Te toca

Instala la Guía interactiva desde Extensiones Store, abre Mi App › Guía interactiva y añade un primer paso con una imagen, tu título y una frase. La vista previa lo muestra enseguida. Luego prueba una animación Lottie en lugar de la imagen y mira cómo la página cobra vida.

¿Todavía no tienes app? Crea la tuya con GoodBarber, el Mobile App Builder.

Sigue leyendo