Una guía paso a paso para la animación de la interfaz de usuario con Principle y Sketch

Diseñar una interfaz de interfaz de usuario teniendo en cuenta la animación y las transiciones es una excelente manera de planificar una mejor experiencia de usuario (UX) para su próxima aplicación. Las microinteracciones animadas son la manera perfecta de estimular la participación del usuario, en un mundo de períodos de atención breves. Esta es la razón por la que Airbnb presentó recientemente Lottie, su "nueva herramienta de código abierto que hace que agregar animación a las aplicaciones nativas sea muy fácil".

Proyectos como Lottie muestran la creciente importancia de agregar movimiento como un nuevo elemento para crear una experiencia de usuario mejorada tanto para aplicaciones como para sitios web.

En este tutorial, aprenderá técnicas efectivas de animación de interfaz de usuario utilizando Principle para Mac. Después de leer esta guía, podrá convertir maquetas aburridas y estáticas en prototipos interactivos para exhibir mejor su trabajo. Puede aplicar lo que aprenderá aquí para mejorar su próximo lanzamiento de interfaz de usuario y tiros de Dribbble.

Empecemos.

Descargue estos recursos gratuitos para seguir.

Solo necesitará las aplicaciones Principle y Sketch para seguirlo. Si aún no los tiene, puede descargar una versión de prueba gratuita utilizando los enlaces a continuación.

• Descargue una versión de prueba gratuita de Principle aquí.

• Descargue una versión de prueba gratuita de Sketch aquí.

• Descargue el archivo fuente del tutorial gratuito aquí.

Una descripción general de la interfaz principal

Si está acostumbrado a Mac OS, la interfaz de Principle le resultará muy familiar. Tiene tres secciones principales: una barra lateral, un área de diseño que muestra las mesas de trabajo y la ventana de vista previa que puede cambiar de tamaño y mover.

Comprender los conceptos básicos de animación en principio

Es relativamente simple animar con Principio. No necesita tener experiencia en animación para comenzar. De hecho, la mayor parte del trabajo pesado está automatizado por Principio, y solo necesita concentrarse en lo que inicia una animación (es decir, un botón, un enlace, un evento de desplazamiento), cómo comienza la animación y cómo termina.

Para ayudarlo a seguir mejor, aquí hay un breve léxico de términos que verá a lo largo de la guía.

• Componente: Un componente es un tipo de agrupación que ayuda a contener elementos e incluso animaciones. Es el equivalente a un "objeto inteligente" en Photoshop o un "símbolo" en Illustrator.
• Disparador: una forma de iniciar una animación, es decir, tocando, desplazando, desplazando, etc. En principio, un disparador se puede definir seleccionando cualquier elemento dentro de Principio y haciendo clic en el icono que aparece en su lado derecho con un icono de rayo.
• Transición: Un cambio de estado de una mesa de trabajo a otra, es decir, deslizar hacia la izquierda o hacia la derecha.
• Efecto de aceleración: el nivel de suavidad de una transición en función de cómo comienza y termina la animación.

A. Disparador y transición

El primer paso para animar con Principio es configurar un activador (el comportamiento o la acción que inicia la animación) en un elemento (es decir, un botón o enlace) y alterar su estado inicial y/o final (es decir, su posición o escala). desde el principio hasta el final de la animación).

1. Defina un estado inicial: cómo se ven los elementos de la interfaz de usuario al principio antes de que tenga lugar la animación.
2. Defina el disparador: seleccionando el elemento de interacción y qué acción activa la animación.
3. Define el estado final: cómo se muestran los elementos al final de la animación.

Una vez que haya configurado la animación, puede obtener una vista previa en la ventana de vista previa.

B. Duración de la animación y efecto de aceleración

Por defecto, Principle crea una animación de medio segundo. A veces eso no es suficiente para ver el efecto de transición en detalle. Puede cambiar la duración y el efecto de "aceleración" desde el panel de animación siguiendo estos tres pasos.

1. Abra el panel de animación: seleccione las flechas negras entre dos mesas de trabajo y haga clic en el botón "Animar" ubicado en la barra superior.
2. Ampliar la duración de la animación: Mueva los extremos de las líneas azules.
3. Aplicar aceleración: seleccione todos los puntos con forma de diamante y elija "Ampliar ambos" en el menú desplegable para suavizar las transiciones.

lo que obtendrás

