Sketch surprend une fois de plus les designers. Avec l'arrivée de la fonction Smart Animate, les designers UI peuvent enfin facilement ajouter des animations dynamiques à leurs prototypes, rendant les interfaces plus attrayantes et interactives.
Le principe de Smart Animate est similaire à la fonction Magic Move de Keynote. Il identifie automatiquement les calques du même nom sur plusieurs artboards et crée des transitions animées fluides entre ces calques. Lorsque le designer ajuste la taille ou la position d'une forme sur différents artboards, Smart Animate génère automatiquement l'animation correspondante, sans avoir à configurer manuellement des chemins d'animation complexes.
L'intelligence de cette fonction réside dans sa capacité à identifier automatiquement les modifications de calques. Le designer n'a qu'à nommer les calques, et Smart Animate générera l'animation en fonction de ces changements, simplifiant considérablement le processus de conception d'animation. De plus, le designer peut personnaliser la durée de l'animation et l'effet d'accélération, comme linéaire, accéléré, etc., pour répondre à différents besoins de conception.
Le champ d'application de Smart Animate est très vaste : transitions de page après un clic sur un bouton, déploiement de menus, affichage d'informations, et bien d'autres scénarios interactifs. Il permet non seulement de créer des effets visuels riches, mais aussi d'améliorer considérablement l'expérience utilisateur interactive. Par exemple, lorsqu'un utilisateur clique sur un bouton, la page peut effectuer une transition animée fluide, ajoutant du dynamisme et de la cohérence à la conception.
Au-delà des modifications de base de taille, de position et de transparence, Smart Animate prend également en charge des effets plus complexes tels que la rotation et les changements de couleur. Cela signifie que les designers peuvent réaliser des animations plus riches et variées avec des opérations simples.
En pratique, Smart Animate se révèle extrêmement flexible. Par exemple, dans les scénarios de transition animée, deux calques elliptiques de tailles différentes sur deux artboards peuvent réaliser une animation de changement de taille fluide. Dans les applications d'animation de progression, comme le processus de vérification d'empreinte digitale, les différentes parties de l'empreinte digitale peuvent être progressivement remplies par animation, affichant clairement la progression actuelle.
Pour l'interface d'un lecteur de musique, Smart Animate peut afficher la liste des pistes de manière fluide après que l'utilisateur a cliqué sur un album. Les différents éléments d'information seront animés en fonction de la position et de la transparence des calques, améliorant considérablement l'expérience utilisateur dynamique. Dans la conception de pages d'introduction d'applications, les images et les éléments peuvent se déplacer, pivoter ou se déformer en fonction des actions de l'utilisateur, offrant des instructions plus intuitives. Même dans la conception classique de la barre latérale macOS, Smart Animate peut enrichir l'interaction de navigation en ajoutant un état de survol.
Le lancement de Smart Animate offre aux designers UI un outil puissant qui permet non seulement de rendre les créations plus impressionnantes, mais aussi d'améliorer considérablement l'expérience utilisateur interactive. Cette fonction marque une étape importante pour Sketch dans le domaine de la conception d'interactions dynamiques, ouvrant aux designers de nouvelles possibilités créatives.
Références : https://www.sketch.com/blog/smart-animate/
