Eine Schritt-für-Schritt-Anleitung zur UI-Animation mit Prinzip und Skizze

Veröffentlicht: 2022-03-11

Das Entwerfen einer UI-Oberfläche unter Berücksichtigung von Animationen und Übergängen ist eine großartige Möglichkeit, eine bessere Benutzererfahrung (UX) für Ihre nächste App zu planen. Animierte Mikrointeraktionen sind der perfekte Weg, um das Engagement der Benutzer in einer Welt der kurzen Aufmerksamkeitsspanne zu stimulieren. Aus diesem Grund hat Airbnb kürzlich Lottie eingeführt – sein „neues Open-Source-Tool, das das Hinzufügen von Animationen zu nativen Apps zum Kinderspiel macht“.

Projekte wie Lottie zeigen die zunehmende Bedeutung des Hinzufügens von Bewegung als neues Element für die Erstellung verbesserter UX für Apps und Websites.

In diesem Tutorial lernen Sie effektive UI-Animationstechniken mit Principle für Mac kennen. Nachdem Sie diesen Leitfaden durchgearbeitet haben, können Sie langweilige und statische Mockups in interaktive Prototypen verwandeln, um Ihre Arbeit besser zu präsentieren. Sie können das, was Sie hier lernen, anwenden, um Ihre nächsten UI-Pitch- und Dribbling-Schläge zu verbessern.

Lass uns anfangen.

Laden Sie diese kostenlosen Ressourcen herunter, um mitzumachen.

Sie benötigen nur die Principle- und Sketch-Apps, um mitzumachen. Wenn Sie sie noch nicht haben, können Sie über die folgenden Links eine kostenlose Testversion herunterladen.

  • Laden Sie hier eine kostenlose Testversion von Principle herunter.

  • Laden Sie hier eine kostenlose Sketch-Testversion herunter.

  • Laden Sie hier die kostenlose Tutorial-Quelldatei herunter.

Ein Überblick über die prinzipielle Schnittstelle

Anleitung zum Animieren der Benutzeroberfläche mit Prinzip und Skizze

Wenn Sie an Mac OS gewöhnt sind, wird Ihnen die Benutzeroberfläche von Principle sehr vertraut vorkommen. Es hat drei Hauptabschnitte: eine Seitenleiste, einen Designbereich, der die Zeichenflächen anzeigt, und das Vorschaufenster, dessen Größe Sie ändern und das Sie verschieben können.

Grundlegende Animationskonzepte im Prinzip verstehen

Es ist relativ einfach, mit Principle zu animieren. Sie müssen keinen Animationshintergrund haben, um loszulegen. Tatsächlich wird der größte Teil des Heavy Lifting von Principle automatisiert, und Sie müssen sich nur darauf konzentrieren, was eine Animation startet (z. B. eine Schaltfläche, ein Link, ein Scroll-Ereignis), wie die Animation beginnt und wie sie endet.

Damit Sie besser folgen können, finden Sie hier ein kurzes Lexikon der Begriffe, die Sie im gesamten Handbuch sehen werden.

  • Komponente: Eine Komponente ist eine Art Gruppierung, die dabei hilft, Elemente und sogar Animationen einzuschließen. Es ist das Äquivalent zu einem „Smart-Objekt“ in Photoshop oder einem „Symbol“ in Illustrator.
  • Auslöser: Eine Möglichkeit, eine Animation zu starten – dh durch Antippen, Scrollen, Bewegen der Maus usw. Im Prinzip kann ein Auslöser definiert werden, indem Sie ein beliebiges Element innerhalb von Prinzip auswählen und auf das Symbol klicken, das auf der rechten Seite mit einem Blitzsymbol erscheint.
  • Übergang: Eine Zustandsänderung von einer Zeichenfläche zur anderen, dh nach links oder rechts gleiten.
  • Easing-Effekt: Der Glättegrad eines Übergangs basierend darauf, wie die Animation beginnt und endet.

A. Auslöser und Übergang

Anleitung zum Animieren der Benutzeroberfläche mit Prinzip und Skizze

Der erste Schritt zum Animieren mit Principle besteht darin, einen Auslöser (das Verhalten oder die Aktion, die die Animation startet) für ein Element (z. B. eine Schaltfläche oder einen Link) einzurichten und seinen Anfangs- und/oder Endzustand (z. B. seine Position oder Skalierung) zu ändern vom Anfang bis zum Ende der Animation).

  1. Definieren Sie einen Anfangszustand: wie Ihre UI-Elemente am Anfang aussehen, bevor die Animation stattfindet.
  2. Definieren Sie den Auslöser: indem Sie das Interaktionselement auswählen und welche Aktion die Animation aktiviert.
  3. Definieren Sie den Endzustand: wie die Elemente am Ende der Animation angezeigt werden.