Este video le muestra lo que podrá crear una vez que complete este tutorial. La aplicación de demostración muestra la paleta de colores de Material Design de Google y le brinda más detalles una vez que selecciona un color. Creará una animación de carga, algunas transiciones de página con un efecto de paralaje suave y un control deslizante de menú.

Asegúrese de haber descargado el archivo fuente del tutorial gratuito aquí.

Empecemos.

Pasar de un archivo de boceto a un principio

1. Mueva las mesas de trabajo para prepararse para las transiciones naturales entre ellas: por ejemplo, una pantalla que se desliza desde la derecha debe tocar el borde derecho de la pantalla que está reemplazando sobre la animación.
2. Una vez que su archivo de Sketch esté listo, salte a Principio, cree un documento en blanco que coincida con la proporción de 360x640 y haga clic en el botón "Importar".

Eliminación de los encabezados de las pantallas para un desplazamiento continuo

Para crear una transición fluida entre páginas, puede eliminar cada encabezado excepto el primero. Los encabezados se agregaron inicialmente solo para mostrar la apariencia de la aplicación. Solo mantendrás el encabezado en la pantalla de "Bienvenida" y servirá como una barra adhesiva con el menú y el título de la aplicación.

Creación de la animación de carga: las formas

1. Seleccione el grupo de formas de carga y haga clic en "Crear componente" que contiene las formas y el texto de carga. Cree un Componente para el texto dentro del primer símbolo; animaremos el texto por separado inmediatamente después.
2. Seleccione las formas agrupadas. Elija el activador "Tocar" y arrastre y suelte sobre la misma mesa de trabajo para crear un duplicado.
3. La segunda mesa de trabajo representa el estado final de la animación y puede rotar el grupo usando la propiedad de ángulo. Asigne diferentes valores de ángulo al "relleno" y al "contorno" para crear un efecto más interesante.
4. Para terminar, seleccione las flechas entre las mesas de trabajo, haga clic en "Animar" para abrir el "panel de animación" y cambie la duración deslizando los puntos finales a aproximadamente 1,00 s.

Creación de la animación de carga: el texto

1. Primero, cree la animación deslizante. Seleccione la forma del botón y aplique el evento de activación "Toque". En la nueva mesa de trabajo, suba todas las pantallas 640 px (igual a la altura actual de la mesa de trabajo).
2. Ahora, vamos a crear el paralaje. Vaya a la mesa de trabajo anterior, en la pantalla de bienvenida, mueva las formas geométricas y el texto hacia abajo en diferentes valores de Y.
3. Finalmente, dentro del panel de animación, extienda la línea de tiempo, digamos a 1s. Aplique un efecto de "Facilitar ambos" a la línea de tiempo (asegúrese de haber seleccionado todos los puntos en forma de diamante y haga clic en cualquier línea azul para aplicar el efecto a todos).
4. Obtenga una vista previa de su animación y mueva las formas hasta que el efecto de paralaje se vea bien para usted.

Crear el efecto Parallax - Página de bienvenida

1. Seleccione el componente de carga y aplique el activador "Tocar" arrastrando una flecha desde cualquier lugar de la mesa de trabajo.
2. Seleccione todas las pantallas (del grupo maestro) y muévalas 640 px hacia arriba. Este paso abre la pantalla de Bienvenida a la vista.
3. Vuelve a la mesa de trabajo anterior y mueve las formas en la pantalla de "Bienvenida" hacia abajo. Esto crea el efecto de deslizamiento asíncrono llamado paralaje.
4. Ajuste la animación agregando tiempo a la transición dentro del panel de animación: seleccione la flecha entre la mesa de trabajo, luego arrastre los puntos finales en las líneas azules a aproximadamente 1 segundo.

Creando el efecto Parallax - Acerca de la página

1. Seleccione el botón de flecha hacia abajo (asegúrese de seleccionar todo el grupo) y aplique el activador "Tocar" arrastrando una flecha desde cualquier lugar de la mesa de trabajo.
2. Seleccione todas las pantallas (del grupo maestro) y mueva todo hacia arriba 640 px. Este paso abre la pantalla Acerca de a la vista.
3. Regrese a la mesa de trabajo anterior y mueva las formas en la pantalla "Acerca de" hacia abajo. Esto crea el efecto de deslizamiento asíncrono llamado paralaje.

Crear el efecto Parallax - Página de colores

