Ein Leitfaden für Anfänger zum Entwerfen von Benutzeroberflächenanimationen
Seite 1 von 2: Animationsprinzipien für das Webdesign- Animationsprinzipien für das Webdesign
- Verwenden von Animationsprinzipien im Webdesign
Bewegungsdesign ist eine notwendige Fähigkeit für das moderne Web. Da die Webanimation floriert, muss jeder, vom UX-Designer bis zum Front-End-Entwickler, wissen, was Bewegung zu seiner Arbeit beitragen kann.
Der Charakter und die Energie, die Bewegung in eine App oder eine Systemschnittstelle bringt, funktionieren auch im Web wunderbar. Bewegung ist ein wertvolles Werkzeug für das Interaktionsdesign. Das sind aufregende Zeiten!
Wie können wir also ein Auge für Bewegung entwickeln und traditionelle Animationsprinzipien für das Webdesign in die Praxis umsetzen?
Eine großartige Animation der Benutzeroberfläche ist nützlich, vermittelt Informationen und tut dies mit Zurückhaltung und Stil. Das ist eine große Aufgabe, aber nicht unerreichbar. Zurückhaltung und Stil sind der Punkt, an dem Bewegungsdesign-Fähigkeiten zum Tragen kommen. Durch gut gestaltete Bewegung bleibt unser Publikum auf das Qualitätserlebnis konzentriert, anstatt es mit unangenehmen Schnickschnack abzulenken.
Klassische Animationsprinzipien
Die Bibel der Animation, wenn es eine gäbe, wäre The Illusion of Life der Disney-Animatoren Ollie Johnston und Frank Thomas. Dieses Buch enthält die 12 Prinzipien der Animation durch die Disney das Leben in seinen Animationsfilmen nachahmte.
Diese Prinzipien haben sich bewährt und obwohl sie für ein völlig anderes Medium geschrieben wurden, können wir sie auf animierte Interaktionen mit großartigen Ergebnissen anwenden. Wenn Sie lernen, jedes dieser Prinzipien zu identifizieren, können Sie ein Auge für Animation entwickeln und eine Grundlage für die Bewertung und Gestaltung von Interaktionen schaffen.
Die 12 klassischen Prinzipien sind: Squash und Stretch, Vorfreude, Inszenierung, Geradeaus und Pose-to-Pose, Durchlaufen, Verlangsamen und Verlangsamen, Bögen, sekundäre Aktion, Timing, Übertreibung, solides Zeichnen und Anziehungskraft.
Sie gelten nicht alle gleichermaßen für unsere Bemühungen in der Schnittstellenanimation, aber es ist immer noch hilfreich zu wissen, was jede davon beinhaltet. Wir werden uns die drei Prinzipien genauer ansehen, die für Schnittstellenanimationen besonders wichtig sind: Timing, sekundäre Aktion und Follow-Through.
Timing und Abstand der Webanimationen
Mein Improvisationslehrer sagt uns immer, dass das Timing der Schlüssel zur Komödie ist. Das Timing ist übrigens auch der Schlüssel zur Animation. In der Animation dreht sich beim Timing alles darum, wie lange eine Aktion dauert.
Im klassischen Text heißt es, dass ein Objekt durch korrektes Timing den Gesetzen der Physik zu gehorchen scheint. Es gibt Hinweise auf das Gewicht eines Objekts und welche Kräfte auf es gewirkt haben. Bei der Animation von Benutzeroberflächen ist es jedoch nicht immer unser Ziel, die physische Welt zu replizieren. Wir konzentrieren uns in der Regel auf den Aspekt des Timings, der die „Persönlichkeit“ eines Objekts festlegt. So viel kann durch Timing kommuniziert werden!
Bei Webanimationen hängt der Abstand von der Beschleunigung (der Timing-Funktion) ab, die wir auf eine Animationseigenschaft anwenden. Durch die Lockerung wird festgelegt, wie Geschwindigkeitsänderungen während der Dauer einer Animation auftreten. So zeigen wir Stimmung und Persönlichkeit an. Auch hier spielt die Dauer einer Animation eine Rolle, aber die Lockerung macht den größten Teil des Gesprächs aus.
Starkes Bouncy-Timing, wie die Bewegung der Punkte in der Punkte Spiel, vermittelt ein energetisches, spielerisches Gefühl. Es kann sich manchmal sogar ein bisschen kindisch anfühlen. Scrollen Sie auf der Website des Spiels nach unten, um eine kurze Animation zu erhalten, und sehen Sie sich genau an, wie sich die Punkte bewegen. Wenn sie einrasten, springen sie ein wenig nach oben. Der Sprung ist kurz, was uns darüber informiert, dass die Punkte etwas Gewicht haben.
Im anderen Extremfall erscheint die lineare Lockerung mechanisch und ohne Leben. Die lineare Bewegung hält über die gesamte Dauer der Bewegung eine konstante Geschwindigkeit, sodass keine Verlangsamung oder Beschleunigung auftritt. In der realen Welt ist das dank Dingen wie der Schwerkraft unmöglich! Die lineare Beschleunigung vermittelt nichts Nützliches über die Masse oder die Natur des sich bewegenden Objekts.
Das Lustige am Timing ist, dass trotz seines Kommunikationspotentials und aller Anstrengungen, die wir möglicherweise für die Auswahl unternehmen, alle Animationen schnell erfolgen müssen. Eines der größten Verbrechen im Bereich Motion Design ist es, Ihre UI-Animationen zu langsam zu machen. Es braucht Übung, um das richtige Timing zu erreichen, aber je mehr Sie es tun, desto besser werden Sie. Das Prototyping von Animationen ist sehr effektiv, um Ihr Timing zu verkürzen.
Sekundäre Aktion in der Webanimation
Sekundäre Aktion ist eine zusätzliche Animation, die die primäre Animation ergänzt oder als Reaktion darauf auftritt. In der traditionellen Animation kann dies so etwas wie eine Figur sein, die pfeift oder ihre Arme bewegt, während sie geht. In Schnittstellen bewegen sich Elemente in der Nähe als Reaktion auf die Hauptbewegung.
Websites und Apps können nicht pfeifen oder ihre Arme bewegen, daher sind die Möglichkeiten für sekundäre Aktionen nicht immer so offensichtlich. Sie haben jedoch verwandte Elemente und einige Elemente, die sich zusammen bewegen. Das sind Hauptkandidaten für sekundäre Maßnahmen.
Twitter Die Herzanimation ist ein gutes Beispiel für sekundäre Aktionen. Die Hauptaktion ist die Vergrößerung des Herzens. Die Kreise und kleinen Partikel, die um ihn herum fliegen, sind sekundäre Aktionen, die die Wirkung des Herzens verstärken.
Verfolgen und überlappende Aktionen online
Follow-Through- und überlappende Aktionen sind zwei eng verwandte Konzepte, die sich mit dem Stillstand eines Objekts befassen. Follow-Through ist die Bewegung, das endgültige Ziel um einen kleinen Betrag zu überschreiten und dann zurück zu kommen, um sich zu etablieren.
In dem Schiebt die Zeitleiste des Änderungsprotokolls Jedes Element in der Liste schießt etwas weiter als sein Ziel heraus, bevor es wieder zum Stillstand kommt. Das setzt sich in Aktion durch.
In ähnlicher Weise ist überlappende Aktion das Konzept, dass nicht alle Teile eines Objekts gleichzeitig zum Stillstand kommen. Zum Beispiel bewegen sich die Schlappohren eines Hundes weiter vorwärts, selbst wenn sein Körper zum Stillstand gekommen ist.
Sofern Sie nicht mit einer Art Physik-Engine arbeiten, werden Sie diese Konzepte vortäuschen oder approximieren, indem Sie die Auswahl oder die Platzierung des Keyframes vereinfachen. Daran ist nichts auszusetzen. Das Hinweisen auf diese vertrauten Konzepte mit jeder Art von Animation trägt wesentlich dazu bei, ein realistischeres Gefühl zu erzeugen.
Nächste Seite: Animationsprinzipien in das Webdesign integrieren
- 1
- zwei
Aktuelle Seite: Animationsprinzipien für das Webdesign
Nächste Seite Verwenden von Animationsprinzipien im Webdesign
