Krypton Solid

Animación de Keynote – Cómo hacer un prototipo de la interfaz de usuario – Smashing Magazine

Animación de Keynote – Cómo hacer un prototipo de la interfaz de usuario – Smashing Magazine

Ya sean estados de actualización divertidos, movimientos sutiles de iconos o transiciones complejas, hermosa animación está a nuestro alrededor.

Una vez considerada un lujo estético, la animación ahora se usa tan comúnmente en aplicaciones web y móviles modernas que los sitios web completos están dedicados a Patrones de animación de la interfaz de usuario.

Otras lecturas en Smashing:

Si bien las animaciones pueden tener un gran atractivo visual, también hacen que las experiencias de las aplicaciones sean más intuitivas y atractivas. La animación puede hacer que una aplicación se sienta más fluida y receptiva al proporcionar comentarios sobre la interacción del usuario. Esto significa que, para los diseñadores, crear animaciones auténticas se está convirtiendo cada vez más en parte de la descripción del trabajo.

La herramienta adecuada para el trabajo

Tradicionalmente, los diseñadores han tenido que aprender herramientas de animación complejas desde cero para producir incluso los gráficos en movimiento más simples. En los últimos años, ha surgido una gran cantidad de software compitiendo por la atención de los prototipos y diseñadores de movimiento, como Framer, Origami y Pixate, sin mencionar los viejos clásicos como Adobe After Effects.

Sin embargo, encontré que todos eran un poco exagerados para lo que estaba tratando de lograr. Como diseñador de UI, necesitaba un herramienta rápida, fácil de aprender y familiar para animar mis diseños estáticos. Necesitaba producir animaciones rápidamente, ya que mi equipo estaba iterando rápidamente en un producto en el que estábamos trabajando. Tampoco quería aprender un paradigma de software completamente nuevo. Una ventaja sería una herramienta que se integra muy bien en mi flujo de trabajo de diseño estático existente (generalmente uso Sketch y Photoshop).

En mi búsqueda por encontrar una herramienta que sea más adecuada para estas necesidades, me topé con una que ha estado en mi computadora todo el tiempo: Keynote de Apple.

¿Fundamental?

La mayoría de la gente conoce Keynote de Apple como el equivalente de PowerPoint en Mac OS X: software de presentación. Eso es cierto, pero también se puede utilizar para producir animaciones y prototipos sorprendentemente de alta fidelidad. De hecho, muchos empleados de empresas como Google y Apple usa Keynote a diario para el diseño, la animación y la creación de prototipos de UI.

El año pasado, Andrew Haskin, diseñador de interacción en Frog, nos mostró cuán poderoso podría ser Keynote cuando recreó las animaciones de diseño de materiales de Google completamente en Keynote.

Nota clave de aprendizaje

El video de Andrew realmente despertó mi interés en Keynote, y el año pasado utilicé el software para recrear muchas interacciones vistas en las principales aplicaciones, como Facebook Paper, Uber, Tinder, Snapchat y más. Puedes ver un carrete de eso a continuación.

Keynote es bastante fácil de aprender, porque la mayoría de la gente ha utilizado algún tipo de software de presentación en su vida. Es muy parecido a PowerPoint si está familiarizado con él, por lo que la interfaz es reconocible y comprenderá de inmediato cómo crear y editar diapositivas.

Uno de mis aspectos favoritos de la animación en Keynote es que es directo al grano – no hay código, líneas de tiempo complicadas con fotogramas clave o funcionalidad innecesaria para los diseñadores.

El principal trabajo preliminar de la animación se realiza con Keynote «Movimiento mágico» efecto de transición. Con Magic Move, todo lo que necesita es un comenzando y final slide, y puede editar cualquier número de propiedades entre ellos (escala, posición, rotación, etc.). Keynote se encarga del resto al completar inteligentemente los huecos, creando una transición perfecta de una diapositiva a la siguiente.

Magic Move ahorra mucho tiempo y las animaciones complejas que habrían tomado mucho más tiempo con otras herramientas toman segundos con Keynote.

Flujo de trabajo general

Para demostrar cómo usar Keynote, voy a recrear un modelo de interacción muy simple popularizado por Tinder: la animación de deslizamiento hacia la izquierda y hacia la derecha. Descarga los recursos para este proyecto (enlace arreglado!) (ZIP, 360 KB).

