Prototipo con facilidad: un tutorial de InVision Studio

A menos que haya estado dormido durante la primera mitad de 2018, probablemente estaba muy consciente de la anticipación febril en la comunidad de diseño interactivo que condujo al lanzamiento de la aplicación InVision Studio. InVision es mejor conocido por sus conjuntos de complementos de Sketch y Photoshop como Craft, y por ser la plataforma de referencia para convertir rápidamente diseños de interfaz estática en prototipos en los que se puede hacer clic y compartir. En un paso audaz el año pasado, anunciaron el desarrollo de su propio software de diseño digital para competir con los favoritos de la industria como Sketch y Figma.

El producto fue promocionado como revolucionario e hizo algunas promesas de peso para un flujo de trabajo perfecto desde el diseño hasta el prototipo, una funcionalidad de interacción compleja, una animación de transición impresionante, y sería gratis. InVision publicó algunos teasers y demostraciones bastante emocionantes para entusiasmar a los diseñadores. La anticipación aumentó aún más a medida que la versión beta inicial se retrasó varias veces a principios de año.

A medida que más diseñadores han comenzado a jugar con el software, aparecen más y más tutoriales y guías para demostrar los conceptos básicos de la herramienta de diseño de interfaz de la aplicación. InVision también ha creado algunos propios para incorporar a los usuarios a los conceptos básicos de InVision Studio.

Aunque los lanzamientos de acceso anticipado están recibiendo críticas mixtas, Studio tiene algunas características interesantes y mucho potencial. Este tutorial tiene como objetivo guiar a los primeros usuarios a través de los conceptos básicos de creación de prototipos de InVision Studio y agregar algunas animaciones básicas de prototipos.

¡Cree un prototipo interactivo con transiciones animadas ingeniosas en muy poco tiempo siguiendo este tutorial de InVision Studio!

El recorrido de níquel del espacio de trabajo de InVision Studio

Gran parte de Studio debería ser familiar para los diseñadores de UI y cualquiera que haya estado usando software de diseño digital como Sketch. Gran parte del espacio de trabajo toma prestadas señales de la interfaz de usuario de Sketch, con el panel lateral izquierdo que contiene páginas, capas y grupos; el panel lateral derecho para inspectores; y una barra de herramientas contextual en la parte superior.

También encontrará muchas de las mismas herramientas, aunque algunas funcionalidades se nombran de manera diferente. Por ejemplo, un "símbolo" de Sketch se denomina componente en Studio.

El panel de interacciones

A los efectos de este tutorial, nos centraremos en utilizar las herramientas de interacción para crear puntos de acceso interactivos entre pantallas y crear transiciones suaves entre ellas. Mucha de la magia ocurrirá en el "panel de interacciones" en el lado derecho del espacio de trabajo de Studio.

La forma sencilla de crear interacciones es seleccionar una capa o un grupo de activación y presionar "c" en el teclado (o hacer clic en el icono del rayo en la barra de herramientas superior), que inicia un látigo azul con el que seleccionar una pantalla de destino. Luego, Studio solicitará al diseñador que seleccione el gesto o la entrada del usuario que activa el evento y que elija entre un conjunto de transiciones preestablecidas o una transición de "movimiento".

Animación de estudio InVision

Hay muchos elementos para un gran diseño de interacción, pero el uso correcto de transiciones animadas y microinteracciones en una interfaz de usuario es más que un simple escaparate.

Mejoran la usabilidad y pueden significar la diferencia entre un producto querido y un desastre confuso.

A lo largo de este tutorial, usamos una combinación de transiciones preestablecidas y transiciones de movimiento para crear nuestro prototipo de aplicación. Las transiciones predeterminadas son bastante sencillas y resultarán familiares para los usuarios de la plataforma de prototipos en línea de InVision.

