Prinzipien der Benutzeroberflächenanimation: Disney ist tot

Es wurde vorausgesagt, dass Fotografie der Tod der Malerei ist (früher Daguerreotypie)

(Wenn Sie meine Artikel über UI-Animation per E-Mail erhalten und zu meinem Newsletter hinzugefügt werden möchten, klicken Sie hier.)

Ein neues Medium

Als Paul Delaroche irgendwann um 1839 auf einen Daguerreotyp stieß, erklärte er berühmt: „Ab heute ist das Malen tot!“

Bis dahin war die visuelle Dokumentation der Außenwelt nur mit einem von Hand auf eine Oberfläche aufgebrachten Medium möglich. Jahrhunderte des Handwerks über verschiedene Disziplinen hinweg hatten zur Entdeckung zahlreicher Prinzipien und Techniken in verschiedenen Medien geführt. Über die Kulturen hinweg und im Laufe der Zeit hat sich der Stil und die visuelle Sprache, wie visuelle Darstellungen aussehen sollten, weiterentwickelt - die ursprünglichen Designmuster.

Frühe Fotografen, die versuchten, ihre Bilder den beliebten Gemälden der Zeit ähnlich zu machen, verwendeten häufig eine Kombination aus Beleuchtungs- und Drucktechniken, um ihre Bilder weicher zu machen und ein malerisches Aussehen zu erzielen. Ihr Verständnis dessen, wozu das Medium Fotografie fähig war, war eng verknüpft, beeinflusst und begrenzt durch ihr Verständnis der Welt der Malerei.

Es dauerte fast einhundert Jahre, bis Fotografen wie Ansel Adams, Imogen Cunningham, Edward Weston und andere aus der "Gruppe f / 64" bedeutende Fortschritte in der Bildsprache machten, die die Fotografie von der Malerei als einzigartigem Medium abhebt - mit einem eigenen Bild sprache und prinzipien, und damit revolutionierten sie den bereich der fotografie.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney hat ein anderes Problem gelöst

Glücklicherweise befinden wir uns in einer solchen Revolution in der Benutzeroberflächenanimation.

1981 veröffentlichten Ollie Johnston und Frank Thomas Disney Animation: Die Illusion des Lebens und stellten die so genannten "12. Grundprinzipien der Animation" vor. Diese Prinzipien lösten das Problem, wie "realistische Bewegung" erzeugt werden kann, die bei organischen Körpern auftritt Bewegen Sie sich und reagieren Sie im physischen Raum (die Prinzipien umfassen auch Dinge wie emotionales Timing und Charakterattraktivität).

Die Benutzeroberflächenanimation als Teil der Benutzererfahrung ist kaum 20 Jahre alt und steckt noch in den Kinderschuhen. Als sich die Domäne der Benutzeroberflächenanimation herauskristallisierte, waren die 12 Animationsprinzipien die einzigen verfügbaren Tools, um das zeitliche Verhalten der Benutzeroberfläche zu beschreiben. Ähnlich wie die frühen Fotografen versuchten, die Fotografie anhand der Malregeln zu verstehen, versuchten die Designer, die Benutzeroberflächenanimation anhand der Disney-Animationsregeln zu verstehen.

An der Oberfläche ist dies verständlich, da es einen gewissen Grad an Überlappung gibt. Easy Motion, eines der 12 Animationsprinzipien, verstärkt das Gefühl von „Richtigkeit“ durch Bewegung, was für das Benutzererlebnis von entscheidender Bedeutung ist. Ohne nachzulassen, fühlt sich die UI-Animation klobig und seltsam an.

Die vollständige Aufschlüsselung wird deutlich, wenn man die 12 Prinzipien im Kontext der Benutzeroberfläche genauer betrachtet.

Squash and Stretch gibt Objekten ein Gewicht und eine Flexibilität, was eher die Ausnahme als die Regel in Benutzeroberflächen darstellt.

Antizipation schafft das Gefühl, dass etwas passieren wird und ist auch in Bezug auf das Benutzererlebnis nahezu nutzlos. Für ausgewählte Mikrointeraktionen und Tastenzustände funktioniert dies nur eingeschränkt.

