it-swarm-eu.dev

Wie und wann sollten Sie Animationen in Ihrer Anwendung verwenden?

Manchmal können Anwendungen von Animationen in der Benutzeroberfläche profitieren.

  • Welche Tipps haben Sie, um zu bestimmen, wann Sie Animation verwenden sollten?
  • Wie können Sie den Nutzen von Animationen maximieren und Missbrauch vermeiden?
12
Dair

Denken Sie an Ursache und Wirkung. Wenn ich mit der Maus über eine Schaltfläche schwebe, hätte ich gerne Feedback. Wenn ich etwas ziehen kann, zeige das irgendwie an. Wenn es eine Warnung oder Benachrichtigung gibt, lenken Sie meine Aufmerksamkeit unauffällig darauf. Verwenden Sie darüber hinaus keinen, es sei denn, Sie haben einen bestimmten Grund für die Animation. Vermeiden Sie alles, was ärgerlich werden kann, wenn es weitergeht. Wenn die Animation nicht wichtig ist und vom Hauptzweck der Seite ablenkt, entfernen Sie sie.

6
Virtuosi Media

Einige Orte, an denen Animationen angebracht sein können:

  • Minimieren eines Panels auf einen bestimmten Ort - Mithilfe der Animation kann der Benutzer lernen, wohin das minimierte Panel gegangen ist und wie es wiederhergestellt werden kann.
  • Automatisches Ausblenden von Dingen, zum Beispiel einer Navigationsleiste - Animation macht den Benutzer darauf aufmerksam, dass etwas gerade verschwunden ist und von wo es abgerufen werden kann.
  • Aktualisieren eines Bereichs, der sich nicht unmittelbar in der Nähe des Bereichs befindet, in dem die Änderung stattgefunden hat, die ihn verursacht hat. Bearbeiten von Daten in einer Liste/einem Raster, die bzw. das die visuelle Darstellung dieser Daten in einem anderen Bereich ändert.

Animation (Änderung/Bewegung) fällt mehr als die meisten anderen Dinge auf, daher ist es großartig, wenn Sie die Aufmerksamkeit auf eine Aktion lenken möchten, die die Aufmerksamkeit des Benutzers sonst möglicherweise verloren hätte.

Selbst für die oben genannten Punkte kann es sich jedoch lohnen, dies nur die ersten Male zu tun. Da das Auge automatisch darauf aufmerksam wird, dient es als Ablenkung und sollte daher vermieden werden, nachdem die anfängliche "Anleitung" abgeschlossen wurde .

6
Dan Barak

Sie sollten immer eine Art Besetzt-/Arbeitsanimation haben, um Ihren Benutzer davon abzuhalten, zu glauben, dass die App nicht mehr funktioniert (besonders wichtig für Ajax-Apps).

Einfache schnelle Übergänge sind in Ordnung, wenn sie zur allgemeinen Benutzererfahrung beitragen, aber nicht zu viel.

Haben Sie jemals eine App verwendet, in der Sie dachten, "Ich wünschte, der Entwickler hätte genauso viel Zeit in die Planung der eigentlichen Funktionen investiert wie in die Planung der coolen UI-Effekte"? Beachten Sie dies, wenn Sie Animationen hinzufügen.

4
Sruly

Große Frage. Wie üblich hängt es von der App ab (Spiele sollten wahrscheinlich viel mehr UI-Animationen verwenden als beispielsweise Produktivitäts-Apps), aber es gibt einige allgemeine Prinzipien.

Als die iThings neu und heiß waren, musste alles animiert werden, aber es ist interessant, VS2010 und Office 2010 zu betrachten und zu sehen, wie viel nicht animiert ist. Insbesondere in Office 2010 wird der Hover/Button-Rollover eingeblendet (während dies in Office 2007 der Fall war). IMO, es fühlt sich reaktionsschneller an. Menüs werden immer noch ein- und ausgeblendet (obwohl es erwähnenswert ist, dass das Einblenden von Menüs etwa doppelt so lange dauert aus wie das Einblenden ein, was die wahrgenommene Zunahme erhöhen kann Empfänglichkeit).

Im Allgemeinen sollte die Animation verwendet werden, wenn sich Komponenten der Benutzeroberfläche bewegen, ohne dass der Benutzer sie explizit zieht/scrollt . Wenn der Benutzer ein Symbol an seinen Platz zieht, werden die Auswirkungen der Benutzeraktion durch "Scooten" anderer Symbole aus dem Weg geräumt (obwohl manchmal eine Einfügemarke ausreicht). Die "Informationsleiste" in IE/Firefox drückt andere Dinge nach unten, um die Unruhe zu verringern und die Aufmerksamkeit der Benutzer zu erregen. Akkordeon- und Baummenüs wurden mit Animationen besser getestet, da der Benutzer sieht, wohin die anderen Elemente führen.

Ich habe einmal eine Studie gesehen, die gezeigt hat, dass Benutzer aller Ebenen weniger geneigt sind, mit einem animierenden UI-Element zu interagieren (wenn ich den Link finde, werde ich diesen aktualisieren). Wenn Sie also eine Schaltfläche länger als 2 Sekunden aufleuchten lassen, wenn der Benutzer darüber fährt, warten Benutzer unbewusst, bis die Animation beendet ist, auch wenn die Schaltfläche während der Animation funktioniert. Um ein Gefühl dafür zu bekommen, schauen Sie sich das Beispiel WPF Themes an. Einige Themen haben längere Hover-Animationen als andere, und Sie können sofort feststellen, welche sich träge anfühlen. Die langsamen Überblendungseffekte haben möglicherweise auch dazu beigetragen, dass Benutzer sagten, Vista fühle sich langsam an - unter Win7 sind dieselben Animationen vorhanden (auf dem Prozessor/der Grafikkarte ist es genauso langsam), aber viele sind kürzer.