Las reglas que rigen cómo funcionan las transiciones de movimiento entre pantallas son un poco más misteriosas. Si bien hay muchas consideraciones obvias del diseñador que se tienen en cuenta al crear la herramienta, por ejemplo, la vinculación automática de elementos entre pantallas, se necesita algo de prueba y error para lograr ciertos efectos al agregar movimiento a las transiciones. Con suerte, este tutorial ayudará a los diseñadores a sentirse un poco más cómodos experimentando con lo que InVision Studio tiene para ofrecer.

Cosas a tener en cuenta

Studio promete una gran cantidad de funciones inteligentes en torno a las animaciones. Por ejemplo, puede crear transiciones de movimiento entre objetos duplicados de una mesa de trabajo a otra cuando se conectan a través de una interacción. Luego, los diseñadores pueden modificar estas animaciones según lo deseen para lograr algunos hermosos efectos de aceleración y otros efectos de movimiento. Aprender las excentricidades de cómo funciona esto cuando se intenta hacer la transición de una pila de objetos en una secuencia específica puede requerir paciencia y algo de práctica.

Las transiciones de movimiento funcionan mejor con objetos en mesas de trabajo que se han duplicado uno de otro. La función de animación es "inteligente" en el sentido de que reconoce objetos duplicados con los mismos nombres de capa, así que tenga cuidado de no eliminar o cambiar el nombre de las capas clave entre pantallas (que es una forma frustrantemente fácil de arruinar una gran animación).

Tenga en cuenta que Studio aún está en sus inicios, por lo que los diseñadores deben estar preparados para encontrar una buena cantidad de errores. Por ejemplo, el botón "vista previa" inicia una vista previa interactiva del prototipo, pero en ocasiones las interacciones no se activan en absoluto, en cuyo caso deberá guardar y volver a abrir el archivo.

Mientras aprendía el software, más de un archivo parecía corromperse extrañamente, eliminando todas las mesas de trabajo y haciendo que todos los paneles de herramientas fueran inaccesibles. He informado del error y he aprendido a guardar varias versiones de mis archivos para no perder demasiado trabajo.

Por último, siempre ayuda ser organizado. Al crear un prototipo en cualquier plataforma, ya sea Studio, Sketch o Marvel, hacer un seguimiento de los objetos y las etiquetas de las capas ahorrará tiempo y frustraciones, especialmente si está trabajando con un equipo o entregando el archivo en algún momento. Tome nota del orden de las capas y los grupos de capas al crear interacciones; esto suele marcar una gran diferencia a la hora de lograr el efecto de animación deseado.

El Tuto!

¡Vamos a empezar! Si aún no lo ha hecho, vaya a InVision Studio para descargar una versión de acceso anticipado de la aplicación Studio. Una vez que tenga InVision Studio en su computadora, descargue los archivos del tutorial aquí. Una vez que inicie el software Studio, elija abrir el archivo desde donde lo guardó.

Paso 1: abra el archivo y eche un vistazo

Este prototipo interactivo será para una aplicación móvil sobre artistas modernos de finales del siglo XIX y principios del XX. Todas las pantallas se han creado de antemano utilizando una cuidadosa duplicación de la mesa de trabajo, que es necesaria para el uso adecuado de la función de transición de movimiento.

La jerarquía tiene 3 niveles de profundidad, comenzando en "Inicio", luego en la biografía de cada artista individual y finalmente hasta un carrusel de cuatro ejemplos del trabajo del artista. Notará que la mesa de trabajo "Inicio" tiene un pequeño ícono de una casa, que designa la mesa de trabajo inicial para el prototipo.

El tutorial se centrará en crear rutas de navegación simples que conecten estos tres niveles de profundidad. Haremos uso de las herramientas de interacción y transición de Studio para que el prototipo se sienta como una aplicación realmente interactiva.

Paso 2: conecta el mosaico del artista a la biografía del artista