La idea básica es crear la primera pantalla de la animación (inicio) y la última pantalla de la animación (final). Keynote se encargará inteligentemente del resto con la transición Magic Move.

Configurar el documento

Abra una presentación en blanco en blanco. De forma predeterminada, Keynote creará un documento del tamaño de una presentación (1024 × 768px). Cambiemos eso a un documento del tamaño de un iPhone.

Vaya a la pestaña «Documento» en la parte superior derecha. En la sección «Tamaño de diapositiva», vaya a «Tamaño de diapositiva personalizado» y haga que el tamaño sea de 350 (ancho) × 667 (alto) píxeles.

El
Seleccione «Tamaño de diapositiva personalizado» en el menú «Documento» y cámbielo a 350 × 667. (Ver versión grande)

Ahora, importemos las imágenes. Este paso es tan simple como arrastrar los archivos de imagen desde su carpeta al lienzo de Keynote.

Primera diapositiva

Una vez que haya arrastrado sus activos, puede colocarlos visualmente. Keynote tiene pautas útiles que aparecen contextualmente, lo que le ayuda a alinear el diseño.

Keynote asignará un índice z para cada activo según el momento en que se importó, no tiene panel de capas. En caso de que necesite cambiar el orden de la pila, todo lo que tiene que hacer es seleccionar el activo y hacer clic derecho (Cmd + clic) para abrir el menú, luego seleccione «Traer al frente».

Menú al seleccionar un activo
Menú al seleccionar un activo. (Ver versión grande)

Si desea diseñar activos con valores de píxeles perfectos, en lugar de a simple vista, vaya a la sección «Formato» → «Alinear» e ingrese valores numéricos exactos.

Organizar menú
Organizar menú. (Ver versión grande)

Diapositiva final

La segunda pantalla será el último fotograma de la animación. Gire la imagen superior y colóquela fuera de la pantalla; esta será la posición final.

Lo primero que debe hacer es duplicar la primera diapositiva con la que hemos estado trabajando. En el panel de la izquierda, haga clic con el botón derecho y seleccione «Duplicar» en el menú.

Haga clic derecho o use Control + clic para abrir el menú para duplicar.
Haga clic derecho o use Control + clic para abrir el menú para duplicar. (Ver versión grande)

Comencemos por rotando el activo superior. Para rotar, mantenga pulsado Cmd, y aparecerá un icono de flecha girada en la esquina del activo seleccionado. Luego, haga clic y arrastre para rotar.

Ahora, coloque el mosaico fuera de la pantalla.

Mueva el activo a su posición final
Mueva el activo a su posición final. (Ver versión grande)

Movimiento mágico

Ahora que tenemos las posiciones inicial y final, animemos esto.

Seleccione la primera diapositiva y vaya a la pestaña «Animar» a la izquierda. En «Transiciones», seleccione «Agregar un efecto» y elija «Movimiento mágico» en el menú desplegable.

El efecto de transición Magic Move en el menú
Seleccione el efecto de transición Magic Move en el menú «Animar». (Ver versión grande)

Magic Move es un efecto de transición que mueve un objeto de una posición en una diapositiva a una nueva posición en la siguiente diapositiva. Rellena inteligentemente los espacios entre las diapositivas moviendo, desvaneciendo y escalando el objeto.

Sincronización y aceleración

Magic Move tiene solo dos configuraciones, duración y aceleración, lo que realmente ayuda a que su animación se vea lo mejor posible.

La duración se explica por sí misma: se refiere al tiempo y el valor correcto se determina caso por caso. Encuentro que el punto óptimo para la animación de la interfaz de usuario suele estar entre 0,7 y 1,5 segundos.

La sección de aceleración tiene cuatro opciones:

Demostración de los distintos tipos de animación.

  • «ninguno»: Misma velocidad en toda la animación.
  • «Facilitarse»: Comienza lento, luego se acelera
  • «Facilitarse»: Comienza rápido, luego se ralentiza
  • «Salir y entrar fácilmente»: Comienza lento, acelera y luego vuelve a disminuir

Para nuestro ejemplo, estoy usando 0,90 segundos para la duración y «entrar y salir fácilmente» para la configuración de aceleración.