OTOH, das neue google.com bietet Dinge, die eingeblendet werden, und die Google-Bildersuche bietet jetzt Leuchtkästen. Der Trend geht also in beide Richtungen.

3
Robert Fraser

Zusammenfassend haben Animationen zwei starke Auswirkungen auf das Gehirn, die Sie verwenden können:

  • Reduzieren Sie die kognitive Belastung: Sie ermöglichen es dem Benutzer zu sehen, was zwischen zwei Zuständen passiert ist, damit das Gehirn nicht "die Lücke füllen" muss. Dadurch hat der Benutzer das Gefühl, dass alles klarer und benutzerfreundlicher ist --> Verwenden Sie Animationen für Übergänge in großem Umfang (vgl. Apple Software)

  • Aufmerksamkeit des Benutzers auf sich ziehen: Menschen sind wirklich gut darin, Bewegungen an einem Ort zu erkennen, den sie nicht direkt betrachten. Dies geschieht dank nseren Stabzellen , den Zellen, die zur Erkennung von Bewegungen verwendet werden und an den Außenkanten der Netzhaut sehr dicht sind (muss etwas mit dem Überleben in einer feindlichen Umgebung zu tun haben) -> Verwenden Sie eine Animation, wenn an einem entfernten Ort etwas wirklich Wichtiges passiert ist.

Dieser Effekt ist sehr stark, da sie direkt mit unserem Reptilienhirn verbunden sind. Kraftvoll und gefährlich zugleich.

3
user396

Wenn ich Animationen für eine Web-/native App mache, gehe ich immer nach dem Github-Ansatz vor, der den Benutzer fast eine halbe Sekunde lang "ablenkt", während der Inhalt geladen wird. Finden Sie die langsamsten Teile der Anwendung (insbesondere die Teile, in denen Sie einen Knopf drücken, und für eine gute halbe Sekunde scheint nichts zu passieren, und finden Sie eine Möglichkeit, eine Animation zu erstellen, um die Frustration für den Benutzer zu minimieren (" Ich habe den Knopf gedrückt, aber es passiert nichts "). Bitte beachten Sie, dass ich nicht ein rotierendes Laderad oder eine Art Ladeanimation meine, sondern eine gleitende Animation oder ähnliches, um die Illusion eines Slicks zu erzeugen , schnelle Benutzeroberfläche, (siehe: https://github.com/github/linguist Jedes Mal, wenn Sie auf etwas klicken, gibt es diese Folienanimation, die Github superschnell und flüssig erscheinen lässt. Bitte übertreiben Sie nicht Dies (mit dieser Technik bei Teilen Ihrer Apps, die> 500 ms dauern) Ich fühle mich wie 500 ms, ist die magische Zahl, aber experimentieren Sie und finden Sie Ihre.

2
David

Sie müssen sich fragen: Hilft diese Animation dem Benutzer herauszufinden, was passiert? Ich habe den Genie-Effekt von OS X sofort ausgeschaltet, aber ich schätze die einfache Minimierungs-/Wiederherstellungsanimation, da sie schnell ist und einen zusätzlichen Hinweis darauf gibt, was gerade passiert ist. Ebenso bei Spaces/Exposé. Oder vielleicht ist es ein kurzer, einfacher, weicher Überblendungsübergang, der etwas weniger abrupt und menschlicher erscheinen lässt.

Andererseits kann ein wenig Flair Ihr Markenzeichen sein, wie das 'Lucas Wipe' von Star Wars.

2
John Ferguson

Animation hat einen Zweck, und dieser Zweck besteht darin, Zustandsänderungen zu visualisieren.

Es ist einfacher zu groken, wenn Sie an deklarative Animationen denken, wie sie in modernem CSS im Webkit enthalten sind. In diesem Zusammenhang legen Sie fest, wie Elemente in einem bestimmten Status aussehen, und teilen CSS dann mit, wie sie in einem anderen Status aussehen. Wie spezifizieren Sie Zustände? Mit CSS-Regeln wie Klassennamen und IDs. Also zum Beispiel (und verzeihen Sie mir, dass ich hier Code verwende!):

.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }

Was wir hier beschreiben, ist ein Feld, das geöffnet wird, und wir erklären dem Code, wie zwischen den beiden CSS-Regeln animiert werden soll. Dies macht sie zu Zuständen, und wenn Sie feststellen, dass das Anwenden von Animationen auf Ihre App plötzlich viel logischer wird. Anstatt zu überlegen, welche Animation wohin geht, sehen Sie Animation als Nebenprodukt von Zustandsänderungen. ein Indikator dafür, dass etwas passiert ist, oder eine Rückmeldung an den Benutzer, dass eine Änderung stattfindet.

Als ich lernte, zwischen reiner "Animation" (vom Standpunkt der Programmierung aus) und "Zustandsänderung" (vom Standpunkt der Deklaration) zu unterscheiden, wurden alle meine UI-Designs viel solider und logischer.

1
Rahul