Ve a la primera mesa de trabajo. Tómese un momento para expandir el grupo de capas "Artist Tile 1". Notará tres grupos anidados: uno para el nombre del artista, uno para una imagen destacada y una tercera capa que contiene "Biotexto".

Mirando la pantalla de la mesa de trabajo, el tercer grupo de capas no es inmediatamente visible debido a la forma en que Studio maneja las transiciones de movimiento, a lo que llegaremos en un momento. Solo anótalo por ahora.

Seleccione el grupo de capas que contiene todos estos elementos: "Artist Tile 1". Con este grupo seleccionado, presione "c" en su teclado (o haga clic en el icono del rayo en la barra de herramientas superior) para iniciar la herramienta de interacción. Su cursor será seguido por un látigo azul para elegir la pantalla de destino para su interacción.

Seleccione la mesa de trabajo inmediatamente a la derecha titulada "Artist Bio 1" y se le pedirá que elija el activador y el tipo de transición. Para el disparador, elija "Tocar" y luego elija "Movimiento" como la transición. A continuación, puede elegir la duración de la transición. Establezcamos esta transición en 2 segundos y presionemos "Guardar".

Haga clic en el botón de reproducción para obtener una vista previa del prototipo. ¿Viste la forma en que las cosas se mueven a lo largo de la pantalla y cómo la biocapa se deslizó hacia abajo desde debajo de la imagen? Felicitaciones, ¡ha creado una transición de interacción bastante ingeniosa!

Paso 3: conecte un botón Atrás a la pantalla de inicio

Ahora deberíamos dar a los usuarios una forma de volver a la pantalla de inicio. Vaya a la mesa de trabajo "Artist Bio 1" y seleccione el componente "btn_back" en la esquina superior izquierda. Cree un disparador aquí presionando "c" y seleccionando la mesa de trabajo "Inicio".

Nuevamente, establezcamos el disparador en "Toque", la interacción en "Movimiento" y la duración en 2 segundos. Haga clic en Vista previa y deléitese con las transiciones de apertura y cierre que acaba de crear. Observe cómo la animación que se activa al cerrar el mosaico es una inversión de la animación que se reproduce al abrir el mosaico.

Paso 4: conecta la galería

Si está tomando nota de los nombres de las capas en la primera y segunda mesas de trabajo, puede notar que son idénticos. Esto se debe a que, como se mencionó anteriormente, las animaciones de Studio vinculan automáticamente las capas duplicadas de una mesa de trabajo a la siguiente si comparten un nombre. Cambiar el nombre de estas capas romperá el enlace de la animación y la transición se desvanecerá de manera predeterminada, lo que es especialmente desafiante para aquellos obsesionados con las etiquetas de capa significativas.

Queremos aplicar una transición de movimiento ordenada más para abrir la galería de imágenes del carrusel. La mesa de trabajo titulada "Artista 1 - Imagen 1" contiene elementos duplicados de la mesa de trabajo "Artist Bio 1", redimensionada para mostrar más de la imagen de ejemplo.

Comience haciendo clic en la capa "Artist Bio 1" para seleccionar el grupo "Imagen destacada". Este será el disparador para abrir la galería. Cree una interacción de "Toque" aquí conectándose a la primera mesa de trabajo en la galería y seleccione "Movimiento". Esta vez, configura la duración para que sea un poco más rápida: 1 segundo.

Para crear una buena transición para cerrar la galería, simplemente seleccione la capa del botón de cierre en la mesa de trabajo "Artista 1 - Imagen 1" y vuelva a conectarla a la mesa de trabajo "Artist Bio 1", con la misma configuración que antes.

Obtenga una vista previa de esta animación y maravíllese con lo bien que el prototipo pasa de la pantalla biográfica del artista al carrusel de imágenes y viceversa. ¡Ahora hemos conectado la navegación a través de tres niveles de la jerarquía de nuestra aplicación!

Paso 5: conecta todas las imágenes de la galería

