Animation Guidelines

05/10
Visuelle Konti­nui­tät

K Auf den Punkt gebracht

Elemente, die auf unterschiedlichen Bildschirm-Ansichten zu sehen sind, bewegen sich sichtbar an ihre neue Position.

K Grundlagen

Beim Wechsel zwischen zwei Bildschirmansichten ist oft zu beobachten, dass die erste Ansicht ausgeblendet wird, um die zweite dann einzublenden. In dem Moment, wo beide Ansichten überblenden, geht allerdings der Kontext zwischen den Elementen verloren und der Nutzer muss sich auf der nächsten Ansicht wieder neu orientieren und zurechtfinden. Deshalb empfiehlt es sich, Elemente, die auf beiden Ansichten zu sehen sind, nicht auszublenden, sondern sichtbar an ihre neue Position zu animieren.

K Beispiele

Transitions

Der Übergang zwischen zwei Bildschirm-Ansichten wird Transition genannt. Durch sie geht der Kontext innerhalb eines Übergangs zwischen den Elementen nicht verloren.

List-Views

Elemente können auch ihre Form verändern, wichtig ist nur, dass der Nutzer diese Veränderung sehen kann. So wird deutlich, dass die Elemente immer noch dieselben sind, nur der Kontext, in dem die Elemente angezeigt werden, hat sich geändert.

K Quellen

Visual Continuity – Principles of UX Animation with Val Head

Motion Choreography

Designsystem

10 - Begleitende Animation

Räumliche Orientierung

Elemente zeigen dem Nutzer durch Bewegungen, wo sie verankert sind.

#

02 - Dauer

Staffeln des Inhalts

Elemente werden nicht alle auf einmal animiert, sondern mit kurzen Verzögerungen von ca. 20 Millisekunden (Richtwert).

$

Logo Ani

Quellen About