Die Inszenierung bezieht sich auf das Layout der Animation. Dies ist für einen Disney-Cartoon sinnvoll, da die Figuren ständig in Bewegung sind. In der Benutzererfahrung wird dies jedoch nur als „Design“ bezeichnet.

Straight Ahead Action und Pose to Pose sind weniger Prinzipien als Ansätze für den eigentlichen Zeichen- / Animationsprozess: Sie können eine flüssigere Animation erstellen, wenn Sie fortlaufende Rahmen zeichnen, oder Pose verwenden, um einige Schlüsselrahmen einzurichten und die Lücken zu füllen . In der Benutzererfahrung lässt sich dieser Prozess kaum übersetzen, es sei denn, es findet eine tatsächliche Animation für jeden Frame statt. Unabhängig vom verwendeten Tool werden standardmäßig fast alle Benutzeroberflächenanimationen mithilfe von Keyframes erstellt.

Follow Through und überlappende Aktionen haben damit zu tun, den Gesetzen der Physik und der Trägheit zu folgen und wie physische Körper reagieren. Beide haben wenig mit Benutzeroberflächen zu tun, es sei denn, Sie setzen auf das nächste Prinzip, das in der Gruppe am nützlichsten ist .

Slow In und Slow Out besagt, dass Objekte Zeit benötigen, um zu beschleunigen und zu verlangsamen. Dies ist äußerst relevant, da 100% der Benutzeroberflächenanimationen dieses Prinzip anwenden sollten. Es wird allgemein als "Lockerung" bezeichnet und ist äußerst wichtig.

Bogen (für die Wiedergabe physischer Bewegungen erforderlich) ist für die Benutzeroberflächenanimation nahezu nutzlos und eher die Ausnahme als die Regel.

Sekundäre Aktion ist nützlich und eignet sich hervorragend für Bildschirmübergänge und das Einrichten einer visuellen Hierarchie.

Das Timing ist beim Zeichnen von Zeichen relevant, aber in Benutzeroberflächen, in denen die Bewegung scharf sein muss, um sich ansprechend zu fühlen, ist es besser, sich auf die Erleichterung zu verlassen, um das Gefühl der Interaktion und nicht die Dauer zu bestimmen.

Übertreibung bezieht sich auf den Grad an Realismus oder Karikatur, der wiederum für die Animation der Benutzeroberfläche kaum relevant ist, da das Design im Voraus festgelegt wurde.

Solides Zeichnen ist ebenfalls meistens umstritten, da sich die Benutzeroberflächenanimation mit dem Verhalten von Schnittstellenobjekten im Zeitverlauf befasst und nicht mit der tatsächlichen Gestaltung der Objekte selbst.

Appeal spricht auch die visuelle Behandlung an, die wiederum nicht relevant für das Verhalten der Benutzeroberfläche im Zeitverlauf ist.

Abschließend

Die Frage bleibt also: Warum beschreiben die 12 Grundprinzipien der Animation die Benutzeroberflächenanimation nicht genau?

Die Aufteilung lässt sich am besten anhand der einfachen Beobachtung verstehen: Die Benutzeroberflächenanimation folgt weder den gleichen Regeln noch den gleichen Prinzipien wie organische Körper, die sich im physischen Raum bewegen. UI-Animation ist ein unterschiedliches Medium, so unterschiedlich wie Fotografie von Malerei ist - mit überlappenden Eigenschaften (sowohl Fotografie als auch Malerei sind statische visuelle Kompositionen, die sich auf Licht und Komposition stützen), aber grundsätzlich unterschiedliche Medien.

Einfach ausgedrückt, die 12 Grundprinzipien der Animation gelten nicht für UI-Animationen, da sie ein anderes Problem lösen.

In den nächsten Artikeln werde ich untersuchen, was diese UI-Animationsprinzipien sind, für welches Problem UI-Animationsprinzipien gelöst werden, welche Prinzipien sich von Techniken unterscheiden und wie Sie UI-Animationen in Ihren aktuellen und zukünftigen Projekten entwerfen und verwenden können, um die Benutzerfreundlichkeit und Benutzerfreundlichkeit zu verbessern Erstellen Sie überzeugendere und effektivere Benutzererlebnisse.