Share
Framer.js y el ecosistema que lo acompaña, Framer Studio son excelentes herramientas para componer, presentar e iterar sobre el diseño de interacción. En esta publicación, lo guiaré a través de la construcción de un prototipo interactivo para una Visita de producto ficticia de la aplicación iOS utilizando 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..
Juega con el prototipo en la página de demostración (se admiten navegadores basados en webkit-Chrome, Safari, etc.).
Primero, crea tus activos en Photoshop. El Product Tour constará de cuatro pasos:
Al trabajar con Framer, es importante tener en cuenta que solo las capas de Photoshop agrupadas y visibles se importarán a Framer Studio. Agrupe sus capas por interacción (es decir, las cosas que tienen la misma interacción deben agruparse), ya que tendrá acceso a las cosas por su nombre de grupo cuando esté trabajando en Framer. Para este recorrido del producto, he agrupado mis capas por su función:
Estas capas serán accesibles en el código más adelante vía myLayers.doneButton, myLayers.dots, etc.
A continuación, importe sus activos de Photoshop a Framer Studio. Su documento de Photoshop debe estar abierto y guardado al realizar una importación. Haga clic en el Importar botón, y verá un cuadro de diálogo que se ve algo así:
Framer aplanará sus grupos en imágenes al importar, y sus recursos serán accesibles en Framer una vez que se complete la importación.
Una práctica recomendada es convertir sus objetos agrupados importados en variables una vez que haya importado a Framer, ya que le será más fácil manipular el prototipo más adelante si lo necesita..
Por ejemplo, en una fecha posterior, es posible que desee utilizar un archivo de Photoshop diferente con grupos con nombres diferentes, pero con las mismas interacciones que ya ha creado. Esto será mucho más fácil si estructura sus interacciones alrededor de nombres de variables, ya que simplemente puede cambiar la referencia de la variable en una línea y reflejarla en el resto del documento:
# Esto importa todas las capas para "tour" en tourLayers ly = Framer.Importer.load "importado / tour" ## ------------------- VARIABLES ---- ----------------- welcome = ly.welcome dots = ly.dots moveDot = ly.movingDot done = ly.doneButton login = ly.login logo = ly.logo news = ly .newsFeed siderbar = ly.siderbar gradient = ly.gradient background = ly.background feedDescription. ly.feedDescripción
Ahora que tenemos algunos recursos con los que trabajar, puede comenzar a crear las interacciones que darán vida a su prototipo..
Si tiene activos que tendrán diferentes interacciones dentro de su composición, los estados son una forma poderosa de estructurar su código. En este prototipo, los cuatro pasos de la gira usarán diferentes activos de diferentes maneras. Los estados nos permitirán la flexibilidad para definir cada parte 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:
Nuestros estados reflejarán estas posiciones estableciendo diferentes X Los valores se basan en dónde debería estar el servicio de noticias en una parte determinada del recorrido:
origen de news.states.add: x: 750 mostrado: x: news.originX barra lateral: x: 655 oculto: x; -750
Para el recorrido del producto, queremos ilustrar diferentes áreas de la aplicación después de que un usuario haya deslizado a la izquierda para ir a la siguiente parte del recorrido del producto. Para hacer esto, primero habilite el arrastre en las capas donde le gustaría permitirlo.
Crear una matriz:
dragLayers = [bienvenida, gradiente, gradiente2]
Luego crea un para bucle para recorrer esta matriz, agregando propiedades que se pueden arrastrar a estas capas:
para arrastrar y arrastrar # Activar arrastrar drag.draggable.enabled = true drag.draggable.speedY = 0 # Evita arrastrar de izquierda a derecha drag.draggable.maxDragFrame = drag.frame drag.draggable.maxDragFrame.width * = 2 drag.draggable. maxDragFrame.x = drag.x-drag.width
Accentsconagua
enabled = true permite arrastrar la capaspeedY = 0 desactiva el arrastre a lo largo del eje YmaxDragFrame = drag.frame establece el marco dentro del cual se puede arrastrar para permanecer dentro de la propia capamaxDragFrame.x = drag.x-drag.width permite que el marco sea arrastrado a lo largo del eje x negativamente (es decir, de derecha a izquierda)Después de habilitar el arrastre en las capas que desea, diríjase a las capas y cambie los estados de sus activos cuando se arrastran hasta cierto punto..
welcome.on Events.DragEnd, -> if welcome.screenFrame.x < -150
Cuando el usuario haya terminado de arrastrar el Bienvenido capa, si lo han arrastrado más allá de 150 píxeles a la izquierda (screenFrame.x < -150), luego cambie los estados del prototipo al estado de la fuente de noticias:
welcome.on EventsDragEnd, -> if welcome.screenframe.x < -150 welcome.states.switch "hidden" news.states.switch "shown" moveDot.states.switch "second" gradient.states.switch "shown"
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 las actualizaciones de estado individuales en el News Feed en lugar de en todo el grupo le dará al prototipo una sensación más elegante, como se muestra en el siguiente gif animado (muy pequeño):
Primero, crea una matriz de las capas que quieres animar:
newsLayers = [ly.celeb1, ly.celeb2, ly.celeb3, ly.celeb4, ly.celeb5, ly.celeb6]
Luego, crea una función para animar cada capa al deseado X ubicación, añadiendo un retraso de 0.1 entre cada animación:
newsCurve = 'spring (50, 30, 30)' newsAnimation = -> para i en [0… newsLayers.length-1] newsLayers [i] .animate delay: i * 0.1 propiedades: x: 0 curve: newsCurve
Si va a reutilizar ciertas interacciones en varios lugares a lo largo de su prototipo, considere la posibilidad de crear funciones para poder reutilizarlas más adelante. Entonces, en lugar de escribir su animación varias veces, escríbala una vez y vuelva a usarla cuando sea necesario. Cree una animación que se pueda reutilizar usando un método como:
Layer :: fadeOut = -> this.animate properties: opacidad: 0 curva: tiempo de 'facilidad de entrada': 0.5
Luego, después, puede "desaparecer" cualquier capa llamando a: myLayer.fadeOut ()
Framer es una excelente herramienta para crear rápidamente prototipos modernos, sedosos y altamente interactivos. Incorporándolo a su flujo de trabajo, creando sus diseños en Photoshop (o Sketch), luego manipulándolos a través de Framer, le permitirá crear prototipos robustos mucho más rápidamente.
También podrá modificar sus diseños en su herramienta de diseño visual y luego importarlos directamente a Framer, permitiendo una iteración más eficiente a medida que el desarrollo progresa. Si ha configurado correctamente su documento con variables, sus interacciones se aplicarán a los activos recién importados, lo que permitirá una rápida iteración sobre la interacción y las ideas de diseño visual. Si tuviera que ofrecer un diseño de interacción estática, tendría que actualizar varias composiciones estáticas con nuevos elementos visuales. Sin embargo, al usar este flujo de trabajo, solo hace un cambio en un solo documento principal, vuelve a importar a Framer y listo.!
Estén atentos para más tutoriales sobre prototipos. Además, no dude en comentar a continuación, y le responderé lo antes posible. Feliz prototipado!
