Sketch überrascht Designer erneut. Mit der Einführung der Smart Animate-Funktion können UI-Designer Prototypen nun mühelos mit lebendigen Animationen versehen und so die Benutzeroberfläche attraktiver und interaktiver gestalten.
Das Kernprinzip von Smart Animate ähnelt der Magic Move-Funktion in Keynote. Es erkennt automatisch gleichnamige Ebenen auf mehreren Zeichenflächen und erstellt fließende Übergangsanimationen zwischen diesen Ebenen. Wenn Designer die Größe oder Position eines Shapes auf verschiedenen Zeichenflächen anpassen, generiert Smart Animate automatisch die entsprechenden Animationseffekte, ohne dass komplexe Animationswege manuell eingestellt werden müssen.
Die Intelligenz dieser Funktion liegt in der automatischen Erkennung von Ebenenänderungen. Designer müssen die Ebenen nur benennen, und Smart Animate generiert anhand dieser Änderungen Animationen, was den Animationsprozess erheblich vereinfacht. Gleichzeitig können Designer die Dauer und die Beschleunigungskurve der Animationen (linear, beschleunigt usw.) anpassen, um unterschiedliche Designanforderungen zu erfüllen.
Smart Animate ist vielseitig einsetzbar: von Seitenübergängen nach einem Button-Klick über das Ausklappen von Menüs bis hin zur Informationsanzeige in verschiedenen interaktiven Szenarien. Es schafft nicht nur reichhaltige visuelle Effekte, sondern verbessert auch die Benutzerinteraktion deutlich. Beispielsweise kann eine Seite durch einen sanften Animationsübergang beim Klicken auf einen Button dynamischer und kohärenter gestaltet werden.
Neben einfachen Änderungen von Größe, Position und Transparenz unterstützt Smart Animate auch komplexere Effekte wie Rotation und Farbänderungen. Das bedeutet, dass Designer mit einfachen Handgriffen vielfältigere Animationseffekte erzielen können.
In der Praxis zeigt Smart Animate eine hohe Flexibilität. So können beispielsweise zwei unterschiedlich große elliptische Ebenen auf verschiedenen Zeichenflächen eine sanfte Größenänderung animieren. Bei Fortschrittsanzeigen, z. B. bei der Fingerabdruckprüfung, können verschiedene Teile des Fingerabdrucks schrittweise animiert werden, um den aktuellen Fortschritt anschaulich darzustellen.
Bei der Benutzeroberfläche eines Musikplayers kann Smart Animate nach einem Klick auf ein Album die Titelliste flüssig anzeigen. Die einzelnen Informationselemente werden je nach Ebenenposition und Transparenz animiert, was die dynamische Benutzererfahrung deutlich verbessert. Bei der Gestaltung von App-Anleitungen können Bilder und Elemente sich mit den Benutzeraktionen mitbewegen, drehen oder verformen, um eine intuitivere Anleitung zu bieten. Sogar im klassischen macOS-Seitenleisten-Design kann Smart Animate durch Hinzufügen eines Hover-Zustands die Navigation interaktiver gestalten.
Die Einführung von Smart Animate bietet UI-Designern ein leistungsstarkes Werkzeug, das nicht nur Designs beeindruckender macht, sondern auch die Benutzerinteraktion deutlich verbessert. Diese Funktion markiert einen wichtigen Schritt von Sketch im Bereich des dynamischen interaktiven Designs und eröffnet Designern neue kreative Möglichkeiten.
Referenzen: https://www.sketch.com/blog/smart-animate/