Sobald Sie das Animationsset haben, können Sie es im Vorschaufenster in der Vorschau anzeigen.

B. Animationslänge und Lockerungseffekt

Ein Tutorial zum Animieren der Benutzeroberfläche mit Prinzip und Skizze

Standardmäßig erstellt Principle eine halbsekündige Animation. Manchmal reicht das nicht aus, um den Übergangseffekt im Detail zu sehen. Sie können die Dauer und den „Easing“-Effekt über das Animationsfenster ändern, indem Sie diesen drei Schritten folgen.

  1. Öffnen Sie das Animationsfenster: Wählen Sie die schwarzen Pfeile zwischen zwei Zeichenflächen aus und klicken Sie auf die Schaltfläche „Animieren“ in der oberen Leiste.
  2. Verlängern Sie die Animationslänge: Verschieben Sie die Endpunkte der blauen Linien.
  3. Easing anwenden: Wählen Sie alle rautenförmigen Punkte aus und wählen Sie „Ease Both“ aus der Dropdown-Liste, um die Übergänge zu glätten.

Was Sie bekommen

Dieses Video zeigt Ihnen, was Sie erstellen können, wenn Sie dieses Tutorial durchlaufen haben. Die Demo-App zeigt die Materialdesign-Farbpalette von Google und gibt Ihnen weitere Details, sobald Sie eine Farbe ausgewählt haben. Sie erstellen eine Ladeanimation, einige Seitenübergänge mit einem glatten Parallaxeneffekt und einen Menüschieberegler.

Stellen Sie sicher, dass Sie die kostenlose Tutorial-Quelldatei hier heruntergeladen haben.

Lass uns anfangen.

Von einer Skizzendatei zum Prinzip

  1. Verschieben Sie die Zeichenflächen, um natürliche Übergänge zwischen ihnen vorzubereiten: Beispielsweise sollte ein Bildschirm, der von rechts gleitet, den rechten Rand des Bildschirms berühren, den er über der Animation ersetzt.
  2. Sobald Ihre Sketch-Datei fertig ist, springen Sie zu Principle, erstellen Sie ein leeres Dokument, das dem Verhältnis 360 x 640 entspricht, und klicken Sie auf die Schaltfläche „Importieren“.

Entfernen der Bildschirmüberschriften für nahtloses Scrollen

Um einen nahtlosen Übergang zwischen den Seiten zu erstellen, können Sie alle Kopfzeilen außer der ersten entfernen. Die Header wurden ursprünglich nur hinzugefügt, um das Erscheinungsbild der App zu präsentieren. Sie behalten nur die Kopfzeile auf dem „Willkommen“-Bildschirm und sie dient als Sticky-to-Bar mit dem Menü- und App-Titel.

Erstellen der Ladeanimation - Die Formen

  1. Wählen Sie die Gruppe der Ladeformen aus und klicken Sie auf „Komponente erstellen“, die die Ladeformen und den Text enthält. Erstellen Sie eine Komponente für den Text innerhalb des ersten Symbols; Wir animieren den Text direkt danach separat.
  2. Wählen Sie die gruppierten Formen aus. Wählen Sie den Auslöser „Tippen“ und ziehen Sie ihn per Drag-and-Drop auf dieselbe Zeichenfläche, um ein Duplikat zu erstellen.
  3. Die zweite Zeichenfläche stellt den Endzustand der Animation dar, und Sie können die Gruppe mithilfe der Eigenschaft angle drehen. Geben Sie „Füllung“ und „Umriss“ unterschiedliche Winkelwerte, um einen interessanteren Effekt zu erzielen.
  4. Wählen Sie zum Abschluss die Pfeile zwischen den Zeichenflächen aus, klicken Sie auf „Animieren“, um das „Animationsfeld“ zu öffnen, und ändern Sie die Dauer, indem Sie die Endpunkte auf etwa 1,00 s verschieben.