Hemos realizado la mayoría de las transiciones de movimiento que necesitaremos y ahora comenzaremos a usar algunos de los ajustes preestablecidos de animación para el resto de la galería.

El patrón de interacción aquí para que nuestro usuario hojee este carrusel de imágenes será un gesto de deslizamiento familiar. La buena noticia es que esta última parte es bastante simple y no tomará tiempo usando los ajustes preestablecidos de animación de Studio.

Seleccione la mesa de trabajo "Artista 1 - Imagen 1" y cree una interacción que lleve a la siguiente mesa de trabajo, "Artista 1 - Imagen 2". Esta vez, configure el gatillo en "Deslizar hacia la izquierda". Para la transición, seleccione "Preestablecido" y elija "Empujar a la izquierda" en el menú desplegable.

Para crear una interacción inversa, seleccione la mesa de trabajo "Artista 1 - Imagen 2" y conéctela a la mesa de trabajo anterior, solo que esta vez con el gesto "Deslizar hacia la derecha" y la transición "Empujar hacia la derecha".

Repita este patrón con las siguientes mesas de trabajo, conectando las mesas de trabajo de la Imagen 2 con la Imagen 3 y la Imagen 3 con la Imagen 4. ¡Fácil!

Para hacer esto aún más realista, cerremos el ciclo entre la Imagen 1 y la Imagen 4. Seleccione la mesa de trabajo para la Imagen 4 y conéctela a la Imagen 1. Elija un activador "Deslizar hacia la izquierda" y una transición "Empujar hacia la izquierda" tal como lo haría con la siguiente imagen de una serie. Conecte la mesa de trabajo de la Imagen 1 a la Imagen 4 con el reverso y listo: ¡ha creado una galería en bucle!

Finalmente, seleccione cada uno de los componentes "btn_close" en las mesas de trabajo de la galería de imágenes y vincúlelos nuevamente a la mesa de trabajo bio. Puedes elegir la transición que quieras aquí, pero yo opté por "Empujar a la derecha".

A estas alturas, tiene una ruta de navegación bastante bien secuenciada para presumir. Haga clic en vista previa y pruébelo; su prototipo debería funcionar de manera muy parecida al gif al comienzo de este tutorial. Date una merecida palmadita en la espalda.

Paso 6: Repita

Ahora que ha vinculado todas las pantallas del primer ejemplo de artista con interacciones ingeniosas, repita los pasos para los otros dos conjuntos de pantallas en el archivo del tutorial. Están organizados de manera similar y será una buena práctica para acostumbrarse a la forma en que funciona Studio.

Próximos pasos

Con suerte, este tutorial proporcionó una introducción a algunas de las características interesantes de la creación de prototipos de InVision Studio. Mientras se familiariza con Studio, debe intentar ajustar las transiciones utilizando las herramientas de animación avanzadas. Experimente con las otras herramientas en el espacio de trabajo e intente seguir algunos otros tutoriales de InVision Studio que existen. Con la práctica, puede convertirse en uno de los gurús del diseño de InVision Studio.

Es posible que haya encontrado algunos errores o comportamientos inesperados en el camino, pero esa es la naturaleza de probar un nuevo software. La gente de InVision ha respondido muy bien a los comentarios y definitivamente continuará mejorando Studio, haciéndolo cada vez más estable y útil.

Studio es una herramienta divertida para probar, y no hay razón para no experimentar con una herramienta gratuita de creación de prototipos de aplicaciones. Si bien no es probable que reemplace el software de acceso como Sketch en la comunidad de diseño actual, tiene mucho potencial.

Lectura adicional en el blog de diseño de Toptal:

• Perfeccione su proceso de diseño de UX: una guía para el diseño de prototipos
• El poder de Figma como herramienta de diseño
• Creación de prototipos con datos reales: un tutorial de Framer
• La guía fundamental para la usabilidad móvil
• Mejores prácticas y errores en el diseño de aplicaciones móviles