Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Prototyping

Creando un prototipo interactivo con un recorrido de un producto para iOS con Framer.js

by
Read Time:6 minsLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

Framer.js y el ecosistema que lo acompaña Framer Studio son excelentes herramientas para componer, presentar e iterar sobre el diseño interactivo. En esta publicación, te guiaré a través de la construcción de un prototipo interactivo con un recorrido ficticio de un producto para iOS usando Adobe Photoshop CC 2014 y Framer Studio 1.9.29. Asumiremos que estamos creando una aplicación de noticias, en la que las actualizaciones de la red del usuario se muestran en una línea de tiempo, mientras que la configuración y las opciones adicionales se muestran en una barra lateral.

framer studioframer studioframer studio

Juega con el prototipo en la página de demostración (se admiten navegadores basados en webkit: Chrome, Safari, etc.).

1. Configuración inicial

Crear recursos en Photoshop

En primer lugar, crea tus recursos en Photoshop. El recorrido del producto constará de cuatro pasos:

  1. Introducción a la aplicación
  2. Introducción a la sección de noticias
  3. Introducción a la barra lateral
  4. Pantalla de inicio de sesión

Al trabajar con Framer, es importante tener en cuenta que solo las capas agrupadas y visibles de Photoshop se importarán a Framer Studio. Agrupa tus capas por interacción (es decir, las cosas que tienen la misma interacción deben agruparse), ya que accederás a las cosas por su nombre de grupo cuando trabajes en Framer. Para este recorrido por el producto, he agrupado mis capas por su función:

photoshop layersphotoshop layersphotoshop layers

Estas capas serán accesibles en el código más adelante a través de myLayers.doneButton, myLayers.dots, etc.

Importar a Framer Studio

A continuación, importa tus recursos de Photoshop a Framer Studio. Tu documento de Photoshop debe estar abierto y guardado al realizar una importación. Haz clic en el botón Importar y verás un cuadro de diálogo que se parece a esto:

importimportimport

Framer aplanará tus grupos en imágenes al importarlas, y tus recursos estarán accesibles en Framer una vez que se complete la importación.

Usa variables para manipular esto fácilmente más adelante

Es una buena práctica convertir los objetos agrupados importados en variables una vez que hayas importado a Framer, ya que te será más fácil manipular el prototipo más adelante si lo necesitas.

Por ejemplo, en una fecha posterior, es posible que desees utilizar un archivo de Photoshop diferente con grupos con nombres diferentes, pero con las mismas interacciones que ya has creado. Esto será mucho más fácil si estructuras tus interacciones en torno a nombres de variables, ya que simplemente puedes cambiar la referencia de la variable en una línea y hacer que se refleje en el resto del documento:

Ahora que tenemos algunos recursos con los que trabajar, puedes comenzar a crear las interacciones que darán vida a tu prototipo.

Usar estados

Si tienes recursos que tendrán diferentes interacciones dentro de tu composición, los estados son una forma poderosa de estructurar tu código. En este prototipo, los cuatro pasos del recorrido utilizarán diferentes recursos de diferentes maneras. Los estados nos permitirán la flexibilidad para definir cada pieza de la composición de forma independiente, aumentando la modularidad y la legibilidad del código.

Por ejemplo, nuestra pantalla de noticias tendrá cuatro estados:

  1. Original (lado derecho de la pantalla, no visible)
  2. Visible (centro de la pantalla)
  3. Barra lateral (extremo derecho de la pantalla)
  4. Oculto (lado izquierdo de la pantalla, no visible)

Nuestros estados reflejarán estas posiciones estableciendo diferentes valores x basados en dónde debe estar la fuente de noticias en una parte determinada del recorrido:

2. Interacciones estructurales en Framer

Habilitar la acción de arrastrar en las capas

Para el recorrido por el producto, queremos ilustrar diferentes áreas de la aplicación después de que un usuario haya deslizado hacia la izquierda para pasar a la siguiente parte del recorrido por el producto. Para hacer esto, primero habilita la opción de arrastrar en las capas donde te gustaría permitirlo.

Crea una matriz:

Luego crea un bucle for para iterar a través de esta matriz, agregando propiedades arrastrables a estas capas:

  • enabled = true permite arrastrar la capa
  • speedY = 0 deshabilita la acción de "arrastrar" a lo largo del eje Y
  • maxDragFrame = drag.frame establece el marco dentro del cual se puede arrastrar para permanecer dentro de la capa misma
  • maxDragFrame.x = drag.x-drag.width permite que el marco se arrastre negativamente a lo largo del eje x (es decir, de derecha a izquierda)

Cambiar estados cuando se arrastra más allá de un punto determinado

Después de habilitar la opción de arrastrar en las capas que desees, dirígete a las capas y cambia los estados de tus recursos cuando se arrastran un cierto grado.

Cuando el usuario haya terminado de arrastrar la capa welcome, si la ha arrastrado más allá de 150 píxeles hacia la izquierda (screenFrame.x < -150), cambia los estados del prototipo al estado de fuente de noticias:

Los estados de otros elementos deberán cambiar en consecuencia (ocultar el estado de bienvenida, mover el punto en la parte inferior para reflejar el paso 2 del recorrido, etc.). Luego repetimos para las otras capas arrastrables (gradiente, gradiente2) y cambiamos los estados en consecuencia. Continuando de esta manera, podemos crear un prototipo completamente desarrollado para nuestro recorrido por el producto.

Animar capas en una matriz individualmente, agregando un ligero retraso

Animar las actualizaciones de estados individuales en la lista de noticias en lugar de todo el grupo le dará al prototipo una sensación más elegante, como se demuestra en el (muy pequeño) gif animado a continuación:

En primer lugar, crea una matriz de las capas que deseas animar:

Luego, crea una función para animar cada capa a la ubicación x deseada, agregando un retraso de 0.1 entre cada animación:

Consejo profesional: crea funciones para sus interacciones

Si vas a reutilizar ciertas interacciones en varios lugares a lo largo de tu prototipo, considera crear funciones para poder reutilizarlas más adelante. Entonces, en lugar de escribir tu animación varias veces, escríbela una vez y reutilízala cuando sea necesario. Crea una animación que pueda reutilizarse utilizando un método como:

Luego, después, puedes agregar el efecto "fadeOut" a cualquier capa llamando simplemente a la función: myLayer.fadeOut()

Conclusión

Framer es una gran herramienta para crear rápidamente prototipos modernos, suaves y altamente interactivos. Incorporarlo a tu flujo de trabajo (crear tus diseños en Photoshop (o Sketch) y luego manipularlos a través de Framer) te permitirá crear prototipos robustos de manera más rápida.

También podrás modificar tus diseños en tu herramienta de diseño visual y luego importarlos directamente a Framer, lo que permite una iteración más eficiente a medida que avanza el desarrollo. Si has configurado correctamente tu documento con variables, tus interacciones se aplicarán a los recursos recién importados, lo que permite una iteración rápida sobre la interacción y las ideas del diseño visual. Si tuvieras que entregar un diseño de interacción estática, necesitarías actualizar múltiples composiciones estáticas con nuevos elementos visuales. Sin embargo, con este flujo de trabajo, simplemente realiza un cambio en un solo documento principal, vuelve a importarlo a Framer y ¡listo!

Estén atentos para más tutoriales sobre creación de prototipos. Además, siéntete libre de comentar a continuación, y me pondré en contacto contigo lo antes posible. ¡Feliz creación de prototipos!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.