Seleccionar página

[Koloda Tinder-ähnliche Animation. Quellen: Shot on Dribbble, Github-Komponente für iOS] Dieser Warenkorb-Prozess hat ein drittes Animationsmuster: Die Schaltfläche «Zur Tasche hinzufügen» erhält beim Klicken ein Spinning-Symbol, das dem Benutzer Feedback zu seinem Ladezustand gibt. Apropos Feedback… Capptivate.co Kinetische Musterbibliothek mit reizvollen iOS-Animationen. Wenn Animation auf subtile Weise verwendet wird, kann sie Benutzern helfen, mentale Modelle darüber zu erstellen, wie das System funktioniert und wie sie mit ihm interagieren können. Animationen sind weniger wichtig für die Benutzererfahrung, wenn sie einfach zeitfüllende visuelle Stimulationen während des Übergangs sind (in der Tat sind es diese Ausfallzeitanimationen, die Die Teilnehmer häufig an Usability-Tests frustrieren). Anstatt Animationen zu verwenden, um Oberflächen-Level-Freude zu bieten (die schnell sauer ist), können Animationen für die Benutzerfreundlichkeit genutzt werden: als Hinweise darauf, was derzeit mit dem System geschieht, als Zeichen für das Verhalten von UI-Elementen und als leicht verständliche räumliche Metaphern für den Standort des Benutzers im Informationsraum. Car2Go für iPhone: Eine kurze Bounce-Animation ist ein Signifikant, der über das Listenelement streift Optionen zeigt. WebMD: Beim Öffnen eines Akkordeons auf der Seite wird der zugehörige Inhalt sofort oben auf dem Bildschirm angezeigt (ohne Animation). Der Benutzer kann denken, dass sich der neue Inhalt auf einer brandneuen Seite befindet. Eine Bildlaufanimation (zeigt, wie die Seite verschoben wird, so dass sich das Akkordeon oben auf dem Bildschirm befindet), gefolgt von einer sich verschiebenden Erweiterung, könnte dem Benutzer helfen zu verstehen, dass es sich nicht um eine völlig neue Seite handelt, sondern um ein Akkordeon im Inhalt der Seite. Eine Geste wie Wischen kann eine kleine Animation in Richtung des Wischens als Bestätigung anzeigen, dass die Wischgeste erkannt wurde. [Pull to Make Soup Animation.

Sehen Sie sich die Aufnahme auf Dribbble und die Komponente für iOS auf GitHub an.] Amtrak zeigt eine subtile Slide-over-Animation, um anzuzeigen, dass der Benutzer sich durch den Prozess der Buchung eines Zuges vorwärts bewegt. iOS App Store: Wenn Sie auf eine Karte tippen, wird sie zu einem Vollbildelement mit zusätzlichen Details geöffnet – ein Beispiel für eine wachsende Animation. iOS Fotos verwendet eine Zoom-Metapher, um den Standort des Benutzers im Informationsraum anzuzeigen (in diesem Fall durch meine endlose Bibliothek mit Fotos meines Hundes Daphne dargestellt). Zwischen Jahren, Monaten und Tagen zu gehen, verfügt über eine subtile Zoom-In- oder Zoom-Out-Animation, die Benutzern hilft zu verstehen, ob sie in der Hierarchie von Fotos nach oben oder unten gehen. Dieser Ansatz hilft, die Aufmerksamkeit des Benutzers auf Inhalte zu halten (süße Hundefotos), und nicht auf die Navigation Chrom. Während Übergänge den Benutzer von Zustand zu Zustand verschieben, bringen zusätzliche Animationen dem Benutzer zusätzliche Informationen. Denken Sie an Zeiten, in denen Informationen, die den Hauptinhalt der Seite ergänzen, angezeigt werden oder verschwinden: Warnungen, Dropdowns und QuickInfos sind gute Kandidaten für eine zusätzliche Animation beim Ein- und Aus. Obwohl Animationen nützlich sein können und Benutzererwartungen in Bezug auf die Benutzeroberfläche wecken können, sollten sie mit einer leichten Berührung verwendet werden – in erster Linie als Werkzeug, um Benutzern leicht spürbares, reibungsloses Feedback zu geben.

Sechs UXA-Sammlungen von sechs-Sekunden-Übergängen und Animationen von verschiedenen Websites und Apps. Manchmal unterscheidet sich der Trigger von dem Element, das verschoben wird, z. B. wenn sie auf eine Schaltfläche klicken, kann dies dazu führen, dass ein modales Popup in die Ansicht verschoben wird. Der Auslöser kann auch der Akt des Scrollens auf einer Seite sein, was zu einer traditionellen, voreingestellten Animation oder sogar zu einer Parallaxenbewegung führt, die die Seite bewegt, während der Benutzer weiter scrollt.