Erstellen der Ladeanimation - Der Text

  1. Erstellen Sie zuerst die Slide-Up-Animation. Wählen Sie die Schaltflächenform aus und wenden Sie das Triggerereignis „Tap“ an. Verschieben Sie in der neuen Zeichenfläche alle Bildschirme um 640 Pixel nach oben (entspricht der aktuellen Zeichenflächenhöhe).
  2. Lassen Sie uns nun die Parallaxe erstellen. Wechseln Sie zur vorherigen Zeichenfläche, verschieben Sie auf dem Begrüßungsbildschirm die geometrischen Formen und den Text mit unterschiedlichen Y-Werten nach unten.
  3. Erweitern Sie schließlich im Animationsbereich die Zeitleiste, sagen wir auf 1s. Wenden Sie den Effekt „Beide erleichtern“ auf die Timeline an (stellen Sie sicher, dass Sie alle rautenförmigen Punkte ausgewählt haben, und klicken Sie auf eine beliebige blaue Linie, um den Effekt auf alle anzuwenden).
  4. Zeigen Sie eine Vorschau Ihrer Animation an und verschieben Sie die Formen, bis der Parallaxeneffekt für Sie gut aussieht.

Erstellen des Parallax-Effekts - Willkommensseite

  1. Wählen Sie die Ladekomponente aus und wenden Sie den „Tap“-Trigger an, indem Sie einen Pfeil davon an eine beliebige Stelle auf der Zeichenfläche ziehen.
  2. Wählen Sie alle Bildschirme (aus der Hauptgruppe) aus und verschieben Sie sie um 640 Pixel nach oben. Dieser Schritt bringt den Begrüßungsbildschirm zur Ansicht.
  3. Gehen Sie zurück zur vorherigen Zeichenfläche und verschieben Sie die Formen auf dem „Willkommen“-Bildschirm nach unten. Dadurch entsteht der asynchrone Gleiteffekt namens Parallaxe.
  4. Passen Sie die Animation an, indem Sie dem Übergang innerhalb des Animationsbereichs Zeit hinzufügen: Wählen Sie den Pfeil zwischen der Zeichenfläche aus und ziehen Sie dann die Endpunkte auf den blauen Linien auf etwa 1 Sekunde.

Erstellen des Parallax-Effekts - About-Seite

  1. Wählen Sie die Abwärtspfeil-Schaltfläche (stellen Sie sicher, dass Sie die gesamte Gruppe auswählen) und wenden Sie den Auslöser „Tippen“ an, indem Sie einen Pfeil von ihm an eine beliebige Stelle auf der Zeichenfläche ziehen.
  2. Wählen Sie alle Bildschirme (aus der Hauptgruppe) aus und verschieben Sie alles um 640 Pixel nach oben. Dieser Schritt bringt den Info-Bildschirm zur Ansicht.
  3. Gehen Sie zurück zur vorherigen Zeichenfläche und verschieben Sie die Formen auf dem Bildschirm „Info“ nach unten. Dadurch entsteht der asynchrone Gleiteffekt namens Parallaxe.

Erstellen des Parallax-Effekts – Seite „Farben“.

  1. Wenden Sie den Auslöser „Tap“ auf die Schaltfläche mit dem Abwärtspfeil an (stellen Sie sicher, dass Sie die gesamte Gruppe auswählen), und das erstellt eine neue Zeichenfläche.
  2. Wählen Sie auf der neuen Zeichenfläche alle Bildschirme aus und verschieben Sie sie um 640 Pixel nach oben.
  3. Verschieben Sie auf der vorherigen Zeichenfläche die Farben und den Text nach unten. Beachten Sie, dass je tiefer Sie ein Objekt verschieben, desto länger dauert es, bis es wieder nach oben gleitet. Achten Sie also darauf, eine andere Platzierung zu verwenden, um einen dynamischeren Effekt zu erzielen.
  4. Erweitern Sie schließlich die Animation und wenden Sie auf alle blauen Zeitleisten im Animationsfenster die Option „beide erleichtern“ an.

Eine Seite von der Seite schieben - Farbauswahlseite

  1. Wenden Sie einen „Tippen“-Trigger auf die Schaltfläche „Mehr laden“ auf dem Bildschirm „Farben“ an.
  2. Verschieben Sie in der neuen Zeichenfläche die Inhalte „Farben“ und „Auswahl“ um 360 Pixel (Zeichenflächenbreite) nach links.
  3. Gehen Sie zurück zur vorherigen Zeichenfläche und verschieben Sie den Bildschirminhalt in die entgegengesetzte Richtung – nach rechts.
  4. Beachten Sie, dass Sie auch die Deckkraft des Bildschirms animieren können, indem Sie von null Prozent auf 100 Prozent gleiten.
  5. Spielen Sie mit der Animationsdauer und dem Beschleunigungseffekt, um den Übergangseffekt zu optimieren.