1. Aplique el gatillo "Tocar" al botón de flecha hacia abajo (asegúrese de seleccionar todo el grupo), y eso creará una nueva mesa de trabajo.
2. En la nueva mesa de trabajo, seleccione todas las pantallas y muévalas 640px hacia arriba.
3. En la mesa de trabajo anterior, mueva los colores y el texto hacia abajo. Tenga en cuenta que cuanto más abajo mueva un objeto, más tiempo tardará en deslizarse hacia arriba, así que asegúrese de usar una ubicación diferente para crear un efecto más dinámico.
4. Finalmente, extienda la animación y aplique una "facilidad de ambos" en todas las líneas de tiempo azules dentro del panel de animación.

Deslizar una página desde el lateral - Página de selección de color

1. Aplique un disparador de "Toque" al botón "Cargar más" en la pantalla "Colores".
2. En la nueva mesa de trabajo, mueva el contenido de "Colores" y "Selección" a la izquierda 360 px (ancho de la mesa de trabajo)
3. Regrese a la mesa de trabajo anterior y mueva el contenido de la pantalla en la dirección opuesta: a la derecha.
4. Tenga en cuenta que también puede animar la opacidad de la pantalla deslizándose desde cero por ciento hasta 100 por ciento.
5. Juega con la duración de la animación y el efecto de aceleración para modificar el efecto de transición.

Animando el ícono del menú

1. Tenga en cuenta que cualquier capa y forma que tenga un efecto (como sombras) del archivo original de Sketch se importa a Principio como una imagen. Si necesita editar formas dentro de Principio, intente no agregar ningún efecto especial hasta después de la importación.
2. Dicho esto, usando el ícono existente como guía, dibuje tres rectángulos delgados y agrúpelos para crear el ícono del menú de hamburguesas. Ahora, puede eliminar u ocultar el icono del menú anterior.
3. Seleccione el icono recién creado y aplíquele un disparador de "toque".
4. En la nueva mesa de trabajo, gire el rectángulo superior e inferior en el ícono del menú, asegúrese de que estén alineados en el centro y dé una opacidad del cero por ciento al del medio.
5. Para ver la animación que acaba de crear, vuelva a vincular el icono de menú modificado a la mesa de trabajo de vista previa con un disparador de "Toque" y pruébelo.

Crear el efecto del control deslizante del menú

1. En la mesa de trabajo de estado final, mueva las pantallas hacia la derecha hasta que los enlaces del menú estén alineados a la izquierda del ícono del menú de cierre.
2. Seleccione todo dentro de la carpeta "Colores", excepto el contenido del menú y el fondo gris claro, y reduzca la opacidad al 25 por ciento. La animación desvanecerá el contenido de la página para centrarse en el menú.
3. Amplíe la duración de la animación y vaya a la mesa de trabajo anterior para mover ligeramente el contenido del menú para crear un efecto suave.

Pasar a la pantalla de contacto

1. En el menú abierto, aplique un activador "Toque" en el botón "Contáctenos".
2. En la mesa de trabajo recién creada, mueva todas las pantallas 640 px hacia arriba.
3. Luego, regrese a la mesa de trabajo de vistas previas y mueva los elementos de la página "Formulario" hacia abajo.
4. Mueva los elementos a diferentes valores de Y para crear el efecto de paralaje.
5. Finalmente, seleccione las flechas entre las mesas de trabajo, extienda la duración de la animación y aplique "Ease Both" a las líneas de tiempo azules.

Terminando con la página de agradecimiento

1. Aplique un activador "Toque" en el botón "enviar mensaje".
2. En la nueva mesa de trabajo, suba todas las pantallas 640 px.
3. Luego, regrese a la mesa de trabajo de vistas previas y mueva los elementos de la página "Confirmación" hacia abajo.
4. Juega con la escala y la rotación del icono de color para crear un efecto más dinámico.
5. Asegúrese de aumentar la duración de la animación para percibir mejor el efecto de transición.

La simplicidad de agregar animaciones con principios.

El principio es una herramienta fantástica para hacer que sus ideas de interacción con la interfaz de usuario cobren vida.

La interfaz es compatible con Mac y fue diseñada para funcionar sin problemas con los archivos de Sketch.

Principio automatiza la mayor parte de la animación y el efecto de transición para usted. Todo lo que necesita hacer es aplicar un activador a una forma en una mesa de trabajo y cambiar cualquier propiedad de los elementos que desea animar en la mesa de trabajo final.

Por favor, deje cualquier pregunta en los comentarios a continuación. Estoy feliz de responderles.