Configuración de Magic Move
Configuración de Magic Move. (Ver versión grande)

Nuestra animación

A continuación se muestra la animación final, con algunos efectos añadidos. Usted puede descargar el archivo de Keynote (ZIP) para ver cómo se hizo el resto.

¿Qué más es posible?

Obviamente es un ejemplo muy, muy simple. Acabamos de arañar la superficie de lo que se puede hacer en Keynote. Magic Move es la técnica más simple. Para mayor delicadeza, puede utilizar Keynote construir por dentro y por fuera.

Construya dentro y fuera de la construcción

Construir se refiere a cómo un objeto aparece por primera vezy construir se refiere a cómo una animación sale de la pantalla. Estos son ambos basado en objetos animaciones, en lugar de basadas en diapositivas (como Magic Move). En otras palabras, cada activo puede tener su propia animación independiente.

Por ejemplo, si desea que una animación se amplíe y rebote un poco, debe usar un efecto incorporado llamado «Pop». Si desea que el objeto se desvanezca, debe usar el efecto de construcción «Disolver».

Para aplicar un efecto de construcción o de construcción, seleccione cualquier objeto en la pantalla y vaya a la pestaña «Animar». Debe haber tres secciones: «Construir», «Acciones» y «Construir».

Accediendo a la sección empotrada.
Accediendo a la sección empotrada. (Ver versión grande)

Las animaciones integradas tienen varias opciones. Utilizo solo un puñado para el diseño de la interfaz de usuario la mayor parte del tiempo:

Las animaciones complicadas pueden tener muchas incorporaciones y salidas, y el momento en que aparece cada una es importante. Para hacer esto, abra el menú «Orden de construcción» en la parte inferior de la pestaña «Animar» y ajuste el tiempo en el menú.

Menú de orden de compilación
Menú de orden de compilación. (Ver versión grande)

Integración de Sketch y Photoshop

Keynote se integra muy bien en mi flujo de trabajo de diseño. Importar desde Photoshop, Sketch o Illustrator es tan simple como copiar y pegar en Keynote. A menudo diseño en Sketch y copio y pego en Keynote para infundir rápidamente algo de movimiento en mis maquetas estáticas.

Algunos consejos. Copiar y pegar capa por capa, o bien Keynote los combinará, lo que no desea en la mayoría de los casos, especialmente si está animando piezas individuales.

Además, si copia y pega texto, no conservará sus propiedades de texto y ya no podrá editarlo. Cuando trabaje con texto, asegúrese de que su copia haya sido finalizada o de que pueda recrear el texto en Keynote.

Prototipos en el dispositivo

También puede crear un prototipo y ponlo en tu dispositivo utilizando la aplicación Keynote para iOS. Es tan simple como usar la herramienta «Agregar vínculos» para vincular a diferentes diapositivas en una presentación. A continuación se muestra un ejemplo de una aplicación diseñada, animada y prototipada en Keynote.

Al compartir prototipos con clientes y partes interesadas, puede exportarlos como HTML y se podrá hacer clic en ellos en un navegador. Tenga en cuenta que el código no estará listo para producción; el diseño deberá recrearse para el producto final.

Exportar a HTML desde Keynote
Exportando a HTML desde Keynote. (Ver versión grande)

Conclusión

Ya sea que sea diseñador, gerente de producto, desarrollador o cualquier otra persona que trabaje en un producto, Keynote es una excelente manera de comunicar ideas rápidamente. La velocidad, la curva de aprendizaje suave y la calidad de la producción la convierten en una herramienta ideal para su arsenal.

En resumen, Magic Move es el tipo de animación más simple y rápido de Keynote; se utiliza entre diapositivas para animar desde un estado inicial hasta un estado final. Las construcciones, las acciones y las construcciones se utilizan en objetos individuales en una diapositiva; controlan cómo se presentan las cosas por primera vez y cómo salen de la pantalla.

Con suficiente práctica, puede hacer prácticamente cualquier tipo de animación en Keynote. Muchos otro ejemplos muestre que Keynote se utiliza para crear animaciones de alta fidelidad.

Keynote viene gratis con Mac OS X Yosemite y superior. Pruébalo y ¡feliz animación!

Deja un comentario