Animieren des Menüsymbols

  1. Beachten Sie, dass alle Ebenen und Formen, die einen Effekt (wie Schatten) aus der Sketch-Originaldatei hatten, als Bild in Principle importiert werden. Wenn Sie Formen innerhalb von Principle bearbeiten müssen, versuchen Sie, bis nach dem Import keine Spezialeffekte hinzuzufügen.
  2. Verwenden Sie das vorhandene Symbol als Richtlinie, zeichnen Sie drei dünne Rechtecke und gruppieren Sie sie, um das Hamburger-Menüsymbol zu erstellen. Jetzt können Sie das vorherige Menüsymbol löschen oder ausblenden.
  3. Wählen Sie das neu erstellte Symbol aus und wenden Sie einen „Tap“-Trigger darauf an.
  4. Drehen Sie in der neuen Zeichenfläche das obere und untere Rechteck auf dem Menüsymbol, stellen Sie sicher, dass sie mittig ausgerichtet sind, und geben Sie dem mittleren Rechteck null Prozent Deckkraft.
  5. Um die soeben erstellte Animation anzuzeigen, verknüpfen Sie das geänderte Menüsymbol mit einem „Tap“-Trigger wieder mit der Vorschau-Zeichenfläche und testen Sie es.

Erstellen des Menü-Slider-Effekts

  1. Verschieben Sie auf der Endstatus-Zeichenfläche die Bildschirme nach rechts, bis die Menüverknüpfungen links neben dem schließenden Menüsymbol ausgerichtet sind.
  2. Wählen Sie im Ordner „Farben“ alles außer dem Menüinhalt und dem hellgrauen Hintergrund aus und reduzieren Sie die Deckkraft auf 25 Prozent. Die Animation blendet den Seiteninhalt aus, um den Fokus auf das Menü zu legen.
  3. Verlängern Sie die Animationsdauer und wechseln Sie zur vorherigen Zeichenfläche, um den Menüinhalt leicht zu verschieben, um einen fließenden Effekt zu erzielen.

Wechseln zum Kontaktbildschirm

  1. Wenden Sie im geöffneten Menü einen „Tap“-Trigger auf die Schaltfläche „Contact Us“ an.
  2. Verschieben Sie auf der neu erstellten Zeichenfläche alle Bildschirme um 640 px nach oben.
  3. Gehen Sie dann zurück zur Zeichenfläche der Vorschau und verschieben Sie die Elemente von der Seite „Formular“ nach unten.
  4. Verschieben Sie die Elemente mit unterschiedlichen Y-Werten, um den Parallaxeneffekt zu erzeugen.
  5. Wählen Sie schließlich die Pfeile zwischen den Zeichenflächen aus, verlängern Sie die Animationslänge und wenden Sie „Ease Both“ auf die blauen Zeitleisten an.

Abschluss mit der Dankesseite

  1. Wenden Sie einen „Tap“-Trigger auf die Schaltfläche „Nachricht senden“ an.
  2. Verschieben Sie auf der neuen Zeichenfläche alle Bildschirme um 640 px nach oben.
  3. Gehen Sie dann zurück zur Zeichenfläche der Vorschau und verschieben Sie die Elemente von der Seite „Bestätigung“ nach unten.
  4. Spielen Sie mit Skalierung und Drehung für das farbige Symbol, um einen dynamischeren Effekt zu erzielen.
  5. Stellen Sie sicher, dass Sie die Animationslänge erhöhen, um den Übergangseffekt besser wahrnehmen zu können.

Die Einfachheit des Hinzufügens von Animationen mit Prinzip.

Principle ist ein fantastisches Werkzeug, um Ihre UI-Interaktionsideen zum Leben zu erwecken.

Die Benutzeroberfläche ist Mac-freundlich und wurde entwickelt, um nahtlos mit Sketch-Dateien zu arbeiten.

Principle automatisiert die meisten Animations- und Übergangseffekte für Sie. Sie müssen lediglich einen Trigger auf eine Form auf einer Zeichenfläche anwenden und alle Eigenschaften für die Elemente ändern, die Sie auf der endgültigen Zeichenfläche animieren möchten.

Bitte hinterlassen Sie Fragen in den Kommentaren unten. Ich beantworte sie gerne.