Share
En este tutorial, te enseñaré cómo crear un prototipo animado del diseño de tu aplicación móvil. El prototipo se verá y sentirá como una aplicación real en su teléfono; Podrás navegar y desplazarte por tu diseño, utilizando gestos y animaciones personalizadas..
Al final de este tutorial, podrás crear una versión animada de prototipo de cualquier diseño de aplicación utilizando Pixate. Empecemos!
Para este tutorial necesitarás tres cosas a seguir:
Desde mi punto de vista, Pixate es la mejor herramienta disponible para los diseñadores para crear prototipos de aplicaciones móviles completamente funcionales y personalizados, sin escribir una sola línea de código..
A diferencia de otras herramientas de creación de prototipos, como Flinto o Marvel, Pixate le permite separar capas e integrar interacciones, como arrastrar, tocar, tocar dos veces, desplazarse, pellizcar y más..
El propio prototipo existe en la web. Durante este tutorial usaremos la versión web de Pixate, pero obtendremos los resultados finales en una aplicación nativa en nuestro teléfono, que brinda una excelente experiencia fluida.
Antes de que podamos comenzar a crear nuestro primer prototipo, tenemos que configurar un nuevo proyecto en Pixate..
Después de iniciar sesión en su cuenta, haga clic en Nuevo proyecto botón, luego seleccione el Nuevo prototipo opción.
Aquí podemos seleccionar el tipo específico de dispositivo para el que estamos diseñando. En este caso, vamos a elegir el iPhone 6, ya que diseñamos la aplicación de fitness para ese dispositivo en particular en Sketch.
Nota: También podemos seleccionar tamaños de pantalla de smartwatch como Apple Watch, LG G Watch o Moto 360..
Pixate nos permite animar cada objeto en nuestro prototipo, en función de diversos eventos e interacciones, como la carga de la pantalla, el toque, el doble toque o el desplazamiento. Esto también significa que tenemos que exportar por separado los elementos que queremos animar en nuestro prototipo..
Abramos nuestro archivo Sketch y comencemos a exportar cada elemento uno por uno. Si observa el prototipo final, puede ver que en el caso de la “pantalla IR” exporté por separado la barra de navegación, la barra de pestañas, cada columna del pronóstico del tiempo y los círculos de objetivos..
Debes exportar en PNG, ya que es clave tener capas transparentes.
Propina: siempre se centran en una pantalla a la vez. En este punto del proceso, solo debe exportar las capas de la "pantalla IR", por lo que será más fácil trabajar y modificar las cosas sobre la marcha si es necesario.
Importar activos en Pixate es una cuestión de controlar y soltar los archivos PNG exportados en la ventana del navegador:
Ahora es el momento de reconstruir nuestra pantalla en Pixate. Este trabajo se puede hacer mucho más rápido si nos referimos a la Panel de inspectores Tanto en Pixate como en Sketch. Cuando este sea el caso, solo tenemos que copiar y pegar los valores X e Y de cada elemento.
Nota: tenga en cuenta que nuestro diseño de Sketch se realizó con una resolución de 2x, mientras que en Pixate estamos trabajando con una resolución de 1x. Esto significa que tenemos que dividir cada número de Sketch por 2 antes de aplicar a Pixate.
Vamos a abrir la aplicación Pixate en nuestro iPhone, donde podemos ver que nuestro diseño ha comenzado a unirse. De ahora en adelante, cada vez que cambiemos algo en la aplicación web, se sincronizará automáticamente con nuestros teléfonos..
Después de seleccionar la primera columna del pronóstico del tiempo, podemos ver los tipos de animaciones disponibles en el lado izquierdo de nuestro navegador. Vamos a arrastrar y soltar el Animación de desvanecimiento Al lado opuesto, la barra lateral derecha..
Ahora, tenemos que especificar cuándo queremos que aparezca esta animación. Selecciona el Residencia en valores a * PANTALLA *, Cargado.
Esto significa que nuestra animación se reproducirá justo después de que se cargue la primera pantalla, lo que sucede inmediatamente cuando ejecutamos el prototipo..
Dado que nuestro objetivo es tener un efecto de atenuación, establezcamos la opacidad inicial en 0% sobre el Panel de propiedades, y para 100% sobre el Panel de animaciones.
En la parte inferior de la Panel de animaciones También podemos configurar la curva de aceleración, la duración y los valores de retardo..
Debe establecer la duración entre 0.2-0.4s, pero no hay oficial Aquí, por lo que te animo a jugar con estos valores hasta que sientas que son los correctos..
Nota: en mi prototipo, preferí usar animaciones ligeramente más lentas, para que puedas verlas más claramente. En un proyecto real, recomendaría movimientos más rápidos y sutiles..
Ahora seleccionemos la segunda columna de la previsión del tiempo y configuremos exactamente la misma Animación de desvanecimiento como hicimos antes, con una sola diferencia: esta vez se estableció el retraso de la animación estar cerca 0.1-0.3s. De esta manera las animaciones se reproducirán en secuencia..
Continúe con el mismo método exacto para todos los elementos a los que le gustaría agregar una animación Fade, pero no olvide aumentar continuamente el valor del retraso de la animación..
Ahora configuremos la interacción entre los círculos en la sección de objetivos. Para poder desplazarnos horizontalmente entre los anillos de objetivos, debemos importarlos como tres archivos PNG separados.
Después de colocarlos en su posición correcta, vamos a crear una nueva capa en pixate; Necesario para habilitar el desplazamiento horizontal. Sobre el Panel de propiedades Asegúrate de establecer la apariencia en Sin imagen establecida. Antes de agregar cualquier interacción a esta capa, agregaremos los anillos PNG a la nueva capa en la capa nueva. Capas panel. En términos simples, esto es similar a la Grupo herramienta en croquis.
Ahora podemos añadir un Interacción de arrastre a esta nueva capa y conjunto Desplazamiento horizontal con posición mínima: -255 puntos y posición máxima: 120 pts sobre el Panel de animaciones.
Para el pequeño efecto de rebote durante el desplazamiento horizontal, creé una animación personalizada con condiciones especiales. Para empezar, agregue un Mover animacion a la capa más nueva, que contiene todas las capas de anillo.
Ahora en el Animaciones el panel establece el Residencia en valor para Configuración de objetivos y Arrastrar Liberación.
Por el primero Condición de si Usé la siguiente fórmula: goal_settings.x> -255 && goal_settings.x < -67, lo que significa que si la posición de la capa del grupo de objetivos (ID de capa: ajustes_objetivos) es mayor que -255 pt y más pequeño que -67 puntos, moverá el lado izquierdo de la capa a la -67 puntos punto.
Para la animación utilicé un Curva de flexión de la primavera con un valor de fricción de 25 y tensión de600.
Mi segunda condición de IF es: goal_settings.x <= -67 && goal_settings.x > -255, A continuación, mueva el lado izquierdo de la capa para -255 pt.
La tercera condición es: goal_settings.x> -67 && goal_settings.x < 150, A continuación, mueva el lado izquierdo de la capa para 150 pt.
Por último, pero no menos importante, la última declaración IF es: goal_settings.x < 150 && goal_settings.x > -67, que moverá el lado izquierdo de la capa a -67 puntos.
Nota: Sé que esto parece un poco complicado por primera vez, pero le animo a que copie y pegue mi solución y la pruebe, luego cambie algo y vuelva a intentarlo. Mis condiciones no son de ninguna manera perfectas, por lo que incluso puedes mejorarlas y modificarlas, hasta que se sientan adecuadas para ti..
Como hicimos con los aros de meta, vamos a crear otra nueva capa y agregue cada capa que tenemos hasta ahora. Solo estamos agrupando las capas de la "pantalla IR" ahora mismo.
Antes de comenzar a importar y reconstruir la "Pantalla de desafíos" en Pixate, debemos crear una nueva capa, que funcionará como la capa de grupo para cada elemento en esta pantalla. Coloquemos esto justo al lado de la "pantalla IR" sin ningún relleno o espacio entre ellos.
Después de importar y reconstruir nuestra pantalla, capa por capa, debemos configurar el desplazamiento vertical para las tarjetas de desafíos.
Vamos a crear una nueva capa Sin fondo de imagen y agregue nuestras capas de cartas. El desplazamiento vertical es incluso más fácil que el desplazamiento horizontal, porque lo único que tenemos que hacer es agregar un Interacción de desplazamiento a esta nueva capa.
Para poder ver también la “pantalla de desafíos” en nuestro iPhone, tenemos que volver a nuestra “pantalla de IR” y agregar una nueva capa de rectángulo en la parte superior del botón Desafíos en la barra de pestañas.
Establezca el aspecto como sin relleno de imagen y agregue un Toque la interacción lo. Ahora regresemos, seleccione nuestra capa de grupo de Desafíos, que contiene cada elemento en la "pantalla de Desafíos" y agregue un Mover animacion lo.
Lo único que nos queda por hacer es establecer el Residencia en evento al botón que recientemente agregamos a nuestra "pantalla GO" con Toque la interacción y establecer el Mover a valor para 0 pt. Luego, cuando presionamos el botón de desafíos en la "pantalla IR", la capa del grupo de desafíos se moverá a su lugar adecuado.
Para animar las cartas de desafío, usaremos dos animaciones, un Fade y un Move, al mismo tiempo. Asegúrese de que ha configurado el Residencia en Valor al botón Desafíos..
Para la animación Fade, usamos la misma técnica que con la pantalla GO, así que configuremos la Opacidad al 0% sobre el Propiedades panel y el Desvanecerse hacia valoral 100% en el Animaciones panel. Por la duración que utilicé 0.5s con un 0.2s retrasar.
Nota: No olvides aumentar continuamente el valor del retraso para cada tarjeta..
Nuestra segunda animación es una Mover animacion. Al igual que en el caso de la animación Fade, configuremos el Residencia en valore el botón Desafíos y use exactamente la misma duración y retraso de la animación que en el caso de la animación Desvanecer. Ahora, establece el Mover al principio valor para 10px, que moverá nuestra carta de desafío 10px hacia arriba, cuando comience la animación.
Ya que al final de la animación, cada carta de desafío será 10px hacia arriba, tenemos que moverlas 10px hacia abajo en nuestro lienzo de Pixate..
Vamos a crear una nueva capa una vez más, que contendrá la sección Examinar desafíos. Como en el caso de la sección Mis desafíos, agreguemos un Interacción de desplazamiento lo.
Para poder alternar entre las secciones Mis desafíos y Buscar desafíos, debemos crear una nueva capa en la parte superior del título Examinar desafíos, que funcionará como un botón. Establecer el relleno de capa a Sin imagen establecida y agrega un Toque la interacción lo.
Ahora, si volvemos a nuestra capa de grupo Examinar desafíos (creada en el paso anterior) podemos agregar un Animación de desvanecimiento A ello se basa en este nuevo botón. Entonces, hasta que presionemos el botón Examinar desafíos, la opacidad de la sección Examinar desafíos es 0%, y después del toque, será 100%..
Como paso final agregué un Animación de escala y desvanecimiento a las barras de progreso de la línea de tiempo en la sección Examinar desafíos.
Nota: No olvide utilizar exactamente la misma duración de la animación y los valores de retardo para las animaciones Fade y Scale..
Antes de comenzar a animar la "pantalla de actividades", tenemos que repetir algunos pasos realizados en el caso de la "pantalla de desafíos" también.
Vamos a crear una nueva capa justo al lado de la "pantalla de desafíos" sin ningún tipo de relleno. Esta capa será la capa de grupo para los elementos en la "pantalla de Actividades".
Ahora volvamos a nuestra "pantalla IR" y creamos una nueva capa en la parte superior de la Ocupaciones botón en la barra de pestañas. Agrega un Toque la interacción a esta nueva capa.
Regrese a nuestra capa de grupo de Actividades y agregue un Mover la interaccion Para ello basado en nuestro nuevo botón..
Ahora agregue un Animación de desvanecimiento a cada resultado en la pantalla de Actividades con una 0.4s duración de la animación y un 0.1s retraso de la animación entre los resultados.
Nota: no te olvides de configurar el Residencia en valor a "botón de Actividades", que colocamos en la "pantalla IR".
Crea otra capa de grupo y coloca cada sesión de entrenamiento dentro de ella, excepto la primera. Vamos a necesitar esto para el Bajar animación, ya que bajar solo una capa es mucho más fácil que bajar seis o siete capas a la vez.
Ahora agregue un Toque la interacción a la primera sesión de entrenamiento, luego agregue un Mover animacion a la capa de grupo que acabamos de crear. En el panel de animaciones establece el Residencia en valor a la primera sesión de entrenamiento y agregar una Mover al principio valor alrededor 277pt. Cuando pulsamos la primera sesión de entrenamiento, todo lo demás se moverá hacia abajo en la pantalla.
Para la vista de detalle de entrenamiento, solo he usado Desvanecerse y mover Animaciones basadas en tocar la primera sesión de entrenamiento..
Al principio, simplemente se desvanecen y se mueven en el fondo, luego la gráfica y finalmente los números específicos y los detalles del entrenamiento.
Debes jugar aquí un poco con las duraciones y retrasos de la animación..
¡Eres increíble! Acaba de crear su primer prototipo de Pixate animado, totalmente funcional y personalizado. Después de haber seguido este tutorial, espero que tenga más confianza en el uso de Pixate para los prototipos de aplicaciones móviles.
Tengo curiosidad por escuchar sus opiniones sobre este tutorial y no dude en hacer cualquier pregunta en los comentarios. Estaré aquí para ayudar y responderles..
Accentsconagua