Sketch vuelve a sorprender a los diseñadores. Con el lanzamiento de la función Smart Animate, los diseñadores de UI finalmente pueden agregar fácilmente efectos de animación vívidos a sus diseños de prototipos, haciendo que la interfaz sea más atractiva e interactiva.
El principio fundamental de Smart Animate es similar a la función Magic Move de Keynote. Puede identificar automáticamente las capas con el mismo nombre en varias mesas de trabajo y crear animaciones de transición fluidas entre esas capas. Cuando un diseñador ajusta el tamaño o la posición de una forma en diferentes mesas de trabajo, Smart Animate genera automáticamente el efecto de animación correspondiente, sin necesidad de configurar manualmente rutas de animación complejas.
La inteligencia de esta función radica en su capacidad para identificar automáticamente los cambios en las capas. Los diseñadores solo necesitan nombrar las capas, y Smart Animate generará animaciones según esos cambios, simplificando enormemente el proceso de diseño de animaciones. Además, los diseñadores pueden personalizar la duración y el efecto de aceleración de la animación, como lineal, acelerado, etc., para satisfacer diferentes necesidades de diseño.
El alcance de aplicación de Smart Animate es bastante amplio, desde la transición de páginas después de hacer clic en un botón, la expansión de menús hasta la presentación de información, en una variedad de escenarios de interacción. No solo puede crear efectos visuales ricos, sino que también puede mejorar significativamente la experiencia interactiva del usuario. Por ejemplo, cuando un usuario hace clic en un botón, la página puede realizar una transición mediante una animación suave, aumentando el dinamismo y la coherencia del diseño.
Además de los cambios básicos de tamaño, posición y transparencia, Smart Animate también admite efectos complejos como rotación y cambios de color. Esto significa que los diseñadores pueden lograr efectos de animación más diversos y ricos con operaciones simples.
En la aplicación práctica, Smart Animate muestra una gran flexibilidad. Por ejemplo, en las escenas de transición de animación, las capas de elipses de diferentes tamaños en dos mesas de trabajo pueden lograr una animación de cambio de tamaño suave. En la aplicación de animación de progreso, como el proceso de verificación de huellas dactilares, las diferentes partes de la huella dactilar se pueden rellenar gradualmente mediante animación, mostrando intuitivamente el progreso actual.
Para la interfaz de un reproductor de música, Smart Animate puede mostrar la lista de canciones de forma fluida después de que el usuario haga clic en un álbum; los diferentes elementos de información se mostrarán mediante animación según la posición y la transparencia de la capa, mejorando enormemente la experiencia dinámica del usuario. En el diseño de páginas de guía de aplicaciones, las imágenes y los elementos pueden moverse, rotar o deformarse según la operación del usuario, proporcionando un efecto de guía más intuitivo. Incluso en el diseño clásico de la barra lateral de macOS, Smart Animate puede enriquecer la interacción de navegación agregando un estado de desplazamiento.
El lanzamiento de Smart Animate sin duda proporciona a los diseñadores de UI una herramienta poderosa, que no solo permite que las obras de diseño sean más geniales, sino que también mejora significativamente la experiencia interactiva del usuario. La aparición de esta función marca un paso importante de Sketch en el campo del diseño de interacción dinámica, abriendo más posibilidades creativas para los diseñadores.
Referencias: https://www.sketch.com/blog/smart-animate/